HeadingGradient heading

---
/**
 * HeadingGradient — gecentreerde sectiekop met een gradient-gevulde titel,
 * eyebrow en sub.
 *
 * Props:
 * - eyebrow?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  eyebrow?: string;
  title?: string;
  sub?: string;
}

const { eyebrow, title, sub } = Astro.props;
---

<section class="bl-section hd-gradient-section">
  <div class="bl-inner bl-inner--narrow hd-gradient">
    {eyebrow && <span class="hd-gradient__eyebrow">{eyebrow}</span>}
    {title && <h2 class="hd-gradient__title">{title}</h2>}
    {sub && <p class="hd-gradient__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-gradient{text-align:center}
.hd-gradient__eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.75rem}
.hd-gradient__title{margin:0 0 1rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;background:linear-gradient(135deg,var(--color-accent) 0%,#a855f7 50%,#ec4899 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}
.hd-gradient__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.65}
</style>