HeadingWithLine heading

---
/**
 * HeadingWithLine — sectiekop met eyebrow, H2 (met optioneel <em>-accent) en
 * een korte accent-onderlijn. Links of gecentreerd uit te lijnen.
 *
 * WHY: de oorspronkelijke variant flankeerde de kop met twee decoratieve
 * lijnen die de regel doormidden sneden (AI-slop). Vervangen door één nette
 * accent-onderlijn onder de kop — zelfde identiteit, betere leesbaarheid.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string   HTML toegestaan, <em> voor accent
 * - sub?: string
 * - align?: 'left' | 'center'
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
  align?: 'left' | 'center';
}

const {
  eyebrow = 'Selectie',
  headline = 'Uitgelichte <em>projecten</em>',
  sub = 'Een greep uit het werk waar we trots op zijn.',
  align = 'left',
} = Astro.props;
---

<section class:list={['bl-section', 'hwl', `hwl--${align}`]}>
  <div class="bl-inner hwl__inner">
    {eyebrow && <p class="hwl__eyebrow">{eyebrow}</p>}
    <h2 class="hwl__headline" set:html={headline}></h2>
    <span class="hwl__line" aria-hidden="true"></span>
    {sub && <p class="hwl__sub">{sub}</p>}
  </div>
</section>

<style>
.hwl__inner{display:flex;flex-direction:column;gap:1rem}
.hwl--left .hwl__inner{align-items:flex-start;text-align:left}
.hwl--center .hwl__inner{align-items:center;text-align:center}
.hwl__eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.hwl__headline{margin:0;font-size:clamp(2rem,4vw,3.5rem);font-weight:800;letter-spacing:-.02em;color:var(--color-primary);line-height:1.1}
.hwl__headline :global(em){font-style:italic;color:var(--color-accent)}
.hwl__line{display:block;width:64px;height:3px;border-radius:2px;background:var(--color-accent)}
.hwl__sub{margin:0;font-size:1.125rem;line-height:1.7;color:var(--color-muted);max-width:580px}
</style>