/* ============================================================
   hero.css — Hero section component (mobile-first)

   BEM block: .hero
     .hero               — the section wrapper (vertical padding)
     .hero__headline     — primary headline (large display type)
     .hero__subhead      — supporting lede paragraph
     .hero__cta-row      — row of call-to-action buttons

   Expected HTML structure:

       <section class="hero">
           <div class="container">
               <h1 class="hero__headline">…</h1>
               <p class="hero__subhead">…</p>
               <div class="hero__cta-row">
                   <a class="btn btn-primary" href="…">Primary</a>
                   <a class="btn btn-secondary" href="…">Secondary</a>
               </div>
           </div>
       </section>

   .hero itself is the vertical-rhythm wrapper; pair it with
   .container for horizontal centering. The headline and subhead
   are constrained to a comfortable measure so long lines do not
   stretch across very wide viewports.

   Vertical padding is generous on desktop and tighter on mobile.
   The CTA row wraps to a single column on narrow screens.

   Breakpoints (inlined per project convention — CSS custom
   properties cannot appear inside @media queries):
       sm:  480px
       md:  768px
       lg: 1024px

   Tokens consumed (from tokens.css):
       --space-3 .. --space-20  (vertical padding, CTA gap, rhythm)
       --font-size-3xl .. --font-size-5xl  (headline scale)
       --font-size-lg, --font-size-xl      (subhead scale)
       --line-height-tight, --line-height-snug
       --letter-spacing-tight
       --font-weight-bold
       --color-ink, --color-muted
   Fallback values are provided on every var(...) reference so
   this file remains usable before tokens.css is loaded.
   ============================================================ */

/* ---------- .hero ---------- */
/* Vertical-rhythm wrapper. Tight on mobile, generous on desktop. */
.hero {
    padding-block: var(--space-10, 40px) var(--space-12, 48px);
}

@media (min-width: 768px) {
    .hero {
        padding-block: var(--space-14, 56px) var(--space-16, 64px);
    }
}

@media (min-width: 1024px) {
    .hero {
        padding-block: var(--space-20, 80px) var(--space-24, 96px);
    }
}

/* ---------- two-column layout (text + media) ---------- */
/* Mobile: single column (content first, then media below).
   >= 1024px: side-by-side, content left, media right.
   The media column is optional — pages without a .hero__media still
   render correctly because the flex layout collapses to one column. */
.hero > .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 32px);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .hero > .container {
        flex-direction: row;
        align-items: center;
        gap: var(--space-12, 48px);
    }

    .hero__content {
        flex: 1 1 0;
        min-width: 0;
    }

    .hero__media {
        flex: 0 1 300px;
        max-width: 300px;
    }
}

/* ---------- .hero__media ---------- */
/* Container for the hero illustration. Caps width so the image never
   dominates the layout, and centers the asset on narrow viewports
   where the column has collapsed below the text.

   The container enforces an iPhone aspect ratio (9/19.5 ≈ 0.4615) via
   the modern `aspect-ratio` property. The hero PNGs are 770x1630
   (≈0.4724) — close enough to the container ratio that no stretch hack
   is needed. `object-fit: contain` preserves the PNG's own proportions;
   the ~2% ratio difference resolves to a negligible letterbox rather
   than the non-uniform distortion the old `object-fit: fill` forced. */
.hero__media {
    max-width: 240px;
    margin-inline: auto;
    width: 100%;
    aspect-ratio: 9 / 19.5;
}

@media (min-width: 768px) {
    .hero__media {
        max-width: 280px;
    }
}

.hero__media img,
.hero__media svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- .hero__headline ---------- */
/* Large display-style headline. Scales up at md and lg.
   Resets top margin so the headline sits flush against the
   .hero padding regardless of base.css heading rhythm. */
.hero__headline {
    margin-top: 0;
    margin-bottom: var(--space-4, 16px);
    max-width: 24ch;
    font-size: var(--font-size-3xl, 1.875rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.15);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
    color: var(--color-ink, #1f2024);
}

@media (min-width: 768px) {
    .hero__headline {
        margin-bottom: var(--space-5, 20px);
        font-size: var(--font-size-4xl, 2.25rem);
    }
}

@media (min-width: 1024px) {
    .hero__headline {
        margin-bottom: var(--space-6, 24px);
        font-size: var(--font-size-5xl, 2.75rem);
    }
}

/* ---------- .hero__subhead ---------- */
/* Lede paragraph below the headline. Slightly larger than body
   and constrained to a readable measure (~60ch) on wide screens. */
.hero__subhead {
    margin-top: 0;
    margin-bottom: var(--space-6, 24px);
    max-width: 60ch;
    font-size: var(--font-size-lg, 1.15rem);
    line-height: var(--line-height-snug, 1.3);
    color: var(--color-muted, #5a5d66);
}

@media (min-width: 768px) {
    .hero__subhead {
        margin-bottom: var(--space-8, 32px);
        font-size: var(--font-size-xl, 1.25rem);
        line-height: var(--line-height-normal, 1.55);
    }
}

/* ---------- .hero__cta-row ---------- */
/* Row of call-to-action buttons. Mobile-first: a vertical stack
   that fills the available width so primary actions stay easy to
   tap. At >= sm (480px) the row switches to a horizontal flex row
   that wraps when space runs out. */
.hero__cta-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    margin-top: var(--space-2, 8px);
}

/* Buttons inside the CTA row stretch full-width on narrow
   screens for a comfortable tap target. Allow text to wrap and
   height to grow so long button labels (e.g. "Buy the Legal
   Export Pack — $44.99 ($34.99 for Pro subscribers)") don't
   overflow the viewport at 320px. */
.hero__cta-row > * {
    width: 100%;
    text-align: center;
    white-space: normal;
    height: auto;
}

@media (min-width: 480px) {
    .hero__cta-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4, 16px);
    }

    .hero__cta-row > * {
        width: auto;
        text-align: initial;
    }
}