HeadingInline heading

---
/**
 * HeadingInline
 * Inline koptekst met horizontale lijn aan beide kanten
 */
interface Props {
  headline?: string;
  size?: 'sm' | 'md' | 'lg';
}
const {
  headline = 'Onze werkwijze',
  size = 'md',
} = Astro.props;

const sizeMap = {
  sm: '0.85rem',
  md: '1rem',
  lg: '1.25rem',
};
const fontSize = sizeMap[size] ?? sizeMap.md;
---

<div class="hinl" style={`--hinl-size: ${fontSize}`}>
  <span class="hinl__line" aria-hidden="true"></span>
  <h2 class="hinl__text">{headline}</h2>
  <span class="hinl__line" aria-hidden="true"></span>
</div>

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