/* =====================================================================
   OSE · Home page composition · styles/pages/home.css
   ---------------------------------------------------------------------
   Page layout only: how the components sit on /. Semantic and component
   tokens only, private knobs use --_. Mobile-first; nothing here may
   push the page wider than the viewport (checked at 360px).

   Chapters  the page moves from cream into night and back, one surface per
             section, edge to edge, no gaps between them:
               hero (cream; the through-ring scene fades .hero__night in)
               → chapter index + 01 Lộ trình (night)
               → 02 Lớp học (cream)
               → 03 Khai giảng (night, starfield)
               → blog (cream) → footer (night).
             Every section keeps its own padding (.section), so each
             surface change is a clean horizontal edge.
   Grid      the container (--layout-max) with --layout-gutter margins;
             inside it every two-part layout is two equal halves (6 + 6 of
             a 12-column grid: path, classroom, blog) and every row of
             three is 4 + 4 + 4 (chapter index, reasons, steps).
   Sticky    from 64em: the site nav (top 0, --size-nav), the chapter
             index under it (top --size-nav, --size-chapter-nav tall, inside
             .home-chapters so it lets go after chapter 03), the learning
             path's diagram under both (--path-sticky-top =
             --layout-sticky-top + --space-stack-lg). In-page anchors stop
             below --layout-sticky-top.
   Aurora    the planet's ring only (hero, path diagram).
   ===================================================================== */

@layer page {
  /* Room for the fixed contact bar on phones and tablets. */
  @media (width < 64em) {
    body {
      padding-block-end: calc(var(--contact-bar-height) + var(--contact-bar-safe-area));
    }
  }

  /* Anchors (#lo-trinh, #lop-hoc, #khai-giang) stop below the nav and the
     sticky chapter index. */
  @media (min-width: 64em) {
    html {
      scroll-padding-block-start: var(--layout-sticky-top);
    }
  }

  /* ---- 1 · Hero ------------------------------------------------------ */
  /* One screen below the sticky nav (the nav stays in flow). Layers, for
     the through-ring scene: copy (in flow) < .hero__night (--z-raised)
     < the planet's stage (--z-above). isolation keeps them inside. */
  .hero {
    position: relative;
    isolation: isolate;
    min-block-size: calc(var(--size-screen) - var(--nav-height));
  }

  /* Bleeds one hairline past the hero's bottom edge: when it is opaque it
     meets the night chapter index without a sub-pixel seam. */
  .hero__night {
    position: absolute;
    inset: 0 0 calc(var(--border-width-hairline) * -1);
    z-index: var(--z-raised);
    overflow: hidden;
    background-color: var(--color-none);
    opacity: var(--opacity-hidden);
    pointer-events: none;
  }

  /* The night itself: a circle centred on the gap the camera flies through.
     At rest it covers the whole hero (phones fade it in); on large screens
     the through-ring scene grows it from 0, so space opens from the gap. */
  .hero__space {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: var(--size-cover-circle);
    block-size: var(--size-cover-circle);
    translate: -50% -50%;
    border-radius: var(--radius-round);
    background-color: var(--color-bg-deep);
  }

  .hero__stage {
    position: relative;
    z-index: var(--z-above);
  }

  /* Phones and tablets: the planet comes first, smaller, so every visitor
     sees it in the first screen, with the headline right under it. */
  @media (width < 64em) {
    .hero__inner {
      grid-template-areas:
        "stage"
        "copy";
    }

    .hero__stage {
      grid-area: stage;
      justify-items: start;
    }

    .hero__copy {
      grid-area: copy;
    }

    .planet--hero {
      --_d: var(--size-planet-hero-compact);
    }
  }

  /* ---- 2 · Chapter index ---------------------------------------------- */
  /* Night index, night chapter 01: overlap by a hairline so the two never
     show a sub-pixel seam of the cream page between them. */
  .chapter-nav {
    margin-block-end: calc(var(--border-width-hairline) * -1);
  }

  /* ---- 3 · Chapter 01 · Lộ trình -------------------------------------- */
  .home-path__fees {
    margin-block-start: var(--space-stack-lg);
    color: var(--color-text-muted);
    font: var(--text-data);
    letter-spacing: var(--text-data-tracking);
  }

  /* ---- 4 · Chapter 02 · Lớp học --------------------------------------- */
  .home-classroom__why {
    display: grid;
    gap: var(--space-stack-md);
    margin-block-start: var(--space-section-tight);
  }

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

  /* ---- 5 · Chapter 03 · Khai giảng ------------------------------------ */
  /* The positioned box the starfield covers and clips; content above it. */
  .home-launch {
    position: relative;
    overflow: clip;
    padding-block: var(--space-section);
  }

  .home-launch__inner {
    position: relative;
    z-index: var(--z-raised);
  }

  .home-launch .countdown {
    margin-block-end: var(--space-section-tight);
  }

  .home-launch__start {
    display: grid;
    gap: var(--space-stack-md);
  }

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

  .home-launch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-xs);
    margin-block-start: var(--space-stack-2xl);
  }

  /* The official Zalo logo inside "Nhắn Zalo": unmodified, icon-sized. */
  .home-launch__logo {
    flex: none;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
  }

  .home-launch__note {
    margin-block-start: var(--space-stack-md);
    color: var(--color-text-muted);
    font-size: var(--text-small-size);
  }

  /* ---- 6 · Blog ------------------------------------------------------- */
  /* Two text-only cards: two halves from 48em. */
  .home-blog__grid {
    display: grid;
    gap: var(--layout-gap);
  }

  @media (min-width: 48em) {
    .home-blog__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .home-blog__more {
    margin-block-start: var(--space-stack-lg);
  }
}