HeadingSplit heading

---
/**
 * HeadingSplit — twee-koloms sectiekop: krachtige statement-titel links,
 * ondersteunende tekst rechts. Stapelt op mobiel.
 *
 * Props:
 * - title?: string
 * - text?: string
 */
interface Props {
  title?: string;
  text?: string;
}

const { title, text } = Astro.props;
---

<section class="bl-section hd-split-section">
  <div class="bl-inner hd-split">
    {title && <h2 class="hd-split__left">{title}</h2>}
    {text && <p class="hd-split__right">{text}</p>}
  </div>
</section>

<style>
.hd-split{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;border-top:2px solid var(--color-primary);padding-top:2rem}
.hd-split__left{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-split__right{margin:0;font-size:1.1rem;color:#444;line-height:1.7;border-left:2px solid var(--color-accent);padding-left:1.5rem}
@media (min-width:768px){
  .hd-split{grid-template-columns:1fr 1fr;gap:2.5rem}
}
</style>