ListOrdered list

---
/**
 * ListOrdered
 * Grote cijfer-geordende lijst met titel en beschrijving. Overzichtelijk stappenformaat.
 *
 * Props:
 * - items?: Array<{ title: string; body?: string }>
 */
interface Props {
  items?: { title: string; body?: string }[];
}

const {
  items = [
    { title: 'Analyseer je concurrenten', body: 'Begrijp waar jij de kans hebt om op te vallen in de markt.' },
    { title: 'Definieer je doelgroep', body: 'Wie is jouw ideale klant en wat beweegt hem of haar?' },
    { title: 'Kies de juiste kanalen', body: 'Niet elk kanaal is geschikt voor elke business.' },
  ],
} = Astro.props;
---

<section class="bl-section lst-ord-section">
  <div class="bl-inner bl-inner--narrow">
    <ol class="lst-ord">
      {items.map((item, i) => (
        <li class="lst-ord__item">
          <span class="lst-ord__num">{i + 1}</span>
          <div class="lst-ord__content">
            <strong class="lst-ord__title">{item.title}</strong>
            {item.body && <p class="lst-ord__body">{item.body}</p>}
          </div>
        </li>
      ))}
    </ol>
  </div>
</section>

<style>
.lst-ord{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.75rem}
.lst-ord__item{display:flex;gap:1.25rem;align-items:flex-start}
.lst-ord__num{font-size:clamp(2.5rem,6vw,4rem);font-weight:900;line-height:1;color:var(--color-accent, #6366f1);opacity:.2;flex-shrink:0;letter-spacing:-.04em;min-width:2.5rem;text-align:right}
.lst-ord__content{padding-top:.35rem}
.lst-ord__title{display:block;font-size:1.05rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.3rem}
.lst-ord__body{margin:0;font-size:.9375rem;color:var(--color-muted, #555);line-height:1.6}
</style>