HeadingCenter heading

---
/**
 * HeadingCenter — gecentreerde sectiekop met een rij stippen (één accent),
 * label, headline en sub.
 *
 * Props:
 * - label?: string
 * - headline?: string
 * - sub?: string
 */
interface Props {
  label?: string;
  headline?: string;
  sub?: string;
}

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

<section class="bl-section hcen-section">
  <div class="bl-inner bl-inner--narrow hcen">
    <div class="hcen__dots" aria-hidden="true">
      <span class="hcen__dot"></span>
      <span class="hcen__dot hcen__dot--accent"></span>
      <span class="hcen__dot"></span>
    </div>
    {label && <p class="hcen__label">{label}</p>}
    {headline && <h2 class="hcen__headline">{headline}</h2>}
    {sub && <p class="hcen__sub">{sub}</p>}
  </div>
</section>

<style>
.hcen{text-align:center}
.hcen__dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:.75rem}
.hcen__dot{width:6px;height:6px;border-radius:50%;background:#c4c4c4}
.hcen__dot--accent{background:var(--color-accent, #6366f1);width:8px;height:8px}
.hcen__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin:0 0 .75rem}
.hcen__headline{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .85rem;line-height:1.2;letter-spacing:-.025em}
.hcen__sub{font-size:1.0625rem;color:#444;line-height:1.7;margin:0}
</style>