HeadingMono heading

---
/**
 * HeadingMono — technische sectiekop in monospace met een code-achtig label,
 * titel en sub, afgezet met een bovenrand.
 *
 * Props:
 * - label?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  label?: string;
  title?: string;
  sub?: string;
}

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

<section class="bl-section hd-mono-section">
  <div class="bl-inner hd-mono">
    {label && <span class="hd-mono__label">{label}</span>}
    {title && <h2 class="hd-mono__title">{title}</h2>}
    {sub && <p class="hd-mono__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-mono{border-top:1px solid #e0e0e0;padding-top:2rem}
.hd-mono__label{display:block;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;color:var(--color-accent);margin-bottom:.75rem;letter-spacing:.04em}
.hd-mono__title{margin:0 0 .75rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:700;line-height:1.2;color:var(--color-primary);letter-spacing:-.01em}
.hd-mono__sub{margin:0;font-size:1rem;color:#444;line-height:1.65;max-width:520px}
</style>