ListNumbered list

---
/**
 * ListNumbered
 * Genummerde stappenlijst met tweecijferig nummer, titel en beschrijving.
 *
 * Props:
 * - items?: Array<{ title: string; desc?: string }>
 */
interface Props {
  items?: { title: string; desc?: string }[];
}

const {
  items = [
    { title: 'Intake & analyse', desc: 'We leren jouw business grondig kennen.' },
    { title: 'Strategie opstellen', desc: 'Maatwerk plan op basis van data.' },
    { title: 'Campagne lanceren', desc: 'Live gaan met bewezen formats.' },
    { title: 'Meten & optimaliseren', desc: 'Continu verbeteren op basis van resultaten.' },
  ],
} = Astro.props;
---

<section class="bl-section lst-num-section">
  <div class="bl-inner bl-inner--narrow">
    <ol class="lst-num">
      {items.map((item, i) => (
        <li class="lst-num__item">
          <span class="lst-num__n">{String(i + 1).padStart(2, '0')}</span>
          <div class="lst-num__body">
            <strong class="lst-num__title">{item.title}</strong>
            {item.desc && <p class="lst-num__desc">{item.desc}</p>}
          </div>
        </li>
      ))}
    </ol>
  </div>
</section>

<style>
.lst-num{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.lst-num__item{display:flex;align-items:flex-start;gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid #efefef}
.lst-num__item:last-child{border-bottom:none}
.lst-num__n{font-size:.8rem;font-weight:800;color:var(--color-accent, #6366f1);font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:.15rem;letter-spacing:.04em}
.lst-num__title{display:block;font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.2rem}
.lst-num__desc{margin:0;font-size:.9375rem;color:var(--color-muted, #555);line-height:1.5}
</style>