HeadingWide heading

---
interface Props {
  kicker?: string;
  title: string;
  date?: string;
}
const { kicker = "Exclusief interview", title = "Hoe BLURR in 3 jaar uitgroeide tot het snelstgroeiende marketingbureau van Nederland", date = "14 april 2025" } = Astro.props;
---

<div class="hd-wide">
  <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">{title}</h1>
  <div class="hd-wide__rule"></div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .hd-wide {
    padding: 2.5rem 0;
    border-top: 3px solid var(--color-primary);
  }
  .hd-wide__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  .hd-wide__kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
  }
  .hd-wide__date {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
  }
  .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: -0.025em;
  }
  .hd-wide__rule {
    height: 1px;
    background: #e0e0e0;
  }
</style>