HeadingInline heading

---
/**
 * HeadingInline — compacte inline-kop: een woord/label tussen twee horizontale
 * lijnen, gecentreerd over de rail.
 *
 * Props:
 * - text?: string
 * - size?: string            font-size van het label (CSS-waarde), default 1rem
 */
interface Props {
  text?: string;
  size?: string;
}

const { text, size = '1rem' } = Astro.props;
---

<section class="bl-section hinl-section">
  <div class="bl-inner hinl">
    <span class="hinl__line" aria-hidden="true"></span>
    {text && <h2 class="hinl__text" style={`--hinl-size:${size}`}>{text}</h2>}
    <span class="hinl__line" aria-hidden="true"></span>
  </div>
</section>

<style>
.hinl{display:flex;align-items:center;gap:1rem}
.hinl__line{flex:1;height:1px;background:#d4d4d4}
.hinl__text{font-size:var(--hinl-size, 1rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
</style>