HeadingWide heading

---
/**
 * HeadingWide — brede artikel-kop met kicker + datum op één regel, een grote
 * H1 en een fijne onderlijn. Bedoeld als opener van een long-form artikel.
 *
 * Props:
 * - kicker?: string
 * - date?: string
 * - headline?: string
 */
interface Props {
  kicker?: string;
  date?: string;
  headline?: string;
}

const {
  kicker = 'Exclusief interview',
  date = '14 april 2025',
  headline = 'Hoe een klein team in 3 jaar uitgroeide tot het snelstgroeiende marketingbureau van Nederland',
} = Astro.props;
---

<section class:list={['bl-section', 'hd-wide']}>
  <div class="bl-inner hd-wide__inner">
    <div class="hd-wide__meta">
      {kicker && <span class="hd-wide__kicker">{kicker}</span>}
      {date && <span class="hd-wide__date">{date}</span>}
    </div>
    <h1 class="hd-wide__title">{headline}</h1>
    <div class="hd-wide__rule"></div>
  </div>
</section>

<style>
.hd-wide__inner{border-top:3px solid var(--color-primary);padding-top:1.75rem}
.hd-wide__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.hd-wide__kicker{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.hd-wide__date{font-size:.85rem;color:var(--color-muted);font-weight:600}
.hd-wide__title{margin:0 0 1.5rem;font-size:clamp(2rem,5.5vw,4rem);font-weight:900;color:var(--color-primary);line-height:1.08;letter-spacing:-.025em}
.hd-wide__rule{height:1px;background:var(--color-muted);opacity:.3}
</style>