HeadingNumber heading

---
/**
 * HeadingNumber — sectiekop met een groot stapnummer links naast titel en sub.
 * Bedoeld als kop van een genummerde stap/sectie.
 *
 * Props:
 * - number?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  number?: string;
  title?: string;
  sub?: string;
}

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

<section class="bl-section hd-number-section">
  <div class="bl-inner hd-number">
    {number && <span class="hd-number__num">{number}</span>}
    <div class="hd-number__content">
      {title && <h2 class="hd-number__title">{title}</h2>}
      {sub && <p class="hd-number__sub">{sub}</p>}
    </div>
  </div>
</section>

<style>
.hd-number{display:flex;align-items:flex-start;gap:1.5rem}
.hd-number__num{font-size:clamp(3rem, 5vw, 5rem);font-weight:900;line-height:1;color:var(--color-accent);opacity:.3;flex-shrink:0;letter-spacing:-.04em}
.hd-number__content{padding-top:.5rem}
.hd-number__title{margin:0 0 .5rem;font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:800;color:var(--color-primary);line-height:1.2}
.hd-number__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.6}
</style>