ListCards list

---
/**
 * ListCards
 * Grid van kaarten met tag, titel en beschrijving. Lichtgewicht service- of categorie-overzicht.
 *
 * Props:
 * - items?: Array<{ tag?: string; title: string; desc: string }>
 */
interface Props {
  items?: { tag?: string; title: string; desc: string }[];
}

const {
  items = [
    { tag: 'Organisch', title: 'SEO & Content', desc: 'Duurzame zichtbaarheid via organische zoekresultaten.' },
    { tag: 'Paid', title: 'Google Ads', desc: 'Directe leads via betaalde zoekcampagnes.' },
    { tag: 'Social', title: 'Social Media', desc: 'Merk bouwen en community activeren.' },
  ],
} = Astro.props;
---

<section class="bl-section lst-cards-section">
  <div class="bl-inner">
    <ul class="lst-cards">
      {items.map(item => (
        <li class="lst-cards__card">
          {item.tag && <span class="lst-cards__tag">{item.tag}</span>}
          <strong class="lst-cards__title">{item.title}</strong>
          <p class="lst-cards__desc">{item.desc}</p>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.lst-cards__card{border:1.5px solid #e5e5e5;border-radius:.75rem;padding:1.25rem;display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s,box-shadow .2s}
.lst-cards__card:hover{border-color:var(--color-accent, #6366f1);box-shadow:0 4px 16px #6366f11a}
.lst-cards__tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent, #6366f1)}
.lst-cards__title{font-size:.975rem;font-weight:700;color:var(--color-primary, #0a0a0a)}
.lst-cards__desc{margin:0;font-size:.9rem;color:var(--color-muted, #555);line-height:1.5}
</style>