/* ============================================
   KVvV — main.css
   Globale stijl + component-styles voor ACF blocks
   ============================================ */

/* =========================================================
   BREADCRUMB — single-evenement.php
   ========================================================= */

.kvvv-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  padding: 14px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--text-muted);
}

.kvvv-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.kvvv-breadcrumb a:hover {
  color: var(--wp--preset--color--brand-green-dark);
  text-decoration: underline;
}

.kvvv-breadcrumb__current {
  color: var(--wp--preset--color--text);
}

/* =========================================================
   NAVBAR — Bootstrap-style header (eigen impl, geen Bootstrap import)
   Pattern: logo + brand-text links · 3-streep toggle rechts · collapsible nav
   Mobile (<900px): nav collapsed, toggle visible
   Desktop (>=900px): nav inline, toggle hidden, CTA-knop zichtbaar
   ========================================================= */

/* FSE wrapper rond site-header verwijderen uit layout. Anders zit .kvvv-navbar
   in een korte parent die geen scroll-room geeft, en breekt position:sticky.
   display:contents houdt semantiek (header-tag), maar negeert layout-box. */
header.wp-block-template-part { display: contents; }

.kvvv-navbar {
  position: sticky;
  /* WP admin-bar-aware offset (32px wanneer ingelogd, 46px op mobile, 0 anders) */
  top: var(--wp-admin--admin-bar--position-offset, 0px);
  z-index: 100;
  /* iOS Safari rendert een position:sticky element MÉT backdrop-filter achter
     de gescrollde content (compositing-bug). Daarom staat de blur + achtergrond
     op ::before (position:absolute, niet-sticky); het sticky-element zelf blijft
     filter-vrij en compositeert correct bóven de content.
     translateZ(0) forceert een eigen GPU-laag én houdt — net als de oude
     backdrop-filter — de navbar als containing-block voor het fixed megamenu. */
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Animeer scroll-state transitions (bg/blur staan op ::before) */
  transition:
    padding 0.35s cubic-bezier(.2,.7,.3,1),
    box-shadow 0.3s ease;
}
.kvvv-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--paper);
  border-bottom: 1px solid var(--wp--preset--color--border);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Gold accent-sweep onder de header — subtiel, animatie op scroll-state */
.kvvv-navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--wp--preset--color--gold) 30%,
    var(--wp--preset--color--gold) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  transition: opacity 0.4s ease, background-position 1.2s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}

/* SCROLLED STATE — body.is-scrolled wordt door JS gezet bij scrollY > threshold
   Gebruik transform/opacity (GPU-accelerated) ipv width/font-size om
   layout-thrashing en hapering te voorkomen. */
body.is-scrolled .kvvv-navbar {
  box-shadow: 0 6px 24px -8px rgba(31, 40, 32, 0.12);
}
body.is-scrolled .kvvv-navbar::before {
  background: rgba(243, 234, 211, 0.88); /* paper met transparantie */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Brand-lock: transform: scale + transform-origin links zodat het naar logo-positie krimpt */
.kvvv-navbar__brand {
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
}
body.is-scrolled .kvvv-navbar__brand {
  transform: scale(0.82);
}

/* Gold sweep verschijnt bij gescrolld */
body.is-scrolled .kvvv-navbar::after {
  opacity: 1;
  background-position: 100% 0;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .kvvv-navbar,
  .kvvv-navbar::after,
  .kvvv-navbar__brand {
    transition: none !important;
    transform: none !important;
  }
}
/* Body-class: WP voegt 'admin-bar' toe wanneer ingelogd. Forceer offset
   indien CSS-var niet beschikbaar (oudere WP versies). */
body.admin-bar .kvvv-navbar {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .kvvv-navbar {
    top: 46px;
  }
}
/* ≤600px: WordPress rendert de admin-bar als position:absolute (hij scrollt mee
   weg i.p.v. vast bovenaan te blijven). De sticky header moet dan op top:0 plakken,
   anders blijft er een 46px-strook bóven de header staan waar paginacontent
   doorheen lekt bij het scrollen. Geldt alleen ingelogd; uitgelogd is top:0 al. */
@media screen and (max-width: 600px) {
  body.admin-bar .kvvv-navbar {
    top: 0;
  }
}
.kvvv-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 12px;
}

/* --- BRAND (logo + tekst) --- */
.kvvv-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.kvvv-navbar__logo {
  display: block;
  /* Breed logo-lockup: op HOOGTE schalen i.p.v. vaste breedte, zodat het
     groot en leesbaar toont. Breedte volgt de verhouding. */
  width: auto;
  height: 50px;
  flex-shrink: 0;
}
.kvvv-navbar__brand-text {
  /* Naam + slogan staan al ín het logo-lockup → losse tekst verbergen. */
  display: none;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  /* Optical adjustment: kroon op logo trekt geometric center omhoog */
  transform: translateY(2px);
}
.kvvv-navbar__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
}
.kvvv-navbar__tagline {
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-top: 2px;
  /* Optische uitlijning: de Inter 'K'-stam staat een fractie ingesprongen
     t.o.v. de Fraunces 'V'-stam erboven; -1px lijnt de stammen visueel uit. */
  margin-left: -1px;
}

/* --- HAMBURGER TOGGLE (3 streepjes, 44×44 tap-target) --- */
.kvvv-navbar__toggle {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: var(--wp--preset--color--ink);
}
.kvvv-navbar__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.kvvv-navbar__toggle[aria-expanded="true"] .kvvv-navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.kvvv-navbar__toggle[aria-expanded="true"] .kvvv-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}
.kvvv-navbar__toggle[aria-expanded="true"] .kvvv-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.kvvv-navbar__toggle:hover,
.kvvv-navbar__toggle:focus-visible {
  color: var(--wp--preset--color--brand-green-dark);
}

/* --- COLLAPSE / NAV --- */
.kvvv-navbar__collapse {
  flex-basis: 100%;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.kvvv-navbar__collapse.is-open {
  max-height: 100vh;
}
.kvvv-navbar__nav {
  list-style: none;
  margin: 0;
  padding: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kvvv-navbar__item {
  margin: 0;
}
.kvvv-navbar__link {
  display: block;
  padding: 12px 8px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--border);
  transition: color 0.15s ease;
}
.kvvv-navbar__link:hover,
.kvvv-navbar__link:focus-visible,
.kvvv-navbar__link.is-active {
  color: var(--wp--preset--color--brand-green-dark);
}
.kvvv-navbar__cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  margin-top: 12px;
  text-align: center;
}
.kvvv-navbar__cta:hover {
  filter: brightness(0.95);
}
.kvvv-navbar__item--cta {
  margin-top: 4px;
}

/* === Tablet (>= 600px): grotere logo, brand-text ruimer === */
@media (min-width: 600px) {
  .kvvv-navbar__inner { padding-top: 12px; padding-bottom: 12px; gap: 16px; }
  .kvvv-navbar__logo { height: 50px; }
  .kvvv-navbar__title { font-size: 22px; }
  .kvvv-navbar__tagline { font-size: 10px; }
  .kvvv-navbar__brand-text { transform: translateY(3px); }
}

/* === Desktop (>= 900px): nav inline, geen toggle, CTA als button === */
@media (min-width: 900px) {
  .kvvv-navbar__inner {
    flex-wrap: nowrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .kvvv-navbar__logo { height: 56px; }
  .kvvv-navbar__title { font-size: 26px; }
  .kvvv-navbar__tagline { font-size: 11px; }
  .kvvv-navbar__brand-text { transform: translateY(5px); }

  .kvvv-navbar__toggle { display: none; }

  .kvvv-navbar__collapse {
    flex-basis: auto;
    max-height: none !important;
    overflow: visible;
  }
  .kvvv-navbar__nav {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0;
  }
  .kvvv-navbar__link {
    padding: 8px 14px;
    border-bottom: 0;
    border-radius: 8px;
  }
  .kvvv-navbar__link:hover,
  .kvvv-navbar__link:focus-visible,
  .kvvv-navbar__link.is-active {
    background: var(--wp--preset--color--brand-green-light);
    color: var(--wp--preset--color--brand-green-dark);
  }
  .kvvv-navbar__cta {
    margin-top: 0;
    margin-left: 8px;
    padding: 10px 16px;
  }
  .kvvv-navbar__item--cta {
    margin-top: 0;
  }
}

/* === Desktop large (>= 1200px) === */
@media (min-width: 1200px) {
  .kvvv-navbar__logo { height: 64px; }
}

/* =========================================================
   EVENT COLORING PAGE — 2-col image + tekst + download
   Mobile-first: stack verticaal, image bovenaan.
   Tablet+: side-by-side met image links.
   ========================================================= */

.kvvv-event-coloring {
  margin: 36px 0;
}
.kvvv-event-coloring__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.kvvv-event-coloring__image-wrap {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kvvv-event-coloring__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}
.kvvv-event-coloring__text {
  display: flex;
  flex-direction: column;
}
.kvvv-event-coloring__text .eyebrow {
  margin: 0 0 8px;
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-event-coloring__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 14px;
}
.kvvv-event-coloring__intro {
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft);
  margin: 0 0 20px;
}
.kvvv-event-coloring__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: filter 0.15s ease, transform 0.15s ease;
  align-self: flex-start;
  max-width: 100%;
}
.kvvv-event-coloring__btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.kvvv-event-coloring__btn svg {
  flex-shrink: 0;
}
.kvvv-event-coloring__credits {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 12px;
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

@media (min-width: 600px) {
  .kvvv-event-coloring {
    margin: 48px 0;
  }
  .kvvv-event-coloring__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .kvvv-event-coloring__image-wrap {
    aspect-ratio: 2/3;
  }
  .kvvv-event-coloring__intro {
    font-size: 17px;
  }
}

@media (min-width: 900px) {
  .kvvv-event-coloring {
    margin: 64px 0;
  }
  .kvvv-event-coloring__grid {
    grid-template-columns: 520px 1fr;
    gap: 64px;
  }
}

/* =========================================================
   SPONSOR ARCHIVE — Tier-grids + filter + card variants
   Mobile-first.
   ========================================================= */

.kvvv-archive-sponsor .hidden,
.kvvv-archive-sponsor [data-tier-section].hidden {
  display: none !important;
}

/* Filter bar */
.kvvv-sponsor-filter__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.kvvv-sponsor-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kvvv-sponsor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kvvv-sponsor-pill:hover,
.kvvv-sponsor-pill:focus-visible {
  border-color: var(--wp--preset--color--brand-green);
}
.kvvv-sponsor-pill.is-active {
  background: var(--wp--preset--color--brand-green);
  border-color: var(--wp--preset--color--brand-green);
  color: #fff;
}
.kvvv-sponsor-pill--goud.is-active {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}
.kvvv-sponsor-pill--zilver.is-active {
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--ink);
}
.kvvv-sponsor-pill--brons.is-active {
  background: var(--wp--preset--color--brand-orange-light);
  border-color: var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-sponsor-pill__count {
  opacity: 0.85;
  font-weight: 500;
}
.kvvv-sponsor-search {
  display: flex;
  flex: 0 0 auto;
}
.kvvv-sponsor-search__input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--wp--preset--color--paper);
}
.kvvv-sponsor-search__input:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--brand-green);
}

@media (min-width: 720px) {
  .kvvv-sponsor-filter__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .kvvv-sponsor-search { min-width: 240px; }
}

/* Tier sections */
.kvvv-sponsor-tier { margin-bottom: 48px; }
.kvvv-sponsor-tier:last-child { margin-bottom: 0; }
.kvvv-sponsor-tier__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.kvvv-sponsor-tier__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.kvvv-sponsor-tier--goud .kvvv-sponsor-tier__dot   { background: var(--wp--preset--color--gold); }
.kvvv-sponsor-tier--zilver .kvvv-sponsor-tier__dot { background: var(--wp--preset--color--border-strong); }
.kvvv-sponsor-tier--brons .kvvv-sponsor-tier__dot  { background: var(--wp--preset--color--brand-orange); }
.kvvv-sponsor-tier__label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
}
.kvvv-sponsor-tier--goud .kvvv-sponsor-tier__label   { color: var(--wp--preset--color--gold-dark, #8a7124); }
.kvvv-sponsor-tier--brons .kvvv-sponsor-tier__label  { color: var(--wp--preset--color--brand-orange-dark); }

.kvvv-sponsor-tier__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Per-tier kolom-aantal op desktop */
.kvvv-sponsor-tier--goud .kvvv-sponsor-tier__grid   { grid-template-columns: 1fr; }
.kvvv-sponsor-tier--zilver .kvvv-sponsor-tier__grid { grid-template-columns: repeat(2, 1fr); }
.kvvv-sponsor-tier--brons .kvvv-sponsor-tier__grid  { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 600px) {
  .kvvv-sponsor-tier--goud .kvvv-sponsor-tier__grid   { grid-template-columns: repeat(2, 1fr); }
  .kvvv-sponsor-tier--zilver .kvvv-sponsor-tier__grid { grid-template-columns: repeat(3, 1fr); }
  .kvvv-sponsor-tier--brons .kvvv-sponsor-tier__grid  { grid-template-columns: repeat(3, 1fr); }
  .kvvv-sponsor-tier__grid { gap: 16px; }
}

@media (min-width: 900px) {
  .kvvv-sponsor-tier--goud .kvvv-sponsor-tier__grid   { grid-template-columns: repeat(3, 1fr); }
  .kvvv-sponsor-tier--zilver .kvvv-sponsor-tier__grid { grid-template-columns: repeat(4, 1fr); }
  .kvvv-sponsor-tier--brons .kvvv-sponsor-tier__grid  { grid-template-columns: repeat(5, 1fr); }
  .kvvv-sponsor-tier__grid { gap: 20px; }
}

/* Sponsor card */
.kvvv-sponsor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--kvvv-radius-card);
  padding: 24px 16px 18px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.kvvv-sponsor-card:hover,
.kvvv-sponsor-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31,40,32,.08);
  border-color: var(--wp--preset--color--border-strong);
}
.kvvv-sponsor-card__logo {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-bottom: 12px;
}
.kvvv-sponsor-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.kvvv-sponsor-card__logo-placeholder {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--text-muted);
  text-align: center;
}
.kvvv-sponsor-card__name {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.kvvv-sponsor-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
}
.kvvv-sponsor-card--goud .kvvv-sponsor-card__badge {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}
.kvvv-sponsor-card--zilver .kvvv-sponsor-card__badge {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--text-muted);
}
.kvvv-sponsor-card--brons .kvvv-sponsor-card__badge {
  background: var(--wp--preset--color--brand-orange-light);
  color: var(--wp--preset--color--brand-orange-dark);
}

/* Accent rule top on related cards */
.kvvv-sponsor-card--related .kvvv-sponsor-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.kvvv-sponsor-card--related.kvvv-sponsor-card--goud .kvvv-sponsor-card__accent   { background: var(--wp--preset--color--gold); }
.kvvv-sponsor-card--related.kvvv-sponsor-card--zilver .kvvv-sponsor-card__accent { background: var(--wp--preset--color--border-strong); }
.kvvv-sponsor-card--related.kvvv-sponsor-card--brons .kvvv-sponsor-card__accent  { background: var(--wp--preset--color--brand-orange); }

/* Tier empty state */
.kvvv-sponsor-tier__empty {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  background: var(--wp--preset--color--paper);
  border-radius: 12px;
  border: 1px dashed var(--wp--preset--color--border-strong);
}
.kvvv-sponsor-tier__empty p {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 17px;
  margin: 0 0 14px;
}

/* =========================================================
   SPONSOR SINGLE — Hero + related grid
   ========================================================= */
.kvvv-sponsor-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.kvvv-sponsor-hero__logo-card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
}
.kvvv-sponsor-hero__logo-img {
  max-width: 280px;
  margin: 0 auto 14px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kvvv-sponsor-hero__logo-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.kvvv-sponsor-hero__logo-placeholder {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 22px;
  display: block;
  padding: 60px 20px;
}
.kvvv-sponsor-hero__tagline {
  font-family: var(--wp--preset--font-family--fraunces);
  font-style: italic;
  font-size: 14px;
  color: var(--wp--preset--color--text-soft);
  margin: 0 0 6px;
}
.kvvv-sponsor-hero__credit {
  font-size: 11px;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.kvvv-sponsor-hero__info {
  display: flex;
  flex-direction: column;
}
.kvvv-sponsor-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
  align-self: flex-start;
  margin-bottom: 14px;
}
.kvvv-sponsor-badge--goud {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}
.kvvv-sponsor-badge--zilver {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--text-muted);
}
.kvvv-sponsor-badge--brons {
  background: var(--wp--preset--color--brand-orange-light);
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-sponsor-hero__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--wp--preset--color--ink);
}
.kvvv-sponsor-hero__meta {
  font-size: 14px;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 18px;
}
.kvvv-sponsor-hero__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 10px;
}
.kvvv-sponsor-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.kvvv-sponsor-chip {
  display: inline-block;
  padding: 8px 14px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.kvvv-sponsor-chip:hover {
  background: var(--wp--preset--color--brand-green-light);
  border-color: var(--wp--preset--color--brand-green);
}
.kvvv-sponsor-hero__bio {
  margin: 8px 0 22px;
}
.kvvv-sponsor-hero__bio-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--wp--preset--color--ink);
  max-width: 620px;
}
.kvvv-sponsor-hero__website {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  align-self: flex-start;
  transition: filter 0.15s;
}
.kvvv-sponsor-hero__website:hover {
  filter: brightness(1.1);
}

@media (min-width: 800px) {
  .kvvv-sponsor-hero__grid {
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: start;
  }
}

/* Related-sponsors grid */
.kvvv-sponsor-related__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.kvvv-sponsor-related__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  margin: 0;
}
.kvvv-sponsor-related__all {
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--brand-green-dark);
  text-decoration: none;
}
.kvvv-sponsor-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .kvvv-sponsor-related__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.kvvv-sponsor-related__empty {
  text-align: center;
  font-family: var(--wp--preset--font-family--fraunces);
  font-style: italic;
  color: var(--wp--preset--color--text-soft);
  padding: 40px 20px;
  background: var(--wp--preset--color--paper);
  border-radius: 12px;
}

/* =========================================================
   LID ARCHIVE — commissie-secties + cards + filter
   Mobile-first.
   ========================================================= */

.kvvv-archive-lid .hidden,
.kvvv-archive-lid [data-commissie-section].hidden { display: none !important; }

/* WP is-layout-flow zet automatisch block-gap tussen sections; uit voor deze archive
   zodat hero, filter-bar en grid naadloos op elkaar aansluiten (geen body-bg balkje). */
.kvvv-archive-lid {
  --wp--style--block-gap: 0;
}
.kvvv-archive-lid > .kvvv-lid-header,
.kvvv-archive-lid > .kvvv-lid-filter-bar,
.kvvv-archive-lid > .kvvv-lid-grid-wrap {
  margin-top: 0;
  margin-bottom: 0;
}

/* Filter bar — mobile: horizontal swipe-scroll met fade-edges (App Store-style).
   Desktop (≥720px): pills wrappen naar meerdere regels — geen scroll meer.
   Hiërarchie via volgorde: status-filters (all/ereleden/verdienste) eerst, commissies daarna. */
.kvvv-lid-filter-bar {
  position: sticky;
  top: var(--wp-admin--admin-bar--position-offset, 0px);
  z-index: 20;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 16px 0;
}
body.admin-bar .kvvv-lid-filter-bar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .kvvv-lid-filter-bar { top: 46px; }
}
/* Wanneer header óók sticky is, schuif filter-bar onder de header */
body.is-scrolled .kvvv-lid-filter-bar { top: calc( var(--wp-admin--admin-bar--position-offset, 0px) + 60px ); }
body.admin-bar.is-scrolled .kvvv-lid-filter-bar { top: 92px; }

.kvvv-lid-filter__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kvvv-lid-filter__pills-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* Geen extra padding/border — fade-edges via ::before/::after */
}
.kvvv-lid-filter__pills-wrap::before,
.kvvv-lid-filter__pills-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.kvvv-lid-filter__pills-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--wp--preset--color--surface), transparent);
}
.kvvv-lid-filter__pills-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--wp--preset--color--surface), transparent);
}
.kvvv-lid-filter__pills-wrap[data-can-scroll-left="1"]::before { opacity: 1; }
.kvvv-lid-filter__pills-wrap[data-can-scroll-right="1"]::after { opacity: 1; }
.kvvv-lid-filter__pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  /* Geen vertical padding meer — alleen kleine bleed voor focus-rings */
  padding: 0 0 2px;
}
.kvvv-lid-filter__pills::-webkit-scrollbar { display: none; } /* Chromium/Safari */
.kvvv-lid-filter__pills .kvvv-lid-pill {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
/* Visuele scheiding tussen status-pills (eerste 3) en commissie-pills */
.kvvv-lid-filter__pills .kvvv-lid-pill--verdienste {
  margin-right: 8px;
  position: relative;
}
.kvvv-lid-filter__pills .kvvv-lid-pill--verdienste::after {
  content: "";
  position: absolute;
  top: 18%; bottom: 18%;
  right: -4px;
  width: 1px;
  background: var(--wp--preset--color--border);
}
.kvvv-lid-grid-wrap { padding: var(--kvvv-section-py) 0; }
.kvvv-lid-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kvvv-lid-pill:hover,
.kvvv-lid-pill:focus-visible {
  border-color: var(--wp--preset--color--brand-green);
}
.kvvv-lid-pill.is-active {
  background: var(--wp--preset--color--brand-green);
  border-color: var(--wp--preset--color--brand-green);
  color: #fff;
}
.kvvv-lid-pill--erelid.is-active {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}
.kvvv-lid-pill--verdienste.is-active {
  background: var(--wp--preset--color--brand-orange-light);
  border-color: var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-lid-pill__count { opacity: 0.85; font-weight: 500; }
.kvvv-lid-search { display: flex; }
.kvvv-lid-search__input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--wp--preset--color--paper);
}
.kvvv-lid-search__input:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--brand-green);
}
@media (min-width: 720px) {
  .kvvv-lid-filter__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .kvvv-lid-search { min-width: 220px; flex: 0 0 auto; align-self: center; }
  /* Pills wrappen op desktop — geen wheel-scroll meer nodig */
  .kvvv-lid-filter__pills {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    row-gap: 8px;
    scroll-snap-type: none;
  }
  /* Fade-edges niet relevant zonder horizontale overflow */
  .kvvv-lid-filter__pills-wrap::before,
  .kvvv-lid-filter__pills-wrap::after { display: none; }
}

/* Commissie-secties */
.kvvv-lid-commissie { margin-bottom: 48px; }
.kvvv-lid-commissie:last-child { margin-bottom: 0; }
.kvvv-lid-commissie__header {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.kvvv-lid-commissie__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-green);
  align-self: center;
}
.kvvv-lid-commissie--bestuur .kvvv-lid-commissie__dot { background: var(--wp--preset--color--gold); }
.kvvv-lid-commissie--sint-nicolaas .kvvv-lid-commissie__dot { background: #C9710F; }
.kvvv-lid-commissie--sint-martinus .kvvv-lid-commissie__dot { background: #A88636; }
.kvvv-lid-commissie__name {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  margin: 0;
  line-height: 1.2;
}
.kvvv-lid-commissie__count {
  font-size: 13px;
  color: var(--wp--preset--color--text-muted);
}
.kvvv-lid-commissie__desc {
  font-size: 14px;
  color: var(--wp--preset--color--text-soft);
  margin: 0 0 18px;
  line-height: 1.55;
  max-width: 720px;
}
.kvvv-lid-commissie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 520px) { .kvvv-lid-commissie__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 820px) { .kvvv-lid-commissie__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .kvvv-lid-commissie__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.kvvv-lid-commissie__empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  background: var(--wp--preset--color--paper);
  border-radius: 12px;
  border: 1px dashed var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

/* LID CARD */
.kvvv-lid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--kvvv-radius-card);
  padding: 22px 14px 18px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.kvvv-lid-card:hover,
.kvvv-lid-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31,40,32,.08);
  border-color: var(--wp--preset--color--border-strong);
}
.kvvv-lid-card--erelid {
  border-top: 3px solid var(--wp--preset--color--gold);
}
.kvvv-lid-card--verdienste {
  border-top: 3px solid var(--wp--preset--color--brand-orange);
}
.kvvv-lid-card--memoriam {
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--border);
  color: var(--wp--preset--color--text-soft);
}
.kvvv-lid-card--memoriam .kvvv-lid-card__name {
  font-style: italic;
  color: var(--wp--preset--color--text-soft);
}

/* Avatar / initialen */
.kvvv-lid-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wp--preset--color--brand-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.kvvv-lid-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kvvv-lid-card__initials {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 2.25rem;
  color: var(--wp--preset--color--brand-green-dark);
  line-height: 1;
}
.kvvv-lid-card--memoriam .kvvv-lid-card__avatar {
  background: var(--wp--preset--color--paper);
  filter: grayscale(0.6);
}
.kvvv-lid-card__star {
  position: absolute;
  top: 10px; right: 12px;
  color: var(--wp--preset--color--gold);
  font-size: 16px;
  line-height: 1;
}
.kvvv-lid-card__name {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 4px;
}
.kvvv-lid-card__role {
  font-size: 12px;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 6px;
  line-height: 1.4;
}
.kvvv-lid-card__years,
.kvvv-lid-card__memoriam {
  font-size: 11px;
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

/* =========================================================
   LID SINGLE — hero + bio + related
   ========================================================= */
.kvvv-lid-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.kvvv-lid-hero__portrait {
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}
.kvvv-lid-hero__portrait--erelid {
  border-top: 4px solid var(--wp--preset--color--gold);
}
.kvvv-lid-hero__portrait--verdienste {
  border-top: 4px solid var(--wp--preset--color--brand-orange);
}
.kvvv-lid-hero__img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.kvvv-lid-hero__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 7rem);
  border-radius: 8px;
  line-height: 1;
}
.kvvv-lid-hero__info {
  display: flex;
  flex-direction: column;
}
.kvvv-lid-hero__memoriam-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 12px;
}
.kvvv-lid-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.kvvv-lid-chip {
  display: inline-block;
  padding: 6px 12px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.kvvv-lid-chip:hover {
  background: var(--wp--preset--color--brand-green-light);
  border-color: var(--wp--preset--color--brand-green);
}
.kvvv-lid-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  align-self: flex-start;
  margin-bottom: 10px;
}
.kvvv-lid-badge--erelid {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}
.kvvv-lid-badge--verdienste {
  background: var(--wp--preset--color--brand-orange-light);
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-lid-hero__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  color: var(--wp--preset--color--ink);
}
.kvvv-lid-hero__role {
  font-family: var(--wp--preset--font-family--fraunces);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--text-soft);
  margin: 0 0 12px;
}
.kvvv-lid-hero__specialisme,
.kvvv-lid-hero__meta,
.kvvv-lid-hero__lifespan,
.kvvv-lid-hero__email {
  font-size: 14px;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 6px;
}
.kvvv-lid-hero__specialisme-label {
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}
.kvvv-lid-hero__email a {
  color: var(--wp--preset--color--brand-green-dark);
  text-decoration: underline;
}

@media (min-width: 720px) {
  .kvvv-lid-hero__grid {
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
  }
  .kvvv-lid-hero__portrait { margin: 0; }
}

/* Bio + quote */
.kvvv-lid-bio__inner {
  max-width: 800px;
  margin: 0 auto;
}
.kvvv-lid-bio__prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--wp--preset--color--ink);
}
.kvvv-lid-bio__prose p { margin: 0 0 1.2em; }
.kvvv-lid-bio__prose p:first-child::first-letter {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 3.6em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.14em 0 0;
  color: var(--wp--preset--color--brand-green-dark);
}
.kvvv-lid-quote {
  margin: 28px 0 0;
  padding: 8px 0 8px 24px;
  border-left: 4px solid var(--wp--preset--color--gold);
}
.kvvv-lid-quote p {
  font-family: var(--wp--preset--font-family--fraunces);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  margin: 0 0 8px;
}
.kvvv-lid-quote cite {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--wp--preset--color--text-muted);
}

/* Related */
.kvvv-lid-related__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.kvvv-lid-related__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  margin: 0;
}
.kvvv-lid-related__all {
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--brand-green-dark);
  text-decoration: none;
}
.kvvv-lid-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .kvvv-lid-related__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* ===== RESET / BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

body {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ===== FSE footer-layout (hardcoded uit FSE-rendered head) =====
   WP genereert layout-CSS inline tijdens FSE-rendering; bij classic templates
   met block_template_part() komt die te laat om te printen. Daarom hier letterlijk
   de footer-layout-hashes uit parts/footer.html. De oude FSE-header-CSS is
   verwijderd: de site-header loopt volledig via header.php (.kvvv-navbar). */

/* Site-footer layout */
.wp-container-core-group-is-layout-07c4a558 { flex-wrap: nowrap; gap: 10px; }
.wp-container-core-columns-is-layout-f2b4f319 { flex-wrap: nowrap; gap: 2em 40px; }
.wp-container-core-group-is-layout-b585a4aa { justify-content: space-between; }
.wp-container-core-group-is-layout-0b6bc8a4 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; }
.wp-container-core-group-is-layout-0b6bc8a4 > .alignwide { max-width: 1200px; }
.wp-container-core-group-is-layout-0b6bc8a4 .alignfull { max-width: none; }

/* ===== UTILITIES ===== */

/* Bootstrap-container: één bron van waarheid voor sectie-breedte.
   Match WP root-padding-aware alignments (theme.json spacing.md = 24px). */
.kvvv-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--preset--spacing--md, 24px);
  padding-right: var(--wp--preset--spacing--md, 24px);
  box-sizing: border-box;
}

/* Uniform sectie-ritme: neutraliseer de WP block-gap (theme.json 1.5rem = 24px)
   die de is-layout-flow wrapper tussen top-level secties zet. Op pagina-templates
   gaf dat wisselende 0/24px-gaten (alignfull-secties 0, contained 24) en week het
   af van de homepage. Zo komt het verticale ritme op ÁLLE pagina's puur uit de
   section-padding (--kvvv-section-py) en staan secties flush — net als de homepage
   en werkenbijbulthuis.nl. Uitgezonderd de evenement-single (body.single), die
   bewust margin-flow gebruikt voor zijn verhaal-blokken. */
body:not(.single) .kvvv-main > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wp--preset--color--brand-orange-dark);
}

.flourish {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--wp--preset--color--gold); margin: 20px 0;
}
.flourish::before, .flourish::after {
  content: ""; height: 1px; width: 60px;
  background: linear-gradient(to right, transparent, var(--wp--preset--color--gold), transparent);
}

/* ===== HEADER ===== */
.site-header {
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  z-index: 50;
}
.site-header .site-nav a {
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.site-header .site-nav a:hover {
  background: var(--wp--preset--color--brand-green-light);
  color: var(--wp--preset--color--brand-green-dark);
}
.site-header .site-nav a[aria-current="page"] {
  color: var(--wp--preset--color--brand-green-dark);
  background: var(--wp--preset--color--brand-green-light);
  font-weight: 600;
}

/* ===== HERO (ACF block kvvv/hero) ===== */
.kvvv-hero {
  position: relative; overflow: hidden;
  background: var(--wp--preset--gradient--hero-green);
  color: #fff;
}
.kvvv-hero__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 80px 24px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center;
}
@media (max-width: 900px) { .kvvv-hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; } }
.kvvv-hero h1 { color: #fff; margin: 14px 0 16px; }
.kvvv-hero .lead { color: rgba(255,255,255,.9); }
.kvvv-hero__countdown {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--wp--preset--color--brand-blue);
  padding: 7px 16px 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.kvvv-hero__countdown::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp--preset--color--brand-blue);
  box-shadow: 0 0 0 4px rgba(0,156,223,.25);
  animation: kvvv-pulse 2s ease-in-out infinite;
}
@keyframes kvvv-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,156,223,.25); }
  50% { box-shadow: 0 0 0 8px rgba(0,156,223,.05); }
}
@media (prefers-reduced-motion: reduce) {
  .kvvv-hero__countdown::before { animation: none; }
}
.kvvv-hero__meta { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0 28px; font-size: 14px; }
.kvvv-hero__meta-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.92); }
.kvvv-hero__image {
  aspect-ratio: 4/5; max-width: 460px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(201,162,76,.3);
}
.kvvv-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ===== USP STRIP ===== */
.kvvv-usp-strip {
  background: var(--wp--preset--color--ink);
  color: #fff;
  padding: var(--kvvv-section-py) 0;
  border-top: 1px solid rgba(201,162,76,.18);
  border-bottom: 1px solid rgba(201,162,76,.18);
}
.kvvv-usp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.kvvv-usp-item { text-align: center; padding: 0 16px; position: relative; }
.kvvv-usp-item + .kvvv-usp-item::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(201,162,76,.4) 50%, transparent 100%);
}
.kvvv-usp-number {
  font-family: 'Fraunces', serif; font-size: 3.25rem; font-weight: 700;
  line-height: 0.95; letter-spacing: -0.02em;
}
.kvvv-usp-number::after {
  content: ""; display: block; margin: 14px auto 0;
  width: 28px; height: 2px; background: var(--wp--preset--color--gold);
}
.kvvv-usp-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,.72); margin-top: 14px; line-height: 1.4;
}
@media (max-width: 720px) {
  .kvvv-usp-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .kvvv-usp-item + .kvvv-usp-item::before { display: none; }
}

/* ===== EVENT CARDS ===== */
.kvvv-event-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--kvvv-radius-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  text-decoration: none; color: inherit;
}
.kvvv-event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--md);
  border-color: var(--wp--preset--color--brand-green);
}
.kvvv-event-card__image { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--wp--preset--color--brand-green-light); }
.kvvv-event-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kvvv-event-card:hover .kvvv-event-card__image img { transform: scale(1.05); }
.kvvv-event-card__date {
  position: absolute; top: 14px; left: 14px;
  background: var(--wp--preset--color--surface); padding: 8px 12px; border-radius: 10px;
  text-align: center; box-shadow: var(--wp--preset--shadow--md);
  font-family: 'Fraunces', serif; min-width: 52px;
}
.kvvv-event-card__day { font-size: 22px; font-weight: 700; color: var(--wp--preset--color--brand-orange-dark); line-height: 1; display: block; }
.kvvv-event-card__month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--text-muted); margin-top: 2px; display: block; font-family: 'Inter', sans-serif; font-weight: 600; }
.kvvv-event-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }

/* Archief-tile variant */
.kvvv-event-card__image--archive {
  background: var(--wp--preset--color--cream); /* #F8F1DF khaki */
  display: flex;
  align-items: center;
  justify-content: center;
}
.kvvv-event-card__archive-icon {
  color: var(--wp--preset--color--gold); /* #C9A24C */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.kvvv-event-card--archive:hover .kvvv-event-card__archive-icon {
  opacity: 1;
  color: var(--wp--preset--color--gold-dark);
}

/* ===== PROGRAM TIMELINE ===== */
.kvvv-program-timeline {
  border-left: 2px solid var(--wp--preset--color--border-strong);
  margin: 20px 0; padding-left: 22px; position: relative;
}
.kvvv-program-item { position: relative; padding: 10px 0 18px; }
.kvvv-program-item::before {
  content: ""; position: absolute; left: -29px; top: 16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--brand-green);
}
.kvvv-program-item--highlight::before {
  background: var(--wp--preset--color--brand-orange);
  border-color: var(--wp--preset--color--brand-orange);
  box-shadow: 0 0 0 3px var(--wp--preset--color--brand-orange-light);
}
.kvvv-program-time {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--wp--preset--color--brand-orange-dark); margin-bottom: 2px;
}
.kvvv-program-title { font-weight: 600; color: var(--wp--preset--color--ink); margin: 0 0 4px; }
.kvvv-program-desc { font-size: 14px; color: var(--wp--preset--color--text-soft); margin: 0; line-height: 1.6; }

/* Meer info → doorlink naar sub-evenement (in programma-tijdlijn) */
.kvvv-program-meer-info {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-weight: 600; font-size: 0.95rem;
  color: var(--wp--preset--color--brand-green-dark, #4a9b35); text-decoration: none;
}
.kvvv-program-meer-info span { transition: transform 0.15s ease; }
.kvvv-program-meer-info:hover { text-decoration: underline; }
.kvvv-program-meer-info:hover span { transform: translateX(4px); }

/* ===== EVENT STORY (heritage tekstblok, 2-koloms body met drop cap) =====
   Container via .kvvv-container (bootstrap-class). Section heeft alleen
   verticale spacing — horizontale uitlijning komt uit .kvvv-container. */
.kvvv-event-story {
  margin: 48px 0 56px;
}
.kvvv-event-story__head { margin-bottom: 28px; }
.kvvv-event-story__head .eyebrow {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wp--preset--color--brand-green-dark);
  margin: 0 0 10px;
}
.kvvv-event-story__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  margin: 0;
}
.kvvv-gold-rule {
  display: block; width: 48px; height: 3px;
  background: var(--wp--preset--color--gold);
  margin-top: 16px;
}

/* Prose container — 2 kolommen tekst */
.kvvv-event-story__prose {
  column-count: 2;
  column-gap: 44px;
  column-rule: none;
  font-family: 'Inter', sans-serif;
  font-size: 17px; line-height: 1.72;
  color: var(--wp--preset--color--ink);
}
.kvvv-event-story__prose > p {
  margin: 0 0 1.3em;
  break-inside: avoid-column;
}
.kvvv-event-story__prose strong { font-weight: 600; color: var(--wp--preset--color--ink); }
.kvvv-event-story__prose a {
  color: var(--wp--preset--color--brand-green-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.kvvv-event-story__prose a:hover { color: var(--wp--preset--color--brand-green-darker); }
.kvvv-event-story__prose h2,
.kvvv-event-story__prose h3 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--ink);
  margin: 1.4em 0 0.5em;
  break-inside: avoid;
}
.kvvv-event-story__prose h2 { font-size: 1.375rem; }
.kvvv-event-story__prose h3 { font-size: 1.125rem; }

/* Drop cap op de intro — werkt binnen column-flow */
.kvvv-event-story__intro::first-letter {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: 4.2em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.14em 0 0;
  color: var(--wp--preset--color--brand-green-dark);
}

/* Pull quote — overspant beide kolommen */
.kvvv-event-story__quote {
  column-span: all;
  margin: 1.6em 0 0.4em;
  padding: 0.4em 0 0.4em 1.5em;
  border-left: 4px solid var(--wp--preset--color--gold);
  background: transparent;
  break-inside: avoid;
}
.kvvv-event-story__quote p {
  font-family: var(--wp--preset--font-family--fraunces);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4;
  color: var(--wp--preset--color--ink);
  margin: 0;
  max-width: 720px;
}
.kvvv-event-story__quote cite {
  display: block; margin-top: 0.6em;
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: 0.875rem; color: var(--wp--preset--color--text-muted);
}

/* Optionele tekst-CTA onder het verhaal */
.kvvv-event-story__cta {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--brand-green-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.kvvv-event-story__cta:hover,
.kvvv-event-story__cta:focus-visible {
  color: var(--wp--preset--color--brand-green-darker);
  border-bottom-color: currentColor;
}
.kvvv-event-story__cta:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobiel: 1 kolom, drop cap iets kleiner */
@media (max-width: 820px) {
  .kvvv-event-story__prose { column-count: 1; column-gap: 0; }
  .kvvv-event-story__intro::first-letter { font-size: 3.6em; }
}

/* ===== EVENT CALLOUT (thema-band, full-width via alignfull) ===== */
.kvvv-event-callout {
  background: var(--wp--preset--gradient--cta-banner-green, linear-gradient(135deg, #1F2820 0%, #2B3A2D 100%));
  color: #fff;
  padding: 64px 0;
  margin: 56px 0;
}
.kvvv-event-callout__inner {
  text-align: center;
  /* breedte komt uit .kvvv-container — geen eigen max-width meer (Bootstrap-principe) */
}
.kvvv-event-callout .eyebrow {
  color: var(--wp--preset--color--gold);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  margin: 0 0 14px;
}
.kvvv-event-callout__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  line-height: 1.12; color: #fff;
  margin: 0 0 16px;
}
.kvvv-event-callout__body {
  font-family: 'Inter', sans-serif;
  font-size: 18px; line-height: 1.6;
  color: rgba(255,255,255,.92);
  margin: 0 auto 24px;
  max-width: 680px;
}
.kvvv-event-callout__action {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 18px 28px;
  margin-top: 12px;
}
.kvvv-event-callout__action-label {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wp--preset--color--brand-orange-light);
}
.kvvv-event-callout__action-date {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 1.25rem; font-weight: 600; color: #fff;
}
.kvvv-event-callout__cta {
  margin-top: 8px;
  display: inline-block; padding: 10px 18px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  border-radius: 10px; font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.kvvv-event-callout__cta:hover { transform: translateY(-1px); }

/* ===== EVENT HOWTO (5-stappen recept) — mobile-first basis hieronder, breakpoints in MOBILE-OVERRIDES sectie ===== */
.kvvv-event-howto__panel {
  background: var(--wp--preset--color--paper);
}
.kvvv-event-howto__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.kvvv-event-howto__head .eyebrow {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wp--preset--color--gold-dark);
  margin: 0 0 10px;
}
.kvvv-event-howto__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.15;
  color: var(--wp--preset--color--ink);
  margin: 0 0 12px;
}
.kvvv-event-howto__intro {
  font-family: 'Inter', sans-serif; font-size: 16px;
  color: var(--wp--preset--color--text-soft);
  line-height: 1.6; margin: 0;
}
.kvvv-event-howto__steps {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  counter-reset: kvvv-howto;
}
.kvvv-event-howto__step {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 24px 20px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kvvv-event-howto__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31,40,32,.08);
}
.kvvv-event-howto__num {
  width: 40px; height: 40px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 700; font-size: 1.25rem;
  margin-bottom: 16px;
}
.kvvv-event-howto__step-title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  color: var(--wp--preset--color--ink);
  margin: 0 0 8px;
}
.kvvv-event-howto__step-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.55;
  color: var(--wp--preset--color--text-soft);
  margin: 0;
}

/* Responsive: 5 → 2 → 1 kolom */
@media (max-width: 1100px) {
  .kvvv-event-howto__steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .kvvv-event-howto__steps { grid-template-columns: 1fr 1fr; }
  .kvvv-event-howto__panel { padding: 40px 20px; }
}
@media (max-width: 480px) {
  .kvvv-event-howto__steps { grid-template-columns: 1fr; }
}

/* ===== EVENT PHOTO SLIDER ===== */
.kvvv-event-photo-slider {
  margin: 64px 0;
  padding: 56px 0;
  background: var(--wp--preset--color--cream);
}
.kvvv-event-photo-slider__head { text-align: center; margin-bottom: 32px; }
.kvvv-event-photo-slider__head .eyebrow {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wp--preset--color--brand-green-dark);
  margin: 0 0 8px;
}
.kvvv-event-photo-slider__head h2 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2; margin: 0 0 8px;
  color: var(--wp--preset--color--ink);
}
.kvvv-event-photo-slider__credit {
  font-family: 'Inter', sans-serif; font-size: 13px; font-style: italic;
  color: var(--wp--preset--color--text-muted);
  margin: 0;
}

/* ===== ASIDE CARDS (Ontzet sidebar) ===== */
.kvvv-aside-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px; padding: 20px 22px;
}
.kvvv-aside-card h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--wp--preset--color--text-muted);
  font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: 12px;
}
.kvvv-aside-card--primary {
  background: var(--wp--preset--gradient--cta-banner-green);
  color: #fff; border: none;
}
.kvvv-aside-card--primary h4 { color: var(--wp--preset--color--brand-orange-light); }

.kvvv-info-row {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: 14px;
}
.kvvv-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.kvvv-info-row__icon { width: 16px; height: 16px; color: var(--wp--preset--color--brand-green-dark); flex-shrink: 0; margin-top: 3px; }
.kvvv-info-row__label { color: var(--wp--preset--color--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; font-weight: 600; }
.kvvv-info-row__val { color: var(--wp--preset--color--text); font-weight: 500; }

/* ===== PHOTO SLIDER ===== */
.kvvv-photo-slider { position: relative; margin: 20px 0 16px; }
.kvvv-photo-slider .swiper-slide { aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.kvvv-photo-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kvvv-photo-slider .swiper-slide:hover img { transform: scale(1.06); }
.kvvv-photo-slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--wp--preset--color--brand-blue); color: #fff;
  border: none; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--wp--preset--shadow--md);
}
.kvvv-photo-slider__btn--prev { left: -18px; }
.kvvv-photo-slider__btn--next { right: -18px; }

/* ===== CTA BANNER ===== */
.kvvv-cta-banner {
  background: var(--wp--preset--gradient--cta-banner-green);
  color: #fff; border-radius: 16px;
  padding: 56px 48px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
@media (max-width: 760px) { .kvvv-cta-banner { grid-template-columns: 1fr; padding: 36px 24px; } }
.kvvv-cta-banner h2 { color: #fff; }

/* =========================================================
   EVENT HERO — Mobile-first responsive
   Baseline = mobile. Scale up via min-width queries.
   ========================================================= */

.kvvv-event-hero-section {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
}
.kvvv-event-hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.kvvv-event-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(31,40,32,.85) 100%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
}
.kvvv-event-hero__eyebrow {
  color: var(--wp--preset--color--brand-orange-light);
  margin: 0 0 6px;
  font-size: 11px;
}
.kvvv-event-hero__title {
  color: #fff;
  margin: 0;
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.kvvv-event-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.kvvv-event-hero__meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 12px; font-weight: 500; color: #fff;
  /* Voorkom dat een lange label (datum/locatie) buiten het scherm valt:
     pill nooit breder dan de container, tekst wrapt netjes binnen de pill. */
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.kvvv-event-hero__meta-item svg {
  flex-shrink: 0;
}

/* Tablet+ (>= 600px) */
@media (min-width: 600px) {
  .kvvv-event-hero-section {
    aspect-ratio: 16/9;
    border-radius: 14px;
    margin-bottom: 28px;
  }
  .kvvv-event-hero__overlay {
    padding: 28px 32px;
  }
  .kvvv-event-hero__eyebrow {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .kvvv-event-hero__meta {
    gap: 10px;
    margin-top: 18px;
  }
  .kvvv-event-hero__meta-item {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Desktop (>= 900px) — original look, aligned met body container */
@media (min-width: 900px) {
  .kvvv-event-hero-section {
    aspect-ratio: 21/9;
    min-height: 360px;
    max-height: 520px;
    border-radius: 16px;
    margin-bottom: 32px;
  }
  .kvvv-event-hero__overlay {
    padding: 48px;
  }
  .kvvv-event-hero__title {
    max-width: 800px;
  }
  .kvvv-event-hero__meta {
    gap: 14px;
    margin-top: 20px;
  }
}

/* =========================================================
   EVENT-DETAIL BODY BLOCKS — Mobile-first overrides
   Baseline waardes (= mobile) staan in de block-CSS hierboven.
   Hier alleen tablet/desktop SCALE-UP via min-width.
   ========================================================= */

/* Story: 1-koloms baseline (mobile-readable), 2-kolom op tablet+ */
.kvvv-event-story__prose {
  column-count: 1;
  column-gap: 0;
  font-size: 16px;
}
.kvvv-event-story {
  margin: 32px 0 40px;
}
.kvvv-event-story__intro::first-letter {
  font-size: 3.4em;
}

@media (min-width: 820px) {
  .kvvv-event-story__prose {
    column-count: 2;
    column-gap: 44px;
    font-size: 17px;
  }
  .kvvv-event-story {
    margin: 48px 0 56px;
  }
  .kvvv-event-story__intro::first-letter {
    font-size: 4.2em;
  }
}

/* Callout: compact baseline, ruimer op tablet+ */
.kvvv-event-callout {
  padding: 36px 0;
  margin: 36px 0;
}
@media (min-width: 600px) {
  .kvvv-event-callout {
    padding: 48px 0;
    margin: 44px 0;
  }
}
@media (min-width: 900px) {
  .kvvv-event-callout {
    padding: 64px 0;
    margin: 56px 0;
  }
}

/* Howto-panel: compactere padding op mobile */
.kvvv-event-howto {
  margin: 36px 0;
}
.kvvv-event-howto__panel {
  padding: 32px 18px;
  border-radius: 12px;
}
@media (min-width: 600px) {
  .kvvv-event-howto__panel {
    padding: 40px 24px;
    border-radius: 14px;
  }
}
@media (min-width: 900px) {
  .kvvv-event-howto {
    margin: 56px 0;
  }
  .kvvv-event-howto__panel {
    padding: 56px 32px;
    border-radius: 16px;
  }
}

/* Howto-steps grid: 1 col mobile → 2 → 3 → 5 desktop */
.kvvv-event-howto__steps {
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 520px) {
  .kvvv-event-howto__steps {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@media (min-width: 780px) {
  .kvvv-event-howto__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}
@media (min-width: 1100px) {
  .kvvv-event-howto__steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}

/* Photo-slider band: compactere paddings op mobile */
.kvvv-event-photo-slider {
  padding: 36px 0;
  margin: 44px 0;
}
@media (min-width: 600px) {
  .kvvv-event-photo-slider {
    padding: 48px 0;
    margin: 52px 0;
  }
}
@media (min-width: 900px) {
  .kvvv-event-photo-slider {
    padding: 56px 0;
    margin: 64px 0;
  }
}

/* ===== EVENT YEAR TABS (Foto's per editie) ===== */
.kvvv-event-year-tabs {
  background: var(--wp--preset--color--cream, #F8F1DF);
  /* Geen outer margin: het verticale ritme komt — net als bij alle andere secties
     én bij werkenbijbulthuis.nl — uit de section-PADDING. Een losse margin bovenop
     de padding stapelde op tot een lelijke lege band tussen de secties.
     Bewust LICHTERE padding dan de standaard --kvvv-section-py: een fotostrip
     heeft minder verticale lucht nodig dan een tekst-/content-sectie (visuele
     hiërarchie). 28px (mobiel) → 44px (desktop). */
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  margin: 0;
}
.kvvv-event-year-tabs .kvvv-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Compactere interne gaps (was 28/40px) — minder lucht rond de fotoslider. */
  gap: 20px;
}
.kvvv-event-year-tabs__title {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", serif);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  line-height: 1.05;
  color: var(--wp--preset--color--ink, #1F2820);
  text-align: center;
  margin: 0;
}
/* Tab-row */
.kvvv-event-year-tabs__tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  max-width: 100%;
  padding: 4px 16px;
  margin: 0 -16px;
}
.kvvv-event-year-tabs__tabs::-webkit-scrollbar { display: none; }
.kvvv-event-year-tabs__tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  appearance: none;
  background: transparent;
  border: 1px solid #c9bfa2;
  color: #7d887f;
  font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 150ms ease;
}
.kvvv-event-year-tabs__tab:hover {
  border-color: var(--wp--preset--color--brand-green-dark, #4a9b35);
  color: var(--wp--preset--color--ink, #1F2820);
}
.kvvv-event-year-tabs__tab:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green-dark, #4a9b35);
  outline-offset: 2px;
}
.kvvv-event-year-tabs__tab.is-active {
  background: var(--wp--preset--color--brand-green-dark, #4a9b35);
  border-color: var(--wp--preset--color--brand-green-dark, #4a9b35);
  color: #fff;
}
/* Panel + carousel */
.kvvv-event-year-tabs__panel {
  width: 100%;
  max-width: 1200px;
  opacity: 1;
  transition: opacity 200ms ease;
}
.kvvv-event-year-tabs__panel[hidden] { display: none; }
.kvvv-event-year-tabs__panel.is-fading { opacity: 0; }
.kvvv-event-year-tabs__carousel-container {
  /* Slider spant de VOLLE blok-breedte (gelijk aan event-/news-cards). De pijlen
     liggen als overlay op de rand i.p.v. ernaast, zodat de foto's tot de blokrand
     lopen. Fotogrootte blijft gelijk; er passen meer foto's per view (slidesPerView
     opgehoogd in main.js). position:relative = anker voor de absolute pijlen. */
  position: relative;
  width: 100%;
}
.kvvv-event-year-tabs__nav {
  /* Overlay-pijlen: absoluut gepositioneerd op de slider-randen, ingesprongen 8px. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Wit met schaduw zodat de pijl leesbaar is óver de foto's */
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 999px;
  color: var(--wp--preset--color--ink, #1F2820);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(31, 40, 32, 0.22);
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.kvvv-event-year-tabs__nav--prev { left: 8px; }
.kvvv-event-year-tabs__nav--next { right: 8px; }
.kvvv-event-year-tabs__nav:hover {
  background: var(--wp--preset--color--brand-green-dark, #4a9b35);
  border-color: var(--wp--preset--color--brand-green-dark, #4a9b35);
  color: #fff;
}
.kvvv-event-year-tabs__nav:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green-dark, #4a9b35);
  outline-offset: 2px;
}
.kvvv-event-year-tabs__nav.is-disabled,
.kvvv-event-year-tabs__nav[disabled] {
  opacity: 0.4;
  cursor: default;
}
.kvvv-event-year-tabs__slider {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.kvvv-event-year-tabs__slider .swiper-wrapper { align-items: stretch; }
.kvvv-event-year-tabs__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #d9d1bf;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
}
.kvvv-event-year-tabs__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* First photo of active panel = green border (matched Figma 256:2 active highlight) */
.kvvv-event-year-tabs__panel.is-active .kvvv-event-year-tabs__slider .swiper-slide:first-child {
  border-color: var(--wp--preset--color--brand-green-dark, #4a9b35);
}
.kvvv-event-year-tabs__caption { display: none; }
.kvvv-event-year-tabs__credit {
  font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
  font-style: italic;
  font-size: 13px;
  color: #7d887f;
  text-align: center;
  margin: 0;
}
/* Tablet */
@media (min-width: 600px) {
  .kvvv-event-year-tabs__tabs { overflow-x: visible; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; }
}
/* Desktop */
@media (min-width: 1024px) {
  .kvvv-event-year-tabs .kvvv-container { gap: 24px; }
  .kvvv-event-year-tabs__carousel-container { gap: 16px; }
  .kvvv-event-year-tabs__nav { flex: 0 0 52px; width: 52px; height: 52px; }
}
/* Mobile photos: 1 per slide, full-width */
@media (max-width: 599px) {
  .kvvv-event-year-tabs__photo { max-width: none; aspect-ratio: 4 / 3; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kvvv-event-year-tabs__panel,
  .kvvv-event-year-tabs__tab,
  .kvvv-event-year-tabs__nav { transition: none; }
}

/* Programma + sidebar columns: stack op mobile, side-by-side op desktop */
.wp-block-columns.kvvv-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.wp-block-columns.kvvv-container > .wp-block-column {
  width: 100%;
  flex-basis: 100%;
}
@media (min-width: 900px) {
  .wp-block-columns.kvvv-container {
    flex-direction: row;
    gap: 48px;
  }
  .wp-block-columns.kvvv-container > .wp-block-column:last-child {
    flex-basis: 360px;
    max-width: 360px;
  }
}

/* Container side-padding: 16px op kleinste viewport, 24px op tablet+ */
.kvvv-container {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 600px) {
  .kvvv-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ===== STRIP HEADER-TO-HERO GAP =====
   WP voegt blockGap toe tussen template-parts en main, plus padding op
   wp-block-post-content. Voor onze full-bleed hero willen we 0 ruimte
   tussen de cream header en de groene hero. */
.wp-site-blocks,
main.wp-block-group,
main > .entry-content,
main > .wp-block-post-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
main > .entry-content > .alignfull:first-child,
main > .wp-block-post-content > .alignfull:first-child,
main > .entry-content > section[class^="kvvv-"]:first-child,
main > .wp-block-post-content > section[class^="kvvv-"]:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   UI-AUDIT FIXES — 2026-05-24 (theme 0.7.3)
   Mobile-first responsive grids + badge-positioning + event-programma container.
   ========================================================= */

/* events-grid: 1-col mobile → 2-col tablet → 3-col desktop */
.kvvv-events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .kvvv-events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (min-width: 900px) {
  .kvvv-events-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* news-grid: 1-col mobile → 2-col tablet → 3-col desktop */
.kvvv-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 600px) {
  .kvvv-news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 900px) {
  .kvvv-news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* event-programma: section had geen padding/container — fixed */
.kvvv-event-programma-section {
  padding: 32px 0;
}
@media (min-width: 600px) {
  .kvvv-event-programma-section { padding: 48px 0; }
}
@media (min-width: 900px) {
  .kvvv-event-programma-section { padding: 64px 0; }
}
.kvvv-event-programma__heading {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  line-height: 1.15;
  color: var(--wp--preset--color--ink);
  margin: 0 0 24px;
}

/* vereniging-teaser: badge moest responsive worden, anders clipping op smal scherm */
.kvvv-vereniging-teaser__media {
  position: relative;
  padding-bottom: 30px; /* ruimte voor badge die naar beneden uitsteekt */
}
.kvvv-vereniging-teaser__image {
  border-radius: 12px;
  box-shadow: var(--wp--preset--shadow--lg);
  width: 100%;
  height: auto;
  display: block;
}
.kvvv-vereniging-teaser__badge {
  position: absolute;
  bottom: 0;
  right: 16px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  padding: 18px 22px;
  border-radius: 12px;
  box-shadow: var(--wp--preset--shadow--lg);
  max-width: 200px;
}
@media (min-width: 900px) {
  .kvvv-vereniging-teaser__media { padding-bottom: 40px; padding-right: 30px; }
  .kvvv-vereniging-teaser__badge {
    bottom: 0;
    right: 0;
    padding: 24px 28px;
    max-width: 220px;
  }
}
.kvvv-vereniging-teaser__badge-number {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}
.kvvv-vereniging-teaser__badge-super {
  font-size: 1.25rem;
}
.kvvv-vereniging-teaser__badge-label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* =========================================================
   MOBILE-AUDIT FIXES — 2026-05-24 (theme 0.7.5)
   ========================================================= */

/* Vereniging-teaser: 1-col mobile, 2-col ≥900px */
.kvvv-vereniging-teaser {
  padding: var(--kvvv-section-py) 0;
}
.kvvv-vereniging-teaser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .kvvv-vereniging-teaser__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}
.kvvv-vereniging-teaser__title { margin-top: 10px; }
.kvvv-vereniging-teaser__lead {
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft);
  max-width: 65ch;
}
.kvvv-vereniging-teaser__body {
  margin-top: 16px;
  color: var(--wp--preset--color--text-soft);
  max-width: 65ch;
}
.kvvv-vereniging-teaser__cta {
  display: inline-block;
  margin-top: 24px;
  padding: 11px 18px;
  border: 1px solid var(--wp--preset--color--brand-green);
  border-radius: 10px;
  color: var(--wp--preset--color--brand-green-dark);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* Hero CTA: flex-wrap zodat 2 knoppen mooi stacken op mobile */
.kvvv-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 480px) {
  .kvvv-hero__cta > a { width: 100%; text-align: center; }
}

/* Hero countdown: voorkomen dat lange tekst rechts uit pill loopt */
.kvvv-hero__countdown {
  flex-wrap: wrap;
  max-width: 100%;
}

/* Hero content stack: zorgt dat countdown-pill + eyebrow + h1 ELK een eigen rij krijgen
   (zonder dit blijven inline-flex pill en inline eyebrow naast elkaar op één regel). */
.kvvv-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Hero meta: krapper op smal scherm */
@media (max-width: 600px) {
  .kvvv-hero__meta { gap: 12px; }
}

/* CTA banner — alle inline styles vervangen door classes */
.kvvv-cta-section { padding: var(--kvvv-section-py) 0; }
.kvvv-cta-banner__title { color: #fff; margin: 10px 0 0; }
.kvvv-cta-banner__body { color: rgba(255,255,255,.9); margin: 12px 0 20px; }
.kvvv-cta-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kvvv-cta-banner__btn {
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}
.kvvv-cta-banner__btn--primary {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}
.kvvv-cta-banner__btn--ghost {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
@media (max-width: 480px) {
  .kvvv-cta-banner__btn { width: 100%; }
}
.kvvv-cta-banner__amount-wrap { text-align: center; }
.kvvv-cta-banner__amount {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 12vw, 5rem);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  line-height: 1;
}
.kvvv-cta-banner__amount-sub {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  margin-top: 8px;
  line-height: 1.4;
}

/* Photo-slider section + button-position fix op mobile */
.kvvv-photo-section {
  padding: var(--kvvv-section-py) 0;
  /* overflow:hidden verwijderd — het clipte de absolute-positioned nav-knoppen
     die -18px buiten de .kvvv-photo-slider container uitsteken.
     Swiper slides clippen zichzelf al via .swiper-slide { overflow:hidden }. */
  overflow: visible;
}
@media (max-width: 599px) {
  .kvvv-photo-slider__btn--prev { left: 4px; }
  .kvvv-photo-slider__btn--next { right: 4px; }
}

/* USP-strip: krappere padding op heel klein scherm — getallen niet afgekapt */
@media (max-width: 480px) {
  .kvvv-usp-item { padding: 0 8px; }
  .kvvv-usp-number { font-size: 2.5rem; }
}

/* Search-results filter-pills */
.kvvv-search__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kvvv-search__pill:hover,
.kvvv-search__pill:focus-visible {
  border-color: var(--wp--preset--color--brand-green);
  color: var(--wp--preset--color--brand-green-dark);
}
.kvvv-search__pill.is-active {
  background: var(--wp--preset--color--brand-green-dark);
  border-color: var(--wp--preset--color--brand-green-dark);
  color: #fff;
}
.kvvv-search__pill-count {
  opacity: 0.8;
  font-weight: 500;
}

/* ===== ROOT-LEVEL BLOCK SPACING =====
   theme.json zet blockGap 1.5rem tussen alle blocks. Voor onze full-bleed
   marketing-secties willen we GEEN spacing — ze zitten kant-aan-kant.
   Reset margins op alle kvvv-secties die direct in main staan. */
main .kvvv-hero,
main .kvvv-hero-cinematic,
main .kvvv-usp-strip,
main .kvvv-events-section,
main .kvvv-photo-section,
main .kvvv-news-section,
main .kvvv-vereniging-teaser,
main .kvvv-cta-section,
.entry-content > section[class^="kvvv-"],
.entry-content > section[class*=" kvvv-"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== FOOTER OVERRIDES =====
   theme.json zet h4/h5 globaal op ink (dark) en links op brand-green-dark.
   Footer heeft donkere bg dus we overrulen voor contrast. */

/* Footer-grid layout — klassiek PHP (niet meer FSE-hash-afhankelijk).
   Reproduceert het WP columns-block gedrag: flex-row op desktop,
   gestapeld op mobiel (< 768px). */
.site-footer .footer-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 2em 40px;
  align-items: flex-start;
}
.site-footer .footer-grid .wp-block-column {
  min-width: 0;
}
@media (max-width: 767px) {
  .site-footer .footer-grid {
    flex-wrap: wrap;
  }
  .site-footer .footer-brand,
  .site-footer .footer-col {
    flex-basis: 100% !important;
  }
}

.site-footer h4,
.site-footer h5,
.site-footer .wp-block-heading {
  color: #ffffff !important;
}
.site-footer a {
  color: #a9c19a !important;
  text-decoration: none;
  transition: color .12s;
}
.site-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
.site-footer ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.site-footer ul li { margin-bottom: 8px; }

/* ===== ACCESSIBILITY ===== */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================================
   BLOCK: kvvv-event-program-timeline
   Verticale tijdlijn, dot+lijn layout (V1 Khaki Heritage).
   ============================================================= */
.kvvv-event-program-timeline {
  padding: var(--kvvv-section-py) 0;
  background: var(--wp--preset--color--cream);
}
.kvvv-event-program-timeline__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  margin: 0 0 40px;
}
.kvvv-event-program-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.kvvv-event-program-timeline__list::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: 2px;
  background: var(--wp--preset--color--border-strong); /* #C9BFA2 */
  border-radius: 1px;
}
.kvvv-event-program-timeline__item {
  position: relative;
  padding: 0 0 18px 48px;
  min-height: 44px;
}
.kvvv-event-program-timeline__item:last-child { padding-bottom: 0; }
.kvvv-event-program-timeline__dot {
  position: absolute;
  left: 8px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--gold); /* #C9A24C */
  border: 2px solid var(--wp--preset--color--cream);
  box-shadow: 0 0 0 2px var(--wp--preset--color--gold);
  flex-shrink: 0;
}
.kvvv-event-program-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kvvv-event-program-timeline__time {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--brand-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kvvv-event-program-timeline__item-title {
  font-family: 'Fraunces', serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
  margin: 4px 0 0;
}
.kvvv-event-program-timeline__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft);
  margin: 4px 0 0;
}
@media (max-width: 767px) {
  .kvvv-event-program-timeline { padding: 40px 0; }
  .kvvv-event-program-timeline__list::before { left: 10px; }
  .kvvv-event-program-timeline__item { padding-left: 40px; }
  .kvvv-event-program-timeline__dot { left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .kvvv-event-program-timeline *,
  .kvvv-event-program-timeline *::before,
  .kvvv-event-program-timeline *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================
   BLOCK: kvvv-event-sponsor-grid
   4-koloms logo-grid, khaki tile-achtergrond.
   ============================================================= */
.kvvv-event-sponsor-grid {
  padding: var(--kvvv-section-py) 0;
  background: var(--wp--preset--color--paper);
}
.kvvv-event-sponsor-grid__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  margin: 0 0 32px;
  text-align: center;
}
.kvvv-event-sponsor-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.kvvv-event-sponsor-grid__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px;
  background: var(--wp--preset--color--cream); /* #F8F1DF khaki */
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
a.kvvv-event-sponsor-grid__tile:hover,
a.kvvv-event-sponsor-grid__tile:focus-visible {
  border-color: var(--wp--preset--color--border-strong);
  box-shadow: 0 2px 8px rgba(31, 40, 32, 0.08);
  outline: none;
}
a.kvvv-event-sponsor-grid__tile:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-green);
  outline-offset: 2px;
}
.kvvv-event-sponsor-grid__logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
.kvvv-event-sponsor-grid__fallback-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--text-soft);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 1023px) and (min-width: 600px) {
  .kvvv-event-sponsor-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .kvvv-event-sponsor-grid { padding: 40px 0; }
  .kvvv-event-sponsor-grid__grid { grid-template-columns: 1fr; }
  .kvvv-event-sponsor-grid__tile { min-height: 72px; }
}

/* =========================================================
   EVENT SONGBOOK — Liedjesboek-download sectie
   2-col: cover links + tekst + PDF-download rechts.
   Zelfde vibe als event-coloring-page (cream, Fraunces, gold btn).
   ========================================================= */

.kvvv-event-songbook {
  margin: 36px 0;
}
.kvvv-event-songbook__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.kvvv-event-songbook__image-wrap {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kvvv-event-songbook__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kvvv-event-songbook__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--border);
}
.kvvv-event-songbook__text {
  display: flex;
  flex-direction: column;
}
.kvvv-event-songbook__text .eyebrow {
  margin: 0 0 8px;
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-event-songbook__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 14px;
}
.kvvv-event-songbook__intro {
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft);
  margin: 0 0 20px;
}
.kvvv-event-songbook__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: filter 0.15s ease, transform 0.15s ease;
  align-self: flex-start;
  max-width: 100%;
}
.kvvv-event-songbook__btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.kvvv-event-songbook__btn:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}
.kvvv-event-songbook__btn svg {
  flex-shrink: 0;
}
.kvvv-event-songbook__credit {
  margin-top: 16px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 12px;
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

@media (min-width: 600px) {
  .kvvv-event-songbook {
    margin: 48px 0;
  }
  .kvvv-event-songbook__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .kvvv-event-songbook__intro {
    font-size: 17px;
  }
}

@media (min-width: 900px) {
  .kvvv-event-songbook {
    margin: 64px 0;
  }
  .kvvv-event-songbook__grid {
    grid-template-columns: 460px 1fr;
    gap: 64px;
  }
}

/* =========================================================
   EVENT ARCHIVE VIDEO — YouTube/Vimeo embed met lazy thumbnail
   Heritage-tone, full-width embed, cream header-balk.
   ========================================================= */

.kvvv-event-archive-video {
  margin: 36px 0;
}
.kvvv-event-archive-video__header {
  max-width: 680px;
  margin-bottom: 24px;
}
.kvvv-event-archive-video__header .eyebrow {
  margin: 0 0 8px;
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-event-archive-video__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 12px;
}
.kvvv-event-archive-video__intro {
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft);
  margin: 0;
}
/* Aspect-ratio wrapper: 16:9 */
.kvvv-event-archive-video__iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.kvvv-event-archive-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Thumbnail + play-button variant */
.kvvv-event-archive-video__thumb-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border);
  cursor: pointer;
}
.kvvv-event-archive-video__thumb {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.kvvv-event-archive-video__thumb-wrap:hover .kvvv-event-archive-video__thumb {
  transform: scale(1.02);
}
.kvvv-event-archive-video__play-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.kvvv-event-archive-video__play-btn:hover svg circle {
  fill: rgba(0,0,0,0.80);
}
.kvvv-event-archive-video__play-btn:focus-visible {
  outline: 3px solid var(--wp--preset--color--gold);
  outline-offset: -4px;
}
.kvvv-event-archive-video__player {
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .kvvv-event-archive-video {
    margin: 48px 0;
  }
}
@media (min-width: 900px) {
  .kvvv-event-archive-video {
    margin: 64px 0;
  }
}

/* =========================================================
   EVENT FAN ART — Gallerij-grid met repeater items
   Masonry-achtig grid, cream achtergrond, Fraunces kop.
   ========================================================= */

.kvvv-event-fan-art {
  margin: 36px 0;
  padding: 40px 0;
  background: var(--wp--preset--color--paper);
}
.kvvv-event-fan-art__header {
  max-width: 680px;
  margin-bottom: 32px;
}
.kvvv-event-fan-art__header .eyebrow {
  margin: 0 0 8px;
  color: var(--wp--preset--color--brand-orange-dark);
}
.kvvv-event-fan-art__title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 12px;
}
.kvvv-event-fan-art__intro {
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft);
  margin: 0;
}
/* Gallery grid — equal-height cards */
.kvvv-event-fan-art__gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.kvvv-event-fan-art__item {
  margin: 0;
}
.kvvv-event-fan-art__figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  overflow: hidden;
  height: 100%; /* equal heights */
  display: flex;
  flex-direction: column;
}
.kvvv-event-fan-art__img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.kvvv-event-fan-art__caption {
  padding: 8px 12px 10px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--wp--preset--color--text-soft);
  font-style: italic;
  margin: auto 0 0;
}
/* Footer: credits + submit btn */
.kvvv-event-fan-art__footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.kvvv-event-fan-art__credit {
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 12px;
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
  margin: 0;
  flex: 1 1 200px;
}
.kvvv-event-fan-art__submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--inter), 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid var(--wp--preset--color--gold);
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.kvvv-event-fan-art__submit-btn:hover {
  background: var(--wp--preset--color--gold);
  transform: translateY(-1px);
}
.kvvv-event-fan-art__submit-btn:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}
.kvvv-event-fan-art__submit-btn svg {
  flex-shrink: 0;
}

@media (min-width: 600px) {
  .kvvv-event-fan-art {
    margin: 48px 0;
    padding: 56px 0;
  }
  .kvvv-event-fan-art__gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (min-width: 900px) {
  .kvvv-event-fan-art {
    margin: 64px 0;
    padding: 72px 0;
  }
  .kvvv-event-fan-art__gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ==========================================================================
   HERO CINEMATIC
   Full-width image hero — 735 px, dark bottom gradient, left-aligned content.
   ========================================================================== */

/* ── Custom properties ────────────────────────────────────────────────────── */
.kvvv-hero-cinematic {
  --kvvv-hc-overlay: 0.60;         /* overridden inline from ACF overlay_opacity */
  --kvvv-hc-height: min(80vh, 600px);
  --kvvv-hc-content-pad: 24px;
  /* H1 schaalt vloeiend van 2.5rem (mobile) → 6.5rem (1440px+).
     Was clamp(2.5, 10vw, 5rem) wat op laptop te klein bleef + harde 104px op ≥900 wat te groot was. */
  --kvvv-hc-h1-size: clamp(2.5rem, 7.5vw, 6.5rem);
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.kvvv-hero-cinematic {
  position: relative;
  width: 100%;
  height: var(--kvvv-hc-height);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* alignfull margin reset handled by existing main rule below */
}

/* ── Image ────────────────────────────────────────────────────────────────── */
.kvvv-hero-cinematic__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 55% = focus op midden-onder zodat key-subject (re-enactors) in beeld komt */
  object-position: center 55%;
  z-index: 0;
}

/* Fallback: cream gradient when no image is set */
.kvvv-hero-cinematic__image--fallback {
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--paper, #faf8f4) 0%,
    var(--wp--preset--color--cream, #f2ede3) 100%
  );
}

/* ── Cinematic gradient overlay ───────────────────────────────────────────── */
.kvvv-hero-cinematic__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, calc(var(--kvvv-hc-overlay) * 0.17)) 0%,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, calc(var(--kvvv-hc-overlay) * 0.17)) 50%,
    rgba(0, 0, 0, calc(var(--kvvv-hc-overlay) * 0.75)) 72%,
    rgba(0, 0, 0, calc(var(--kvvv-hc-overlay) * 1.25)) 88%,
    rgba(0, 0, 0, calc(var(--kvvv-hc-overlay) * 1.53)) 100%
  );
  pointer-events: none;
}

/* ── Side vignettes ───────────────────────────────────────────────────────── */
.kvvv-hero-cinematic__vignette {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px; /* mobile: smaller */
  z-index: 2;
  pointer-events: none;
  display: none; /* hidden on mobile, shown at 900px */
}
.kvvv-hero-cinematic__vignette--left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.30), transparent);
}
.kvvv-hero-cinematic__vignette--right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.30), transparent);
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.kvvv-hero-cinematic__content {
  position: relative;
  z-index: 3;
  padding-top: var(--kvvv-hc-content-pad);
  padding-bottom: 40px;
  /* max-width niet zetten hier — de .kvvv-container class doet dat (1200px) */
}

/* Eyebrow */
.kvvv-hero-cinematic__eyebrow {
  margin: 0 0 14px;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #d4b566; /* iets lichter goud voor betere contrast op donkere image */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}

/* H1 */
.kvvv-hero-cinematic__title {
  margin: 0 0 20px;
  font-family: var(--wp--preset--font-family--fraunces, 'Fraunces', serif);
  font-size: var(--kvvv-hc-h1-size);
  font-weight: 700;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.40);
}

/* Lead */
.kvvv-hero-cinematic__lead {
  margin: 0 0 28px;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.5);
  max-width: 100%;
}

/* CTAs wrapper */
.kvvv-hero-cinematic__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Both CTA variants share base */
.kvvv-hero-cinematic__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  min-height: 48px;
  border-radius: 6px;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.12s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* Focus-visible for keyboard / a11y */
.kvvv-hero-cinematic__cta:focus-visible {
  outline: 3px solid #c9a24c;
  outline-offset: 3px;
}

/* Primary CTA — orange */
.kvvv-hero-cinematic__cta--primary {
  background: #ed8a1e;
  color: #ffffff;
  border: 2px solid #ed8a1e;
  box-shadow: 0 4px 16px rgba(237, 138, 30, 0.35);
}
.kvvv-hero-cinematic__cta--primary:hover {
  background: #d97a12;
  border-color: #d97a12;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(237, 138, 30, 0.45);
}
.kvvv-hero-cinematic__cta--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(237, 138, 30, 0.35);
}

/* Ghost CTA — outline white */
.kvvv-hero-cinematic__cta--ghost {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(4px);
}
.kvvv-hero-cinematic__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}
.kvvv-hero-cinematic__cta--ghost:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Margin reset (same pattern as other kvvv sections) ───────────────────── */
main .kvvv-hero-cinematic {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Responsive: tablet (600px+) ─────────────────────────────────────────── */
@media (min-width: 600px) {
  .kvvv-hero-cinematic {
    --kvvv-hc-content-pad: 40px;
  }
  .kvvv-hero-cinematic__lead {
    font-size: 17px;
  }
}

/* ── Responsive: desktop (900px+) ────────────────────────────────────────── */
@media (min-width: 900px) {
  .kvvv-hero-cinematic {
    /*
     * svh = small viewport height (accounts voor browser-chrome zoals adresbalk).
     * 80px = gereserveerde header-hoogte.
     * min() zorgt dat de hero op lange viewports (≥900px hoog) nog steeds 735px is
     * (Figma-spec), maar op kortere laptop-viewports krimpt tot de fold zodat de
     * CTAs altijd boven de vouw blijven.
     * Fallback naar 100vh - 80px voor browsers zonder svh-ondersteuning (Chrome 108-).
     */
    --kvvv-hc-height: min(735px, calc(100vh - 80px));
    --kvvv-hc-height: min(735px, calc(100svh - 80px));
    /* h1-size blijft via clamp uit base — 7.5vw geeft op 1440 = 108px, op 1280 = 96px, op 1024 = 77px */
  }

  /* Content: absolute positioning bottom-left matching Figma */
  .kvvv-hero-cinematic__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* kvvv-container class geeft max-width 1200 + 24px L/R padding */
    padding-bottom: 128px;
  }

  /* H1: line-height proportioneel aan font-size */
  .kvvv-hero-cinematic__title {
    line-height: 1.05;
  }

  /* Lead: max-width from Figma */
  .kvvv-hero-cinematic__lead {
    font-size: 18px;
    line-height: 26px;
    max-width: 680px;
  }

  /* Show side vignettes on desktop */
  .kvvv-hero-cinematic__vignette {
    display: block;
    width: 320px;
  }

  /* CTAs: stack only on narrow, side-by-side on desktop — already flex-wrap handles this */
  .kvvv-hero-cinematic__ctas {
    flex-wrap: nowrap;
  }

  .kvvv-hero-cinematic__cta {
    padding: 18px 28px;
  }
}

/* ── Krappe viewport-hoogte (laptop 600-720px) ────────────────────────────── */
/*
 * Op viewports met weinig hoogte (≥900px breed maar ≤720px hoog, typisch
 * 1024×600 of 1280×720 laptops) reduceert de bottom-padding zodat eyebrow +
 * h1 + lead + CTAs comfortabel in de fold passen.
 * Geen aanpassing aan h1 clamp — die schaalt al correct via vw.
 */
@media (min-width: 900px) and (max-height: 720px) {
  .kvvv-hero-cinematic__content {
    /* 96px tilt content omhoog terwijl CTAs nog boven fold blijven */
    padding-bottom: 96px;
  }

  .kvvv-hero-cinematic__lead {
    margin-bottom: 20px;
  }
}

/* ── Stack CTAs vertically on very small screens ─────────────────────────── */
@media (max-width: 479px) {
  .kvvv-hero-cinematic__ctas {
    flex-direction: column;
    align-items: flex-start;
  }
  .kvvv-hero-cinematic__cta {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   EVENT DETAIL — Mobile breakpoint @max-width 767px
   Figma-ref: frame 482:2 op Ontzet-page (63:2)
   1 template voor Ontzet / Sint Martinus / Sint Nicolaas
   ========================================================= */

@media (max-width: 767px) {

  /* --- Hero: full-width image + dark overlay 45% + bottom-aligned content --- */
  .kvvv-event-hero-section {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    padding: 0;
    /* aspect-ratio uit de base (4/3) MOET hier uit: met een vaste hoogte
       rekent aspect-ratio anders de BREEDTE terug (480 × 4/3 = 640px) →
       section steekt 250px buiten de 390px-container = horizontale overflow.
       width:100% + aspect-ratio:auto houdt 'm op containerbreedte. */
    aspect-ratio: auto;
    width: 100%;
    height: 480px;
    display: flex;
    align-items: flex-end;
  }

  .kvvv-event-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
  }

  /* Dark overlay 45% */
  .kvvv-event-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
  }

  .kvvv-event-hero__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 24px 20px 32px;
    color: #fff;
  }

  .kvvv-event-hero__eyebrow {
    color: var(--wp--preset--color--gold);
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .kvvv-event-hero__title {
    color: #fff;
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.1;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
  }

  /* Meta-chips: wrap-row onder H1 */
  .kvvv-event-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .kvvv-event-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Container op hero-pagina: geen padding-x zodat hero edge-to-edge loopt */
  .kvvv-event-hero-section .kvvv-container,
  .kvvv-container:has(.kvvv-event-hero-section) {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  /* --- Programma: vertical timeline (was 2-col grid op desktop) --- */
  /* event-programma block: hergebruikt .kvvv-program-timeline */
  .kvvv-program-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 40px;
    /* Basis-rail (border-left, regel ~1649) uitzetten: op mobiel tekenen we de rail
       via ::before hieronder. Anders staan er TWEE verticale lijnen naast elkaar. */
    border-left: 0;
  }

  .kvvv-program-timeline::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--wp--preset--color--border-strong);
    border-radius: 1px;
  }

  .kvvv-program-item {
    position: relative;
    padding: 0 0 20px;
    min-height: 44px;
  }

  .kvvv-program-item:last-child {
    padding-bottom: 0;
  }

  /* Dot links op tijdlijn */
  .kvvv-program-item::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wp--preset--color--gold);
    border: 2px solid var(--wp--preset--color--cream);
    box-shadow: 0 0 0 2px var(--wp--preset--color--gold);
  }

  .kvvv-program-item--highlight::before {
    background: var(--wp--preset--color--brand-green);
    box-shadow: 0 0 0 2px var(--wp--preset--color--brand-green);
  }

  .kvvv-program-time {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--wp--preset--color--brand-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }

  .kvvv-program-title {
    font-family: var(--wp--preset--font-family--fraunces), 'Fraunces', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    line-height: 1.3;
    margin-bottom: 2px;
  }

  .kvvv-program-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--wp--preset--color--text-soft);
    margin: 0;
  }

  /* --- Praktisch info (event-sidebar): 4 stacked sub-cards --- */
  .kvvv-event-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .kvvv-aside-card {
    border-radius: 12px;
    padding: 20px;
  }

  /* --- Foto-impressie: horizontal-scroll-slider 160×160 thumbnails --- */
  .kvvv-event-photo-slider .kvvv-photo-slider {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 10px;
    padding-bottom: 4px;
  }

  .kvvv-event-photo-slider .kvvv-photo-slider::-webkit-scrollbar {
    display: none;
  }

  .kvvv-event-photo-slider .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    /* Swiper resets — op mobile native scroll */
    transform: none !important;
    transition: none !important;
    width: auto !important;
  }

  .kvvv-event-photo-slider .swiper-slide {
    flex: 0 0 160px;
    width: 160px !important;
    height: 160px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 !important;
  }

  .kvvv-event-photo-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Verberg Swiper prev/next buttons op mobile — native scroll neemt het over */
  .kvvv-event-photo-slider .kvvv-photo-slider__btn {
    display: none;
  }

  /* --- Sponsors: 3×3 grid (was 6×N op desktop) --- */
  .kvvv-event-sponsor-grid__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .kvvv-event-sponsor-grid__tile {
    min-height: 60px;
    padding: 10px 8px;
  }

  .kvvv-event-sponsor-grid__logo {
    height: 28px;
  }

  /* --- Andere evenementen: 2 cards stacked vertical --- */
  .kvvv-event-callout__grid,
  .kvvv-events-callout__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* --- Share-row: 3 buttons full-width-rij (sidebar card) --- */
  .kvvv-event-aside .kvvv-aside-card:last-child > div[style*="flex"] {
    flex-direction: column;
    gap: 8px;
  }

  .kvvv-event-aside .kvvv-aside-card:last-child a,
  .kvvv-event-aside .kvvv-aside-card:last-child button {
    /* 44px touch-target, full-width */
    min-height: 44px;
    width: 100% !important;
    flex: unset !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  /* A11y: alle interactieve event-detail elementen ≥44×44px */
  .kvvv-event-hero__meta-item {
    min-height: 44px;
  }

  .kvvv-aside-card a,
  .kvvv-aside-card button {
    min-height: 44px;
  }

} /* end @media max-width: 767px */

/* =========================================================
   EMPTY STATE — Leden-filter geen resultaten + newsletter subscribed
   .kvvv-empty-state gebruikt in archive-lid.php + newsletter-form.php
   Lucide-icon 64×64 grey · Fraunces h3 · Inter body · arrow-link
   ========================================================= */

.kvvv-empty-state {
  text-align: center;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.kvvv-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--text-muted, #7D887F);
  flex-shrink: 0;
}

.kvvv-empty-state__icon svg {
  width: 64px;
  height: 64px;
  stroke: currentColor;
}

.kvvv-empty-state__title {
  font-family: var(--wp--preset--font-family--fraunces), 'Fraunces', Georgia, serif;
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--wp--preset--color--ink, #1F2820);
  margin: 0;
}

.kvvv-empty-state__body {
  font-family: var(--wp--preset--font-family--inter), 'Inter', Arial, sans-serif;
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: var(--wp--preset--color--text-soft, #4D5A4E);
  margin: 0;
  max-width: 380px;
}

.kvvv-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--wp--preset--font-family--inter), 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--brand-green-dark, #4A9B35);
  text-decoration: none;
  min-height: 44px; /* a11y touch-target */
  padding: 2px 0;
  transition: color 0.15s ease;
}

.kvvv-empty-state__cta:hover,
.kvvv-empty-state__cta:focus-visible {
  color: var(--wp--preset--color--brand-green-darker, #357321);
}

.kvvv-empty-state__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green);
  outline-offset: 2px;
  border-radius: 4px;
}