HeadingCategory heading

---
/**
 * HeadingCategory — sectiekop met een solide categorie-label boven de titel.
 *
 * Props:
 * - category?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  category?: string;
  title?: string;
  sub?: string;
}

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

<section class="bl-section hd-cat-section">
  <div class="bl-inner hd-cat">
    {category && <span class="hd-cat__category">{category}</span>}
    {title && <h2 class="hd-cat__title">{title}</h2>}
    {sub && <p class="hd-cat__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-cat__category{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--color-primary);padding:.3rem .7rem;border-radius:4px;margin-bottom:1rem}
.hd-cat__title{margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:var(--color-primary);line-height:1.15;letter-spacing:-.02em;max-width:640px}
.hd-cat__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.65;max-width:520px}
</style>