---
// ChapterHero — eyebrow + display headline + intro paragraph. The shared
// opener for /models/, /agents/, /skills/, /summary/. The optional `foot`
// slot holds the rules case-study's two-column hero-foot.
//
// The eyebrow reuses the existing `Eyebrow` primitive but defaults to the
// `red` tone, which matches the chapter surfaces (not the guide surface).
// The h1 em treatment (Georgia italic, red) is the chapter-page signature.

import Eyebrow from '../primitives/Eyebrow.astro';

interface Props {
  /** Short uppercase label, same treatment as Eyebrow. Defaults to red,
   *  matching chapters.css `.eyebrow`. */
  eyebrow: string;
  /** Colour tone for the eyebrow. */
  tone?: 'accent' | 'red';
}

const { eyebrow, tone = 'red' } = Astro.props;
---

<section class="hero">
  <Eyebrow label={eyebrow} tone={tone} />
  <h1><slot name="title" /></h1>
  <div class="intro"><slot /></div>
  <slot name="foot" />
</section>

<style>
  .hero {
    padding: 100px 0 70px;
    max-width: 950px;
  }

  h1 {
    margin: 16px 0;
    /* UNRESOLVED: legacy value `clamp(52px,9vw,126px)` from chapters.css.
       The --step-display token is `clamp(56px,9vw,126px)` — 4px taller at
       the small end. Reported in task 09 report; no token matches exactly. */
    font-size: clamp(52px, 9vw, 126px);
    line-height: 0.9;
    letter-spacing: -0.07em;
  }

  /* The em treatment is a chapter-page signature: italic Georgia, red.
     Pages pass <em>...</em> inside the title slot to invoke it. */
  h1 :global(em) {
    font:
      400 0.9em Georgia,
      serif;
    color: var(--red);
  }

  .intro :global(p) {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    /* UNRESOLVED: legacy 20px fixed from chapters.css. No token matches.
       clamp keeps the legacy fixed size; reported in task 09 report. */
    font-size: clamp(20px, 20px, 20px);
  }

  @media (max-width: 800px) {
    .hero {
      padding: 65px 0 45px;
    }
  }

  @media (max-width: 560px) {
    h1 {
      /* UNRESOLVED: legacy 56px fixed from chapters.css. No token matches.
         Reported in task 09 report. */
      font-size: clamp(56px, 56px, 56px);
    }
    .intro :global(p) {
      /* UNRESOLVED: legacy 17px fixed from chapters.css. No token matches.
         Reported in task 09 report. */
      font-size: clamp(17px, 17px, 17px);
    }
  }
</style>
