HeadingUnderline heading

---
/**
 * HeadingUnderline — gecentreerde sectiekop met eyebrow, H2 en een korte
 * accent-balk eronder, plus een sub. Klassieke portfolio-opener.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - sub?: string
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
}

const {
  eyebrow = 'Portfolio',
  headline = 'Ons werk',
  sub = 'Een selectie van projecten waar we trots op zijn.',
} = Astro.props;
---

<section class:list={['bl-section', 'hd-underline']}>
  <div class="bl-inner hd-underline__inner">
    {eyebrow && <span class="hd-underline__eyebrow">{eyebrow}</span>}
    <h2 class="hd-underline__title">
      {headline}
      <span class="hd-underline__bar" aria-hidden="true"></span>
    </h2>
    {sub && <p class="hd-underline__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-underline__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hd-underline__eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.5rem}
.hd-underline__title{margin:0 0 .5rem;font-size:clamp(2rem,5vw,3.25rem);font-weight:800;color:var(--color-primary);line-height:1.1;letter-spacing:-.02em;display:inline-flex;flex-direction:column;align-items:center;gap:.4rem}
.hd-underline__bar{display:block;width:80px;height:4px;background:var(--color-accent);border-radius:2px}
.hd-underline__sub{margin:.75rem 0 0;font-size:1rem;color:var(--color-muted);line-height:1.6}
</style>