HeadingBadge heading

---
/**
 * HeadingBadge — sectiekop met een pill-badge boven de titel, plus sub.
 *
 * Props:
 * - badge?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  badge?: string;
  title?: string;
  sub?: string;
}

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

<section class="bl-section hd-badge-section">
  <div class="bl-inner hd-badge">
    {badge && <span class="hd-badge__badge">{badge}</span>}
    {title && <h2 class="hd-badge__title">{title}</h2>}
    {sub && <p class="hd-badge__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-badge{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.hd-badge__badge{display:inline-block;background:var(--color-accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px}
.hd-badge__title{margin:0;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;line-height:1.15;color:var(--color-primary);letter-spacing:-.02em}
.hd-badge__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.6;max-width:520px}
</style>