/* Components — styling per element, volgens docs/DESIGN.md.
 *
 * Mobile-first. Tokens uit tokens.css. Dark-mode-overrides per token
 * in themes/dark.css.
 */

/* === Header / nav (DESIGN.md §5 — fixed app-bar) ====================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--border-header-footer);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
}

.site-header__brand {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--size-wordmark);
  letter-spacing: -0.05em;
  color: var(--color-text);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--color-primary);
}

.site-nav {
  display: none;
}

@media (min-width: 768px) {
  .site-nav {
    display: block;
  }
}

.site-nav__list {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__list a {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--size-button);
  font-weight: 600;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-default), border-color var(--transition-default);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* === Theme-toggle ===================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: var(--border-light);
  color: var(--color-text-muted);
  transition: color var(--transition-default), background-color var(--transition-default);
}

.theme-toggle:hover {
  color: var(--color-text);
  background-color: var(--color-surface-low);
}

.theme-toggle__icon {
  display: none;
}

[data-theme="light"] .theme-toggle__icon--light {
  display: inline-flex;
}
[data-theme="dark"] .theme-toggle__icon--dark {
  display: inline-flex;
}

/* === M9 Fase 11 — Header-actions wrapper + altijd-zichtbare zoekbalk === */

.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Zoekbalk: input + magnifier-submit. Altijd zichtbaar, geen toggle.
   Desktop: inline in header-row. Mobiel: via flex-wrap in
   `.site-header__row` schuift hij naar een 2e regel (full-width). */
.header-search {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface-lowest);
  overflow: hidden;
}

.header-search__input {
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--size-body-md);
  min-width: 0;
  width: 220px;
}

.header-search__input::placeholder {
  color: var(--color-text-muted);
}

.header-search__input:focus {
  outline: none;
}

.header-search:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-primary);
  color: var(--color-surface-lowest);
  transition: background var(--transition-default);
}

.header-search__submit:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, transparent);
}

/* Mobiel: header wordt twee regels (logo+nav+theme bovenaan; zoekbalk
   full-width onderaan). flex-wrap in `.site-header__row` + flex-basis 100%
   pusht de search-form naar regel 2. `--header-height` mag groeien op
   mobiel (auto-height); op desktop blijft 80px. */
@media (max-width: 767px) {
  .site-header {
    height: auto;
    min-height: var(--header-height);
  }

  .site-header__row {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
    padding-block: var(--space-sm);
  }

  .header-search {
    flex-basis: 100%;
    order: 99;
  }

  .header-search__input {
    flex: 1 1 auto;
    width: auto;
  }
}

/* === Filter-accordeon (Fase 11.4) ===================================== */

.filter-accordion {
  background: var(--color-surface-low);
  border: var(--border-light);
  border-radius: var(--radius-card);
  margin-block-end: var(--space-md);
  overflow: hidden;
}

.filter-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--size-label-md);
  list-style: none;
  user-select: none;
}

.filter-accordion__summary::-webkit-details-marker {
  display: none;
}

.filter-accordion__chevron {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
  transition: transform var(--transition-default);
}

.filter-accordion[open] .filter-accordion__chevron {
  transform: rotate(180deg);
}

.filter-accordion[open] .filter-block {
  margin-block-end: 0;
}

/* De form-binnen-details neemt geen aparte border meer over;
   border-radius zit op de details-container. */
.filter-accordion .filter-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--color-border);
}

/* === Main + container padding ========================================= */

.site-main {
  padding-top: var(--content-top-padding);
  padding-bottom: var(--space-2xl);
}

/* Mobiel: `--content-top-padding` (8rem) en de 2xl onder-ruimte zijn
   desktop-maten (luchtige hero-layout). Op smalle schermen geeft dat te veel
   witruimte boven- en onderaan. De header is `position: sticky` (in-flow), dus
   minder padding-top veroorzaakt geen overlap. */
@media (max-width: 767px) {
  .site-main {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
  /* Event-detail heeft een eigen margin-bottom die op mobiel bovenop de
     site-main-onderruimte kwam (dubbele leegte tussen deelknoppen en footer). */
  .event-detail {
    margin-bottom: 0;
  }
}

/* === Hero (DESIGN.md §5 — asymmetrisch, links uitgelijnd) ============ */

.hero {
  margin-bottom: var(--space-xl);
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw + 0.5rem, var(--size-display-xl));
  line-height: 1.1;
  max-width: 48rem; /* ~768px */
  margin-bottom: var(--space-md);
}

.hero__lede {
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 42rem; /* ~672px */
}

/* === Section headings ================================================= */

.featured,
.events {
  margin-bottom: var(--space-2xl);
}

.featured h2,
.events h2 {
  font-size: clamp(2rem, 4vw + 0.5rem, var(--size-headline-lg));
  margin-bottom: var(--space-md);
}

/* === Gedeelde paginakop (DESIGN.md §5) ===============================
 * Eén kop-behandeling voor álle standaard-tekstpagina's. De home-hero en
 * de event-detailtitel houden bewust hun grotere display-formaat — dat is
 * hiërarchie, geen inconsistentie.
 */
.service-page h1,
.submit-page h1,
.submit-thanks h1,
.archief__header h1 {
  font-size: clamp(2rem, 4vw + 0.5rem, var(--size-headline-lg));
  margin-bottom: var(--space-md);
}

/* Op de brede indexpagina's (archief) capt het kop-blok op leesbreedte,
   zodat titel + intro uitlijnen met de smalle tekstpagina's terwijl het
   grid eronder de volle container houdt — net als de home-hero. */
.archief__header {
  max-width: var(--content-max-prose);
}

/* Gedeelde lede onder de paginakop — vervangt de losse *_lede / *_intro. */
.page-lede {
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.featured__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.featured__header h2 {
  margin: 0;
}

.featured__controls {
  display: flex;
  gap: var(--space-xs);
}

.featured__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: var(--border-light);
  color: var(--color-text-muted);
  transition:
    color var(--transition-default),
    background-color var(--transition-default);
}

.featured__chevron:hover {
  color: var(--color-surface-lowest);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* === Event-list (grid) =============================================== */

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .event-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .event-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.event-list__item {
  position: relative; /* anker voor .event-card__urgent-badge */
  background-color: var(--color-surface-lowest);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.event-list__item:hover,
.featured-list__item:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(62, 60, 50, 0.14);
}

/* Respecteer system-preference: geen scale-animatie, alleen subtiele
   shadow-shift zodat hover feedback houdt zonder beweging.
   Focus-stijl blijft via .button:focus-visible / link-outlines onveranderd. */
@media (prefers-reduced-motion: reduce) {
  .event-list__item,
  .featured-list__item {
    transition: box-shadow var(--transition-default);
  }
  .event-list__item:hover,
  .featured-list__item:hover {
    transform: none;
    box-shadow: 0 12px 24px rgba(62, 60, 50, 0.12);
  }
}

/* "Binnenkort"-badge (M7 Fase G). Token-driven kleur + witte tekst voor
   AAA-contrast. Positie top-right via absolute t.o.v. .event-list__item
   (position: relative hierboven) of .featured-list__item (al relative). */
.event-card__urgent-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-urgent);
  color: var(--color-on-urgent);
  font-size: var(--size-kicker);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  /* Puur label: laat kliks door naar de stretched-link-overlay eronder,
     zodat ook de badge-hoek naar de detailpagina navigeert. */
  pointer-events: none;
}

.event-list__item a {
  font-family: var(--font-heading);
  font-size: var(--size-h4-grid);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-text);
}

.event-list__item a:hover {
  color: var(--color-primary);
}

/* Stretched link: een dekkende, transparante overlay maakt de héle card
   klikbaar via de bestaande titel-`<a>` (card is position:relative als
   anker). Eén link → geen dubbele tab-stop; tekst blijft selecteerbaar. */
.event-list__item a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

/* Vast beeldkader: alle card-beelden krijgen dezelfde 3:2-verhouding met
   object-fit:cover, zodat banners en foto's even hoog worden en het grid
   rustig oogt ongeacht de bronverhouding. Geldt ook voor de featured-cards. */
.event-list__item picture,
.featured-list__item picture {
  display: block;
}

.event-list__image,
.featured-list__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.event-list__date {
  /* Duwt datum + organisator + locatie als cluster naar de onderkant, zodat
     tekst-cards zonder beeld even hoog vullen als beeld-cards in dezelfde
     grid-rij (grid strekt standaard op de hoogste card). */
  margin-top: auto;
  font-size: var(--size-kicker);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Organisator + locatie: gedempt en klein, direct onder de datum-kicker.
   Beide op één regel (flex-rij) met een middot-scheidingsteken ertussen;
   wrapt netjes naar een tweede regel als de kaart te smal wordt. */
.event-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-xs);
  font-size: var(--size-meta);
  line-height: 1.3;
  color: var(--color-text-muted);
}

.event-list__organizer + .event-list__location::before {
  content: "·";
  margin-right: var(--space-xs);
  color: var(--color-text-muted);
}

/* === Featured-list (horizontale carousel-stijl) ======================
 *
 * Op alle viewports een horizontale scroll-snap-carousel (DESIGN.md §7
 * — mobile: cards ~85% breed met peek; desktop ≥768px: vaste 22rem).
 * Chevron-knoppen + scroll-snap zijn de affordances; native scrollbar
 * verborgen voor rust.
 */

.featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
  grid-auto-flow: column;
  /* Mobile-default: 85% van viewport zodat de volgende card half
     piept als scroll-affordance. */
  grid-auto-columns: 85vw;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-sm);
  scroll-padding-inline: var(--space-md);
}

.featured-list::-webkit-scrollbar {
  display: none;
}

/* M9b § G + vraag 7: tijdens pointer-drag zet `.carousel--dragging`
   scroll-snap uit zodat de browser-native snap niet conflict met
   onze pointer-translate van scrollLeft. Touch-action: pan-y houdt
   verticaal scrollen van de pagina ongestoord. */
.featured.carousel--dragging .featured-list {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.featured-list {
  touch-action: pan-y;
}

/* M9b § G: skip-featured landmark — variant van .skip-nav (base.css).
   Verschijnt alleen bij focus zodat sighted users geen visuele ruis krijgen. */
.skip-link--featured {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link--featured:focus {
  position: static;
  width: auto;
  height: auto;
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: var(--color-surface);
  margin: var(--space-2);
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .featured-list {
    /* Desktop: vaste card-breedte; 3 cards naast elkaar op ~1100px
       viewport, 4e piept half door. */
    grid-auto-columns: 22rem;
  }
}

.featured-list__item {
  background-color: var(--color-surface-lowest);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Hoogte vast genoeg zodat korte en lange titels visueel dezelfde
     verhoudingen krijgen; datum-kicker pinned aan onderkant via
     margin-top: auto in `.featured-list__date`. */
  min-height: 16rem;
  height: 100%;
  position: relative;
  scroll-snap-align: start;
}

.featured-list__item a {
  font-family: var(--font-heading);
  font-size: var(--size-h3-featured);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  color: var(--color-text);
}

.featured-list__item a::before {
  content: "FEATURED";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-size: var(--size-kicker);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-secondary);
}

.featured-list__date {
  margin-top: auto;
  font-size: var(--size-kicker);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* === Event-detail ===================================================== */

/* === Event-detailpagina (2-koloms — DESIGN.md §8) ===================== */

.event-detail {
  margin-bottom: var(--space-2xl);
}

/* --- Hero-band met scrim (conditioneel, mét beeld) --- */
.event-detail__hero {
  position: relative;
  height: var(--detail-hero-height);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-hero);
  overflow: hidden;
  background: var(--color-primary);
}

.event-detail__hero picture,
.event-detail__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-detail__hero-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(
    to top,
    rgba(20, 18, 14, 0.82) 0%,
    rgba(20, 18, 14, 0.4) 38%,
    rgba(20, 18, 14, 0.05) 70%
  );
}

.event-detail__hero-scrim .event-detail__meta {
  color: #e6e1d3;
}

.event-detail__hero-title {
  font-size: clamp(2.25rem, 4.6vw + 0.5rem, var(--size-display-xl));
  line-height: 1.05;
  color: #fbf9f2;
  max-width: 48rem;
  text-wrap: balance;
}

/* --- Grid: leeskolom + sticky sidebar --- */
.event-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Mobiel (1 kolom): expliciete stapelvolgorde. De sidebar-kaarten
   (organisator + prijs) komen vóór het interactie-blok (like + share). */
.event-detail__main    { order: 1; }
.event-detail__sidebar { order: 2; }
.event-detail__actions { order: 3; }

@media (min-width: 64rem) { /* lg = 1024px */
  .event-detail__grid {
    grid-template-columns: minmax(0, 1fr) var(--detail-sidebar-width);
    grid-template-areas:
      "main    sidebar"
      "actions sidebar";
  }
  /* Desktop: kaarten weer in de rechterkolom, like/share onder de
     leeskolom. De sidebar-area beslaat beide rijen (sticky blijft werken). */
  .event-detail__main    { grid-area: main; }
  .event-detail__sidebar { grid-area: sidebar; }
  .event-detail__actions { grid-area: actions; }
}

.event-detail__main,
.event-detail__actions {
  min-width: 0;
  max-width: var(--detail-content-max);
}

/* --- Titelblok (beeldloze variant) --- */
.event-detail__header {
  margin-bottom: var(--space-md);
}

.event-detail h1 {
  font-size: clamp(2.5rem, 5vw + 0.5rem, var(--size-display-xl));
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.event-detail__meta {
  font-size: var(--size-body-md);
  color: var(--color-text-muted);
}

/* Desktop: de meta-rij boven de titel is overbodig — datum/locatie/organisator
   staan in de info-kaart ernaast. Op mobiel (sidebar onder de content) blijft
   de rij staan als snelle context bij de titel. Geldt alleen voor het
   basis-titelblok; de hero-meta over het beeld blijft altijd zichtbaar. */
@media (min-width: 64rem) {
  .event-detail__header .event-detail__meta {
    display: none;
  }
}

/* --- Omschrijving (rich-text) in standaard body-lettertype. Nadruk (bold,
   koppen) bepaalt de redactie zelf in de Quill-editor — geen auto-lead. --- */
.event-detail__description {
  font-size: var(--size-body-md);
  line-height: 1.66;
  color: var(--color-text);
}

.event-detail__description p {
  margin-bottom: var(--space-md);
}

.event-detail__description > :last-child {
  margin-bottom: 0;
}

/* --- Sectie-hairline --- */
.event-detail__rule {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-lg) 0;
}

/* --- Sticky sidebar --- */
.event-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 64rem) {
  .event-detail__sidebar {
    position: sticky;
    top: var(--space-md);
  }
}

/* Kaartbasis (ticket + info) */
.ticket-card,
.info-card {
  background: var(--color-surface-lowest);
  border: var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

/* Ticket/aanmeld-kaart */
.ticket-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.ticket-card__price {
  font-family: var(--font-heading);
  font-size: var(--size-headline-md);
  font-weight: 700;
  line-height: 1.1;
}

.ticket-card__price--text {
  font-size: var(--size-h3-featured);
}

.ticket-card__note {
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.ticket-card .button {
  margin-top: var(--space-sm);
}

/* Info-kaart */
.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.info-card__row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.info-card__row + .info-card__row {
  border-top: var(--border-light);
  padding-top: var(--space-md);
}

.info-card__row svg {
  flex-shrink: 0;
  color: var(--color-outline);
  margin-top: 0.15rem;
}

.info-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.info-card__label {
  font-size: var(--size-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-outline);
}

.info-card__value {
  font-weight: 600;
  color: var(--color-text);
}

.info-card__sub {
  font-size: var(--size-label-md);
  font-style: normal;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.info-card__link {
  font-size: var(--size-label-md);
  margin-top: 0.15rem;
}

/* Organisator-header bovenaan de info-kaart: naam in prijs-lettertype +
   website-CTA, gescheiden van de info-rijen door een hairline. */
.info-card__org-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.info-card__org-kicker {
  font-size: var(--size-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-outline);
}

.info-card__org-name {
  font-family: var(--font-heading);
  font-size: var(--size-headline-md);
  font-weight: 700;
  line-height: 1.1;
}

.info-card__org-head + .info-card__row {
  border-top: var(--border-light);
  padding-top: var(--space-md);
}

/* Status-badge (afgelast/uitgesteld/online) — in de ticketkaart */
.status-badge {
  flex-shrink: 0;
  font-size: var(--size-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
}

.status-badge--cancelled {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

.status-badge--postponed,
.status-badge--moved-online {
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}

/* === Buttons ========================================================== */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-light);
  border-radius: var(--radius-button);
  background-color: var(--color-surface-lowest);
  color: var(--color-text);
  font-size: var(--size-button);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-default), color var(--transition-default), transform var(--transition-default);
}

.button:hover {
  background-color: var(--color-surface-low);
}

.button:active {
  transform: scale(0.97);
}

/* Full-width knop — sidebar-kaarten (event-detail). */
.button--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-surface-lowest);
  border-color: var(--color-primary);
}

/* Hover gelijkgetrokken met de zoekbalk-knop (.header-search__submit):
   primary-kleur 15% lichter via color-mix i.p.v. een afwijkende
   accent-kleur. Eén consistente hover-taal over de hele site (#16). */
.button--primary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
  color: var(--color-surface-lowest);
  border-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
}

/* === Cookie-banner (M5 — AVG-PRIVACY.md) ============================= */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--color-surface-lowest) 92%, transparent);
  border-top: var(--border-light);
  box-shadow: var(--shadow-footer-up);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-block: var(--space-md);
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  justify-content: space-between;
}

.cookie-banner__text {
  flex: 1 1 28rem;
  margin: 0;
  font-size: var(--size-label-md);
  color: var(--color-text);
}

.cookie-banner__text a {
  color: var(--color-primary);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions {
    flex-direction: column;
  }
  .cookie-banner__actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Reservering van ruimte onderaan zodat de fixed cookie-banner de
   footer-links niet afdekt. `:has()` activeert alleen wanneer de
   banner daadwerkelijk in de DOM zit — zodra JS hem na een keuze
   verwijdert, verdwijnt de spacing automatisch zonder body-class-
   management. Werkt dankzij `body { min-height: 100% }` in base.css
   (i.p.v. `height: 100%`, anders zit padding-bottom binnen body's
   vaste box en overflowt de footer eronder). Browser-support: Chrome/
   Edge/Safari sinds 2022, Firefox sinds december 2023. */
body:has([data-cookie-banner]) {
  padding-bottom: 6rem;
}

@media (max-width: 560px) {
  body:has([data-cookie-banner]) {
    /* Mobile stapelt twee knoppen + 3 regels tekst — ~3× zo hoog. */
    padding-bottom: 16rem;
  }
}

/* === Service-pagina's (privacy/cookies/over/contact, M5) ============== */

/* Leeskolom links uitgelijnd op de container-rand (niet gecentreerd), zodat
   de titel op één lijn staat met álle andere paginatypes — DESIGN.md §5.
   De volle .container blijft; de inhoud capt op leesbreedte, links. */
.service-page {
  margin-bottom: var(--space-2xl);
}

.service-page > * {
  max-width: var(--content-max-prose);
}

.service-page h2 {
  font-size: var(--size-h3-featured);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.service-page h3 {
  font-size: var(--size-h4-grid);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.service-page p,
.service-page ul,
.service-page ol,
.service-page dl {
  margin-bottom: var(--space-md);
}

.service-page ul,
.service-page ol {
  padding-left: 1.25rem;
}

.service-page li + li {
  margin-top: var(--space-xs);
}

.service-page dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
}

.service-page dt {
  font-weight: 600;
  color: var(--color-text);
}

.service-page dd {
  margin: 0;
  color: var(--color-text-muted);
}

.service-page__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: var(--size-label-md);
}

.service-page__table th,
.service-page__table td {
  text-align: left;
  padding: var(--space-sm);
  border-bottom: var(--border-light);
  vertical-align: top;
}

.service-page__table th {
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-surface-low);
}

/* Rich-content uit de content-editor: admin-ingevoegde tabellen (zonder class,
 * gesaniteerd tot semantische structuur), citaten, H4 en inline code. Zelfde
 * look als de cookies-tabel, gestuurd door design tokens. */
.service-page h4 {
  font-size: var(--size-h4-grid);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.service-page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: var(--size-label-md);
}

.service-page table th,
.service-page table td {
  text-align: left;
  padding: var(--space-sm);
  border-bottom: var(--border-light);
  vertical-align: top;
}

.service-page table th {
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-surface-low);
}

.service-page blockquote {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
  font-style: italic;
}

.service-page code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9em;
  background-color: var(--color-surface-low);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm, 3px);
}

@media (max-width: 767px) {
  /* Brede tabellen op mobiel horizontaal scrollbaar i.p.v. de pagina te
     laten overlopen. */
  .service-page table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .service-page dl {
    grid-template-columns: 1fr;
  }
  .service-page dt {
    margin-top: var(--space-xs);
  }
}

/* === Error pages ====================================================== */

.error {
  max-width: 42rem;
  margin-bottom: var(--space-2xl);
}

.error h1 {
  font-size: clamp(2rem, 5vw + 0.5rem, var(--size-headline-lg));
  margin-bottom: var(--space-md);
}

/* === Footer (DESIGN.md §5) ============================================ */

.site-footer {
  border-top: var(--border-header-footer);
  padding: var(--space-lg) 0;
  margin-top: var(--space-2xl);
}

.site-footer__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .site-footer__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__brand {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  font-size: var(--size-meta);
  color: var(--color-text-muted);
}

.site-footer__wordmark {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--size-body-md);
  letter-spacing: -0.05em;
  color: var(--color-text);
}

.site-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-md);
}

.site-footer__nav a {
  font-size: var(--size-label-md);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-default);
}

.site-footer__nav a:hover {
  color: var(--color-text);
}

/* Mobiel: de footer-marge (2xl = 80px) en -padding (lg = 48px) zijn
   desktop-maten. Boven de footer stapelen ze bovenop de site-main-onderruimte
   tot te veel lege ruimte. Inkorten. Staat ná de basisregel hierboven, anders
   wint de basis in de cascade (gelijke specificiteit → laatste bron wint). */
@media (max-width: 767px) {
  .site-footer {
    margin-top: var(--space-lg);
    padding-block: var(--space-md);
  }
}

/* === Submit-page + form-componenten (M2) =================================
 * Wordt gebruikt op /submit en /submit/thanks. Token-driven; geen
 * hardcoded waarden. A11y: zichtbare focus-ring, label-for via macro,
 * aria-invalid op error-state, error-list via role="alert".
 */

.submit-page {
  margin-block-end: var(--space-2xl);
}

.submit-page > * {
  max-width: var(--content-max-prose);
}

.submit-thanks {
  margin-block-end: var(--space-2xl);
}

.submit-thanks > * {
  max-width: var(--content-max-prose);
}

.submit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-field__label,
.form-field > label {
  font-size: var(--size-label-md);
  font-weight: 600;
  color: var(--color-text);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field input[type="file"],
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: var(--size-body-md);
  color: var(--color-text);
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: var(--space-sm);
  transition: border-color var(--transition-default);
  width: 100%;
  box-sizing: border-box;
}

.form-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--color-primary);
}

.form-field--error input,
.form-field--error textarea,
.form-field--error select {
  border-color: var(--color-error);
}

.form-field__hint {
  font-size: var(--size-meta);
  color: var(--color-text-muted);
}

.form-field__errors {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--size-label-md);
  color: var(--color-on-error-container);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-md);
}

.form-fieldset {
  border: var(--border-light);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-fieldset legend {
  font-size: var(--size-label-md);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-inline: var(--space-xs);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-size: var(--size-body-md);
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

/* De canonieke .button / .button--primary-regels staan hierboven
   (sectie "Buttons"). Hier alleen de focus-stijl, die overal op de
   site geldt (WCAG 2.1 AA — zichtbare focus). Eerdere duplicaat-
   definities van .button hier zijn verwijderd; die overschreven de
   canonieke regels en veroorzaakten de afwijkende paarse hover (#16). */
.button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Honeypot — verborgen voor mensen en screenreaders, zichtbaar voor bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Flash-messages */
.flash {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-button);
  margin-block-end: var(--space-md);
  font-size: var(--size-body-md);
}

.flash--success {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.flash--error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

/* === M9 — Search bar + filter block (DESIGN.md §6) ==================== */

.events-discover {
  padding-block-end: var(--space-xl);
}

.events__total {
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
  margin-block: var(--space-sm) var(--space-md);
}

/* Search-bar: sticky boven de listing zodra de hero buiten beeld scrollt. */
.search-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  margin-block: var(--space-md) var(--space-sm);
  background: var(--color-surface-lowest);
  border: var(--border-card);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-bar);
  position: sticky;
  top: var(--space-sm);
  z-index: 10;
}

.search-bar__label {
  /* visueel verbergen, screenreader behoudt; native label gekoppeld */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-body-md);
}

.search-bar__input::placeholder {
  color: var(--color-text-muted);
}

.search-bar__submit,
.filter-block__submit {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-surface-lowest);
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: var(--size-button);
  transition: background var(--transition-default);
}

.search-bar__submit:hover,
.filter-block__submit:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, transparent);
}

/* Filter-block: 1-koloms op mobiel, naast elkaar op breder. */
.filter-block {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-block-end: var(--space-md);
  background: var(--color-surface-low);
  border: var(--border-light);
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .filter-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-block__group--categories,
  .filter-block__actions {
    grid-column: 1 / -1;
  }
}

.filter-block__group {
  border: 0;
  padding: 0;
  margin: 0;
}

.filter-block__legend {
  font-weight: 600;
  font-size: var(--size-label-md);
  margin-block-end: var(--space-xs);
  color: var(--color-text);
}

.filter-block__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-lowest);
  cursor: pointer;
  font-size: var(--size-label-md);
  transition: background var(--transition-default), border-color var(--transition-default);
}

.filter-pill:hover {
  background: var(--color-surface-high);
}

.filter-pill input[type="checkbox"] {
  /* eigen visual via :has — checkbox blijft in DOM voor a11y */
  margin: 0;
}

.filter-pill:has(input:checked) {
  background: var(--color-primary-fixed);
  border-color: var(--color-primary);
  color: var(--color-on-primary-fixed);
}

.filter-block__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-radio,
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-size: var(--size-label-md);
}

.filter-block__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-date {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--size-label-md);
}

.filter-date__label {
  color: var(--color-text-muted);
}

.filter-date input[type="date"] {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface-lowest);
  color: var(--color-text);
  font-size: var(--size-body-md);
}

.filter-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.filter-block__reset {
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.filter-block__reset:hover {
  color: var(--color-text);
}

/* Pagination — "Meer laden"-knop (M9 Fase 5) */
.pagination {
  margin-block-start: var(--space-lg);
  display: flex;
  justify-content: center;
}

.pagination__more {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: var(--size-button);
  color: var(--color-text);
  text-decoration: none;
  transition:
    background var(--transition-default),
    border-color var(--transition-default);
}

.pagination__more:hover {
  background: var(--color-surface-high);
  border-color: var(--color-outline);
}

/* View-toggle + list-variant (M9 Fase 6) ================================ */

.events__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block: var(--space-sm) var(--space-md);
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  overflow: hidden;
}

.view-toggle__btn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--size-label-md);
  background: var(--color-surface-lowest);
  color: var(--color-text);
  border: 0;
  border-right: 1px solid var(--color-border);
}

.view-toggle__btn:last-child {
  border-right: 0;
}

.view-toggle__btn[aria-pressed="true"] {
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
  font-weight: 600;
}

.view-toggle__btn:hover {
  background: var(--color-surface-high);
}

/* event_list_item — compactere variant */
.event-list--compact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-list-item--compact {
  background: var(--color-surface-lowest);
  border: var(--border-card);
  border-radius: var(--radius-button);
  transition: background var(--transition-default);
}

.event-list-item--compact:hover {
  background: var(--color-surface-high);
}

.event-list-item--compact__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-decoration: none;
}

.event-list-item--compact__title {
  flex: 1 1 240px;
  font-weight: 600;
  font-size: var(--size-body-md);
}

.event-list-item--compact__date,
.event-list-item--compact__city,
.event-list-item--compact__format {
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
}

.event-list-item--compact__format {
  text-transform: capitalize;
}

/* Empty-state (M9 Fase 7) */
.empty-state {
  padding: var(--space-md);
  background: var(--color-surface-low);
  border-radius: var(--radius-card);
}

.empty-state__message {
  font-size: var(--size-body-md);
  margin-block-end: var(--space-md);
}

.empty-state__fallback-intro {
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
  margin-block: var(--space-md) var(--space-sm);
}

/* === Like-button (M11 Fase B) ======================================== */

.like-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.like-button__form {
  margin: 0;
}

.like-button__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-light);
  border-radius: var(--radius-button);
  background-color: var(--color-surface-lowest);
  color: var(--color-text);
  font-size: var(--size-button);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-default),
    color var(--transition-default), transform var(--transition-default);
}

.like-button__btn:hover {
  background-color: var(--color-surface-low);
}

.like-button__btn:active {
  transform: scale(0.97);
}

.like-button__btn--liked {
  color: var(--color-error);
  border-color: var(--color-error);
}

.like-button__btn:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.like-button__icon {
  flex-shrink: 0;
}

.like-button__count {
  margin: 0;
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
}

/* === Share-buttons (M11 Fase C) ====================================== */

.share-buttons {
  margin-block: var(--space-lg);
}

.share-buttons__title {
  font-family: var(--font-heading);
  font-size: var(--size-body-lg);
  margin: 0 0 var(--space-sm);
}

.share-buttons__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.share-buttons__item {
  margin: 0;
}

.share-buttons__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-light);
  border-radius: var(--radius-button);
  background-color: var(--color-surface-lowest);
  color: var(--color-text);
  font-size: var(--size-button);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-default),
    color var(--transition-default);
}

.share-buttons__btn:hover {
  background-color: var(--color-surface-low);
}

.share-buttons__btn:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Mastodon-dropdown: <details>-disclosure */
.share-buttons__mastodon {
  position: relative;
}

.share-buttons__mastodon > summary {
  list-style: none; /* verbergt de native disclosure-marker */
}

.share-buttons__mastodon > summary::-webkit-details-marker {
  display: none;
}

.share-buttons__mastodon-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--space-xs));
  left: 0;
  min-width: 16rem;
  padding: var(--space-md);
  background-color: var(--color-surface-lowest);
  border: var(--border-light);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.share-buttons__mastodon-panel label {
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
}

.share-buttons__mastodon-panel select,
.share-buttons__mastodon-custom {
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-light);
  border-radius: var(--radius-input, var(--radius-button));
  background-color: var(--color-surface-lowest);
  color: var(--color-text);
  font-size: var(--size-label-md);
}

/* Copy-link: feedback-tooltip in-button */
.share-buttons__btn--copy {
  position: relative;
}

.share-buttons__copy-feedback {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-text);
  color: var(--color-surface-lowest);
  border-radius: var(--radius-button);
  font-size: var(--size-label-md);
  white-space: nowrap;
  pointer-events: none;
}

/* === Speaker-grid (M11 Fase D) ======================================= */

.speaker-grid {
  margin-block: 0;
}

.speaker-grid__title {
  font-family: var(--font-heading);
  font-size: var(--size-h3-featured);
  margin: 0 0 var(--space-md);
}

.speaker-grid__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-sm);
}

.speaker-grid__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--border-card);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-lowest);
}

.speaker-grid__avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.speaker-grid__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-high);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--size-label-md);
}

.speaker-grid__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.speaker-grid__name {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.speaker-grid__name a {
  color: inherit;
}

.speaker-grid__role,
.speaker-grid__affiliation {
  margin: 0;
  font-size: var(--size-label-md);
  color: var(--color-text-muted);
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* === Related events (M11 Fase E) ===================================== */

.related-events {
  margin-block: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-light);
}

.related-events__title {
  font-family: var(--font-heading);
  font-size: var(--size-h3-featured);
  margin: 0 0 var(--space-md);
}

.related-events__list {
  /* Hergebruikt .event-list grid-layout uit lijstweergaven, maar
     forceert max-3-kolommen omdat we maximaal 3 cards tonen. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}