HeadingStacked heading

---
/**
 * HeadingStacked — gecentreerde sectiekop: kleine eyebrow boven een grote,
 * vette H2. Bedoeld als statement-opener van een sectie.
 *
 * Props:
 * - eyebrow?: string   kleine bovenregel
 * - headline?: string  de grote kop
 */
interface Props {
  eyebrow?: string;
  headline?: string;
}

const {
  eyebrow = 'Onze belofte aan jou',
  headline = 'Meetbaar resultaat of je geld terug.',
} = Astro.props;
---

<section class:list={['bl-section', 'hd-stacked']}>
  <div class="bl-inner hd-stacked__inner">
    {eyebrow && <p class="hd-stacked__small">{eyebrow}</p>}
    <h2 class="hd-stacked__large">{headline}</h2>
  </div>
</section>

<style>
.hd-stacked__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hd-stacked__small{margin:0 0 .25rem;font-size:.9rem;font-weight:600;color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase}
.hd-stacked__large{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.05;color:var(--color-primary);letter-spacing:-.03em;margin:0}
</style>