/* =====================================================================
   OSE · Hero · styles/components/hero.css
   ---------------------------------------------------------------------
   The home hero, left-aligned: a mono label, the headline at display
   size, lead, the two actions, the opening facts as a mono data line and
   a quiet planet row on one side; the big planet (.planet--hero) on the
   other. Its ring is the page's aurora: the light the rest of the page
   leaves out. Component tokens only: --hero-*. The page sets the height.

   Markup
     <section class="hero" data-scene="through-ring" aria-labelledby="hero-title">
       <div class="container hero__inner">
         <div class="hero__copy">
           <p class="hero__label">Trung tâm Giáo dục · Lê Chân, Hải Phòng</p>
           <h1 class="hero__title" id="hero-title">
             <span class="hero__line">Hành trình học tiếng Anh</span>
             <span class="hero__line">bắt đầu từ đây</span>
           </h1>
           <p class="hero__lead">…</p>
           <div class="hero__actions">…two .btn--lg .btn--full-phone…</div>
           <p class="hero__note">Khai giảng <time datetime="2026-11-03">03/11/2026</time> · 465A Chợ Hàng, Lê Chân</p>
           <ul class="planet-row hero__planets" role="list" aria-hidden="true">…</ul>
         </div>
         <div class="hero__stage">
           <div class="planet planet--hero" data-part="planet" aria-hidden="true">…</div>
         </div>
       </div>
     </section>
   The label is written in sentence case and set in capitals by CSS, so
   screen readers read words, not letters.
   Type     label: mono eyebrow · title: heading role, H1 size on phones,
            display from 30em · lead: body family · note: mono data line.

   Layout   < 64em: one column, copy first (actions above the fold on
                    phones), planet below: centred < 48em, end-aligned
                    48–64em.
            >= 64em: copy | planet side by side, planet column as wide as
                    the planet's ring.
            .hero--stacked: the phone layout at every width — one column,
                    phone headline size (previews, narrow frames).
   Overflow the hero clips sideways only (overflow-x: clip), so the planet
            can still grow past the top, under the nav (the through-ring
            scene flies through its ring), while a tiny phone never scrolls
            sideways.
   Motion   none of its own: the headline is on screen at first paint (no
            fade-in on load). .hero__line keeps each line a block, so a
            scroll scene can still address the lines one by one.
   No interactive states of its own (buttons bring theirs). No JS.
   ===================================================================== */

@layer components {
  .hero {
    display: grid;
    align-content: center;
    padding-block: var(--hero-padding-block-start) var(--hero-padding-block-end);
    overflow-x: clip;
  }

  .hero__inner {
    display: grid;
    gap: var(--hero-gap);
    align-items: center;
  }

  @media (min-width: 64em) {
    .hero:not(.hero--stacked) .hero__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--hero-column-gap);
    }
  }

  /* ---- Copy ---------------------------------------------------------- */
  .hero__copy {
    display: grid;
    justify-items: start;
    gap: var(--hero-copy-gap);
    min-inline-size: 0;
    max-inline-size: var(--hero-copy-max-width);
    text-align: start;
  }

  .hero__label {
    font: var(--hero-label-font);
    letter-spacing: var(--hero-label-tracking);
    text-transform: var(--hero-label-case);
    color: var(--hero-label-color);
  }

  .hero__title {
    font: var(--hero-title-font);
    letter-spacing: var(--hero-title-tracking);
    color: var(--hero-title-color);
    text-wrap: balance;
  }

  @media (min-width: 30em) {
    .hero:not(.hero--stacked) .hero__title {
      font: var(--hero-title-font-lg);
      letter-spacing: var(--hero-title-tracking-lg);
    }
  }

  /* One block per line: each line wraps on its own and moves on its own. */
  .hero__line {
    display: block;
  }

  .hero__lead {
    max-inline-size: var(--hero-lead-max-width);
    font: var(--hero-lead-font);
    color: var(--hero-lead-color);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-actions-gap);
    justify-self: stretch;
  }

  .hero__note {
    font: var(--hero-note-font);
    letter-spacing: var(--hero-note-tracking);
    color: var(--hero-note-color);
    font-variant-numeric: tabular-nums;
  }

  /* The planet row keeps its natural 18 d width (start-aligned grid item). */
  .hero__planets {
    justify-self: start;
    margin-block-start: var(--hero-planets-offset);
  }

  /* ---- Stage --------------------------------------------------------- */
  /* Decorative (aria-hidden): click-through, so the planet never blocks a
     link while the through-ring scene grows it over the copy. */
  .hero__stage {
    pointer-events: none;
    display: grid;
    justify-items: center;
    align-items: center;
    min-inline-size: 0;
  }

  @media (min-width: 48em) {
    .hero:not(.hero--stacked) .hero__stage {
      justify-items: end;
    }
  }
}