HeadingFloat heading

---
/**
 * HeadingFloat — sectiekop met een verticaal zwevend label rechts naast de
 * titel, plus sub.
 *
 * 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-float-section">
  <div class="bl-inner hd-float">
    {label && <span class="hd-float__label">{label}</span>}
    {title && <h2 class="hd-float__title">{title}</h2>}
    {sub && <p class="hd-float__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-float{position:relative}
.hd-float__label{position:absolute;top:0;right:0;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);writing-mode:vertical-rl;text-orientation:mixed;opacity:.85}
.hd-float__title{margin:0 0 .75rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:var(--color-primary);line-height:1.1;letter-spacing:-.025em;max-width:640px}
.hd-float__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.65;max-width:520px}
</style>