HeadingLeft heading

---
/**
 * HeadingLeft — sectiekop met accent-rand links. Eyebrow, titel, sub.
 *
 * Props:
 * - eyebrow?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  eyebrow?: string;
  title?: string;
  sub?: string;
}

const {
  eyebrow = 'Diensten',
  title = 'Wat wij voor jou doen',
  sub = 'Van strategie tot uitvoering: meetbare groei van begin tot eind.',
} = Astro.props;
---

<section class="bl-section hd-left-section">
  <div class="bl-inner hd-left">
    {eyebrow && <span class="hd-left__eyebrow">{eyebrow}</span>}
    <h2 class="hd-left__title">{title}</h2>
    {sub && <p class="hd-left__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-left{border-left:4px solid var(--color-accent);padding-left:1.5rem}
.hd-left__eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.5rem}
.hd-left__title{margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;line-height:1.15;color:var(--color-primary)}
.hd-left__sub{margin:0;font-size:1.05rem;color:#555;line-height:1.6;max-width:640px}
</style>