/**
 * SectionHeader Molecule Styles
 *
 * Centered section header with optional icon, heading, and description.
 * Replaces per-section header classes (journey-header, features-header, etc.)
 * to ensure consistent styling across all sections and shortcodes.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   SECTION HEADER BASE
   ============================================ */

.hub-section-header {
  text-align: center;
  margin-bottom: var(--spacing-12); /* 48px */
  /* Ensure all direct children inherit center alignment */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================
   DIRECT CHILDREN
   ============================================ */

/* Ensure heading and text inherit centering */
.hub-section-header > .hub-heading,
.hub-section-header > .hub-text {
  text-align: center;
}

/* ============================================
   OPTIONAL ICON
   ============================================ */

.hub-section-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-4);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .hub-section-header {
    margin-bottom: var(--spacing-8); /* 32px */
  }
}