ListHorizontal list

---
/**
 * ListHorizontal
 * Horizontaal scrollbare kaartjesrij met label + badge per item. Geschikt voor expertise-overzichten.
 *
 * Props:
 * - items?: Array<{ label: string; value: string }>
 */
interface Props {
  items?: { label: string; value: string }[];
}

const {
  items = [
    { label: 'Google Ads', value: 'Specialist' },
    { label: 'Meta Ads', value: 'Certified' },
    { label: 'SEO', value: 'Expert' },
    { label: 'Analytics', value: 'GA4' },
  ],
} = Astro.props;
---

<section class="bl-section lst-hor-section">
  <div class="bl-inner">
    <div class="lst-hor">
      <ul class="lst-hor__list">
        {items.map(item => (
          <li class="lst-hor__item">
            <span class="lst-hor__label">{item.label}</span>
            <span class="lst-hor__value">{item.value}</span>
          </li>
        ))}
      </ul>
    </div>
  </div>
</section>

<style>
.lst-hor{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lst-hor__list{list-style:none;margin:0;padding:.5rem 0;display:flex;gap:.75rem;width:max-content}
.lst-hor__item{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.9rem 1.25rem;border:1.5px solid #e5e5e5;border-radius:.75rem;min-width:100px;transition:border-color .2s}
.lst-hor__item:hover{border-color:var(--color-accent, #6366f1)}
.lst-hor__label{font-size:.9rem;font-weight:700;color:var(--color-primary, #0a0a0a)}
.lst-hor__value{font-size:.75rem;color:var(--color-accent, #6366f1);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
</style>