/* Marketing home-page hero — the first surface a prospective paid user
   sees (spacing-foundation slice, D1 / PR5).

   Ported from the converged Stage 4a sandbox proto
   (~/Developer/recipe-masonry/home-hero-converged.html), approved at
   the converged-review touchpoint. Direction: typography-led editorial
   restraint (product principle #7). The heading carries the page
   unaided — no eyebrow chrome (bible 1.2 / 1.12). Tomato `#c94418` is
   the single accent, spent only on the paste-submit CTA, which is owned
   by paste-form.css — this file invents no accent.

   Element structure mirrors ui/templates/pages/home.html:
     .home-hero            section wrapper
     .home-hero__header    heading + lede block
     .home-hero__heading   the page-carrying h1
     .home-hero__lede      the prose lede
     .home-hero__paste     the paste-form slot
     .home-hero__formats   the honest "Works with" page-close

   The nested `paste-form` + `import-status` styles are NOT here — they
   belong to paste-form.css, the canonical home of those blocks.

   Composition: mobile stacks header -> paste panel in one column. At
   the --bp-md (1024px) breakpoint the hero becomes a two-column grid —
   editorial header left, paste panel right — so the desktop fold uses
   the viewport intentionally. Each text block carries its own ch-based
   measure cap (idiomatic — recipe-detail.css uses 22ch/32ch).

   On-token only: production tokens.css values plus the spacing-
   foundation slice's new layout tokens (--content-max, --bp-md,
   --control-h, --space-9/10). No new color or spacing primitives
   (slice mandate, D-AC1). The home page root takes the shared
   .page-shell utility (wide --content-max tier) in the template.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do. */

@layer components {

  /* Mobile-first: a single stacked column, header then paste panel. */
  .home-hero {
    display: grid;
    gap: var(--space-9);
  }

  /* --- Header: heading + lede --- */
  .home-hero__header {
    display: flex;
    flex-direction: column;
  }

  /* The heading carries the page alone (bible 1.2): declarative,
     weighted, tight-tracked Fraunces. No eyebrow above it — on a
     single-purpose page the eyebrow only repeats the heading
     (bible 1.12). Fluid between --text-4xl (40) and --text-5xl (56)
     so it reads large on desktop without overflowing a 390px
     viewport. Measure capped in `ch`. */
  .home-hero__heading {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(var(--text-4xl), 6.4vw, var(--text-5xl));
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    color: var(--md-on-surface);
    text-wrap: balance;
  }

  /* Content-page lede: 16px prose the user actually reads (bible 1.7).
     Subtle foreground, relaxed leading. Measure capped in `ch` so the
     prose stays comfortable — narrower than the heading's measure
     because body text wants a tighter line than a display serif. */
  .home-hero__lede {
    margin: var(--space-5) 0 0;
    max-width: 46ch;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--md-on-surface-variant);
    text-wrap: pretty;
  }

  /* --- Paste slot: the focal interactive element --- */
  /* A quiet panel that frames the paste form without shouting. Border
     over shadow at rest (bible 1.6); the surface-container-low fill
     lifts it a half-step off the --md-surface page. */
  .home-hero__paste {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-7);
    border: 1px solid var(--md-border-muted);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
  }

  /* --- Trust line: the honest page-close (bible 1.5) --- */
  /* The paste panel ends the page with a real, content-bearing line:
     the formats the product accepts, set as a quiet mono row inside
     the panel. No invented marketing copy, no decorative chrome —
     it states a fact the user needs (bible 1.5 anti-fluff clause). */
  .home-hero__formats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--md-border-muted);
  }

  .home-hero__formats-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-on-surface-variant);
  }

  .home-hero__formats-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-hero__format {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--md-on-surface);
  }

  /* Hairline dot separators between formats — drawn, not typed, so
     they stay vertically centered and inherit the subtle tint. */
  .home-hero__format:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-inline-start: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--md-border-strong);
    vertical-align: middle;
  }

  /* --- Tablet: the paste panel breathes wider. Still one column. --- */
  @media (min-width: 640px) {
    .home-hero__paste {
      padding: var(--space-8);
    }
  }

  /* --- Desktop: at --bp-md the hero becomes a two-column grid so the
         fold uses the viewport intentionally rather than reading as a
         narrow editorial column wedged top-left. The editorial header
         sits left and vertically centers against the paste panel on
         the right; the asymmetric 1.05fr / 0.95fr split gives the
         heading just enough room to keep its two-line break. --- */
  @media (min-width: 1024px) {
    .home-hero {
      grid-template-columns: 1.05fr 0.95fr;
      gap: var(--space-10);
      align-items: center;
    }

    /* The header's measure caps (ch-based, above) keep the prose
       readable; the grid column does the width framing. */
    .home-hero__heading {
      font-size: var(--text-5xl);
    }

    .home-hero__lede {
      margin-block-start: var(--space-6);
    }
  }
}