/* =====================================================================
   OSE · Section header · styles/components/section-header.css
   ---------------------------------------------------------------------
   Label + title + lead that opens a section, left-aligned. Component
   tokens only: --section-header-*.

   Markup
     <header class="section-header [section-header--ruled] [section-header--lg]" data-reveal="section-header">
       <p class="section-header__label" data-reveal-item>Chương trình</p>
       <h2 class="section-header__title" data-reveal-item>Một lộ trình liền mạch</h2>
       <p class="section-header__lead" data-reveal-item>…</p>
     </header>

   The title is the section's <h2> on pages (styling is class-driven, so any
   heading level renders the same). Label and lead are optional.
   Label  the mono data role in capitals (--text-eyebrow): written in
          sentence case, set in capitals by CSS. No dash, no aurora.
   Title  the heading role (H2), --lg: H1 size on phones, display from 30em.
   Lead   body family at lead size, muted.
   Measure the title and lead stop at ~40rem; the header box itself spans
          its column, so the --ruled hairline runs the full width.
   Variants  start-aligned (default) · --ruled (a hairline above, the
             header starts below it) · --lg (bigger title: CTA band,
             chapter openers) · --center (kept for compatibility; not used
             on the home page).
   Step 3 hook: data-reveal="section-header" on the header and
   data-reveal-item on each part (label → title → lead, using
   --section-header-enter-*). Nothing is animated or hidden here, so the
   header is fully visible without JS.
   Static, no interactive states. No JS.
   ===================================================================== */

@layer components {
  .section-header {
    display: grid;
    gap: var(--section-header-gap);
    justify-items: start;
    margin-block-end: var(--section-header-margin-bottom);
  }

  .section-header__label {
    font: var(--section-header-label-font);
    letter-spacing: var(--section-header-label-tracking);
    text-transform: var(--section-header-label-case);
    color: var(--section-header-label-color);
  }

  .section-header__title {
    max-inline-size: var(--section-header-max-width);
    font: var(--section-header-title-font);
    letter-spacing: var(--section-header-title-tracking);
    color: var(--section-header-title-color);
    text-wrap: balance;
  }

  .section-header__lead {
    max-inline-size: var(--section-header-max-width);
    font: var(--section-header-lead-font);
    color: var(--section-header-lead-color);
    text-wrap: pretty;
  }

  .section-header--ruled {
    padding-block-start: var(--section-header-rule-gap);
    border-block-start: var(--section-header-rule-width) solid var(--section-header-rule);
  }

  .section-header--lg .section-header__title {
    font: var(--section-header-title-font-lg-phone);
    letter-spacing: var(--section-header-title-tracking-lg-phone);
  }

  @media (min-width: 30em) {
    .section-header--lg .section-header__title {
      font: var(--section-header-title-font-lg);
      letter-spacing: var(--section-header-title-tracking-lg);
    }
  }

  .section-header--center {
    justify-items: center;
    text-align: center;
  }
}