/*
 * Vak Blauw — thema-stijl.
 * Vlak magazine-design: rubriekbadges, kaarten, koptekst-wordmark, artikel.
 * Kleur-tokens komen uit theme.json (var(--wp--preset--color--*)).
 * Geen schaduwen, nuchtere typografie, mobile-first.
 */

:root {
  --vb-radius: 3px;
  --vb-line: var(--wp--preset--color--line);
  --vb-maxwide: 1200px;
  /* Vak Blauw rendert ALTIJD in lichte modus. theme.json definieert enkel lichte
     kleuren (canvas/ink); een half-donkere modus (alleen enkele componenten
     omgekleurd, achtergrond wit) gaf lichte tekst op wit → onleesbare deelknoppen
     en gids-CTA. color-scheme:light houdt ook browser-UI (formuliervelden,
     scrollbars) licht, ongeacht de OS-voorkeur van de bezoeker. */
  color-scheme: light;
}

/* ─── Wedstrijddag-strook (DEEL A1) ───────────────────────────────── */
.vb-matchday-strook {
  background: var(--wp--preset--color--club-primary, #0044A9);
  color: #fff;
}
.vb-md-binnen {
  max-width: var(--vb-maxwide);
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
}
.vb-md-tekst { font-size: 0.98rem; }
.vb-md-label {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem;
  font-weight: 700; background: rgba(255,255,255,0.18);
  padding: 0.15rem 0.5rem; border-radius: 999px; vertical-align: middle;
}
.vb-md-affiche { font-weight: 700; }
.vb-md-meta { opacity: 0.85; }
.vb-md-knop {
  margin-left: auto; white-space: nowrap;
  background: #fff; color: var(--wp--preset--color--club-primary, #0044A9);
  font-weight: 700; text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 999px;
  font-size: 0.9rem;
}
.vb-md-knop:hover, .vb-md-knop:focus-visible { opacity: 0.92; }
@media (max-width: 560px) {
  .vb-md-knop { margin-left: 0; flex: 1 1 100%; text-align: center; }
}

/* ─── Koptekst / wordmark ─────────────────────────────────────────── */
.wp-block-template-part.vb-header,
.vb-header {
  background-color: var(--wp--preset--color--club-primary);
}

.vb-header a { color: #fff; }

.vb-wordmark .wp-block-site-title,
.vb-wordmark .wp-block-site-title a {
  color: #fff;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

.vb-tagline {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Mobiel: de koptekst kost 123px van een scherm van 760 voordat er ook maar iets
   redactioneels in beeld komt. Wordmark kleiner en strakker gespatieerd (blijft een
   wordmark), motto weg, tagline blijft — die zegt wat de site is.
   LET OP: het motto staat NERGENS anders op de pagina (de regel ".vb-motto (footer)"
   verderop is dood: de voettekst heeft geen motto meer). Onder 600px is het motto dus
   echt weg, niet verplaatst. Wil je het houden, zet het dan in parts/footer.html. */
@media (max-width: 600px) {
  .vb-wordmark .wp-block-site-title,
  .vb-wordmark .wp-block-site-title a {
    /* !important is hier geen luiheid: de site-titel draagt de core-klasse
       .has-x-large-font-size, en WordPress zet die preset zelf met !important
       (font-size: var(--wp--preset--font-size--x-large) !important). Zonder
       !important wint core en blijft de wordmark 26px. */
    font-size: 1.35rem !important;
    letter-spacing: 0.14em;
  }
  .vb-header .vb-motto { display: none; }
}

/* Navigatie in de blauwe balk */
.vb-header .wp-block-navigation {
  --wp--preset--color--ink: #fff;
}
.vb-header .wp-block-navigation a {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}
.vb-header .wp-block-navigation a:hover { color: #fff; }

/* ─── Rubriekbadge ────────────────────────────────────────────────── */
/* Post Terms-block met className "rubriek-badge". Kleur volgt de
 * categorie-slug (redactielijn). Geen caps — nuchter. */
.rubriek-badge {
  margin: 0 0 0.5rem;
  font-size: 0;               /* whitespace tussen links weg */
}
.rubriek-badge a,
.rubriek-badge .wp-block-post-terms__separator { text-decoration: none; }
.rubriek-badge .wp-block-post-terms__separator { display: none; }
.rubriek-badge a {
  display: inline-block;
  background: var(--wp--preset--color--ink);
  color: #fff !important;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.34rem 0.55rem;
  border-radius: var(--vb-radius);
}
.rubriek-badge a:hover { text-decoration: none; opacity: 0.92; }

/* Kleur per redactielijn (categorie-slug). Bron: redactie.lijnen in
 * config/<club>.yaml. "Nieuws" gebruikt de clubkleur → swapt met club #2.
 *
 * LET OP — de badge gebruikt EIGEN, donkerdere tokens voor twee van de drie rubrieken.
 * Wit op de accentkleur haalde AA niet: Achtergrond #D85A30 = 3,87:1 en Data & Cijfers
 * #1D9E75 = 3,39:1, allebei onder de 4,5:1 die 11,5px tekst nodig heeft. De badge-tokens
 * (#C24A22 = 4,89:1 en #158059 = 4,93:1) gelden UITSLUITEND hier.
 * De accentkleuren zelf blijven ongewijzigd — grafieken, lijnen en de oranje
 * 'vandaag'-tijdstempel in VERS (.vb-vers-nu) leunen erop en moeten in huisstijl blijven.
 * Nieuws (#0044A9, 8,75:1) haalt AA op eigen kracht en houdt dus de accentkleur. */
.category-nieuwsdienst .rubriek-badge a,
.rubriek-badge.is-nieuws a       { background: var(--wp--preset--color--rubriek-nieuws); }
.category-data-cijfers .rubriek-badge a,
.rubriek-badge.is-data a         { background: var(--wp--preset--color--rubriek-data-badge, #158059); }
.category-achtergrond .rubriek-badge a,
.rubriek-badge.is-achtergrond a  { background: var(--wp--preset--color--rubriek-achtergrond-badge, #C24A22); }

/* ─── Kaartengrid ─────────────────────────────────────────────────── */
.vb-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.vb-card,
.vb-cardgrid > li {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--vb-line);
  border-radius: var(--vb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.vb-cardgrid { padding-left: 0; }

.vb-card .wp-block-post-featured-image,
.vb-cardgrid .wp-block-post-featured-image {
  margin: 0;
}
.vb-card .wp-block-post-featured-image img,
.vb-cardgrid .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vb-card-body,
.vb-cardgrid .vb-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vb-card .wp-block-post-title,
.vb-cardgrid .wp-block-post-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.22;
  margin: 0;
  letter-spacing: -0.01em;
}
.vb-card .wp-block-post-title a,
.vb-cardgrid .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.vb-card .wp-block-post-title a:hover,
.vb-cardgrid .wp-block-post-title a:hover { color: var(--wp--preset--color--club-primary); }

.vb-card .wp-block-post-excerpt,
.vb-cardgrid .wp-block-post-excerpt {
  margin: 0;
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* korte intro (max 2 regels) */
.vb-card .wp-block-post-excerpt__excerpt,
.vb-cardgrid .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-card .wp-block-post-excerpt .wp-block-post-excerpt__more-text,
.vb-cardgrid .wp-block-post-excerpt .wp-block-post-excerpt__more-text { display: none; }
/* Publicatiedatum onderaan de kaart: rustig, grijs, klein (SEO/vers-signaal). */
.vb-card-datum,
.vb-cardgrid .vb-card-datum {
  margin: 0.5rem 0 0;
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* ─── Hoofdartikel (hero) ─────────────────────────────────────────── */
.vb-hero {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--vb-line);
  border-radius: var(--vb-radius);
  overflow: hidden;
}
.vb-hero .wp-block-post-featured-image { margin: 0; }
.vb-hero .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.vb-hero-body { padding: 1.6rem clamp(1.1rem, 3vw, 2rem) 1.9rem; }
.vb-hero .wp-block-post-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0.4rem 0 0.6rem;
}
.vb-hero .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.vb-hero .wp-block-post-title a:hover { color: var(--wp--preset--color--club-primary); }
.vb-hero .wp-block-post-excerpt { color: var(--wp--preset--color--ink-soft); font-size: 1.1rem; max-width: 46ch; }

/* Sectiekop boven grids/lijnen */
.vb-sectiekop {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink);
  border-top: 2px solid var(--wp--preset--color--club-primary);
  padding-top: 0.5rem;
  margin: 0 0 0.25rem;
}

/* ─── Artikelpagina ───────────────────────────────────────────────── */
.vb-article .rubriek-badge { margin-bottom: 0.75rem; }
.vb-article .wp-block-post-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}
.vb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: baseline;
  color: var(--wp--preset--color--ink-soft);
  font-size: var(--wp--preset--font-size--small);
  margin: 0 0 1.3rem;
}
.vb-meta .wp-block-post-date,
.vb-meta time { color: var(--wp--preset--color--ink-soft); }
.vb-byline { font-weight: 600; color: var(--wp--preset--color--ink); }
.vb-byline .wp-block-post-terms a { color: var(--wp--preset--color--ink); text-decoration: none; }

/* De hero-figure KNIPT NIET MEER. Het blok zet zijn verhouding op de <figure>
   (style="aspect-ratio:16/9"); een bijschrift valt daarmee buiten die box, en met
   overflow:hidden werd het weggeknipt — inclusief de verplichte fotocredit, die dus wél in
   de HTML stond maar voor de lezer onzichtbaar was. Precies de fout die deze regel moet
   voorkomen. De crop en de afronding verhuizen daarom naar het beeld zelf. */
.vb-article .wp-block-post-featured-image {
  margin: 0 0 1.6rem;
  overflow: visible;
  aspect-ratio: auto;
}
.vb-article .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--vb-radius);
}

.vb-article .wp-block-post-content { font-size: 1.075rem; line-height: 1.72; }
.vb-article .wp-block-post-content > * { margin-block: 1.15rem; }
.vb-article .wp-block-post-content h2 { margin-top: 2rem; }

/* Bronnenlijst onderaan */
.vb-bronnen {
  margin-top: 2.5rem;
  border-top: 1px solid var(--vb-line);
  padding-top: 1.1rem;
}
.vb-bronnen h2, .vb-bronnen .vb-bronnen-kop {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 0.5rem;
}
.vb-bronnen ul, .vb-bronnen ol { margin: 0; padding-left: 1.1rem; }
.vb-bronnen li { font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--ink-soft); }
.vb-bronnen li a { word-break: break-word; }
/* Eigen onderzoek: de redactie is zélf de bron (geen externe link). Volgt direct op een
   eventuele "Bronnen:"-regel, dus geen tweede zware bovenrand. */
.vb-bronnen-eigen { font-size: 0.95rem; color: var(--wp--preset--color--ink-soft); }
.vb-bronnen + .vb-bronnen-eigen { margin-top: 0.4rem; border-top: 0; padding-top: 0; }

/* ─── Colofon / prozapagina ───────────────────────────────────────── */
.vb-prose h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  margin-bottom: 0.4rem;
}
.vb-prose .vb-lead { font-size: 1.2rem; color: var(--wp--preset--color--ink-soft); line-height: 1.55; }
.vb-prose h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.vb-prose p, .vb-prose li { line-height: 1.72; }

/* ─── Voettekst ───────────────────────────────────────────────────── */
.vb-footer {
  background: var(--wp--preset--color--surface);
  border-top: 1px solid var(--vb-line);
  color: var(--wp--preset--color--ink-soft);
  font-size: var(--wp--preset--font-size--small);
}
.vb-footer a { color: var(--wp--preset--color--ink-soft); }
.vb-footer a:hover { color: var(--wp--preset--color--club-primary); }
/* Social-regel (merk.socials): iets lucht boven de standregel, links met accent */
.vb-footer .vb-socials { margin-top: 0.5rem; }
.vb-footer .vb-socials a { font-weight: 600; }

/* ─── Pagineringen / knoppen ──────────────────────────────────────── */
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
  text-decoration: none;
}

/* ─── Stadion-silhouet (koptekst-achtergrond, eigen tekening) ──────── */
/* Als background-image i.p.v. een gepositioneerd kind: zo is er geen
 * z-index/stacking-context op de koptekst nodig, en kan het mobiele
 * menu-overlay ongehinderd fullscreen boven alles komen. */
.vb-header {
  background-color: var(--wp--preset--color--club-primary);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2090%20L0%2060%20Q%20300%2040%20600%2042%20Q%20900%2044%201200%2060%20L1200%2090%20Z'%20fill='%23ffffff'%20fill-opacity='0.10'/%3E%3Cpath%20d='M0%2090%20L0%2072%20Q%20600%2058%201200%2072%20L1200%2090%20Z'%20fill='%23ffffff'%20fill-opacity='0.08'/%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.14'%3E%3Crect%20x='150'%20y='20'%20width='5'%20height='46'/%3E%3Crect%20x='132'%20y='16'%20width='41'%20height='7'%20rx='2'/%3E%3Crect%20x='404'%20y='14'%20width='5'%20height='50'/%3E%3Crect%20x='386'%20y='10'%20width='41'%20height='7'%20rx='2'/%3E%3Crect%20x='791'%20y='14'%20width='5'%20height='50'/%3E%3Crect%20x='773'%20y='10'%20width='41'%20height='7'%20rx='2'/%3E%3Crect%20x='1045'%20y='20'%20width='5'%20height='46'/%3E%3Crect%20x='1027'%20y='16'%20width='41'%20height='7'%20rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 34px;
  padding-bottom: 2.3rem !important;
}

/* ─── Mobiel hamburger-menu ───────────────────────────────────────── */
/* Hamburger- en sluitknop: wit en groot op de blauwe balk. */
.vb-header .wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: #fff;
}
.vb-header .wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: currentColor; width: 30px; height: 30px;
}
.vb-header .wp-block-navigation__responsive-container-open { padding: 8px; }

/* Open overlay: vol clubblauw, grote witte items met ruime tikzones.
 * Belangrijk: de navigatie staat op de desktop rechts uitgelijnd
 * (justifyContent:right). In de fullscreen-overlay moet die juist LINKS en
 * vol-breed staan, anders schuift de kolom deels buiten beeld. */
.wp-block-navigation__responsive-container.is-menu-open {
  /* Fullscreen boven alles: de sticky ticker (z-30) en het donkere hero-blok
   * maken eigen stacking contexts; forceer daarom fixed + hoge z-index. */
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  background-color: var(--wp--preset--color--club-primary) !important;
  padding: 4.75rem 0 2rem;
}
.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
}
.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;        /* vol-breed, geen rechts-uitlijning */
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.is-menu-open .wp-block-navigation-item {
  width: 100%;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.is-menu-open .wp-block-navigation-item a,
.is-menu-open .wp-block-navigation-item__content {
  color: #fff !important;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0.95rem 1.5rem !important;     /* tikzone >44px met nette kantlijn */
}
.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 1.5rem; right: 1.25rem;
}
.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 34px; height: 34px; }

/* ─── Sfeerfoto's (hero + rubriekheader) + bronvermelding ─────────── */
.vb-sfeer-wrap { margin-bottom: 0; }
.vb-sfeer {
  position: relative; margin: 0;
  border-radius: var(--vb-radius); overflow: hidden;
  background: var(--wp--preset--color--club-primary);
}
.vb-sfeer img { display: block; width: 100%; height: auto; }
.vb-sfeer--hero img { aspect-ratio: 21 / 9; object-fit: cover; }
.vb-sfeer--rubriek img { aspect-ratio: 40 / 9; object-fit: cover; }
.vb-fotocredit {
  position: absolute; right: 0; bottom: 0; margin: 0;
  padding: 0.3rem 0.6rem;
  background: rgba(8, 20, 44, 0.64);
  color: #fff; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.01em;
  border-top-left-radius: var(--vb-radius);
}
.vb-fotocredit a { color: #fff; text-decoration: none; }
.vb-fotocredit a:hover { text-decoration: underline; }

/* ─── Clubmotto (voettekst) ───────────────────────────────────────── */
/* Sinds 21 aug weer in gebruik: het motto stond alleen in de koptekst en verdween daar
   onder 600px, dus op telefoons was het van de hele site weg. De lettergrootte komt van
   has-small-font-size op de paragraaf zelf (core zet die preset met !important), zodat
   hij even rustig staat als de disclaimerzin ernaast. */
.vb-motto {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--wp--preset--color--ink-soft);
  margin: 0;
}

/* ─── Wedstrijd-ticker (vast bovenin) ─────────────────────────────── */
.vb-ticker {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #0b1020;   /* strook-navy (maatstaf) — donkerder dan de hero-kaart */
  color: #fff;
}
/* De hele ticker is één <a>: forceer lichte tekst — anders erft hij de
   donkerblauwe link-kleur (#0044a9) en wordt hij onleesbaar op de navy balk
   (#04214f). Wit op #04214f = ~15:1 contrast (ruim WCAG AA). */
.vb-ticker a.vb-ticker-link,
.vb-ticker a.vb-ticker-link:visited,
.vb-ticker a.vb-ticker-link:hover { color: #fff; text-decoration: none; }
.vb-ticker .vb-ticker-inner {
  max-width: var(--vb-maxwide) !important;
  margin-inline: auto;
  padding: 0.4rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #fff;
}
.vb-ticker-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  background: #cfe0fb;                 /* lichte badge; navy tekst = ~13:1 contrast */
  color: var(--wp--preset--color--hero-dark);
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
}
.vb-ticker-duel { font-weight: 700; color: #fff; }
.vb-ticker-duel .vb-vs { opacity: 0.8; padding: 0 0.15rem; }
.vb-ticker-duel .vb-club-kort { display: none; }   /* desktop: volledige clubnaam */
.vb-ticker-link:hover .vb-ticker-duel { text-decoration: underline; }
.vb-ticker-score {
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--wp--preset--color--hero-dark);
  padding: 0.02rem 0.4rem;
  border-radius: 3px;
}
.vb-ticker-meta { color: rgba(255, 255, 255, 0.85); }   /* ~9:1 op #04214f, AA */
.vb-ticker-countdown {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #cfe0fb;                     /* lichtblauw accent, ruim AA op navy */
}

/* Mobiel (≤ 640px): compacte één-regel-ticker — 'PEC — AEK Athene · over 10d'.
   Competitielabel weg (te veel op smal), aftelling schuift direct achter het duel
   met een '·'-scheiding; geen wrap, ellipsis als het duel te lang wordt. */
@media (max-width: 640px) {
  .vb-ticker .vb-ticker-inner {
    flex-wrap: nowrap;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
  }
  .vb-ticker-inner .vb-ticker-meta { display: none; }   /* competitielabel verbergen */
  .vb-ticker-duel .vb-club-lang { display: none; }      /* 'PEC Zwolle' → 'PEC' */
  .vb-ticker-duel .vb-club-kort { display: inline; }
  .vb-ticker-label { flex: none; }
  .vb-ticker-duel {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vb-ticker-countdown { margin-left: 0; flex: none; }
  .vb-ticker-countdown::before { content: "· "; color: rgba(255, 255, 255, 0.6); }
}

/* ─── Donker hero-blok (clubkrant) ────────────────────────────────── */
.vb-heroblok {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--hero-dark);
  color: #fff;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}
/* GEEN SVG-duotone-filter op de hero-foto: een filter op een replaced element
 * (img) — én op de container eromheen — laat object-fit:cover onbetrouwbaar vallen
 * (de foto wordt op sommige breedtes een 'contained' baan met blauwe panelen).
 * Zonder filter dekt cover altijd de volle breedte. De clubtint (duotone-gevoel)
 * komt nu van een donkerblauwe laag onder de foto + het gradient erover. */
.vb-hero-media {
  position: absolute; inset: 0; z-index: 0; margin: 0;
  /* De heroblok heeft een 'constrained' layout: die propt niet-uitgelijnde
     kinderen dicht op contentSize (~720px) en centreert ze → de foto werd een
     smalle band. inset:0 wint dat niet van de geïnjecteerde max-width; expliciet
     terugzetten zodat de foto de VOLLE breedte van de hero dekt. */
  max-width: none; width: auto;
  background: var(--wp--preset--color--hero-dark);
}
.vb-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0.95;   /* foto vrijwel vol zichtbaar; de clubtint komt van het gradient */
  filter: none;
}
.vb-heroblok::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Tekst leesbaar aan de linkerkant; de duotone-foto blijft over de volle
     breedte zichtbaar en vloeit aan de rand + onderkant uit in de clubkleur —
     geen hard vlak blauw blok rechts. Percentages → werkt op elke schermbreedte. */
  /* Doorlopende ramp (geen vlakke zone) → de foto vloeit zacht over in de
     clubkleur, zonder zichtbare naad; links donker genoeg voor de tekst. */
  background:
    linear-gradient(90deg,
      rgba(4, 33, 79, 0.93) 0%,
      rgba(4, 33, 79, 0.80) 26%,
      rgba(4, 33, 79, 0.42) 55%,
      rgba(4, 33, 79, 0.30) 100%),
    linear-gradient(0deg,
      rgba(4, 33, 79, 0.52) 0%,
      rgba(4, 33, 79, 0) 45%);
}
.vb-hero-query, .vb-hero-inner { position: relative; z-index: 2; }
.vb-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.vb-hero-inner > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; }
.vb-hero-inner .rubriek-badge { align-self: flex-start; text-align: left; }
.vb-hero-inner .wp-block-post-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 0.3rem;
  max-width: 18ch;
  text-wrap: balance;
}
.vb-hero-inner .wp-block-post-title a { color: #fff; text-decoration: none; }
.vb-hero-inner .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vb-hero-inner .wp-block-post-excerpt {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  max-width: 52ch;
  margin: 0;
}
.vb-fotocredit--hero, .vb-hero-media .vb-fotocredit { z-index: 3; }

/* ─── Duotone-behandeling voor SFEERFOTO'S ────────────────────────────
 * NAGEREKEND (24 aug 2026) en daarom ingeperkt tot .vb-duotone-img.
 *
 * Het filter maakt eerst grijs en mapt dat daarna op één blauwe ramp. Dat is precies wat
 * je wilt bij een willekeurige stadionfoto: hij komt binnen de huisstijl te liggen. Maar
 * het stond óók op elk UITGELICHT beeld, en 89 van de 92 gepubliceerde stukken dragen daar
 * een door onszelf GEGENEREERDE artikelkaart — in de rubriekkleuren die we bewust aan de
 * redactielijnen hebben gekoppeld. Doorgerekend met de echte filterwaarden:
 *
 *     Data & Cijfers  #1D9E75 (groen)  → #607493
 *     Achtergrond     #D85A30 (oranje) → #6F819E
 *
 * Van het kleurverschil tussen die twee rubrieken bleef 5% over. Het filter wiste dus het
 * enige visuele onderscheid dat de kaarten dragen, en verfde onze eigen huisstijl over met
 * een variant van zichzelf. Een filter dat een foto in de huisstijl trekt, heeft geen werk
 * op een beeld dat al ín de huisstijl is gemaakt.
 *
 * Blijft staan voor .vb-duotone-img: de twee echte sfeerfoto's (homepage-hero-header en
 * rubriekheader), waarvoor het ontworpen is. */
.vb-duotone-img {
  filter: url(#vb-duotone);
}

/* ─── Kerncijfer op datakaarten ───────────────────────────────────── */
/* Wordt alleen door de [vb_kerncijfer]-shortcode uitgevoerd wanneer zowel
 * getal als label zijn ingevuld; anders staat er niets in de media. */
.vb-cardgrid > li { position: relative; }
.vb-card-media { position: relative; margin: 0; }
/* Compacte badge in een vaste hoek (rechtsboven): houdt de scoregraphic (midden)
 * én de kaartcaption (onder de afbeelding) vrij. Backdrop-blur + vlak zodat de
 * tekst leesbaar blijft op elke onderliggende afbeelding. */
.vb-kerncijfer {
  position: absolute;
  bottom: 0.5rem;   /* rechtsONDER: houdt de titel (bovenin) altijd vrij */
  right: 0.5rem;
  top: auto;
  left: auto;
  margin: 0;
  padding: 0.4rem 0.6rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  max-width: 44%;  /* compacte hoekbadge — nooit over de beeldtekst heen */
  background: rgba(4, 33, 79, 0.72);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(4, 33, 79, 0.35);
  pointer-events: none;  /* de featured-image-link eronder blijft klikbaar */
}
.vb-kerncijfer-getal {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 800;
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.vb-kerncijfer-label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.75rem;   /* was 0,62rem = 9,9px, mobiel zelfs 0,58rem = 9,3px */
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: right;
  color: rgba(255, 255, 255, 0.92);
  text-transform: none;
}
/* Mobiel: krappere marges zodat de badge nooit de halve tegel beslaat. De letter gaat
   NIET mee omlaag - 0,58rem was 9,3px. Wie de badge te breed vindt, kort het label in;
   kleiner zetten maakt hem alleen onleesbaar, niet kleiner in betekenis. */
@media (max-width: 600px) {
  .vb-kerncijfer { top: 0.4rem; right: 0.4rem; padding: 0.32rem 0.5rem 0.36rem; max-width: 66%; }
}

/* ─── Motto in de koptekst ────────────────────────────────────────── */
/* GESCOPED op .vb-header. Deze regel stond op de kale .vb-motto en overschreef daarmee
   ook de voettekst-variant hierboven — wit op 72% op een lichte voettekst = onzichtbaar.
   Zolang de voettekst geen motto had viel dat niet op; sinds 21 aug staat hij daar wel. */
.vb-header .vb-motto {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 0.75rem;   /* was 0,72rem = 11,5px; onder 600px staat hij op display:none */
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* ─── Standregel in de footer ─────────────────────────────────────── */
.vb-standregel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  align-items: baseline;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}
.vb-stand-kop {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--wp--preset--color--ink);
}
.vb-stand-regel { color: var(--wp--preset--color--ink-soft); font-variant-numeric: tabular-nums; }

/* ─── Disclaimer op de colofonpagina ──────────────────────────────── */
.vb-disclaimer {
  border-left: 3px solid var(--wp--preset--color--club-primary);
  background: #eef2f8;
  padding: 0.8rem 1rem;
  border-radius: 0 var(--vb-radius) var(--vb-radius) 0;
  font-size: 1rem;
}

/* ─── Mobile-first tweaks ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .vb-hero .wp-block-post-featured-image img { aspect-ratio: 16 / 9; }
  .vb-sfeer--hero img { aspect-ratio: 16 / 9; }
  .vb-sfeer--rubriek img { aspect-ratio: 2 / 1; }
  .vb-ticker-countdown { margin-left: 0; }
  .vb-hero-inner .wp-block-post-title { max-width: 100%; }
}

/* "In het kort"-blok boven het artikel — de pipeline zet het als
   .vb-in-het-kort in de post-inhoud; het thema stijlt het in huisstijl. */
.vb-in-het-kort {
  background: #eef3fb;
  border-left: 5px solid #0044A9;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  font-size: 0.98rem;
}
.vb-in-het-kort-kop {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--kop, Georgia, serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: #0044A9;
}
.vb-in-het-kort ul { margin: 0; padding-left: 1.15rem; }
.vb-in-het-kort li { margin: 0.3rem 0; line-height: 1.45; }

/* Advertentieposities (voorbereiding). Alleen gerenderd als vakblauw_ads_actief
   aan staat; de vaste hoogtes reserveren de ruimte zodat aanzetten geen
   layout-verschuiving (CLS) geeft. Mobiel 320x100 (na-in-het-kort) / 300x250
   (in-artikel), desktop 728x90. Label "Advertentie" conform NL-norm. */
.vb-ad-slot { margin: 1.75rem auto; text-align: center; max-width: 100%; }
.vb-ad-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: #9aa0a6;
  margin-bottom: 0.25rem;
}
.vb-ad-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 320px;
  max-width: 100%;
  height: 100px;                 /* mobiel leaderboard 320x100 */
  background: #f3f4f6;
  border: 1px solid #e4e7eb;
  overflow: hidden;
}
.vb-ad-in-artikel .vb-ad-unit { width: 300px; height: 250px; }   /* mobiel rechthoek */
@media (min-width: 730px) {
  .vb-ad-unit,
  .vb-ad-in-artikel .vb-ad-unit { width: 728px; height: 90px; }  /* desktop leaderboard */
}

/* ── Deelknoppen (WhatsApp / X / Facebook / kopiëren / 'Meer…') — huisstijl,
   kale share-intents, geen extern script/SDK. Merkgekleurde iconen (herkenbaar),
   huisstijl-navy hover (consistent + WCAG-contrast). ── */
.vb-deel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 1.25rem 0; font-size: 0.9rem;
}
.vb-deel-top   { margin: 0.75rem 0 1.5rem; }
.vb-deel-onder { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--vb-line, #e4e7eb); }
.vb-deel-kop {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem;
  font-weight: 700; color: #6b7280; margin-right: 0.1rem;
}
.vb-deel-knop {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; line-height: 1;
  border: 1px solid var(--vb-line, #d7dce2);
  color: #1a2230; background: #fff; text-decoration: none;
  -webkit-appearance: none; appearance: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vb-deel-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
/* iconen dragen de merkkleur zodat ze herkenbaar zijn, ook zonder label */
.vb-deel-wa .vb-deel-ico { color: #25D366; }
.vb-deel-x  .vb-deel-ico { color: #000; }
.vb-deel-fb .vb-deel-ico { color: #1877F2; }
.vb-deel-kopieer .vb-deel-ico, .vb-deel-native .vb-deel-ico { color: var(--wp--preset--color--club-primary, #0044A9); }
/* hover/focus: huisstijl-navy vulling, alles wit (contrast ~8:1) */
.vb-deel-knop:hover, .vb-deel-knop:focus-visible {
  background: var(--wp--preset--color--club-primary, #0044A9);
  border-color: var(--wp--preset--color--club-primary, #0044A9); color: #fff;
}
.vb-deel-knop:hover .vb-deel-ico, .vb-deel-knop:focus-visible .vb-deel-ico { color: #fff; }
.vb-deel-knop:focus-visible { outline: 2px solid var(--wp--preset--color--club-primary, #0044A9); outline-offset: 2px; }
/* 'Gekopieerd!'-bevestiging: groen */
.vb-deel-ok, .vb-deel-ok:hover { background: #1a7f37 !important; border-color: #1a7f37 !important; color: #fff !important; }
.vb-deel-ok .vb-deel-ico { color: #fff !important; }
/* smal (≈390px): 'Delen'-label op eigen regel, pills wrappen; iconen blijven */
@media (max-width: 430px) {
  .vb-deel-kop { flex-basis: 100%; margin-bottom: 0.15rem; }
  .vb-deel-knop { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
}

/* Historische referentie in de ticker: grijs "Toen"-label, nooit als actuele uitslag te lezen */
.vb-ticker-historisch .vb-ticker-label { background: #5b6472; }

/* ── Spelerpagina's & selectie (sessie 10) ─────────────────────────── */
/* Initialen-avatar in clubblauw (geen spelersfoto's — rechten). */
.vb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border-radius: 999px;
  background: var(--wp--preset--color--club-primary);
  color: var(--wp--preset--color--surface);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  line-height: 1;
}

/* Introregel bovenaan een entiteitspagina (speler, trainer, club, stadion, competitie).
   Leesbare lopende zin, geen kader: het statblok eronder is het kader. */
.vb-entiteit-intro {
  margin: .25rem 0 .75rem;
  max-width: 60ch;
  color: var(--wp--preset--color--ink-soft);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
}

/* Interne entiteitslink in de lopende tekst: herkenbaar, maar rustiger dan een bronlink. */
.vb-entiteitlink {
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}

/* Statblok bovenaan de spelerpagina. */
.vb-speler-hero {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--vb-line);
  border-left: 5px solid var(--wp--preset--color--club-primary);
  border-radius: var(--vb-radius);
  padding: 1rem 1.15rem; margin: .25rem 0 1rem;
}
.vb-speler-hero .vb-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
.vb-speler-id { min-width: 0; }
.vb-speler-meta {
  margin: .15rem 0 .5rem; font-weight: 600; color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small);
}
.vb-speler-stat { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: .2rem 0; align-items: baseline; }
.vb-stat-seizoen {
  font-weight: 700; color: var(--wp--preset--color--club-primary);
  font-size: .8rem; min-width: 4.2rem;
}
.vb-speler-stat--vorig .vb-stat-seizoen { color: var(--wp--preset--color--ink-soft); }
.vb-stat-regel { color: var(--wp--preset--color--ink-soft); font-size: .9rem; }

/* Selectiepagina per linie. */
.vb-selectie { display: flex; flex-direction: column; gap: 1.5rem; }
.vb-sel-linie-kop {
  font-family: var(--wp--preset--font-family--serif); font-weight: 700;
  font-size: 1.15rem; margin: 0 0 .5rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--wp--preset--color--club-primary);
}
.vb-sel-lijst { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .9rem; }
.vb-sel-speler {
  display: flex; align-items: center; gap: .6rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--vb-line); border-radius: var(--vb-radius);
  padding: .5rem .65rem; min-width: 0;
}
.vb-sel-nr {
  flex: 0 0 1.6rem; text-align: center; font-weight: 700;
  color: var(--wp--preset--color--club-primary); font-size: .95rem;
}
.vb-sel-speler .vb-avatar { width: 2.2rem; height: 2.2rem; font-size: .8rem; }
.vb-sel-naam { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.vb-sel-naam a { color: var(--wp--preset--color--ink); text-decoration: none; }
.vb-sel-naam a:hover { color: var(--wp--preset--color--club-primary); text-decoration: underline; }
.vb-sel-stat { flex: 0 0 auto; color: var(--wp--preset--color--ink-soft); font-size: .8rem; white-space: nowrap; }
.vb-sel-leeg { color: var(--wp--preset--color--ink-soft); }

/* Zoeken in de kop: vergrootglas-ICOON als laatste item; klik klapt een veld uit. */
.vb-nav-rechts { gap: .5rem; align-items: center; }
.vb-zoek-wrap { position: relative; display: flex; align-items: center; }
.vb-zoek-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer; border-radius: 999px;
  color: rgba(255, 255, 255, .9);        /* zelfde kleur/contrast als de menu-items */
  line-height: 0;
}
.vb-zoek-knop:hover,
.vb-zoek-wrap.is-open .vb-zoek-knop { color: #fff; background: rgba(255, 255, 255, .16); }
.vb-zoek-knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vb-zoek-icoon {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
/* Uitklappaneel: dropt onder het icoon, rechts uitgelijnd. */
.vb-zoek-paneel {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 40;
  background: var(--wp--preset--color--club-primary);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  padding: .3rem .4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.vb-zoek-paneel[hidden] { display: none; }
.vb-zoek-form { display: flex; align-items: center; gap: .2rem; }
.vb-zoek-input {
  background: rgba(255, 255, 255, .14); border: 0; border-radius: 999px;
  color: #fff; padding: .42rem .85rem; font-size: .9rem;
  width: 14rem; max-width: 62vw; min-width: 0;
  font-family: var(--wp--preset--font-family--sans);
}
.vb-zoek-input::placeholder { color: rgba(255, 255, 255, .7); }
.vb-zoek-input:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }
.vb-zoek-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; line-height: 0;
  background: transparent; border: 0; cursor: pointer; border-radius: 999px;
  color: #fff;
}
.vb-zoek-submit:hover { background: rgba(255, 255, 255, .16); }
.vb-zoek-submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
  .vb-sel-lijst { grid-template-columns: 1fr; }
  .vb-speler-hero { flex-direction: column; gap: .6rem; }
  .vb-sel-stat { font-size: .75rem; }
}

/* ── "Leeft op de tribune" (sessie 11) ─────────────────────────────── */
.vb-tribune {
  background: var(--wp--preset--color--hero-donker, #04214f);
  color: var(--wp--preset--color--surface);
  border-radius: var(--vb-radius); padding: 1rem 1.25rem; margin: 0 0 .5rem;
}
.vb-tribune-kop {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 .35rem; opacity: .85; font-weight: 700;
}
.vb-tribune-onderwerp {
  font-family: var(--wp--preset--font-family--serif); font-size: 1.15rem;
  font-weight: 700; margin: 0 0 .35rem; line-height: 1.3;
}
.vb-tribune-antwoord { margin: 0; font-size: .95rem; }
.vb-tribune-antwoord a { color: #cfe0ff; text-decoration: none; font-weight: 600; }
.vb-tribune-antwoord a:hover { text-decoration: underline; }

/* ── Nieuwsbrief opt-in (sessie 12) ────────────────────────────────── */
.vb-nb {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--vb-line);
  border-left: 5px solid var(--wp--preset--color--club-primary);
  border-radius: var(--vb-radius);
  padding: 1.1rem 1.25rem; margin: 2rem 0 1rem;
}
.vb-nb--compact { margin: 2.5rem 0 0.5rem; }
.vb-nb-kop {
  font-family: var(--wp--preset--font-family--serif); font-weight: 700;
  font-size: 1.15rem; margin: 0 0 .25rem;
}
.vb-nb-sub { margin: 0 0 .7rem; color: var(--wp--preset--color--ink-soft); font-size: .95rem; }
.vb-nb-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.vb-nb-row input[type=email] {
  flex: 1 1 240px; min-width: 0; border: 1px solid #8c8f94; border-radius: var(--vb-radius);
  padding: .55rem .7rem; font-size: 1rem;
}
.vb-nb-row button {
  background: var(--wp--preset--color--club-primary); color: #fff; border: 0;
  border-radius: var(--vb-radius); padding: .55rem 1.1rem; font-weight: 600;
  font-size: 1rem; cursor: pointer;
}
.vb-nb-row button:hover { opacity: .92; }
.vb-nb-privacy { margin: .55rem 0 0; font-size: .78rem; color: var(--wp--preset--color--ink-soft); }
.vb-nb-privacy a { color: var(--wp--preset--color--club-primary); }
.vb-nb-melding { margin: 0 0 .7rem; padding: .5rem .7rem; border-radius: var(--vb-radius); font-size: .92rem; }
.vb-nb-check, .vb-nb-bevestigd { background: #eaf6ee; color: #1a5e32; }
.vb-nb-afgemeld, .vb-nb-bestond { background: #f0f0f1; color: #3c434a; }
.vb-nb-fout { background: #fcebec; color: #8a1f2b; }
@media (max-width: 600px) {
  .vb-nb-row input[type=email], .vb-nb-row button { flex: 1 1 100%; }
}

/* Nieuwsbrief — 'opnieuw versturen'-knop (sessie 12b) */
.vb-nb-resend { margin: -.3rem 0 .7rem; }
.vb-nb-resend-knop {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--wp--preset--color--club-primary); font-size: .85rem;
  text-decoration: underline; font-family: inherit;
}
.vb-nb-resend-knop:hover { opacity: .8; }

/* Wedstrijdgids — status (datum + badges) op de hub /wedstrijden/ (sessie 13) */
.vb-gids-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: .5rem 0 0;
}
.vb-gids-datum {
  font-size: .82rem; font-weight: 600; color: var(--wp--preset--color--ink-soft);
  letter-spacing: .01em;
}
.vb-gids-badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1.5;
}

/* ── Wedstrijdgids — presentatie (herontwerp aug 2026) ───────────────── */
/* Breadcrumb bovenaan de gids */
.vb-gids-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--wp--preset--color--ink-soft); margin: 0 0 .6rem;
}
.vb-gids-breadcrumb a {
  color: var(--wp--preset--color--club-primary); text-decoration: none; font-weight: 600;
}
.vb-gids-breadcrumb a:hover { text-decoration: underline; }
.vb-gids-breadcrumb .vb-crumb-sep { opacity: .45; }
.vb-gids-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--ink-soft); }

/* Kruimelpad bovenaan een ARTIKEL (Home › rubriek › titel).
   Bewust ÉÉN REGEL en niet wrappend: dit staat boven de titel, en een kop van tien woorden
   zou als kruimel over drie regels lopen en op mobiel de titel wegduwen. De laatste kruimel
   krimpt met een ellipsis; de volledige tekst blijft in de HTML staan, zodat het zichtbare
   pad hetzelfde zegt als de BreadcrumbList. Home en de rubriek krimpen nooit. */
.vb-breadcrumb {
  display: flex; align-items: center; gap: .4rem; min-width: 0;
  font-size: .8rem; color: var(--wp--preset--color--ink-soft); margin: 0 0 .5rem;
}
.vb-breadcrumb a {
  color: var(--wp--preset--color--club-primary); text-decoration: none; font-weight: 600;
  white-space: nowrap; flex: 0 0 auto;
}
.vb-breadcrumb a:hover { text-decoration: underline; }
.vb-breadcrumb .vb-crumb-sep { opacity: .45; flex: 0 0 auto; }
.vb-breadcrumb .vb-crumb-nu {
  color: var(--wp--preset--color--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* NIET verbergen op mobiel, ook al kost die laatste kruimel daar hoogte. Google rendert
   mobile-first, dus een display:none op de huidige kruimel zou het zichtbare pad precies
   op het belangrijkste scherm laten afwijken van de BreadcrumbList — en dat is het enige
   dat dit hele kruimelpad moest oplossen. De ellipsis houdt het al op één regel, dus de
   titel eronder schuift hoe dan ook niet weg. */

/* 'Bijgewerkt [datum]'-regel onder de titel (vervangt byline + categorie) */
.vb-gids-kop-meta { margin: .1rem 0 1.3rem; }

/* Kernfeiten-tegels: datum · aftrap · stadion · competitie · tv · arbiter */
.vb-kernfeiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .6rem; margin: 0 0 1.6rem; padding: 0; list-style: none;
}
.vb-kf-tegel {
  display: flex; flex-direction: column; gap: .15rem;
  background: #f4f7fb; border: 1px solid var(--vb-line, #e4e9f2);
  border-radius: 10px; padding: .7rem .85rem;
}
.vb-kf-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wp--preset--color--ink-soft);
}
.vb-kf-waarde {
  font-size: .98rem; font-weight: 600; line-height: 1.25;
  color: var(--wp--preset--color--ink);
}

/* Pseudo-tabs: ankerlinks naar de vier H2-secties */
.vb-gids-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.8rem;
  border-bottom: 1px solid var(--vb-line, #e4e9f2);
}
.vb-gids-tabs a {
  font-size: .88rem; font-weight: 600; text-decoration: none;
  color: var(--wp--preset--color--club-primary);
  padding: .45rem .8rem; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vb-gids-tabs a:hover {
  background: #f4f7fb; border-bottom-color: var(--wp--preset--color--club-primary);
}

/* H2-sectiekoppen (scroll-margin voor de anker-sprong onder een sticky header) */
.vb-gids-sectie {
  scroll-margin-top: 5rem; margin-top: 2.4rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--wp--preset--color--club-primary);
}

/* ─── Onderlinge ontmoetingen (H2H, DEEL A2) ──────────────────────── */
.vb-h2h { margin: 2rem 0 1rem; }
.vb-h2h-kop {
  margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--kop, Georgia, serif);
  font-size: 1.15rem; font-weight: 700;
}
.vb-h2h-tabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.vb-h2h-tabel td { padding: 0.45rem 0.6rem; border-top: 1px solid var(--vb-line, #e4e9f2); vertical-align: middle; }
.vb-h2h-datum { white-space: nowrap; color: var(--wp--preset--color--ink-soft); width: 1%; }
.vb-h2h-affiche { font-weight: 600; }
.vb-h2h-uitslag { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-h2h-comp { color: var(--wp--preset--color--ink-soft); text-align: right; white-space: nowrap; }
.vb-h2h-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.vb-h2h-w { background: #2e7d32; }
.vb-h2h-g { background: #9aa0a6; }
.vb-h2h-v { background: #c62828; }
.vb-h2h-bron { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); }
.vb-h2h-bron a { color: var(--wp--preset--color--club-primary, #0044A9); }
@media (max-width: 560px) {
  .vb-h2h-comp { display: none; }
}

/* Kaarten-CTA als echte knop */
.vb-cta { margin: .9rem 0; }
.vb-cta-knop {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--wp--preset--color--club-primary); color: #fff !important;
  font-weight: 700; text-decoration: none; padding: .7rem 1.3rem;
  border-radius: 999px; transition: opacity .15s ease;
}
.vb-cta-knop:hover { opacity: .9; }

/* Voorkeursbron bij Google: dezelfde knopvorm, maar hij mag wrappen op 390px en
   houdt daar een raakdoel van minstens 44px. Geen schaduw (erft niets). */
.vb-voorkeursbron { margin: 2.4rem 0 .5rem; }
.vb-voorkeursbron--voettekst { margin: 1.6rem 0 0; }
.vb-voorkeursbron-actie { margin: 0; }
.vb-voorkeursbron-knop {
  /* border-box, anders telt min-height als CONTENThoogte en wordt de knop 44 + 22,4px. */
  box-sizing: border-box; min-height: 44px;
  max-width: 100%; box-shadow: none;
  justify-content: center; text-align: center;
  white-space: normal; line-height: 1.25;
}
.vb-voorkeursbron-uitleg {
  margin: .55rem 0 0; max-width: 34rem; font-size: .82rem; line-height: 1.5;
  color: var(--wp--preset--color--ink-soft);
}

/* Geconsolideerde bronregel onderaan (vervangt de tien per-blok voetnoten) */
.vb-gids-bronregel {
  margin-top: 2.4rem; padding-top: 1rem;
  border-top: 1px solid var(--vb-line, #e4e9f2); font-style: normal;
}

/* Prominente 'Lees vooruit'-teaser hoog in de gids */
.vb-gids-teaser { margin: 0 0 1.7rem; }
.vb-gids-teaser a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; line-height: 1.3;
  color: var(--wp--preset--color--club-primary);
  background: #f4f7fb; border: 1px solid var(--vb-line, #e4e9f2);
  border-left: 4px solid var(--wp--preset--color--club-primary);
  border-radius: 10px; padding: .75rem 1.1rem;
}
.vb-gids-teaser a:hover { background: #eaf0f9; }

/* Doorklik: 'Verder lezen'/'Warm je op' — kaarten met thumbnails + nieuwsbrief/IG-CTA */
.vb-leesook { display: flex; flex-direction: column; gap: 1.3rem; }
.vb-leesook-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem;
}
.vb-leesook-kaart {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--vb-line, #e4e9f2); border-radius: 12px; overflow: hidden;
  background: var(--wp--preset--color--surface, #fff);
  transition: box-shadow .15s ease, transform .15s ease;
}
.vb-leesook-kaart:hover { box-shadow: 0 6px 18px rgba(4,33,79,.1); transform: translateY(-2px); }
.vb-leesook-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vb-leesook-titel {
  padding: .7rem .85rem; font-weight: 600; font-size: .95rem; line-height: 1.3;
  color: var(--wp--preset--color--ink);
}
.vb-leesook-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.vb-leesook-cta {
  flex: 1 1 210px; display: flex; flex-direction: column; gap: .12rem;
  text-decoration: none; padding: .85rem 1.1rem; border-radius: 12px;
  background: var(--wp--preset--color--hero-donker, #04214f); color: #fff;
  transition: opacity .15s ease;
}
.vb-leesook-cta:hover { opacity: .93; }
.vb-leesook-cta strong { font-size: 1rem; }
.vb-leesook-cta span { font-size: .85rem; opacity: .85; }
.vb-leesook-cta--ig { background: var(--wp--preset--color--club-primary); }

/* Poll 'Wie wint?' — eerlijk (alleen echte stemmen) */
.vb-poll {
  border: 1px solid var(--vb-line, #e4e9f2); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin: 1.6rem 0; background: #f4f7fb;
}
.vb-poll-kop { margin: 0 0 .8rem; font-size: 1.1rem; }
.vb-poll-opties { display: flex; flex-wrap: wrap; gap: .6rem; }
.vb-poll-optie {
  flex: 1 1 140px; cursor: pointer; font: inherit; font-weight: 600; line-height: 1.25;
  padding: .7rem 1rem; border-radius: 999px;
  border: 2px solid var(--wp--preset--color--club-primary);
  background: #fff; color: var(--wp--preset--color--club-primary);
  transition: background .15s ease, color .15s ease;
}
.vb-poll-optie:hover { background: var(--wp--preset--color--club-primary); color: #fff; }
.vb-poll-uitslag { display: flex; flex-direction: column; gap: .55rem; }
.vb-poll-balk { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .7rem; }
.vb-poll-label { font-weight: 600; font-size: .92rem; }
.vb-poll-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.vb-poll-bar {
  grid-column: 1 / -1; height: 8px; border-radius: 999px; background: #dbe3ef; overflow: hidden;
}
.vb-poll-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--wp--preset--color--club-primary); transition: width .4s ease;
}
.vb-poll-totaal { margin: .3rem 0 0; font-size: .82rem; color: var(--wp--preset--color--ink-soft); }
.vb-poll-uitleg { margin: .15rem 0 0; font-size: .78rem; color: var(--wp--preset--color--ink-soft); }

/* Voorspelmarkt-odds (kansbalk) — bron als tekst, geen uitgaande gok-link */
.vb-odds { border: 1px solid var(--vb-line, #e4e9f2); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1.6rem 0; }
.vb-odds-kop { margin: 0 0 .8rem; font-size: 1.1rem; }
.vb-odds-balk { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: #dbe3ef; }
.vb-odds-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  color: #fff; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.vb-odds-seg span { padding: 0 .3rem; white-space: nowrap; }
.vb-odds-thuis { background: var(--wp--preset--color--club-primary); }
.vb-odds-gelijk { background: #566072; }
.vb-odds-uit { background: #7a2e8a; }
.vb-odds-legenda { display: flex; flex-wrap: wrap; gap: .8rem; margin: .6rem 0 0; font-size: .82rem; color: var(--wp--preset--color--ink-soft); }
.vb-odds-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.vb-odds-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.vb-odds-dot.vb-odds-thuis { background: var(--wp--preset--color--club-primary); }
.vb-odds-dot.vb-odds-gelijk { background: #566072; }
.vb-odds-dot.vb-odds-uit { background: #7a2e8a; }
.vb-odds-bron { margin: .5rem 0 0; font-size: .76rem; color: var(--wp--preset--color--ink-soft); }

/* Selectiewaarde-vergelijking (curated) — twee balken in clubkleuren, direct onder de odds */
.vb-sw { border: 1px solid var(--vb-line, #e4e9f2); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1rem 0 1.6rem; }
.vb-sw-kop { margin: 0 0 .8rem; font-size: 1.1rem; }
.vb-sw-rijen { display: flex; flex-direction: column; gap: .6rem; }
.vb-sw-rij { display: grid; grid-template-columns: minmax(80px, 130px) 1fr auto; align-items: center; gap: .7rem; }
.vb-sw-naam { font-weight: 600; font-size: .92rem; }
.vb-sw-bar { height: 16px; border-radius: 999px; background: #dbe3ef; overflow: hidden; }
.vb-sw-fill { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.vb-sw-waarde { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .92rem; }
.vb-sw-bron { margin: .55rem 0 0; font-size: .76rem; color: var(--wp--preset--color--ink-soft); }

/* Homepage — "Volgende wedstrijd"-blok: harde link naar de actuele gids (sessie 18) */
.vb-volgende {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem;
  background: var(--wp--preset--color--hero-donker, #04214f);
  color: var(--wp--preset--color--surface);
  border-radius: var(--vb-radius); padding: .9rem 1.25rem; margin: 0 0 .5rem;
  text-decoration: none; transition: opacity .15s ease;
}
.vb-volgende:hover { opacity: .94; }
.vb-volgende-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; opacity: .85; flex: 1 1 100%;
}
.vb-volgende-affiche {
  font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem;
  font-weight: 700; line-height: 1.25;
}
.vb-volgende-uitslag {
  font-weight: 700; font-size: 1.1rem; background: rgba(255,255,255,.14);
  padding: .05rem .5rem; border-radius: 999px;
}
.vb-volgende-datum, .vb-volgende-meta { font-size: .9rem; opacity: .9; }
.vb-volgende-cta {
  margin-left: auto; font-size: .85rem; font-weight: 600; color: #cfe0ff;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .vb-volgende-cta { margin-left: 0; flex: 1 1 100%; }
}

/* Hub /wedstrijden/ — twee secties: komende (bovenaan) + gespeeld (sessie 14) */
.vb-hub { display: flex; flex-direction: column; gap: 2.5rem; }
.vb-hub-sectie { display: flex; flex-direction: column; gap: 1.1rem; }
.vb-hub-sectie-kop {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 700; font-size: 1.4rem; margin: 0; align-self: flex-start;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--wp--preset--color--club-primary);
}
.vb-hub-lijst { display: flex; flex-direction: column; gap: 1.1rem; }

/* Echte wedstrijdkaart: datumblok (kleurvlak) + affiche + metaregel + cta.
   Hele kaart is één link met hover-lift. */
.vb-hub-kaart {
  display: flex; align-items: stretch; gap: 1rem;
  border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden;
  background: #fff; text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.vb-hub-kaart:hover {
  border-color: var(--wp--preset--color--club-primary);
  box-shadow: 0 4px 16px rgba(0, 68, 169, .12);
}
/* Statische kaart (gespeeld duel zónder gids): geen klik-affordance/hover-lift */
.vb-hub-kaart-statisch { cursor: default; }
.vb-hub-kaart-statisch:hover { border-color: #e4e7ec; box-shadow: none; }
/* Datumblok — clubblauw (komend) of W/G/V-kleur (gespeeld) */
.vb-hub-datum {
  flex: 0 0 82px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1rem;
  padding: .9rem .4rem; text-align: center; color: #fff;
  background: var(--wp--preset--color--club-primary);
}
.vb-hub-dag { font-size: .72rem; font-weight: 700; letter-spacing: .08em; opacity: .85; }
.vb-hub-dat { font-size: .95rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.vb-hub-tijd { font-size: .9rem; font-weight: 600; opacity: .95; margin-top: .1rem; }
/* Inhoud */
.vb-hub-inhoud {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .9rem 0;
}
.vb-hub-titelrij { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.vb-hub-affiche {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.2rem; font-weight: 700; line-height: 1.25;
  color: var(--wp--preset--color--ink);
}
/* Score-chip: dun W/G/V-randje (zelfde palet als de vorm-chips), geen kleurvlak */
.vb-hub-score-chip {
  display: inline-flex; align-items: center;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8rem; font-weight: 800; letter-spacing: .02em; line-height: 1.5;
  padding: .02rem .4rem; border-radius: 5px; border: 1.5px solid currentColor;
}
.vb-hub-score-w { color: #15803d; }  /* winst  — contrast 5.0:1 op wit (WCAG AA) */
.vb-hub-score-g { color: #566072; }  /* gelijk — contrast 5.6:1 */
.vb-hub-score-v { color: #b4211a; }  /* verlies— contrast 6.0:1 */
.vb-hub-meta { font-size: .85rem; color: var(--wp--preset--color--ink-soft); }
.vb-hub-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
/* Call-to-action (decoratief; de hele kaart is de link) */
.vb-hub-cta {
  flex: 0 0 auto; align-self: center; padding: 0 1.1rem 0 .3rem;
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  color: var(--wp--preset--color--club-primary);
}
.vb-hub-kaart:hover .vb-hub-cta { text-decoration: underline; }

/* Mobiel (≤560px): datumblok wordt een strip bovenaan, affiche eronder */
@media (max-width: 560px) {
  .vb-hub-kaart { flex-direction: column; gap: 0; }
  .vb-hub-datum {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    align-items: baseline; gap: .55rem; padding: .55rem .9rem; text-align: left;
  }
  .vb-hub-dag, .vb-hub-dat, .vb-hub-tijd { font-size: .9rem; margin: 0; }
  .vb-hub-inhoud { padding: .8rem .9rem .2rem; }
  .vb-hub-cta { align-self: flex-start; padding: 0 .9rem .9rem; }
}

.vb-hub-meer {
  margin: .1rem 0 0; font-size: .9rem; font-style: italic;
  color: var(--wp--preset--color--ink-soft);
}
.vb-hub-leeg { color: var(--wp--preset--color--ink-soft); }

/* Ankernav bovenaan de hub (Komende / Gespeeld / Stand / Programma) */
.vb-hub-anker {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: -1rem 0 .5rem;
}
.vb-hub-anker a {
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid #e4e7ec; background: #fff;
  color: var(--wp--preset--color--club-primary); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.vb-hub-anker a:hover {
  border-color: var(--wp--preset--color--club-primary);
  background: #f0f5ff;
}
/* Kop van de sfeer/hub scrollt weg (geen sticky header) → kleine ankermarge */
.vb-hub-sectie { scroll-margin-top: 1.25rem; }

/* Datablok-staten: expliciete 'niet beschikbaar' + 'verouderde snapshot'-notitie.
   Een datablok verdwijnt nooit stil — het toont altijd data of een van deze staten. */
.vb-datablok-leeg {
  margin: 0; padding: .9rem 1rem; border-radius: 10px;
  background: #f6f7f9; border: 1px dashed #d3d8e0;
  color: var(--wp--preset--color--ink-soft); font-size: .92rem;
}
.vb-datablok-verouderd {
  margin: 0 0 .2rem; font-size: .82rem; color: var(--wp--preset--color--ink-soft);
  padding: .3rem .6rem; border-left: 3px solid #e0a800; background: #fdf8ec; border-radius: 0 6px 6px 0;
}

/* ─── Volledige competitiestand ───────────────────────────────────── */
.vb-stand-start {
  margin: 0; font-size: .9rem; color: var(--wp--preset--color--ink-soft);
}
.vb-tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vb-stand-tabel {
  width: 100%; border-collapse: collapse;
  font-size: .92rem; font-variant-numeric: tabular-nums;
}
.vb-stand-tabel thead th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wp--preset--color--ink-soft); text-align: right;
  padding: .35rem .45rem; border-bottom: 2px solid #e4e7ec; white-space: nowrap;
}
.vb-stand-tabel thead th abbr { text-decoration: none; border: 0; }
.vb-stand-tabel td {
  padding: .42rem .45rem; border-bottom: 1px solid #eef0f3;
  text-align: right; white-space: nowrap;
}
.vb-stand-tabel .vb-t-pos { text-align: right; width: 1.8rem; color: var(--wp--preset--color--ink-soft); }
.vb-stand-tabel .vb-t-club { text-align: left; width: 99%; font-weight: 600; color: var(--wp--preset--color--ink); }
.vb-stand-tabel .vb-t-punt { font-weight: 800; color: var(--wp--preset--color--ink); }
.vb-t-club-kort { display: none; }
/* Eigen club uitgelicht in clubblauw */
.vb-stand-tabel tr.vb-stand-pec td {
  background: #f0f5ff;
  border-bottom-color: #d8e5fb;
}
.vb-stand-tabel tr.vb-stand-pec .vb-t-club {
  color: var(--wp--preset--color--club-primary);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--wp--preset--color--club-primary);
  padding-left: .6rem;
}
.vb-stand-tabel tr.vb-stand-pec .vb-t-pos,
.vb-stand-tabel tr.vb-stand-pec .vb-t-punt { color: var(--wp--preset--color--club-primary); }

/* ─── Mini-stand (homepage — neemt de plek van 'volgende wedstrijd' over) ───── */
.vb-ministand {
  border: 1px solid #e4e7ec; border-radius: 12px;
  padding: .6rem .9rem .35rem; background: #fff;
}
.vb-ministand-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .25rem;
}
.vb-ministand-titel {
  font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wp--preset--color--ink);
}
.vb-ministand-link {
  font-size: .8rem; font-weight: 700; white-space: nowrap; text-decoration: none;
  color: var(--wp--preset--color--club-primary);
}
.vb-ministand-link:hover { text-decoration: underline; }
.vb-ministand-verouderd { font-size: .78rem; color: var(--wp--preset--color--ink-soft); margin: .1rem 0 .35rem; }
.vb-ministand-tabel .vb-ministand-gap td {
  text-align: center; color: var(--wp--preset--color--ink-soft);
  padding: .05rem; letter-spacing: .25em;
}

/* ─── Volledig seizoensprogramma (dichte lijst, kaartstijl-taal) ───── */
.vb-prog-lijst { list-style: none; margin: 0; padding: 0; }
.vb-prog-rij { border-bottom: 1px solid #eef0f3; }
.vb-prog-rij:first-child { border-top: 1px solid #eef0f3; }
.vb-prog-inner {
  display: grid; align-items: baseline; gap: .25rem .9rem;
  grid-template-columns: 8.5rem 6.5rem 1fr auto;
  grid-template-areas: "ronde datum duel rechts";
  padding: .6rem .2rem; text-decoration: none; color: inherit;
}
a.vb-prog-inner { transition: background .15s ease; }
a.vb-prog-inner:hover { background: #f6f8fb; }
a.vb-prog-inner:hover .vb-prog-tegen { color: var(--wp--preset--color--club-primary); text-decoration: underline; }
.vb-prog-ronde {
  grid-area: ronde; font-size: .78rem; font-weight: 700;
  color: var(--wp--preset--color--ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.vb-prog-datum { grid-area: datum; display: flex; gap: .4rem; font-size: .85rem; white-space: nowrap; }
.vb-prog-dag { color: var(--wp--preset--color--ink); text-transform: capitalize; }
.vb-prog-tijd { color: var(--wp--preset--color--ink-soft); font-variant-numeric: tabular-nums; }
.vb-prog-duel { grid-area: duel; min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.vb-prog-plek {
  flex: 0 0 auto; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wp--preset--color--ink-soft);
  border: 1px solid #e4e7ec; border-radius: 4px; padding: .02rem .3rem;
}
.vb-prog-tegen {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.02rem; font-weight: 700; line-height: 1.2;
  color: var(--wp--preset--color--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vb-prog-rechts { grid-area: rechts; display: flex; align-items: center; gap: .5rem; justify-self: end; }
.vb-prog-score {
  display: inline-flex; align-items: center;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em; line-height: 1.5;
  padding: .02rem .4rem; border-radius: 5px; border: 1.5px solid currentColor;
}
.vb-prog-pijl { color: var(--wp--preset--color--club-primary); font-weight: 700; }

/* Mobiel (≤560px): programmarij in twee regels; stand verbergt W/G/V-kolommen */
@media (max-width: 560px) {
  .vb-prog-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "ronde datum rechts"
      "duel  duel  rechts";
    gap: .1rem .7rem;
  }
  .vb-prog-rechts { align-self: center; }
  .vb-stand-tabel .vb-t-opt { display: none; }
  .vb-stand-tabel { font-size: .88rem; }
}

/* ─── Wedstrijdgids: vorm-chips (W/G/V) + eerdere ontmoetingen ─────── */
/* FotMob/Google-patroon: gekleurde chips met letter (kleurenblind-proof).
   Kleuren getest op wit tekstcontrast >= 4.5:1 (WCAG AA). */
.vb-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 4px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem; font-weight: 700; color: #fff;
  vertical-align: middle; flex: 0 0 auto;
}
.vb-vorm-rij .vb-chip { margin-right: 4px; }
.vb-vorm-rij .vb-chip:last-child { margin-right: 0; }
.vb-chip-w { background: #15803d; }   /* winst  — groen  (contrast 5.0:1) */
.vb-chip-g { background: #566072; }   /* gelijk — grijs  (contrast 5.6:1) */
.vb-chip-v { background: #b4211a; }   /* verlies— rood   (contrast 6.0:1) */

.vb-vorm-team { margin: 0 0 0.75rem; }
.vb-vorm-team:last-child { margin-bottom: 0; }
.vb-vorm-naam { font-weight: 700; margin-right: 0.6rem; }
.vb-vorm-rij { white-space: nowrap; }
.vb-vorm-sam {
  display: block; margin-top: 0.3rem;
  color: var(--wp--preset--color--ink-soft); font-size: 0.85rem;
}
.vb-vorm-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: .7rem 0 0; font-size: .78rem; color: var(--wp--preset--color--ink-soft);
}
.vb-vorm-legenda .vb-chip { margin: 0 .1rem 0 .3rem; }

.vb-h2h { list-style: none; margin: 0; padding: 0; }
.vb-h2h li {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.28rem 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.vb-h2h li:last-child { border-bottom: 0; }
.vb-h2h-tekst { min-width: 0; }

.vb-vorm-subkop {
  margin: 0 0 0.5rem; font-weight: 700; font-size: 0.95rem;
}
.vb-vorm { margin-top: 0.5rem; }

@media (max-width: 600px) {
  .vb-vorm-naam { display: block; margin: 0 0 0.3rem; }
  .vb-h2h-tekst { font-size: 0.9rem; }
}

/* ── Vermoedelijke opstelling: SVG-veldje + duiding + voetnoot ──────────────── */
.vb-opstelling { margin: 0 0 0.5rem; }
.vb-opstelling-kop {
  margin: 0 0 0.6rem; text-align: center; font-weight: 700; font-size: 1rem;
}
.vb-veld {
  border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.vb-opstelling-tegenstander {
  margin: 0.5rem 0 0; text-align: center; font-size: 0.85rem;
  color: var(--wp--preset--color--ink-soft);
}
/* Duiding van de redactie: gestileerd blokje, niet als kale alinea. Adaptief (light/dark):
   accentrand in clubblauw + geërfde tekstkleur, geen mode-afhankelijke achtergrond nodig. */
.vb-duiding {
  margin: 0.9rem 0 0; padding: 0.55rem 0.85rem;
  border-left: 3px solid #0044A9; border-radius: 0 var(--vb-radius) var(--vb-radius) 0;
  background: rgba(0, 68, 169, 0.06);
}
.vb-duiding-label {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: #0044A9;
}
.vb-duiding-tekst { margin: 0.15rem 0 0; }
.vb-opstelling-voetnoot {
  margin: 0.75rem 0 0; font-size: 0.8rem; font-style: italic;
  color: var(--wp--preset--color--ink-soft);
}
/* Fallback-linie-lijst (telling ≠ formatie) + per-team-kopje bij twee teams. */
.vb-opstelling-lijst { margin: 0.6rem 0 0; }
.vb-opstelling-team { margin: 0.6rem 0 0.2rem; font-weight: 700; }
.vb-lijn { margin: 0.15rem 0; }

/* ── Artikel→gids-link + "Lees ook" (S10 doorklik) ─────────────────────────── */
.vb-gids-link {
  margin: 2rem 0 0.5rem; padding: 0.85rem 1.1rem;
  background: var(--wp--preset--color--club-primary-soft, #e7f0ff);
  border-left: 4px solid var(--wp--preset--color--club-primary, #0044A9);
  border-radius: 6px; font-size: 0.95rem;
}
.vb-gids-link a { color: var(--wp--preset--color--club-primary, #0044A9); text-decoration: none; font-weight: 600; }
.vb-gids-link a:hover, .vb-gids-link a:focus-visible { text-decoration: underline; }

.vb-lees-ook { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line, #e4e7eb); }
.vb-lees-ook-kop {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem;
  font-weight: 700; color: #6b7280; margin: 0 0 0.9rem;
}
.vb-lees-ook-lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.vb-lees-ook-item a {
  display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none; color: inherit; height: 100%;
}
.vb-lees-ook-thumb { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 9; background: var(--wp--preset--color--line, #eef1f5); }
.vb-lees-ook-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-lees-ook-titel { font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.vb-lees-ook-item a:hover .vb-lees-ook-titel,
.vb-lees-ook-item a:focus-visible .vb-lees-ook-titel {
  color: var(--wp--preset--color--club-primary, #0044A9); text-decoration: underline;
}
@media (max-width: 600px) {
  .vb-lees-ook-lijst { grid-template-columns: 1fr; gap: 0.9rem; }
  .vb-lees-ook-item a { flex-direction: row; align-items: center; gap: 0.8rem; }
  .vb-lees-ook-thumb { flex: 0 0 96px; width: 96px; aspect-ratio: 1 / 1; }
}

/* ─── Transferwindow-tracker (DEEL C) ─────────────────────────────── */
.vb-tf-teller {
  background: var(--wp--preset--color--club-primary, #0044A9); color: #fff;
  border-radius: 10px; padding: 1.1rem 1.3rem; margin: 0 0 1.6rem; text-align: center;
}
.vb-tf-teller-groot { display: block; font-size: 1.6rem; font-weight: 700; font-family: var(--wp--preset--font-family--kop, Georgia, serif); }
.vb-tf-teller-sub { display: block; margin-top: 0.2rem; font-size: 0.95rem; opacity: 0.9; }
/* De bronregel onder de teller is vervallen (run 8): een countdown naar een KNVB-datum heeft
   geen bronvermelding nodig. De bijbehorende stijl is hier weggehaald in plaats van
   uitgecommentarieerd — dode CSS voor markup die niemand meer uitstuurt gaat zwerven. */

/* Sectie-ritme: elke sectie (Bewegingen, Inkomend, Uitgaand, Vrouwen) krijgt dezelfde
   koptypografie en dezelfde witruimte, zodat de pagina één trap heeft in plaats van drie
   losse blokjes die elk hun eigen marge meebrengen. */
.vb-tf-blok { margin: 1.9rem 0 0; }
.vb-tf-blok:first-of-type { margin-top: 1.4rem; }
.vb-tf-kop, .vb-dd-kop, .vb-tf-afdeling-kop {
  font-family: var(--wp--preset--font-family--kop, Georgia, serif);
  font-size: 1.15rem; font-weight: 700; line-height: 1.25;
  margin: 0 0 0.55rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--wp--preset--color--club-primary, #0044A9);
}
.vb-tf-afdeling { margin-top: 2.4rem; }
.vb-tf-afdeling-kop { font-size: 1.3rem; }
.vb-tf-afdeling .vb-tf-blok:first-of-type { margin-top: 1.1rem; }
.vb-tf-lijst { list-style: none; margin: 0; padding: 0; }
.vb-tf-rij {
  padding: 0.7rem 0; border-top: 1px solid var(--vb-line, #e4e9f2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.55rem;
}
.vb-tf-rij:first-child { border-top: 0; }
.vb-tf-naam { font-weight: 700; }
.vb-tf-meta { color: var(--wp--preset--color--ink-soft); font-size: 0.92rem; }
.vb-tf-bron { font-size: 0.8rem; color: var(--wp--preset--color--club-primary, #0044A9); }
.vb-tf-leeg, .vb-transfers-uit, .vb-tf-uit { color: var(--wp--preset--color--ink-soft); }
.vb-tf-duiding {
  flex: 1 0 100%;                                   /* eigen regel onder de naamregel */
  margin-top: 0.15rem; font-size: 0.9rem;
  color: var(--wp--preset--color--ink-soft); font-style: italic;
}
/* Mobiel: de meta-regel onder de naam i.p.v. erachter — anders breekt 'club · koop · datum'
   midden in een woord af en wordt de rij drie regels hoog zonder dat je ziet waar hij begint. */
@media (max-width: 560px) {
  .vb-tf-rij { gap: 0.1rem 0.45rem; }
  .vb-tf-meta { flex: 1 0 100%; }
}

/* ─── Bewegingen-blok (deadline-day-tracker) ──────────────────────
   Tijd links in een eigen kolom, daarnaast naam + status, daaronder de zin en de bron.
   Vóór run 8 stonden dit vier losse inline-spans zonder eigen opmaak; die plakten aan
   elkaar tot één grijze regel waarin je de naam niet terugvond. */
.vb-dd { margin: 1.4rem 0 2rem; }
.vb-dd-lijst { list-style: none; margin: 0; padding: 0; }
.vb-dd-regel {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: 1rem; align-items: baseline;
  padding: 0.8rem 0; border-top: 1px solid var(--vb-line, #e4e9f2);
}
.vb-dd-regel:first-child { border-top: 0; }
.vb-dd-tijd {
  font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--wp--preset--color--ink-soft);
}
.vb-dd-body { min-width: 0; }
.vb-dd-hoofd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; }
.vb-dd-speler { font-weight: 700; }
.vb-dd-badge {
  display: inline-block; padding: 0.08rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid transparent; white-space: nowrap;
}
/* Eén ingetogen kleurlijn, drie tonen. De statusnaam staat er in woorden bij, dus de kleur
   hoeft alleen 'loopt nog / is klaar / gaat niet door' te dragen. */
.vb-dd-badge--lopend { background: #eef2f7; color: #43506b; border-color: #dbe2ec; }
.vb-dd-badge--af { background: #e7f4e9; color: #1a7f37; border-color: #bfe0c8; }
.vb-dd-badge--weg { background: #fdecec; color: #b32d2e; border-color: #f2c3c3; }
.vb-dd-zin { margin: 0.25rem 0 0; font-size: 0.95rem; line-height: 1.45; }
.vb-dd-bron {
  display: inline-block; margin-top: 0.25rem; font-size: 0.8rem;
  color: var(--wp--preset--color--club-primary, #0044A9);
}
/* Mobiel: tijd boven de regel in plaats van in een smalle kolom — 5.5rem kost daar te veel
   van de leesbreedte, en de zin brak dan in twee-woordsregels. */
@media (max-width: 560px) {
  .vb-dd-regel { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
  .vb-dd-tijd { font-size: 0.76rem; }
}
/* Deadline-day-modus (1-2 sep): prominentere teller + "Vandaag"-markering op verse regels. */
.vb-tf-teller--deadline { padding: 1.5rem 1.3rem; box-shadow: 0 0 0 3px var(--wp--preset--color--club-primary, #0044A9); }
.vb-tf-teller--deadline .vb-tf-teller-groot { font-size: 2.1rem; }
.vb-tf-rij--vandaag { border-top-color: var(--wp--preset--color--club-primary, #0044A9); }
.vb-tf-vandaag {
  display: inline-block; margin-right: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--wp--preset--color--club-primary, #0044A9); color: #fff; vertical-align: middle;
}

/* ═══ DEEL A — Homepage-herindeling (maatstaf: design/homepage-maatstaf.html) ═══ */

/* ── A1: twee-delige strook (kómend duel + laatste uitslag) in de ticker ── */
.vb-ticker-duo {
  justify-content: flex-start;
  align-items: center;
  gap: 0.35rem 1.4rem;
}
.vb-ticker-deel {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 0.3rem 0.5rem; min-width: 0;
  color: #fff; text-decoration: none;
}
.vb-ticker-deel:hover .vb-ticker-duel,
.vb-ticker-deel:focus-visible .vb-ticker-duel { text-decoration: underline; }
/* Scheiding tussen de twee delen op ruime schermen. */
.vb-ticker-duo .vb-ticker-deel + .vb-ticker-deel {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: 1.4rem;
}
/* Witte dag-/uitslag-pill (maatstaf .pil) i.p.v. de lichtblauwe ticker-badge. */
.vb-ticker-duo .vb-ticker-label {
  background: #fff;
  color: #0b1020;
}
.vb-ticker-tijd { font-weight: 700; color: #fff; }
/* Uitslag-score als omlijnde chip (maatstaf .score), niet gevuld. */
.vb-ticker-duo .vb-ticker-score {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  border-radius: 6px;
  padding: 0 0.4rem;
  font-weight: 800;
}
.vb-ticker-cta { color: #9cc0ff; font-weight: 600; white-space: nowrap; }
.vb-ticker-deel:hover .vb-ticker-cta,
.vb-ticker-deel:focus-visible .vb-ticker-cta { text-decoration: underline; }
/* Mobiel (≤640px): de twee delen stapelen; elk deel één regel met ellipsis. */
@media (max-width: 640px) {
  .vb-ticker .vb-ticker-inner.vb-ticker-duo {
    flex-wrap: wrap; white-space: normal; overflow: visible; gap: 0.25rem 0.5rem;
  }
  .vb-ticker-duo .vb-ticker-deel {
    flex: 1 1 100%; flex-wrap: nowrap; overflow: hidden;
    border-left: 0; padding-left: 0;
  }
  .vb-ticker-duo .vb-ticker-cta { flex: 0 0 auto; }
}

/* ── A2/A3 + nazorg: voorpagina-top — hero-kaart (stadionfoto+overlay) + VERS-kolom ── */
.vb-voorpagina-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);   /* ~7/12 + 5/12 (maatstaf) */
  gap: 1.5rem;
  align-items: stretch;                                    /* hero vult tot de vers-hoogte */
  box-sizing: content-box;                                 /* zelfde model als de ticker/header */
  max-width: var(--vb-maxwide);                            /* zelfde container-breedte (32–1184) */
  margin: 1.75rem auto 0;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
/* Hero-kaart vult de grid-cel (= vers-hoogte); inhoud onderaan verankerd → geen halflege
   kaart, gelijke bovenrand met de vers-kolom. */
.vb-hero-query { height: 100%; align-self: stretch; }
.vb-hero-query .wp-block-post-template,
.vb-hero-query .wp-block-post-template > li { height: 100%; }
/* Geen WP-blok-tussenmarge op de tweede grid-kolom → gelijke bovenrand met de hero. */
.vb-voorpagina-top > .vb-vers { align-self: start; margin-block-start: 0; }
.vb-hero-kaart {
  position: relative; overflow: hidden; height: 100%;
  min-height: 300px;
  background: var(--wp--preset--color--hero-dark);   /* fallback vóór de foto laadt */
  color: #fff;
  border-radius: var(--vb-radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  /* Ruimte onderin voor de creditplaat, die absoluut in de hoek ligt en dus geen plek
     opeist in de flex-stroom. Zonder deze reservering schuift de tijdregel eronder — dat
     was precies de botsing van 20 aug. 2,9rem dekt ook de twee-regelige plaat op 375/390,
     waar de credittekst niet op één regel past. */
  padding-bottom: 2.9rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 0.55rem;
}
/* Stadionfoto als cover-achtergrond (géén duotone in de hero). */
.vb-hero-kaart .vb-hero-media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.vb-hero-kaart .vb-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: none; opacity: 1;
}
/* Navy-overlay, ONDERZWAAR: bovenin vrijwel niets (de foto is daar gewoon foto) → zwaar
   onderin, waar de kop/badge/tijdregel staan. De oude verloop begon op 42% dekking, dus
   ook de lucht lag al onder een navy waas; dat maakte elke foto tot decor.
   De stops zijn GEMETEN, niet gekozen. Twee harde randvoorwaarden:
   (1) de kop begint op 36,7% van de kaarthoogte (bij 560-760px; op 375/390 pas op 47,4%),
   (2) wit op een uitgebeten fotopixel haalt 4,5:1 pas vanaf ~0,62 dekking.
   Vandaar de knik op 36%/0,64. Gemeten laagste waarde over de lichtste en de donkerste
   foto uit de beeldbank, op de LICHTSTE pixel onder de tekst: 5,60:1 (AA). Verplaats je
   een stop, hermeet dan met scripts uit review-mobiel/ — het oog ziet dit verschil niet. */
.vb-hero-kaart::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
      rgba(4, 33, 79, 0.00) 0%,
      rgba(4, 33, 79, 0.02) 12%,
      rgba(4, 33, 79, 0.30) 26%,
      rgba(4, 33, 79, 0.64) 36%,   /* knik: hier begint de kop op 560-760px (36,7%) */
      rgba(4, 33, 79, 0.78) 52%,
      rgba(4, 33, 79, 0.92) 100%);
}
.vb-hero-kaart .rubriek-badge,
.vb-hero-kaart .wp-block-post-title,
.vb-hero-kaart .wp-block-post-excerpt,
.vb-hero-kaart .vb-tijdregel { position: relative; z-index: 2; max-width: 100%; margin: 0; }
.vb-hero-kaart .rubriek-badge { align-self: flex-start; }
.vb-hero-kaart .wp-block-post-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.7rem, 3.3vw, 2.4rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.015em;
  text-wrap: balance; max-width: 20ch;
}
.vb-hero-kaart .wp-block-post-title a,
.vb-hero-kaart .wp-block-post-title a:visited { color: #fff; text-decoration: none; }
.vb-hero-kaart .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vb-hero-kaart .wp-block-post-excerpt {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem; line-height: 1.55; max-width: 52ch;
}
.vb-hero-kaart .wp-block-post-excerpt__more-text { display: none; }
.vb-tijdregel { color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; }
/* Fotocredit: GEEN eigen hero-variant meer. De vorige override gooide juist het donkere
   plaatje van de basisklasse weg (background:none) en zette de tekst op 9,6px wit-op-66%.
   Op de foto verdween hij daarmee vrijwel, terwijl CC BY-SA een ZICHTBARE naamsvermelding
   eist — en stap 1 van de mobiel-review maakte het beeld eronder vier keer zo groot.
   De basisklasse (donker plaatje, wit, 0,75rem, rechtsonder) doet precies wat hier nodig
   is; `.vb-hero-media .vb-fotocredit` hierboven geeft al z-index 3, dus hij ligt boven het
   verloop. Zet hier niets terug zonder het contrast opnieuw te meten. */
.vb-hero-kaart .vb-fotocredit { text-align: right; max-width: 100%; }

/* VERS van de redactie — witte kaart in de bestaande kaartstijl. */
.vb-vers {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--vb-line);
  border-radius: var(--vb-radius);
  padding: 1.1rem 1.25rem 1rem;
  align-self: start;
}
.vb-vers-kop-titel {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--club-primary);
  padding-bottom: 0.6rem; margin: 0;
  border-bottom: 2px solid var(--wp--preset--color--club-primary);
}
.vb-vers-lijst { list-style: none; margin: 0; padding: 0; }
.vb-vers-item {
  display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.7rem 0; border-bottom: 1px solid var(--vb-line);
}
.vb-vers-item:last-child { border-bottom: 0; }
.vb-vers-tijd {
  flex: 0 0 3.2rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--wp--preset--color--ink-soft);
}
.vb-vers-tijd.vb-vers-nu { color: var(--wp--preset--color--rubriek-achtergrond); }  /* vandaag → oranje accent */
.vb-vers-tekst { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vb-vers-kop {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 700; font-size: 1rem; line-height: 1.28;
  color: var(--wp--preset--color--ink); text-decoration: none;
}
.vb-vers-kop:hover, .vb-vers-kop:focus-visible { color: var(--wp--preset--color--club-primary); }
.vb-vers-rubriek {
  /* 0,64rem = 10,2px was onleesbaar klein voor een label dat toch al weinig zegt:
     zichtbare ruis zonder opbrengst. Minimum voor labeltekst is 12px. */
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
}
.vb-vers-alles {
  display: block; text-align: right; margin-top: 0.7rem;
  font-size: 0.78rem; font-weight: 700;
  color: var(--wp--preset--color--club-primary); text-decoration: none;
}
.vb-vers-alles:hover { text-decoration: underline; }

/* ── A4: mobiel (≤760px) — hero boven VERS, hero hoog genoeg om beeld te zijn ──
   BEWUSTE KEUZE (20 aug 2026, mobiel-review), geen slordigheid: tot dan stond VERS
   eerst, met als reden dat terugkerende bezoekers meteen zien wat nieuw is. Die reden
   verdwijnt niet — VERS staat er direct onder, binnen één veeg — maar de prijs was te
   hoog: met de duo-ticker erboven begon de foto op 390px pas op ~794px, ruim een
   scherm scrollen. Een voorpagina die opent met een lijst tekst is geen voorpagina.
   Wie dit terugdraait: draai dan óók de min-height terug, anders krijg je de strook. */
@media (max-width: 760px) {
  .vb-voorpagina-top { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.1rem; }
  .vb-hero-query { order: 1; height: auto; }
  .vb-vers { order: 2; }
  .vb-hero-kaart { height: auto; min-height: 300px; }   /* 210 was een strook, geen beeld */
  .vb-hero-kaart .wp-block-post-excerpt { display: none; }
  .vb-hero-kaart .wp-block-post-title { font-size: clamp(1.5rem, 6vw, 1.95rem); }
}

/* Hero-query wrapper reset: post-template rendert een <ul>/<li> — geen bullets/inspring
   rond de hero-kaart, ook als de core-lijstreset ontbreekt. */
.vb-hero-query, .vb-hero-query .wp-block-post-template { margin: 0; }
.vb-hero-query .wp-block-post-template { list-style: none; padding: 0; display: block; }
.vb-hero-query .wp-block-post-template > li { list-style: none; margin: 0; }

/* ═══ DEEL B — Artikelpagina richting gids-niveau ═══ */

/* B1: metaregel onder de kop — rustig, zelfde toon als de hero-tijdregel. */
.vb-artikel-meta {
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  margin: 0 0 1.3rem;
}

/* B3: "Lees ook" op het artikel in de gids-kaartstijl (.vb-leesook) + nieuwsbrief-CTA. */
.vb-leesook--artikel {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--wp--preset--color--line, #e4e7eb);
}
.vb-leesook-kop {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin: 0;
}
/* Doorloop naar het rubriek-archief: de ingang tot álles uit deze rubriek. Bewust rustig
   (geen tweede knop naast de nieuwsbrief-CTA) maar wel een duidelijke, klikbare regel. */
.vb-leesook-archief { margin: 0; }
.vb-leesook-archief a {
  display: inline-block; text-decoration: none; font-weight: 600;
  color: var(--wp--preset--color--club-primary, #04214f);
  border-bottom: 2px solid var(--vb-line, #e4e9f2); padding-bottom: .15rem;
}
.vb-leesook-archief a:hover { border-bottom-color: currentColor; }
/* Placeholder-thumbnail (nog geen echt beeld) — navy verloop; DEEL C maakt hier de
   volledige affiche-kop van. */
.vb-leesook-thumb-leeg {
  display: block; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--wp--preset--color--hero-dark) 0%, var(--wp--preset--color--club-primary) 100%);
}

/* ═══ DEEL C — Affiche-kop: terugval voor kaarten/thumbs zonder eigen beeld ═══ */
/* Render-niveau (functions.php) genereert deze kop; hier de opmaak. Rubriek-verloop +
   stadion-silhouet + rubriek-label + kop, in de stijl van de bestaande affiche-beelden.
   Geen mediabestand. .vb-affiche-link dient zowel als kaartlink (grids) als thumb (lees-ook). */
.vb-affiche-kop { margin: 0; }
.vb-affiche-link {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  padding: 0.8rem 0.9rem; box-sizing: border-box;
  text-decoration: none; color: #fff;
  background: linear-gradient(155deg, var(--vb-affiche-kleur, #04214f) 0%, #071026 118%);
}
.vb-affiche-rubriek {
  position: relative; z-index: 2; align-self: flex-start; margin-bottom: auto;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; padding-bottom: 0.22rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
}
.vb-affiche-titel {
  position: relative; z-index: 2;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 700; font-size: clamp(0.98rem, 2.4vw, 1.2rem); line-height: 1.18; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vb-affiche-sil {
  position: absolute; left: 6%; right: 6%; bottom: -12px; height: 58px; z-index: 1;
  opacity: 0.18; pointer-events: none;
  background: radial-gradient(50% 130% at 50% 140%, #fff 0 60%, transparent 61%);
}

/* ═══ Datatabellen (core/table) ═════════════════════════════════════ */
/* Tot nu toe stond er in dit thema geen regel tabel-CSS: een datatabel kreeg de
   WordPress-standaard (randje om elke cel, cijfers links, alles even zwaar). Voor een
   datastuk is dat het verschil tussen 'cijfers die je kunt lezen' en 'cijfers die dansen'.

   Twee dingen doen hier het werk:
   • CIJFERS RECHTS + tabular-nums. Rechts uitlijnen zet eenheden onder eenheden en tienden
     onder tienden; tabular-nums geeft elk cijfer dezelfde breedte, zodat 5,8 en 45,52 in
     dezelfde kolom netjes onder elkaar staan. Onze markdown→tabel-omzetting
     (pipeline/publiceer/schema.py) geeft geen uitlijning per cel mee, dus dat gebeurt hier
     per kolom: eerste kolom = rijlabel (links, normaal gewicht), de rest = cijfers.
     Een expliciete uitlijning uit de editor staat inline en wint hier gewoon van.
   • EERSTE KOLOM VASTGEZET op smalle schermen. Vier kolommen passen niet op een telefoon;
     scrollt de tabel weg zonder rijlabel, dan kijk je naar losse getallen.

   DE DUBBELE KLASSE (.wp-block-table.wp-block-table) is geen slordigheid. WordPress laadt
   voor het tabelblok zijn eigen wp-includes/blocks/table/style.css, met o.a.
   `.wp-block-table td,.wp-block-table th{border:1px solid;padding:.5em}` en
   `.wp-block-table thead{border-bottom:3px solid}`. Die selectors zijn even specifiek als de
   onze, en blokstijlen worden pas bij het renderen ingeladen — dus ná dit bestand. Zonder de
   extra klasse zou de kale core-stijl winnen op precies de pagina's waar het om gaat, en dat
   zie je hier lokaal niet (op een pagina zónder tabel laadt die core-CSS namelijk niet).
   Kleuren komen uit theme.json (var(--wp--preset--color--*)) — club #2 is een kleurswap. */
.wp-block-table.wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;              /* scrollcontainer voor de vastgezette eerste kolom */
  -webkit-overflow-scrolling: touch;
}
.wp-block-table.wp-block-table table {
  width: 100%;
  /* separate, niet collapse: bij een samengevouwen rand hoort de lijn bij de TABEL en niet
     bij de cel, en dan scrollt de scheidingslijn van de vastgezette eerste kolom gewoon mee
     weg (en blijft ook de slagschaduw achterwege). Met border-spacing 0 ziet het er hetzelfde
     uit; dubbele lijnen kunnen niet, want alleen border-bottom is in gebruik. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  background: var(--wp--preset--color--surface, #fff);
}
.wp-block-table.wp-block-table th,
.wp-block-table.wp-block-table td {
  padding: 0.62rem 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line, #e4e7ec);
  vertical-align: baseline;
}
.wp-block-table.wp-block-table thead { border-bottom: 0; }   /* core zet hier 3px zwart */
.wp-block-table.wp-block-table thead th {
  background: var(--wp--preset--color--club-primary, #0044A9);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-bottom: 0;
}
/* Subtiele zebra: net genoeg om een rij met het oog te volgen, niet zo veel dat het een
   raster wordt. Even rijen krijgen het paginacanvas, oneven blijven het witte vlak. */
.wp-block-table.wp-block-table tbody tr:nth-child(even) td {
  background: var(--wp--preset--color--canvas, #f6f7f9);
}
.wp-block-table.wp-block-table tbody tr:last-child td { border-bottom: 0; }

/* Rijlabel links en NIET vet: het label is de ingang, niet de boodschap. */
.wp-block-table.wp-block-table th:first-child,
.wp-block-table.wp-block-table td:first-child {
  text-align: left;
  font-weight: 400;
}
.wp-block-table.wp-block-table thead th:first-child { font-weight: 700; }
/* Cijferkolommen. white-space:nowrap houdt '0 van 2' en '5,8' heel; de eerste kolom mag wél
   afbreken, want daar staan de lange labels. */
.wp-block-table.wp-block-table th:not(:first-child),
.wp-block-table.wp-block-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* Bijschrift: exact de stijl van de bijschriften onder de grafieken (theme.json
   elements.caption), zodat grafiek en tabel in een datastuk één geheel zijn. */
.wp-block-table.wp-block-table caption,
.wp-block-table.wp-block-table figcaption {
  caption-side: bottom;
  margin-top: 0.6rem;
  padding: 0;
  text-align: left;
  font-size: var(--wp--preset--font-size--small, 0.8125rem);
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft, #5b6675);
  background: none;
}

@media (max-width: 720px) {
  .wp-block-table.wp-block-table table { font-size: 0.9rem; }
  .wp-block-table.wp-block-table th,
  .wp-block-table.wp-block-table td { padding: 0.55rem 0.7rem; }
  /* Eerste kolom vastzetten. De cel heeft een eigen dekkende achtergrond nodig (anders
     schuiven de cijfers eronder door), een randje dat de breuk markeert en een zachte
     slagschaduw: dán zie je dat er meer kolommen zijn dan er passen. */
  .wp-block-table.wp-block-table th:first-child,
  .wp-block-table.wp-block-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--wp--preset--color--surface, #fff);
    border-right: 1px solid var(--wp--preset--color--line, #e4e7ec);
    box-shadow: 6px 0 7px -6px rgba(20, 24, 31, 0.22);
  }
  .wp-block-table.wp-block-table thead th:first-child {
    z-index: 2;
    background: var(--wp--preset--color--club-primary, #0044A9);
    border-right-color: rgba(255, 255, 255, 0.35);
  }
  .wp-block-table.wp-block-table tbody tr:nth-child(even) td:first-child {
    background: var(--wp--preset--color--canvas, #f6f7f9);
  }
}

/* ─── Creditregel onder het uitgelichte beeld ─────────────────────── */
/* Zelfde stijl als elk ander bijschrift (theme.json elements.caption): de credit is geen
   voetnoot in kleine lettertjes maar gewoon het bijschrift van dat beeld. De link naar de
   licentie mag je zien — dat is nu juist de bedoeling van de vermelding. */
.vb-beeldcredit {
  margin-top: 0.5rem;
  font-size: var(--wp--preset--font-size--small, 0.8125rem);
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft, #5b6675);
}
/* De licentielink INLINE houden. WordPress zet zelf `.wp-block-post-featured-image a
   { display:block }` (dat maakt van het beeld een vullende link), en die regel raakt ook de
   link in ons bijschrift: dan valt 'CC BY 2.0' op een eigen regel en '(bijgesneden)' op de
   volgende. Vandaar de extra klasse in de selector — die wint van de core-regel. */
.vb-beeldcredit a,
.wp-block-post-featured-image .vb-beeldcredit a {
  display: inline;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.vb-beeldcredit a:hover,
.vb-beeldcredit a:focus-visible { color: var(--wp--preset--color--club-primary, #0044A9); }