/* tokens.css — design tokens v11
 * Extractie uit docs/mockups/v11.html :root (regels 12-76).
 * Wijzigingen aan deze file = ontwerp-beslissing. Pure waarden, geen logica.
 */

:root {
  /* ──────────────────────────────────────────────
     Backgrounds
     ────────────────────────────────────────────── */
  --bg:           #050814;
  --bg-soft:      #0b1022;
  --bg-softer:    #10162a;
  --bg-card:      #0b1022;
  --bg-card-hover:#10162a;

  /* ──────────────────────────────────────────────
     Logo kleuren (alleen in /Voet4All/-letters)
     ────────────────────────────────────────────── */
  --logo-blue:    #18a0fb;
  --logo-cyan:    #00d4ff;
  --logo-fuchsia: #ff2bd6;
  --logo-orange:  #ff7a18;

  /* ──────────────────────────────────────────────
     Accenten — violet vervangt roze in alle UI;
     fuchsia blijft uitsluitend in logo.
     ────────────────────────────────────────────── */
  --accent:             #18a0fb;
  --accent-soft:        rgba(24, 160, 251, 0.12);
  --accent-cyan:        #00d4ff;
  --accent-violet:      #8b5cf6;
  --accent-violet-soft: rgba(139, 92, 246, 0.12);
  --accent-orange:      #ff7a18;

  --danger:  #ff3366;
  --success: #00d4a0;

  /* Categorie-kleuren — herbruikbaar in sub-hubs (vrouwenvoetbal-pagina,
     supportersclub-listings). Per-card amber/blauw/cyaan/violet blijven inline. */
  --accent-pink:   #f078b0;  /* vrouwenvoetbal */
  --accent-silver: #c4c9dc;  /* supportersclub */

  /* ──────────────────────────────────────────────
     Champagne goud — premium, niet schoolgeel
     gold-bright = active/hover, primaire CTA-tekst, headlines
     gold        = base — eyebrows, badges, default border
     gold-deep   = gradient end-stop, donkerste in linear-gradients
     gold-glow   = box-shadow glow
     gold-soft   = subtiele backgrounds
     ────────────────────────────────────────────── */
  --gold:        #c9a961;
  --gold-bright: #d4af37;
  --gold-deep:   #8c7228;
  --gold-glow:   rgba(212, 175, 55, 0.18);
  --gold-soft:   rgba(201, 169, 97, 0.10);

  /* ──────────────────────────────────────────────
     Glass-effect tokens (v10 base)
     Gebruikt op alle 11 kaartklassen.
     ────────────────────────────────────────────── */
  --glass-card-bg:           rgba(11, 16, 34, 0.55);
  --glass-card-bg-hover:     rgba(16, 22, 42, 0.7);
  --glass-card-border:       rgba(255, 255, 255, 0.08);
  --glass-card-border-hover: rgba(255, 255, 255, 0.14);
  --glass-card-highlight:    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
  --glass-card-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-card-shadow:       0 8px 24px rgba(0, 0, 0, 0.35);
  --glass-card-shadow-hover: 0 14px 38px rgba(0, 0, 0, 0.5);
  --glass-bg:                rgba(11, 16, 34, 0.55);

  /* ──────────────────────────────────────────────
     Borders — generieke randen, los van glass
     ────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* ──────────────────────────────────────────────
     Tekst-schaal
     ────────────────────────────────────────────── */
  --text:       #f4f6fc;
  --text-soft:  #c4c9dc;
  --text-muted: #9aa3c1;
  --text-faint: #6e7592;

  /* ──────────────────────────────────────────────
     Shadow-schaal (los van glass)
     ────────────────────────────────────────────── */
  --shadow-soft:   0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ──────────────────────────────────────────────
     Radius-schaal
     ────────────────────────────────────────────── */
  --radius:      18px;  /* default — cards, hero */
  --radius-lg:   24px;
  --radius-md:   12px;  /* nested blocks, inputs in cards */
  --radius-sm:   8px;   /* buttons, badges, pills met rechte zijden */
  --radius-pill: 999px;

  /* ──────────────────────────────────────────────
     Typografie
     ────────────────────────────────────────────── */
  --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ──────────────────────────────────────────────
     Layout
     topbar-h        = sticky offset voor .nav (desktop)
     topbar-h-mobile = idem op viewports waar topbar-inner wrapt
                       en tenant-switcher een eigen rij krijgt
     ────────────────────────────────────────────── */
  --max-width:        1240px;
  --topbar-h:         65px;
  --topbar-h-mobile:  110px;

  /* ──────────────────────────────────────────────
     Sub-stap 3a (5/5/2026) — neon-streep gradient + card-hover-shadow.
     Hergebruikt door .card .premium-card .hero-block via
     public/css/components/shared-cards.css. Bestaande gold/glass-tokens
     ONGEWIJZIGD; dit zijn pure aanvullingen.
     ────────────────────────────────────────────── */
  --neon-streep-gradient:
    linear-gradient(90deg, rgb(64,224,255) 0%, rgb(236,72,153) 50%, rgb(249,115,22) 100%);
  --neon-cyan:    rgb(64, 224, 255);
  --neon-magenta: rgb(236, 72, 153);
  --neon-orange:  rgb(249, 115, 22);

  --card-hover-shadow:
    0 0 24px rgba(212, 175, 55, 0.18),
    inset 0 0 1px rgba(212, 175, 55, 0.32);
  --card-premium-shadow:
    0 0 32px rgba(212, 175, 55, 0.32),
    inset 0 0 1px rgba(212, 175, 55, 0.48);
}
/* base.css — globale resets, body, typografie, layout-wrapper.
 * Geen componenten. Componenten staan in components.css.
 * Alle waarden komen uit docs/mockups/v11.html (regels 107-134, 418-425, 1975).
 */

/* ──────────────────────────────────────────────
   Reset
   ────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ──────────────────────────────────────────────
   Body — base type, kleur, achtergrond.
   font-size: 13px is bewust klein (dashboard-dichtheid v11).
   overflow-x: hidden is nodig voor de live-banner / ticker scroll-loops.
   ────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Achtergrond-glow lagen — fixed, niet scrollend.
   3 ellipses: blauw rechtsboven, violet links-midden, goud onderaan. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 1400px 900px at 80% -10%, rgba(24, 160, 251, 0.04), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 10% 50%, rgba(139, 92, 246, 0.025), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(212, 175, 55, 0.025), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ──────────────────────────────────────────────
   Element-defaults
   ────────────────────────────────────────────── */
::selection {
  background: var(--accent);
  color: white;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
}

/* ──────────────────────────────────────────────
   Focus-visible — keyboard-accessibility.
   Default: blauw accent. Op buttons/links: champagne-goud
   omdat die vaker op donkere card-backgrounds zitten.
   .hero-split-input gebruikt eigen border-color voor focus.
   ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible {
  outline-color: var(--gold-bright);
}

.hero-split-input:focus-visible {
  outline: none;
}

/* ──────────────────────────────────────────────
   Shared keyframes — gebruikt door:
     pulse  → premium-ticker-pulse, live-banner live-dot
     scroll → premium-ticker-track, live-banner live-track
   Eén bron, geen duplicatie tussen component-files.
   ────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ──────────────────────────────────────────────
   Reduced motion support — WCAG 2.1 AA.
   Specifieke uitzettingen + globale fallback voor alle
   hover-transitions en toekomstige animaties.
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Specifieke animaties */
  .premium-ticker-track,
  .premium-ticker-pulse,
  .live-track,
  .live-dot {
    animation: none;
  }

  /* Globale fallback */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────
   Page wrapper — content-container met max-width.
   Boven z-index: 0 van body::before zodat content klikbaar blijft.
   ────────────────────────────────────────────── */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px 0;
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────
   Responsive — mobile padding
   ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .page {
    padding: 12px 16px 0;
  }
}
/* adsense.css — Google AdSense slot-containers.
 * Bron: docs/mockups/v11.html regels 1825-1890.
 *
 * VISUEEL ONDERSCHEID T.O.V. PREMIUM (kannibalisatie-vermijding):
 *   adsense-slot               vs   premium-card
 *   - dashed white border           - solid gold-tinted border
 *   - rgba(255,255,255,0.025) bg    - glass-foundation + gold-tint layer
 *   - geen ::before / radial blobs  - eigen gold hairline ::before
 *   - alle tekst grijs              - gold-bright op title + cat
 *   - cursor: default               - cursor: pointer (clickable)
 *   - mono "AdSense slot" label     - mono "Premium" tag rechtsboven
 *   Premium = €99/mo, AdSense = €2-8 RPM. Mogen visueel niet kruisen.
 *
 * ──────────────────────────────────────────────────────
 * DATA-AD-SLOT IDENTIFIERS — single source of truth voor EJS stap 2.
 * Markup-pattern:
 *   <div class="adsense-slot size-300x250"
 *        data-ad-slot="left-events-mid"
 *        data-ad-format="300x250"
 *        data-ad-network="adsense">…</div>
 *
 *   ┌─────────────────────────┬────────────────────────────────┬──────────────┐
 *   │ data-ad-slot            │ Locatie                        │ Format       │
 *   ├─────────────────────────┼────────────────────────────────┼──────────────┤
 *   │ left-events-mid         │ Linkerkolom tussen events      │ 300×250      │
 *   │ mid-articles-feed       │ Midden tussen artikel 2-3      │ Responsive   │
 *   │ right-sidebar-top       │ Rechterkolom bovenaan          │ 300×600      │
 *   │ mid-articles-bottom     │ Onderaan artikellijst          │ 728×90       │
 *   │ pre-footer-banner       │ Vóór footer                    │ Responsive   │
 *   └─────────────────────────┴────────────────────────────────┴──────────────┘
 *
 * ──────────────────────────────────────────────────────
 * GOOGLE PUBLISHER TAG SIZE-SPECS — min-height matcht ad-hoogte zodat
 * de slot niet collapse't bij no-fill. Afwijken = layout-shift bij ads.
 *   .size-300x250  → 300×250 Medium Rectangle (MREC)
 *   .size-300x600  → 300×600 Half Page  ← v11 had 480px (corrigeerd)
 *   .size-728x90   → 728×90  Leaderboard
 *   .size-in-feed  → variable, native-style (100px placeholder)
 *   .size-responsive → variable, adapts to container width
 *
 * ──────────────────────────────────────────────────────
 * AdSense fill-rate fallback (TODO Sprint 5):
 * Wanneer Google geen ad serveert (lage fill in kleine markets):
 *   → collapse via JS-callback (`document.readyState` + adslot status), OF
 *   → fallback house-ad (eigen Premium-CTA in dezelfde slot)
 *
 * CSS-architectuur moet later toelaten:
 *   .adsense-slot.is-empty { display: none; }
 *   .adsense-slot.is-house-ad { …eigen styling… }
 *
 * Geen 1B-implementatie nodig — alleen de namespace-ruimte vrijhouden.
 */

/* ──────────────────────────────────────────────
   Base container — neutral grey, dashed border,
   striped pattern via subtle bg.
   ────────────────────────────────────────────── */
.adsense-slot {
  /* Fase A 30/4/2026 — port van Voetbal4All v4 hybride. */
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  border: 1px dashed var(--glass-card-border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  margin: 24px 0;
  font-family: var(--font);
  color: var(--text-muted);
  cursor: default;             /* géén pointer — niet clickable als placeholder */
  transition: background 0.2s ease, border-color 0.2s ease;
}
.adsense-slot::before {
  /* Subtiele "Advertentie" placeholder zichtbaar tot ad geladen is */
  content: 'Advertentie';
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.7;
  pointer-events: none;
}
.adsense-slot.is-loaded::before { display: none; }

.adsense-slot:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-card-border-hover);
}

/* ──────────────────────────────────────────────
   Inner content — label, format, note
   ────────────────────────────────────────────── */
.adsense-slot-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 12px streepje vóór "AdSense slot" label */
.adsense-slot-label::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--text-faint);
}

.adsense-slot-format {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.adsense-slot-note {
  font-size: 10px;
  color: var(--text-faint);
  line-height: 1.45;
  max-width: 320px;
  margin: 0 auto;
}

.adsense-slot-note strong {
  color: var(--text-muted);
  font-weight: 600;
}

/* ──────────────────────────────────────────────
   Size-variants — min-height matcht Google ad-formaten.
   Anders krijgt de slot bij no-fill een collapse.
   ────────────────────────────────────────────── */
.adsense-slot.size-728x90 {
  min-height: 90px;
}

.adsense-slot.size-300x250 {
  min-height: 250px;
  padding: 24px 16px;
}

.adsense-slot.size-300x600 {
  min-height: 600px;             /* v11 had 480px — gecorrigeerd, zie file-header */
  padding: 32px 16px;
}

.adsense-slot.size-in-feed {
  min-height: 100px;
  margin: 6px 16px;
  /* In-feed = adaptive, Google iframe past hoogte (80-250px) aan op basis
   * van native ad styling. 100px is conservatief minimum voor placeholder.
   * Niet exact Google spec — er bestaat geen vaste in-feed-hoogte. */
}

.adsense-slot.size-responsive {
  min-height: 100px;
}

/* Fase A 30/4/2026 — sticky vertical sidebar variant (300×600 in rechterkolom) */
.adsense-slot.size-vertical,
.adsense-slot--vertical {
  min-height: 600px;
  width: 300px;
  position: sticky;
  top: 88px;                              /* onder topbar + filter-bar */
  margin: 0 0 24px 0;
}

/* Inline in card-grid — matcht .premium-card hoogte + glass token */
.adsense-slot.size-infeed,
.adsense-slot--infeed {
  min-height: 280px;
  margin: 0;
}

/* Pass 41f: adsense-wrapper aligned met content */
.adsense-wrapper { max-width: 1208px; margin: 32px auto; padding: 0 20px; display: flex; justify-content: center; }

/* article-card-flag.css — sub-stap 3.4 PUNT 9 1/5/2026.
   Article-card krijgt full-height vlag-strip rechts (32 px breed). Plus
   compact event-row PUNT 7 in zelfde file om import-discipline te beperken. */

.article-item.article-item-grid {
  /* FINAL ALIGN FIX 4 1/5/2026 — magazine-vormfactor 233 × 521 px,
     verhouding 1 op 2.2 conform Voetbal4All productie. */
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: stretch;
  max-width: 233px;
  width: 233px;
  min-height: 521px;
  font-family: var(--font);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.article-item.article-item-grid:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.30);
}

.article-item.article-item-grid .article-item-content {
  display: flex;
  flex-direction: column;
}
.article-item.article-item-grid .article-img {
  /* FIX 4 — afbeelding bovenaan ~280 px hoog magazine-cover-stijl. */
  height: 280px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.article-item.article-item-grid .article-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.article-item.article-item-grid .article-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.article-item.article-item-grid .article-headline {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-item.article-item-grid .article-deck {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;        /* FIX 4 — 4 lijnen ipv 3, meer ruimte */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-item.article-item-grid .article-meta {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--glass-card-border);
}

/* Articles-grid container — auto-fill repeat met min 230 px voor 4-5 cards
   naast elkaar op 1411 px breed body, 16 px gap. */
.article-list,
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  align-items: start;
}

/* LAYOUT FIX 5 1/5/2026 — exact 4 kolommen op homepage. */
.articles-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}
/* Fix 7 v3: magazine-card grid, 2 per row, vertical stack per card.
   Image top (160px), title+deck+meta bottom. ~280-320px per card. */
.articles-grid--magazine {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.articles-grid--magazine .article-item.article-item-grid {
  max-width: none;
  width: 100%;
  min-height: auto;
  grid-template-columns: 1fr 28px;  /* content + flag strip */
}
.articles-grid--magazine .article-item.article-item-grid .article-img {
  height: 160px;
}
.articles-grid--magazine .article-item.article-item-grid .article-info {
  padding: 10px 12px;
}
.articles-grid--magazine .article-item.article-item-grid .article-headline {
  font-size: 13px;
  -webkit-line-clamp: 2;
}
.articles-grid--magazine .article-item.article-item-grid .article-deck {
  font-size: 11px;
  -webkit-line-clamp: 2;
}
@media (max-width: 700px) {
  .articles-grid--magazine { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .articles-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .articles-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .articles-grid--4col { grid-template-columns: 1fr; }
}
/* Fix 6 sub-3.4: brand-gradient fallback with category icon */
.article-img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212,175,55,0.12) 0%, var(--bg-soft) 50%, rgba(24,160,251,0.08) 100%) !important;
}
.article-img-icon {
  font-size: 36px;
  opacity: 0.3;
  filter: grayscale(0.3);
}
.article-item-content {
  display: flex;
  flex-direction: column;
}
.article-country-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border-left: 1px solid var(--glass-card-border);
  font-size: 18px;
  width: 32px;
}
.article-country-flag span {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45));
}

/* PUNT 7 + LAYOUT FIX 6 1/5/2026 — compact event-row 32 px hoog conform
   Voetbal4All productie. Datum-box 32 x 32 px, tighter padding, kleinere fonts. */
.event-row-compact {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: flex-start;
  gap: 8px;
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--glass-card-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.event-row-compact:hover { background: var(--bg-card-hover); }
.event-row-compact-date {
  width: 32px;
  min-height: 32px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.18);
  padding: 2px 0;
}
.event-row-compact-flag {
  font-size: 11px;
  line-height: 1;
  margin-top: 2px;
  display: block;
  text-align: center;
}
.event-row-compact-date-day  { font-size: 11px; font-weight: 800; color: var(--gold-bright); line-height: 1; }
.event-row-compact-date-mon  { font-family: var(--font-mono); font-size: 7px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; margin-top: 1px; }
.event-row-compact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.event-row-compact-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-row-compact-loc {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-row-compact-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  color: var(--text-soft);
}
.event-row-compact.is-premium .event-row-compact-badge {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--bg);
}
/* article-event.css — list-rij componenten:
 *   .article-item   — artikel-rij in mid-column (110px cover + tekst)
 *   .event-mini     — event-rij in linker kolom (banner-image bovenaan)
 *
 * Bron: docs/mockups/v11.html
 *   - Article: regels 1207-1285 (één definitie, geen conflict).
 *   - Event-mini: regels 1056-1125 (origineel, 2-kolom datum-block)
 *                 + regels 1729-1785 (override, 1-kolom banner).
 *     Override wint per CSS-cascade. In deze file alleen FINAL waarden;
 *     erfgoed-properties van origineel die niets doen op `display: block`
 *     (gap, align-items) zijn weggelaten. Sub-elementen die niet meer in
 *     de override-markup zitten (.event-date-block, .event-day, .event-month)
 *     zijn óók weggelaten.
 *
 * .standings-table blijft in cards.css — sub-element van .standings-card,
 * niet een list-rij component op deze laag.
 *
 * IMG-CONTAINER PHOTO-READY:
 *   .article-img en .event-mini-img zijn aspect-ratio containers. Vandaag
 *   bevatten ze inline SVG (mockup) of placeholder-gradients (a1-a5);
 *   morgen vervangt de EJS-partial dat door <img src="cover_image">.
 *   De container-CSS verandert niet — alleen het kind.
 */

/* ══════════════════════════════════════════════
   ARTICLE LIST — mid-column
   ══════════════════════════════════════════════ */
.article-item {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s ease;
}

.article-item:last-child {
  border-bottom: none;
}

.article-item:hover {
  background: rgba(24, 160, 251, 0.05);
}

/* ──────────────────────────────────────────────
   Cover-container — photo-ready aspect-ratio box.
   Default = neutrale dark gradient als fallback.
   ────────────────────────────────────────────── */
.article-img {
  aspect-ratio: 1.4;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--bg-softer), var(--bg-soft));
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

/* Subtiele highlight rechts-boven — werkt over elke achtergrond heen */
.article-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.18), transparent 60%);
}

/* ──────────────────────────────────────────────
   Placeholder-gradients voor artikels zonder cover_image.
   EJS-logica in stap 2:
     <% if (article.cover_image) { %>
       <div class="article-img"><img src="<%= article.cover_image %>"></div>
     <% } else { %>
       <div class="article-img a<%= (article.id % 5) + 1 %>"></div>
     <% } %>
   Deterministisch via id % 5 → zelfde artikel krijgt altijd dezelfde tint.
   ────────────────────────────────────────────── */
.article-img.a1 { background: linear-gradient(135deg, #18a0fb, #0066cc); }
.article-img.a2 { background: linear-gradient(135deg, #ff7a18, #8b5cf6); }
.article-img.a3 { background: linear-gradient(135deg, #00d4ff, #18a0fb); }
.article-img.a4 { background: linear-gradient(135deg, #ffb800, #ff7a18); }
.article-img.a5 { background: linear-gradient(135deg, #8b5cf6, #18a0fb); }

/* Vlag-pill rechts-boven op de cover */
.article-img-flag {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: white;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 600;
}

/* ──────────────────────────────────────────────
   Tekst-blok rechts van de cover
   ────────────────────────────────────────────── */
.article-info {
  min-width: 0;
}

.article-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.article-headline {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.article-deck {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}

.article-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════
   EVENT-MINI — linker kolom, banner-image variant
   FINAL CASCADE van v11 regels 1056-1125 + 1729-1785.
   cursor + :hover zijn verplaatst naar .event-mini-body.
   ══════════════════════════════════════════════ */
.event-mini {
  padding: 0;
  display: block;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.event-mini:last-child {
  border-bottom: none;
}

/* ──────────────────────────────────────────────
   Banner-cover bovenaan — 3.2 ratio (320×100)
   photo-ready container; vandaag SVG, morgen <img>.
   ────────────────────────────────────────────── */
.event-mini-img {
  aspect-ratio: 3.2;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg-soft);
}

.event-mini-img svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Datum-overlay links-boven — donkere blur-pill met dag + maand */
.event-mini-img-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 36px;
}

.event-mini-img-overlay-day {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-display);
}

.event-mini-img-overlay-month {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--accent-orange);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Vlag-pill rechts-boven op de banner */
.event-mini-img-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
}

/* ──────────────────────────────────────────────
   Body onder de banner — clickable, hover-state.
   .event-mini zelf is geen cursor:pointer meer.
   ────────────────────────────────────────────── */
.event-mini-body {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.event-mini-body:hover {
  background: rgba(24, 160, 251, 0.05);
}

.event-mini-info {
  min-width: 0;
}

.event-mini-type {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}

.event-mini-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.event-mini-loc {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-mini-flags {
  display: flex;
  gap: 1px;
  margin-top: 3px;
}

.mini-flag {
  font-size: 10px;
}
/* bedankt.css — Fase A 30/4/2026 (port van Voetbal4All v4 thank-you-page).
   Champagne-goud variabelen ongewijzigd. Glasmorfisme container voor card. */

.bedankt-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
}

.bedankt-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
  padding: 48px 32px;
  font-family: var(--font);
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--glass-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── Checkmark SVG met stroke-dasharray animatie ─────────────────── */
.bedankt-check {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  display: block;
  stroke: var(--gold-bright);
  stroke-width: 2;
}
.bedankt-check-circle {
  stroke: var(--gold-bright);
  stroke-width: 1.5;
  stroke-dasharray: 70;          /* circumference 2πr ≈ 69.115, rond op 70 */
  stroke-dashoffset: 70;
  animation: v4-stroke 0.6s ease-out 0.05s forwards;
}
.bedankt-check-mark {
  stroke: var(--gold-bright);
  stroke-width: 2.5;
  stroke-dasharray: 22;          /* lengte van M7,12 → L11,16 → L17,8 ≈ 22 */
  stroke-dashoffset: 22;
  animation: v4-stroke 0.6s ease-out 0.5s forwards;
}
@keyframes v4-stroke {
  to { stroke-dashoffset: 0; }
}

/* ── Titel + sub-tekst fade-in volgen 0.3s na de checkmark ──────── */
.bedankt-title {
  font-family: var(--font-display, var(--font));
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
  opacity: 0;
  animation: v4-fade-in 0.5s ease-out 0.9s forwards;
}
.bedankt-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 auto 28px;
  max-width: 380px;
  opacity: 0;
  animation: v4-fade-in 0.5s ease-out 1.1s forwards;
}
@keyframes v4-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bedankt-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: v4-fade-in 0.5s ease-out 1.3s forwards;
}
.bedankt-actions .btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--bg);
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.55);
}
.bedankt-actions .btn-ghost {
  background: transparent;
  color: var(--gold-bright);
  padding: 11px 18px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.bedankt-actions a:hover { filter: brightness(1.05); }

/* Reduce motion — respecteer prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bedankt-check-circle,
  .bedankt-check-mark { animation: none; stroke-dashoffset: 0; }
  .bedankt-title,
  .bedankt-sub,
  .bedankt-actions { animation: none; opacity: 1; transform: none; }
}
/* Pass 36g: slagzin kleiner + fixed-width flanking lines */
.brand-tagline-css-v2 {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 4px 24px 10px; margin: 0 auto; max-width: 1208px;
}
.btc-line { display: block; width: 200px; flex-shrink: 1; height: 2px; border-radius: 2px; }
.btc-line--left {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)          0%,
    rgba(59, 130, 246, 0.6)   30%,
    rgba(236, 72, 153, 0.7)   60%,
    rgba(249, 115, 22, 0.9)   100%
  );
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}
.btc-line--right {
  background: linear-gradient(90deg,
    rgba(249, 115, 22, 0.9)   0%,
    rgba(236, 72, 153, 0.7)   40%,
    rgba(59, 130, 246, 0.6)   70%,
    rgba(0, 0, 0, 0)          100%
  );
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}
.btc-text {
  font-family: 'Eurostile Extended','Eurostile','Bank Gothic','Orbitron','Montserrat',sans-serif;
  font-weight: 700; font-size: clamp(11px, 1.1vw, 16px); letter-spacing: 0.2em;
  text-transform: uppercase; white-space: nowrap;
  display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0;
}
.btc-word { display: inline-block; }
.btc-word--blue   { color: #3b82f6; text-shadow: 0 0 10px rgba(59,130,246,0.55); }
.btc-word--pink   { color: rgb(236, 72, 153); text-shadow: 0 0 10px rgba(236,72,153,0.55); }
.btc-word--orange { color: rgb(249, 115, 22); text-shadow: 0 0 10px rgba(249,115,22,0.55); }
@media (max-width: 1100px) { .btc-line { width: 100px; } }
@media (max-width: 720px) { .btc-line { display: none; } .brand-tagline-css-v2 { gap: 8px; } .btc-text { gap: 6px; font-size: 10px; } }
/* cards.css — alle kaartklassen + bijbehorende page-level grids.
 * Bron: docs/mockups/v11.html regels 437-519 (.card + standings),
 *       880-985 + 1788-1809 (.premium-card + img/body/price),
 *       1000-1054 (.col-card + header/title),
 *       1395-1452 + 1812-1823 (.profile-tile + avatars + svg overlay),
 *       1641-1724 (.ticker-card + meta-row + cat/new/time/title/club),
 *       430-435, 879-884, 992-998 (page-level grids),
 *       1957-1976 (responsive grid-collapse).
 *
 * DEDUPLICATIE — glass-foundation gedeeld over 4 i.p.v. de gevraagde 5
 * selectors. .profile-tile is uitgesloten omdat het in v11 een list-row
 * binnen .col-card is, géén glass-card. Zie commentaar bij die sectie.
 * Zo bespaard: ~70 regels copy-paste t.o.v. pure v11 extractie.
 */

/* ══════════════════════════════════════════════
   SHARED — glass foundation
   ══════════════════════════════════════════════ */
.card,
.col-card,
.premium-card,
.ticker-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--glass-card-shadow), var(--glass-card-inner-shadow);
  position: relative;
}

/* Glass-highlight overlay — alleen op .card en .col-card.
   .premium-card heeft eigen ::before (gold hairline, zie verderop).
   .ticker-card heeft geen ::before in v11 — bewust niet toegevoegd. */
.card::before,
.col-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-card-highlight);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Stack-order — content boven de ::before overlay */
.card > *,
.col-card > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   .card — generieke glass-card (gebruikt door
   standings + hero-card + ad blocks)
   ══════════════════════════════════════════════ */
.card {
  border-radius: var(--radius);
  overflow: hidden;
}

/* ──────────────────────────────────────────────
   Standings (NL/BE rangschikkingen in top-row)
   ────────────────────────────────────────────── */
.standings-card {
  padding: 14px;
}

.standings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.standings-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.standings-card-flag {
  font-size: 14px;
}

.standings-card-country {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 1px;
}

.standings-card-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}

.standings-card-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.standings-card-link {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.standings-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 5px 6px 4px;
  border-bottom: 1px solid var(--border-subtle);
}

.standings-table th.num,
.standings-table td.num {
  text-align: center;
}

.standings-table th.right,
.standings-table td.right {
  text-align: right;
}

.standings-table td {
  padding: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.standings-table tr:last-child td {
  border-bottom: none;
}

.standings-table tr:hover td {
  background: rgba(24, 160, 251, 0.04);
}

/* Positie-kleuren — cl = Champions League blauw, eu = Europa goud */
.pos {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 11px;
  width: 22px;
}
.pos.cl { color: var(--accent); }
.pos.eu { color: var(--gold); }

.team-name {
  font-weight: 600;
  color: var(--text);
}

.pts {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
}

/* ══════════════════════════════════════════════
   .col-card — kolom-card (events, profile-list,
   article-list containers)
   ══════════════════════════════════════════════ */
.col-card {
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}

.col-card-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.col-card-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.col-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 2px;
  opacity: 0.75;
}

.col-card-link {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════
   .premium-card — gold-accent premium ad cards
   ══════════════════════════════════════════════ */
.premium-card {
  /* Extra layer: subtiele gold-tint van bovenkant naar transparent */
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, transparent 35%),
    var(--glass-card-bg);
  border: 1px solid rgba(212, 175, 55, 0.18);   /* override shared border */
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  /* Gold inner-shadow boven de standaard glass shadows */
  box-shadow:
    var(--glass-card-shadow),
    var(--glass-card-inner-shadow),
    inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

/* Gold hairline-band bovenaan — vervangt shared glass-highlight */
.premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.5) 30%,
    rgba(212, 175, 55, 0.7) 50%,
    rgba(212, 175, 55, 0.5) 70%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.premium-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(212, 175, 55, 0.08);
}

.premium-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(11, 16, 34, 0.75);
  backdrop-filter: blur(8px);
  color: var(--gold-bright);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid rgba(212, 175, 55, 0.35);
  z-index: 2;
  font-family: var(--font-mono);
}

.premium-cat {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
  opacity: 0.85;
}

.premium-club {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -0.005em;
  position: relative;
}

.premium-title {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Cross-border vlaggen onderaan een premium card */
.premium-cb-flags {
  display: flex;
  gap: 3px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  position: relative;
}

.premium-cb-flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid var(--border-subtle);
}

/* SVG cover bovenaan + body + price-strip */
.premium-card-img {
  aspect-ratio: 2.4;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(212, 175, 55, 0.08);
}
.premium-card-img svg {
  width: 100%;
  height: 100%;
  display: block;
}

.premium-card-body {
  padding: 12px 13px 13px;
}

.premium-card-price {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  opacity: 0.75;
}

/* ──────────────────────────────────────────────
   Premium-card varianten:
   --cta    = marketing-card zonder image-area (premium tier sales)
   --basic  = niet-premium club fallback (zwakker gold-accent)
   --gold/--cyan/--violet = tier-accent kleurvarianten
   ────────────────────────────────────────────── */
.premium-card--cta {
  /* Geen image — body vult volle hoogte */
}
.premium-card--cta .premium-card-body {
  padding: 18px 20px;
}

/* BUG 1 fix 28/4/2026 — titel mocht niet onder de absolute .premium-tag schuiven.
   Badge is ~74px breed met right:12px → overlapt body-content op de eerste regel.
   Reserveer rechter-padding op de titel; bullets en CTA blijven full-width. */
.premium-card--cta .premium-club {
  padding-right: 76px;
}

.premium-card--basic {
  border-color: var(--glass-card-border);
  box-shadow: var(--glass-card-shadow), var(--glass-card-inner-shadow);
}
.premium-card--basic::before { display: none; }
.premium-card--basic:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-card-shadow-hover);
  transform: translateY(-1px);
}

.premium-card--gold   { /* default — geen override nodig */ }
.premium-card--cyan {
  border-color: rgba(0, 212, 255, 0.25);
}
.premium-card--cyan::before {
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6) 50%, transparent);
}
.premium-card--violet {
  border-color: rgba(139, 92, 246, 0.25);
}
.premium-card--violet::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6) 50%, transparent);
}

/* ──────────────────────────────────────────────
   Empty-state met cluster-redirect hint
   Gebruikt door partials/empty-region-state.ejs in lower-grid kolommen.
   ────────────────────────────────────────────── */
.empty-state-region {
  padding: 24px 18px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state-region .empty-state-title {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 8px;
  line-height: 1.5;
}
.empty-state-region .empty-state-title strong {
  color: var(--text);
  font-weight: 700;
}
.empty-state-region .empty-state-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.empty-state-region .btn-link {
  color: var(--gold-bright);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}
.empty-state-region .btn-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-bright);
}

/* ══════════════════════════════════════════════
   .ticker-card — visitekaartjes binnen de ticker
   strip (de ticker-container zelf staat in
   premium-ticker.css)
   ══════════════════════════════════════════════ */
.ticker-card {
  border-radius: var(--radius-md);
  padding: 8px 14px 8px 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  min-width: 290px;
  cursor: pointer;
  transition: all 0.25s ease;
  /* Override shared shadow met smaller variant — past bij ticker-schaal */
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ticker-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(11, 16, 34, 0.85);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.25),
    0 0 20px rgba(212, 175, 55, 0.1);
}

.ticker-card-img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid rgba(212, 175, 55, 0.15);
}
.ticker-card-img svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ticker-card-text {
  min-width: 0;
  flex: 1;
}

.ticker-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.ticker-card-cat {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ticker-card-new {
  background: transparent;
  color: var(--gold-bright);
  font-size: 7px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.ticker-card-time {
  font-size: 9px;
  color: var(--text-muted);
  margin-left: auto;
  font-family: var(--font-mono);
}

.ticker-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  letter-spacing: -0.005em;
}

.ticker-card-club {
  font-size: 10px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════
   .profile-tile — list-row binnen .col-card.
   GEEN glass-card: in v11 een eenvoudige rij met
   border-bottom, geen background/shadow/blur.
   Daarom uitgesloten van shared glass-foundation.
   ══════════════════════════════════════════════ */
.profile-tile {
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s ease;
}

.profile-tile:last-child {
  border-bottom: none;
}

.profile-tile:hover {
  background: rgba(24, 160, 251, 0.05);
}

/* Avatar — square met gradient + role-color border.
   svg.avatar-bg ligt op 35% opacity onder de letter.
   .profile-tile-avatar > span = de letter, op z-index 1. */
.profile-tile-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 11px;
  font-family: var(--font-display);
  position: relative;
  overflow: hidden;
}

.profile-tile-avatar svg.avatar-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.profile-tile-avatar > span {
  position: relative;
  z-index: 1;
}

/* Avatar kleur-varianten — 6 stuks, donkere gradient + role-tinted border */
.av-blue    { background: linear-gradient(135deg, #2a5d8a, #1a3d5a); border: 1px solid rgba( 24, 160, 251, 0.3); }
.av-fuchsia { background: linear-gradient(135deg, #5a3d7a, #3d2855); border: 1px solid rgba(139,  92, 246, 0.3); }
.av-orange  { background: linear-gradient(135deg, #7a5530, #5a3d20); border: 1px solid rgba(196, 122,  61, 0.3); }
.av-cyan    { background: linear-gradient(135deg, #1a5a6a, #0d3d4a); border: 1px solid rgba(  0, 212, 255, 0.3); }
.av-mix     { background: linear-gradient(135deg, #2a4d7a, #3d2855); border: 1px solid rgba( 24, 160, 251, 0.3); }
.av-gold    { background: linear-gradient(135deg, #6a5520, #4a3a15); border: 1px solid rgba(212, 175,  55, 0.4); }

.profile-tile-info {
  min-width: 0;
  flex: 1;
}

.profile-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 1px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tile-pos {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tile-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 2px;
}

.profile-tile-flags {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}

/* Page-level grids (.home-top-grid, .lower-grid, .premium-row-grid)
   verhuisd naar components/grids.css. */
/* coming-soon.css — "Binnenkort beschikbaar" page styling */
.coming-soon-card {
  position: relative;
  overflow: hidden;
  max-width: 640px;
  margin: 32px auto;
  padding: 40px 32px;
  text-align: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}
.coming-soon-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  z-index: 1;
  border-radius: 14px 14px 0 0;
}
.coming-soon-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}
.coming-soon-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}
.coming-soon-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.coming-soon-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.coming-soon-hints {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coming-soon-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
/* Per-page neon color variants */
.coming-soon-card--cyan::before,
.coming-soon-card--cyan::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 212, 255) 50%, rgba(0,0,0,0) 100%); }
.coming-soon-card--red::before,
.coming-soon-card--red::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(239, 68, 68) 50%, rgba(0,0,0,0) 100%); }
.coming-soon-card--violet::before,
.coming-soon-card--violet::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(192, 132, 252) 50%, rgba(0,0,0,0) 100%); }
.coming-soon-card--green::before,
.coming-soon-card--green::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(74, 222, 128) 50%, rgba(0,0,0,0) 100%); }
.coming-soon-card--orange::before,
.coming-soon-card--orange::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(249, 115, 22) 50%, rgba(0,0,0,0) 100%); }
/* content-blocks.css — drie inhoudelijke promo-blokken:
 *   .scout4all-ad   — cyan B2B-merk promo (boven artikel-lijst)
 *   .sidebar-ad     — generieke kolom-promo (rechtse kolom)
 *   .matching-tile  — cross-border match teaser (linkse kolom)
 *
 * Bron: docs/mockups/v11.html regels 1127-1205, 1287-1376, 1455-1517.
 *
 * ARCHITECTUUR — optie B gekozen (inline glass, niet via cards.css shared).
 * Reden: alle drie gebruiken `::before` voor eigen radial-gradient blobs.
 * Cards.css shared `::before` is glass-highlight overlay → pseudo-element
 * collision. Matching-tile lost dit lokaal op met `::after` voor highlight
 * + `::before` voor radials; scout4all en sidebar hebben enkel ::before
 * (geen highlight overlay). Drie aparte oplossingen → niet samenvoegbaar
 * met de cards.css ::before-pattern zonder breekrisico.
 *
 * In plaats daarvan: lokale shared selector voor de glass-foundation
 * properties (zonder pseudo-elements) onderaan deze file-comment.
 *
 * MARKUP — twee CTA's gebruiken .btn-gold-outline (in topbar.css):
 *   <button class="sidebar-ad-cta btn-gold-outline">…</button>
 *   <button class="matching-tile-cta btn-gold-outline">…</button>
 * .scout4all-ad-btn behoudt eigen cyan styling (Scout4All merk).
 */

/* ══════════════════════════════════════════════
   SHARED — glass-foundation voor alle 3 blokken.
   Géén ::before in shared — elk blok heeft eigen radials.
   ══════════════════════════════════════════════ */
.scout4all-ad,
.sidebar-ad,
.matching-tile {
  background: var(--glass-card-bg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-card-shadow), var(--glass-card-inner-shadow);
}

/* ══════════════════════════════════════════════
   .scout4all-ad — cyan B2B promo
   ══════════════════════════════════════════════ */
.scout4all-ad {
  color: white;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Cyan-tint glow op hover — Scout4All merk-onderscheid.
   BEWUST behouden, niet vervangen door generieke glass-shadow. */
.scout4all-ad:hover {
  border-color: rgba(0, 212, 255, 0.3);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.15),
    0 0 32px rgba(0, 212, 255, 0.08);
}

/* Radial blobs: violet rechtsboven + blauw linksonder */
.scout4all-ad::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.08), transparent 50%),
    radial-gradient(circle at 20% 100%, rgba(24, 160, 251, 0.06), transparent 50%);
  pointer-events: none;
}

.scout4all-ad-content {
  position: relative;
}

.scout4all-ad-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.scout4all-ad-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.scout4all-ad-desc {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 380px;
}

.scout4all-ad-desc strong {
  color: var(--text);
  font-weight: 700;
}

.scout4all-ad-tags {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.scout4all-tag {
  background: rgba(0, 212, 255, 0.08);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 212, 255, 0.25);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Cyan CTA-button — eigen merk-kleur, GEEN gold-outline.
   Zie file-header voor v11-orphan correctie (regel 1361). */
.scout4all-ad-btn {
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 212, 255, 0.35);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  transition: all 0.2s ease;
}

.scout4all-ad-btn:hover {
  background: rgba(0, 212, 255, 0.18);
  border-color: var(--accent-cyan);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.3),
    0 0 24px rgba(0, 212, 255, 0.15);
}

/* ══════════════════════════════════════════════
   .sidebar-ad — kolom-promo (rechts)
   ══════════════════════════════════════════════ */
.sidebar-ad {
  color: white;
  padding: 18px;
  text-align: center;
}

/* Radial blobs: blauw linksboven + oranje rechtsonder */
.sidebar-ad::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba( 24, 160, 251, 0.15), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 122,  24, 0.10), transparent 60%);
  pointer-events: none;
}

.sidebar-ad-content {
  position: relative;
}

.sidebar-ad-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.sidebar-ad-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sidebar-ad-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

/* CTA gebruikt .btn-gold-outline (topbar.css) via markup.
   Lokale override: full-width — zie blok onderaan deze file. */

/* ══════════════════════════════════════════════
   .matching-tile — cross-border match teaser (links)
   ──────────────────────────────────────────────
   PSEUDO-ELEMENT SHUFFLE — afwijking van .card pattern:
     ::before  =  radial-gradient blobs (eigen merk-identiteit)
     ::after   =  glass-highlight overlay (normaliter ::before)
     > *       =  z-index: 2  (niet 1, omdat highlight op 0 zit)

   Reden: een element heeft maar 2 pseudo-elementen. Beide rollen
   (radial blobs + glass-highlight) zijn hier nodig. ::before is
   "eerst getekend" → onder content; ::after eveneens onder content
   maar boven ::before. Stack: bg → ::before (radials) → ::after
   (highlight) → content (z-index: 2).

   Bij een latere refactor die "alle glass-cards uniform maakt" —
   NIET klakkeloos ::before terugbrengen naar standaard pattern.
   De radial blobs zouden dan verdwijnen.
   ══════════════════════════════════════════════ */
.matching-tile {
  padding: 18px;
}

/* Radial blobs: violet rechtsboven + blauw linksonder */
.matching-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.08), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba( 24, 160, 251, 0.06), transparent 50%);
  pointer-events: none;
}

/* Glass-highlight via ::after (i.p.v. ::before zoals .card)
   omdat ::before al de radial blobs draagt */
.matching-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-card-highlight);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Content boven beide pseudo-layers — z-index:2 niet 1,
   want ::after staat op z-index:0 */
.matching-tile > * {
  position: relative;
  z-index: 2;
}

.matching-tile-content {
  position: relative;
}

.matching-tile-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  opacity: 0.85;
}

.matching-tile-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Inline accent op specifieke woorden binnen de title */
.matching-tile-title .accent {
  color: var(--gold-bright);
  font-weight: 700;
}

.matching-tile-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* CTA gebruikt .btn-gold-outline + lokale overrides.
   Markup: <button class="matching-tile-cta btn-gold-outline">…</button> */
.matching-tile-cta {
  padding: 8px 14px;            /* override default 8px 16px */
  letter-spacing: 0.01em;       /* extra t.o.v. .btn-gold-outline base */
}

/* ──────────────────────────────────────────────
   Container-decision — full-width CTAs binnen content-blocks.
   .btn-gold-outline is breedte-onafhankelijk; deze regel zet de
   width in de context van sidebar-ad en matching-tile.
   ────────────────────────────────────────────── */
.matching-tile-cta,
.sidebar-ad-cta {
  width: 100%;
}

/* ──────────────────────────────────────────────
   Responsive — scout4all-ad collapse op mobile
   (v11 regel 1970)
   ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .scout4all-ad {
    grid-template-columns: 1fr;
  }
}
/* content-grid.css — Pass 27: 3-koloms layout events|artikels|sidebar */

.content-grid-3col {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

.content-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 1100px) {
  .content-grid-3col {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) {
  .content-grid-3col {
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    gap: 16px;
  }
}
/* detail-page.css — 2-column detail layout for all listing types */

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-top: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
}

.detail-main { min-width: 0; }

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-hero-image {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
}

.detail-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright, #d4af37);
  margin: 0 0 6px;
}

.detail-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}

.detail-meta-flag { font-size: 16px; }

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.detail-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-body {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
}
.detail-body p { margin: 0 0 20px; }
@media (max-width: 768px) {
  .detail-body { font-size: 16px; }
  .detail-body p { margin: 0 0 16px; }
}

.detail-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.detail-section-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 12px;
}

/* Sidebar cards */
.detail-sidebar-card {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px;
}

.detail-sidebar-card-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.detail-cta-btn {
  display: block;
  text-align: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--gold-bright, #d4af37), var(--gold-deep, #8c7228));
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 12px;
}
.detail-cta-btn:hover { opacity: 0.9; }

.detail-contact-info {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}
.detail-contact-info a { color: var(--gold-bright, #d4af37); text-decoration: none; }

.detail-privacy-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 12px;
  line-height: 1.5;
}

.detail-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.detail-related-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
}

.detail-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* Lock message for premium-only content */
.detail-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Anonymous profile message form */
.anon-message-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.anon-message-form input,
.anon-message-form textarea {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
}
.anon-message-form textarea { min-height: 80px; resize: vertical; }
.anon-message-form input::placeholder,
.anon-message-form textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
/* ══════════════════════════════════════════════════════════════════
   empty-state.css — BUG 2 fix 28/4/2026
   Eyebrow-prompt boven .empty-state-region voor low-content
   disciplines en age-bands (walking, g-voetbal, beach, street).

   Token-deviation tov briefing: project gebruikt --gold-bright /
   --text (geen --gold-primary / --text-primary in tokens.css).
   ══════════════════════════════════════════════════════════════════ */

.empty-state-eyebrow {
  background: rgba(245, 197, 24, 0.08);
  border-left: 3px solid var(--gold-bright);
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.empty-state-eyebrow p {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.empty-state-eyebrow .btn-link {
  font-size: 12.5px;
  color: var(--gold-bright);
}
/* events-this-week.css — Fix 10 v2: compact event cards.
   Only: date+flag | title | city. Max ~200px wide, ~110px tall. */

.events-this-week {
  margin: 24px 0;
  font-family: var(--font);
  position: relative;
  overflow: hidden;
}
.events-this-week::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(239, 68, 68)    50%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
  opacity: 0.4;
}
.events-this-week::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(239, 68, 68)    50%,
    rgba(0, 0, 0, 0)    100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

.events-monthly-calendar {
  position: relative;
  overflow: hidden;
}
.events-monthly-calendar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(16, 185, 129)   50%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
  opacity: 0.4;
}
.events-monthly-calendar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(16, 185, 129)   50%,
    rgba(0, 0, 0, 0)    100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}
.events-this-week-header { margin-bottom: 12px; }
.events-this-week-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.events-this-week-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.events-this-week-scroller {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: visible;
  overflow-y: visible;
}

.events-this-week-card {
  width: 100%;
  height: auto;
  min-height: 32px;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.events-this-week-card:hover {
  background: var(--bg-card-hover);
}

/* Date block: day number + month + flag stacked */
.events-this-week-card-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
}
.events-this-week-card-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold, #D4AF37);
  line-height: 1;
}
.events-this-week-card-month {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.events-this-week-card-flag { font-size: 11px; line-height: 1; margin-top: 2px; }

/* Info: title + city */
.events-this-week-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.events-this-week-card-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.events-this-week-card-city {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* external-links.css — sub-stap 2.6
 * Card met externe deeplinks naar competitie-rangschikkingen.
 * Compliance: geen embeds — alleen target=_blank links.
 */

.external-links-card {
  background: var(--bg-elevated, #1a1f2a);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.external-links-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.external-links-card-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.external-links-card-title {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.external-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.external-links-item { padding: 0; }

.external-links-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 12.5px;
  transition: all 0.12s ease;
}
.external-links-link:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text);
}
.external-links-icon {
  color: var(--gold-bright, #e2bd47);
  font-size: 11px;
  flex-shrink: 0;
}

.external-links-card-source {
  margin: 10px 0 0;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.external-links-card-source strong { color: var(--text-soft); }
/* filter-bar.css — Fase A 30/4/2026 (sub-stap 2.5c hybride port van Voetbal4All v4)
 * Hybride styling: Voetbal4All v4 glasmorfisme container met
 * dual-layer radial gradient + backdrop-filter, gecombineerd met
 * 4All-Ventures champagne-goud focus-states + premium-pill variant.
 *
 * Champagne-goud variabelen (--gold, --gold-bright, --gold-deep, --gold-glow,
 * --gold-soft) NIET gewijzigd. Glass-card-tokens hergebruikt.
 */

/* ── 1. Sticky outer-wrapper (transparent, alleen voor positionering) ── */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 10, 16, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle, var(--glass-card-border));
}

/* ── 2. FIX 4 1/5/2026 — compact filter-bar, alle 3 rijen in 1 flex-wrap.
       Padding 12 16, max-height 80 px, pills 32 px hoog. ── */
.filter-bar-rows {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  max-width: 1240px;
  margin: 0 auto;
  background: rgba(11, 16, 34, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
  font-family: var(--font);
  max-height: none;  /* Pass 36i: was 80px, knipte pills af */
  overflow: visible;
}

.filter-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-right: 12px;
  border-right: 1px solid var(--glass-card-border);
}
.filter-row:last-child { border-right: 0; }

.filter-label {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--text-muted, #7a8294);
  margin-right: 6px;
  flex-shrink: 0;
  width: auto;
  text-transform: uppercase;
}

/* ── 3. Inputs / selects inside filter-bar krijgen hybride styling ── */
.filter-bar-rows input[type="text"],
.filter-bar-rows input[type="search"],
.filter-bar-rows select {
  font-family: var(--font);
  font-size: 13px;
  height: 44px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-bar-rows input:focus,
.filter-bar-rows select:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ── 4. Filter-pills (FIX 4 1/5/2026 — compact 32px hoog) ── */
/* Pass 36c: 3D glasmorphism consistent met ptype-btn */
.filter-pill {
  background: linear-gradient(180deg, rgba(30,41,59,0.6) 0%, rgba(15,23,42,0.5) 60%, rgba(2,6,23,0.45) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  min-height: 32px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 180ms, border-color 180ms, background 180ms;
}
.filter-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(212,175,55,0.3);
}

/* Pass 36i: active state — gold-glas, NIET fluo-blauw */
.filter-pill.active {
  background: linear-gradient(180deg, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.08) 100%);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 10px rgba(212,175,55,0.25);
}

/* Premium-variant: expliciet goud gradient — voor pricing/featured-pills.
   Bestaande markup `.filter-pill.active.is-premium` activeert deze. */
.filter-pill.active.is-premium,
.filter-pill.active--premium {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--bg, #050814);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow:
    0 0 16px var(--gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.filter-pill .filter-pill-icon { font-size: 13px; display: inline-flex; align-items: center; }
.filter-picto { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin: -4px 0; }

/* ── Mobile collapse ─────────────────────────────────────── */
.filter-bar-mobile-toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.filter-bar-mobile-badge {
  background: var(--gold-bright, #e2bd47);
  color: #1a1408;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
}
.filter-bar-mobile-badge:empty { display: none; }

@media (max-width: 768px) {
  .filter-bar-mobile-toggle { display: inline-flex; }
  .filter-bar-rows {
    display: none;
    padding: 16px;
    gap: 10px;
  }
  .filter-bar.is-mobile-expanded .filter-bar-rows { display: flex; }
  .filter-row { gap: 5px; }
  .filter-label { width: 64px; font-size: 9px; }
  .filter-pill { padding: 4px 9px; font-size: 11px; }
}

/* ── Empty-state suggestion-engine support ───────────────── */
.empty-state-suggestion {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 8px 14px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.empty-state-suggestion strong { color: var(--gold-bright); }
.empty-state-suggestion .btn-link {
  color: var(--gold-bright);
  font-weight: 600;
}

/* ── Newsletter form messages (sub-stap 2.12) ───────────── */
.newsletter-message {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
}
.newsletter-message--info    { background: rgba(255,255,255,0.05); color: var(--text-soft); border: 1px solid rgba(255,255,255,0.10); }
.newsletter-message--success { background: rgba(80,200,120,0.10); color: #6cd28a; border: 1px solid rgba(80,200,120,0.30); }
.newsletter-message--error   { background: rgba(255,90,90,0.10); color: #ff8888;  border: 1px solid rgba(255,90,90,0.30); }
/* footer.css — site-footer met 8-markten flag-row, 4 link-kolommen,
 * gold-gradient divider en bottom legal-strip.
 * Bron: docs/mockups/v11.html regels 1892-1954 + responsive 1965, 1972.
 *
 * MARKT-VLAGGEN (geen taal-vlaggen):
 *   8 markten — BE/NL/DE/FR/GB/ES/IT/PT
 *   Géén RU (taal in DB, geen actief markt) en géén ALL (wildcard, niet land).
 *   v11 markup regels 3528-3531 toont exact deze 8 vlaggen ✓.
 *
 * UPGRADE T.O.V. v11 — gerapporteerd in audit-trail van briefing:
 *   .footer-link default kleur: --text-muted → --text-soft (lichter contrast).
 *   Tom's expliciete voorkeur: footer-links zijn secondary tekst, niet faint.
 */

/* ──────────────────────────────────────────────
   Container — dark bg + subtle top-border
   ────────────────────────────────────────────── */
.footer {
  background: rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 32px;
  padding: 40px 24px 24px;
  border-top: 1px solid rgba(212,175,55,0.08);
  /* Pass 28: content aligned met 1208px grid */
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ──────────────────────────────────────────────
   Top-grid — 2fr brand-kolom + 4× 1fr link-kolommen.
   Bottom-divider via border-image: gold-gradient hairline,
   centraal sterker, fade naar transparent aan beide zijden.
   ────────────────────────────────────────────── */
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.25) 30%,
    rgba(212, 175, 55, 0.40) 50%,
    rgba(212, 175, 55, 0.25) 70%,
    transparent 100%) 1;
  margin-bottom: 20px;
}

/* ──────────────────────────────────────────────
   Brand-kolom (eerste cell): tagline + flag-row
   ────────────────────────────────────────────── */
.footer-tagline {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 280px;
  margin-top: 12px;
  margin-bottom: 16px;
}

/* Flags carousel — infinite horizontal scroll */
.footer-flags-carousel {
  position: relative;
  overflow: hidden;
  margin: 20px 0 8px;
  padding: 4px 0;
}
.footer-flags-fade {
  position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none;
}
.footer-flags-fade--left  { left: 0;  background: linear-gradient(90deg,  rgba(0,0,0,0.4), transparent); }
.footer-flags-fade--right { right: 0; background: linear-gradient(270deg, rgba(0,0,0,0.4), transparent); }
.footer-flags-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: scroll-flags 40s linear infinite;
}
.footer-flags-track:hover { animation-play-state: paused; }
@keyframes scroll-flags {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-flags-track { animation: none; flex-wrap: wrap; width: auto; }
  .footer-flags-carousel { overflow: visible; }
  .footer-flags-fade { display: none; }
}

.footer-flag {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
@media (max-width: 500px) {
  .footer-flag { width: 28px; height: 28px; font-size: 14px; }
}

/* ──────────────────────────────────────────────
   Link-kolommen — title (mono accent) + verticale link-stack
   ────────────────────────────────────────────── */
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Footer-links zijn secondary navigatie — bewust géén gold of accent.
   Default: --text-soft (lichter dan body-muted, leesbaar maar niet primary). */
.footer-link {
  display: block;
  color: var(--text-soft);
  font-size: 11.5px;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--text);
}

/* ──────────────────────────────────────────────
   Bottom-strip — copyright + legal links
   ────────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.footer-legal {
  display: flex;
  gap: 16px;
}

/* ──────────────────────────────────────────────
   Responsive — 5 kolommen → 2 → 1
   ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}
/* Pass 45d: footer brand — logo groter + slagzin 3 kleuren */
.footer-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.footer-logo-link { display: inline-block; text-decoration: none; flex-shrink: 0; }
.footer-logo-img { width: 120px; height: 120px; object-fit: contain; }
.footer-tagline-block { display: flex; flex-direction: column; gap: 6px; }
.footer-tagline-line { display: inline-flex; gap: 8px; font-family: 'Orbitron','Montserrat',sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; }
.ftl-blue { color: #3b82f6; text-shadow: 0 0 10px rgba(59,130,246,0.55); }
.ftl-pink { color: rgb(236, 72, 153); text-shadow: 0 0 10px rgba(236,72,153,0.55); }
.ftl-orange { color: rgb(249, 115, 22); text-shadow: 0 0 10px rgba(249,115,22,0.55); }
.footer-tagline-sub { font-size: 12px; color: rgba(255,255,255,0.55); font-style: italic; }
@media (max-width: 720px) { .footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-logo-img { width: 80px; height: 80px; } .footer-tagline-line { font-size: 12px; flex-wrap: wrap; gap: 4px; } }
/* glass-card.css — Pass 26: shared glassmorphism card utility */

.glass-card {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 20px;
  width: 100%;
  margin-bottom: 16px;
}

.glass-card-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gold-soft);
  position: relative;
}

.glass-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 0 8px var(--gold-glow);
}

.glass-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

.glass-card-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.glass-card-cta-link {
  position: absolute;
  top: 4px;
  right: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 160ms;
}
.glass-card-cta-link:hover { opacity: 1; }

.glass-card-empty {
  padding: 14px 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.glass-card-empty a {
  color: var(--gold-bright);
  text-decoration: none;
  margin-left: 6px;
}
/* grids.css — page-level layout-grids waar cards in worden gelegd.
 * Bewust apart van cards.css: nieuwe page-grids voor marktplaats, profielen,
 * etc. (Sprint 1B-fase-2) komen hier zonder cards.css te verwateren.
 * Bron: docs/mockups/v11.html regels 430-435, 879-884, 992-998, 1957-1976.
 */

/* Top-row: standings-NL · hero · standings-BE */
.home-top-grid {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 16px;
  margin-bottom: 20px;
}

/* 3-koloms hoofdgrid: events · articles · profiles */
.lower-grid {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 18px;
  margin-bottom: 20px;
  align-items: start;  /* Fix 7 sub-3.4: prevent columns stretching to tallest */
}

/* 6 premium cards in een rij */
.premium-row-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* Fix 8 v3: "Deze week"+"Deze maand" LEFT (30%) + "Artikels" RIGHT (70%) */
.home-week-articles-row {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 18px;
  margin-bottom: 20px;
  align-items: start;         /* Fix 8 v3: columns don't stretch to tallest */
}
/* Fix v20: display:block ipv flex-column.
   flex-column collapst naar h=0 in echte Chrome bij grid align-items:start.
   display:block kan NIET collapsen — block-flow heeft altijd content-height. */
.home-week-col {
  display: block;
}

/* Fix 11 v2: lower-grid zonder events-kolom — 2-col */
.lower-grid--2col {
  grid-template-columns: 1fr 280px;
}

/* Pass 15: sidebar without empty grid column */
.lower-sidebar {
  max-width: 320px;
  margin: 0 auto 20px;
}

/* ──────────────────────────────────────────────
   Responsive — collapse bij krappere viewports
   ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .premium-row-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .home-top-grid    { grid-template-columns: 1fr; }
  .lower-grid       { grid-template-columns: 1fr; }
  .lower-grid--2col { grid-template-columns: 1fr; }
  .home-week-articles-row { grid-template-columns: 1fr; }
  .premium-row-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .premium-row-grid { grid-template-columns: 1fr; }
}
/* hero-statement.css + stats-counter — Pass 28 */
/* Pass 44d: hero-block — slagzin + stats samen, geen verspilde witruimte */
.hero-block { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 24px 8px; margin: 0 auto; max-width: 1408px; text-align: center; }
.hero-block .brand-tagline-css-v2 { margin: 0; padding: 4px 24px 0; width: 100%; text-align: center; }
.hero-block .stats-counter-strip { margin: 0 auto; padding: 0; width: 100%; }
.hero-statement { text-align: center; padding: 0; max-width: 760px; margin: 0 auto; }
/* Pass 30: slagzin als image ipv CSS gradient tekst */
.brand-tagline-image {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 24px; margin: 0 0 14px;
}
.brand-tagline-image-img {
  display: block; max-width: 100%; height: auto; width: auto; max-height: 36px;
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.2));
}
@media (max-width: 720px) { .brand-tagline-image-img { max-height: 28px; } }
.hero-statement-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.2; color: #fff; margin: 0 0 10px; }
.hero-statement-accent { background: linear-gradient(135deg, #d4af37, #c9a961); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-statement-sub { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.65); margin: 0; }

.stats-counter-strip { display: flex; justify-content: center; gap: 28px; align-items: center; padding: 14px 20px 22px; max-width: 760px; margin: 0 auto; }
.stats-counter-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats-counter-number { font-size: 16px; font-weight: 800; background: linear-gradient(135deg, #d4af37, #c9a961); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-counter-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.stats-counter-divider { width: 1px; height: 24px; background: rgba(212,175,55,0.15); }
.stats-counter-strip { flex-wrap: wrap; }
.stats-counter-label-prefix {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); padding-right: 12px;
  border-right: 1px solid rgba(212,175,55,0.15); margin-right: 4px;
}
@media (max-width: 600px) {
  .stats-counter-label-prefix { border-right: none; width: 100%; text-align: center; margin-bottom: 8px; }
}
/* hero.css — middle column van de top-row.
 * Bevat: hero-card (gradient + grid-mask), domain-pill, headline,
 * 8-talen slogan-pills, en de nieuwsbrief-inschrijving (hero-split).
 * Bron: docs/mockups/v11.html regels 521-751 + responsive 736-741, 1971.
 *
 * SEMANTIEK — drie aparte taal/regio-controls op de pagina:
 *   .lang-toggle (topbar)         = UI-vertaling, 4 talen, blauw-active
 *   .hero-slogan-lang             = headline+form-vertaling, 8 talen, blauw-active
 *   .hero-split-radio             = newsletter-editie filter, 9 regio's, goud-active
 * Eerste twee zijn vertaling-toggles (zelfde semantiek → zelfde blauw).
 * Derde is een content-filter (geen vertaling) → goud, premium-look.
 */

/* ──────────────────────────────────────────────
   Hero card — glass-card met radial gradients en grid-overlay.
   ::before = blauw/violet/goud blobs.
   ::after  = transparante grid, gemaskerd door radial fade vanaf 50%/30%.
   ────────────────────────────────────────────── */
.hero-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-card-shadow), var(--glass-card-inner-shadow);
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 15% 20%, rgba(24, 160, 251, 0.08), transparent 60%),
    radial-gradient(ellipse 500px 300px at 85% 80%, rgba(139, 92, 246, 0.06), transparent 60%),
    radial-gradient(ellipse 400px 200px at 60% 30%, rgba(212, 175, 55, 0.05), transparent 60%);
  pointer-events: none;
}

.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 70%);
}

/* ──────────────────────────────────────────────
   Header (boven de newsletter-form)
   ────────────────────────────────────────────── */
.hero-card-header {
  position: relative;
  z-index: 1;
  padding: 26px 28px 18px;
  text-align: center;
}

/* Domain-pill: "Live  www.voetbal4all.eu" */
.hero-domain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
}

.hero-domain-tag {
  background: var(--accent);
  color: white;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Headline + heart */
.hero-headline {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 12px;
  color: var(--text);
}
.hero-headline .heart {
  color: #e85a4f;
  display: inline-block;
  text-shadow: 0 0 24px rgba(232, 90, 79, 0.4);
}

.hero-note {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 12px;
}

/* ──────────────────────────────────────────────
   Slogan-pills — 8 talen (NL/FR/DE/EN/ES/IT/PT/RU).
   Vertaalt headline + nieuwsbrief-formulier teksten.
   Sync met topbar .lang-toggle (4 talen subset).
   Active = blauw-outline, zelfde semantiek als .lang-toggle.
   ────────────────────────────────────────────── */
.hero-slogan-langs {
  display: inline-flex;
  gap: 1px;
  margin-top: 4px;
}

.hero-slogan-lang {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.hero-slogan-lang:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

/* Active — blauw-outline (matching .lang-toggle).
   Vertaling-toggle, geen content-filter → géén goud. */
.hero-slogan-lang.active {
  background: rgba(24, 160, 251, 0.12);
  border-color: rgba(24, 160, 251, 0.4);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(24, 160, 251, 0.15);
}

/* ──────────────────────────────────────────────
   Hero-split — nieuwsbrief inschrijving onderaan de hero.
   Donkerder inset block t.o.v. de hero-card achtergrond.
   ────────────────────────────────────────────── */
.hero-split {
  position: relative;
  z-index: 1;
  margin: 0 14px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  backdrop-filter: blur(12px);
}

.hero-split-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}

.hero-split-title-icon {
  width: 22px;
  height: 22px;
  background: rgba(24, 160, 251, 0.12);
  color: var(--accent);
  border: 1px solid rgba(24, 160, 251, 0.25);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.hero-split-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Form: input + submit — 1 rij op desktop, 1 kolom op mobile (zie @media) */
.hero-split-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}

.hero-split-input {
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  outline: none;
  transition: all 0.15s ease;
}
.hero-split-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(24, 160, 251, 0.15);
}

.hero-split-submit {
  background: rgba(24, 160, 251, 0.12);
  color: var(--accent);
  border: 1px solid rgba(24, 160, 251, 0.35);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.hero-split-submit:hover {
  background: rgba(24, 160, 251, 0.2);
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(24, 160, 251, 0.3),
    0 0 20px rgba(24, 160, 251, 0.2);
}

.hero-split-options {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ──────────────────────────────────────────────
   Newsletter-radios — 9 edities (BE/NL/DE/FR/GB/ES/IT/PT/ALL).
   Display "UK" met 🇬🇧 vlag, data-attribuut "gb" (ISO normalisatie).
   Active = goud-outline (premium default — ALL is meestal default).
   ────────────────────────────────────────────── */
.hero-split-radios {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.hero-split-radio {
  padding: 5px 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.1;
  min-height: 40px;
  justify-content: center;
}
.hero-split-radio .flag {
  font-size: 13px;
  line-height: 1;
}
.hero-split-radio .code {
  font-size: 8.5px;
  opacity: 0.85;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}
.hero-split-radio:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* Active — goud-outline (= v11 final, = Tom's spec).
   Bewust niet blauw: dit is een content-filter, geen vertaling. */
.hero-split-radio.active {
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.15);
}

/* Privacy-checkbox onder de radios */
.hero-split-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  cursor: pointer;
}
.hero-split-checkbox input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   Responsive — radios collapsen progressief.
   Form wordt single-column onder 700px (uit v11 regel 1971).
   ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-split-radios {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 700px) {
  .hero-split-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .hero-split-radios {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* home-newsletter-row.css — sub-stap 3.4 PUNT 3 + PUNT 5 + FIX 5 1/5/2026.
   3-kol grid (FIX 5): newsletter | video | standings.
   Plus compact-hero block boven dat. Plus content max-width 1240 px. */

.page,
main.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

.home-hero-compact {
  text-align: center;
  padding: 24px 16px 12px;
  font-family: var(--font);
}
.home-hero-compact-headline {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--text);
}
/* Fix 5 v4: neon rainbow gradient text */
/* Slagzin als afbeelding */
.home-hero-slagzin {
  display: block;
  max-width: 900px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Pass 8: middenkolom wrapper — video+newsletter boven, ticker onder */
.hero-center-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;   /* prevent overflow beyond grid cell */
  overflow: hidden;
}

/* ═══ Hero-ticker — "Net geplaatst" in hero middenkolom ═══ */
.hero-ticker {
  margin-top: 14px;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.06) 0%, transparent 50%, rgba(212,175,55,0.04) 100%),
    var(--glass-card-bg);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hero-ticker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(212,175,55,0.12);
}
.hero-ticker-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-ticker-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
}
.hero-ticker-pulse {
  width: 5px; height: 5px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-bright);
  animation: pulse 1.4s infinite;
  margin-left: auto;
}
.hero-ticker-empty { padding: 12px 14px; }
.hero-ticker-track-wrap {
  overflow: hidden;
  position: relative;
}
.hero-ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: hero-ticker-scroll 60s linear infinite; will-change: transform;
}
.hero-ticker-track-wrap:hover .hero-ticker-track {
  animation-play-state: paused;
}
@keyframes hero-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 2x dup → -50% = naadloos */
}
.hero-ticker-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  min-width: 220px;
  border-right: 1px solid rgba(212,175,55,0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.hero-ticker-card:hover { background: rgba(212,175,55,0.06); }
.hero-ticker-card-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
}
.hero-ticker-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.hero-ticker-card-club {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Pass 41c: newsletter-card professioneel */
.newsletter-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: linear-gradient(180deg, rgba(30,41,59,0.55) 0%, rgba(15,23,42,0.45) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(212,175,55,0.12); border-radius: 14px; height: 100%; }
.newsletter-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(6, 182, 212)    50%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.newsletter-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(6, 182, 212)    50%,
    rgba(0, 0, 0, 0)    100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}
.newsletter-card-header { border-bottom: 1px solid var(--gold-soft); padding-bottom: 12px; }
.newsletter-card-heading { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.25; }
.newsletter-card-sub { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.45; margin: 0; }
.newsletter-card-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-card-editions { display: flex; flex-wrap: wrap; gap: 6px; }
.newsletter-card-editions label { cursor: pointer; position: relative; }
.newsletter-card-editions label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.newsletter-card-editions label span { display: inline-block; padding: 5px 10px; font-size: 11px; font-weight: 600; background: rgba(15,23,42,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 999px; color: rgba(255,255,255,0.75); transition: all 160ms; }
.newsletter-card-editions label:hover span { border-color: rgba(212,175,55,0.3); color: #fff; }
.newsletter-card-editions label input[type="radio"]:checked + span { background: linear-gradient(180deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1)); border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 0 8px rgba(212,175,55,0.25); }
.newsletter-card-input-group { display: flex; gap: 6px; }
.newsletter-card-input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; font-size: 13px; font-family: var(--font); }
.newsletter-card-input:focus { outline: none; border-color: var(--gold-bright); }
.newsletter-card-submit { height: 40px; padding: 0 18px; background: linear-gradient(180deg, #d4af37, #c9a961); color: #000; font-size: 12px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(212,175,55,0.3); }
.newsletter-card-submit:hover { background: linear-gradient(180deg, #fbbf24, #d4af37); transform: translateY(-1px); }
.newsletter-card-consent { display: flex; gap: 6px; align-items: flex-start; font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1.45; cursor: pointer; }
.newsletter-card-consent input { margin-top: 2px; flex-shrink: 0; }
.newsletter-card-consent a { color: var(--gold-bright); text-decoration: underline; }

/* Pass 32f: premium-ticker-v2 + newsletter edition */
.premium-ticker-v2 {
  background: rgba(15,23,42,0.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(212,175,55,0.12); border-radius: 14px;
  padding: 14px 16px; max-height: 398px; display: flex; flex-direction: column; overflow: hidden;
}
.premium-ticker-v2-header { padding-bottom: 10px; border-bottom: 1px solid var(--gold-soft); margin-bottom: 8px; }
.premium-ticker-v2-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.premium-ticker-v2-item { padding: 8px 10px; background: rgba(2,6,23,0.4); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; border-left: 2px solid var(--gold-bright); }
.newsletter-edition-fieldset { border: none; padding: 0; margin: 0 0 10px; }
.newsletter-edition-fieldset legend { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.newsletter-edition-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.newsletter-edition-options label { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 11px; background: rgba(15,23,42,0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; cursor: pointer; color: rgba(255,255,255,0.8); }
.newsletter-edition-options label:hover { border-color: var(--gold-bright); }
.newsletter-edition-options input[type="radio"] { accent-color: var(--gold-bright); }
/* Pass 34c: newsletter compact form */
.newsletter-heading { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; line-height: 1.25; color: #fff; margin: 0 0 12px; }
.newsletter-heading-gold { color: var(--gold-bright); text-shadow: 0 0 8px var(--gold-glow); }
.newsletter-input-row { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.home-newsletter-signup-input { flex: 1; height: 40px; padding: 0 14px; background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #fff; font-size: 13px; font-family: var(--font); }
.home-newsletter-signup-submit { height: 40px; padding: 0 18px; background: var(--gold-bright); color: #000; font-size: 13px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.home-newsletter-signup-submit:hover { background: #fbbf24; }
.newsletter-disclaimer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 6px; }
.newsletter-consent { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.newsletter-consent a { color: var(--gold-bright); text-decoration: underline; }
.newsletter-frequency { font-style: italic; }

/* 3-kol newsletter row — LAYOUT FIX 3 1/5/2026: 233 / 1fr / 233 conform Voetbal4All */
.home-newsletter-row {
  display: grid;
  grid-template-columns: 233px minmax(0, 1fr) 233px;
  gap: 16px;
  margin: 16px 0 8px; /* Pass 34d: kleinere ruimte naar ticker */
  font-family: var(--font);
  align-items: start;
}
.home-newsletter-row--3col {
  grid-template-columns: 233px minmax(0, 1fr) 233px;
}
@media (max-width: 1024px) {
  .home-newsletter-row,
  .home-newsletter-row--3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .home-newsletter-row,
  .home-newsletter-row--3col { grid-template-columns: 1fr; }
}

/* Video row — full-width (FIX 3) */
.home-video-row {
  margin: 16px 0;
  font-family: var(--font);
}
.home-video-frame-full {
  position: relative;
  max-width: 1168px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-card-border);
  background: #000;
  box-shadow: var(--glass-card-shadow);
}
.home-video-frame-full iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fix 7 v2: hero split — video LEFT, newsletter RIGHT */
.home-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Fix 6 v4: crop black bars via scale(1.18) */
.home-hero-split-video {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}
.home-hero-split-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.30);      /* Fix 6 v5: stronger crop to remove all black bars */
  transform-origin: center;
  pointer-events: none;
}
.home-hero-split-newsletter {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  max-width: 360px;
}
@media (max-width: 700px) {
  .home-hero-split { grid-template-columns: 1fr; }
  .home-hero-split-video { min-height: 160px; }
}

/* Newsletter signup card (mid-kolom) — legacy stacked layout */
.home-newsletter-signup {
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-newsletter-signup-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-card-border);
  background: #000;
}
.home-newsletter-signup-video iframe,
.home-newsletter-signup-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}
/* Fix 7 v4: newsletter heading hierarchy */
.newsletter-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
  margin-bottom: 4px;
}
.newsletter-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 6px;
}
.newsletter-heading-gold {
  background: linear-gradient(90deg, var(--gold-bright), #ff9933);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-newsletter-signup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.home-newsletter-signup-icon { font-size: 18px; color: var(--gold-bright); }
.home-newsletter-signup-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}
.home-newsletter-signup-form {
  display: flex;
  gap: 6px;
}
.home-newsletter-signup-input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}
.home-newsletter-signup-input:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.home-newsletter-signup-submit {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--bg);
  border: 0;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.home-newsletter-signup-consent {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.home-newsletter-video {
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  font-family: var(--font);
}
.home-newsletter-video-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}
.home-newsletter-video-frame {
  /* FINAL FIX 3 — max 320 x 180 px conform spec */
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-card-border);
  background: #000;
  margin: 0 auto;
}
.home-newsletter-video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.home-newsletter-video-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-md);
}
/* laatste-artikels.css — Pass 25: productie-patroon in 4AV glass+gold design */

.laatste-artikels {
  position: relative;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.laatste-artikels::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(74, 222, 128)   50%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
  opacity: 0.4;
}
.laatste-artikels::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(74, 222, 128)   50%,
    rgba(0, 0, 0, 0)    100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

.laatste-artikels-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

.laatste-artikels-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.laatste-artikels-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.laatste-artikels-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.laatste-artikels-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.laatste-artikel-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.laatste-artikel-row:last-child { border-bottom: none; }

.laatste-artikel-link {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 12px 6px;
  text-decoration: none;
  color: inherit;
  border-left: 2px solid transparent;
  border-radius: 6px;
  transition: background 160ms, border-color 160ms;
}

.laatste-artikel-link:hover {
  background: rgba(212, 175, 55, 0.04);
  border-left-color: var(--gold-bright);
}

.laatste-artikel-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
}

.laatste-artikel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.laatste-artikel-thumb-placeholder {
  font-size: 28px;
  opacity: 0.4;
}

.laatste-artikel-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: center;
}

.laatste-artikel-flag {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.laatste-artikel-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.laatste-artikel-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: 0.7;
}

.laatste-artikel-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.laatste-artikels-empty {
  padding: 16px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
/* landing.css — upgraded landing page with neon logo, 45+ countries, lang selector */

.landing-page {
  background:
    radial-gradient(circle at 20% 0%, rgba(212,175,55,0.08), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(92,184,252,0.06), transparent 50%),
    #000000; /* puur zwart — matcht logo PNG ingebakken achtergrond */
  min-height: 100vh;
  color: var(--text, #f4f6fc);
  padding: 32px 16px 48px;
  position: relative;
}

/* FIX 1: Neon logo */
.landing-header { text-align: center; margin: 0 auto 28px; max-width: 760px; }
.landing-logo-img {
  display: block; margin: 0 auto 20px; height: 120px; width: auto;
  filter: none;
  transition: transform 0.3s; cursor: pointer;
}
.landing-logo-img:hover { transform: scale(1.02); }

/* FIX 2: Slagzin 3-laags */
/* FIX 2: slagzin gradient phrases + doorlopende gradient streepjes */
.landing-tagline-h1 {
  font-family: 'Orbitron','Montserrat',sans-serif;
  font-size: clamp(16px, 2vw, 28px); font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  gap: 0; white-space: nowrap; margin: 0 0 12px;
}
.landing-h1-phrase {
  font-weight: 800; letter-spacing: 0.5px;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.landing-h1-phrase[data-color="blue"]  { background-image: linear-gradient(90deg, #40e0ff, #3b82f6); }
.landing-h1-phrase[data-color="pink"]  { background-image: linear-gradient(90deg, #3b82f6, #ec4899); }
.landing-h1-phrase[data-color="orange"]{ background-image: linear-gradient(90deg, #ec4899, #ff6400); }
.landing-h1-divider {
  display: inline-block; width: 32px; height: 3px; margin: 0 16px;
  vertical-align: middle; border-radius: 2px; position: relative; top: -1px;
}
.landing-h1-divider[data-pos="1"] { background: linear-gradient(90deg, #40e0ff, #ec4899); }
.landing-h1-divider[data-pos="2"] { background: linear-gradient(90deg, #ec4899, #f97316); }
@media (max-width: 768px) {
  .landing-tagline-h1 { display: block; white-space: normal; text-align: center; }
  .landing-h1-divider { display: none; }
  .landing-h1-phrase { display: block; margin-bottom: 4px; }
}
.landing-h2 { font-size: 16px; font-weight: 400; color: var(--text-soft,#c4c9dc); margin: 0 0 8px; }
.landing-stats {
  font-family: var(--font-mono,monospace); font-size: 12px;
  color: var(--text-muted,#9aa3c1); letter-spacing: 0.06em; margin: 0;
}

.landing-main { max-width: 1100px; margin: 0 auto; }

/* Suggestion banner */
.landing-suggestion {
  margin: 0 auto 28px; max-width: 720px; padding: 14px 18px;
  border-radius: 10px; background: rgba(212,175,55,0.08);
  border-left: 3px solid var(--gold-bright,#d4af37);
  display: flex; align-items: center; gap: 14px; font-size: 14px;
}
.landing-suggestion .btn-primary { margin-left: auto; }

/* Sections */
.landing-section { margin-bottom: 36px; }
.landing-section-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.landing-section-sub { font-size: 13px; color: var(--text-muted,#9aa3c1); margin: 0 0 16px; }

/* Market/cluster grids */
.landing-grid { display: grid; gap: 12px; }
.landing-grid--markets { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.landing-grid--clusters { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.landing-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 18px; border-radius: 10px;
  background: var(--glass-card-bg, rgba(11,16,34,0.55));
  border: 1px solid var(--glass-card-border, rgba(255,255,255,0.07));
  text-decoration: none; color: var(--text);
  transition: transform 0.15s, border-color 0.15s;
}
.landing-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.4); }
.landing-card-flag { font-size: 28px; }
.landing-card-label { font-size: 14px; font-weight: 700; }
.landing-card-meta { font-family: var(--font-mono,monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted,#9aa3c1); }
.landing-card--cluster { background: rgba(92,184,252,0.04); border-color: rgba(92,184,252,0.18); }
.landing-card--cluster:hover { border-color: rgba(92,184,252,0.45); }

/* FIX 3: All countries grid */
.landing-countries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.landing-cluster-block { padding: 16px; }
.landing-cluster-title {
  font-family: var(--font-mono,monospace); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright,#d4af37);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.landing-cluster-count {
  font-size: 10px; background: rgba(212,175,55,0.15); color: var(--gold-bright);
  padding: 2px 6px; border-radius: 999px;
}
.landing-cluster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.landing-country-link {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm,6px); font-size: 13px; color: var(--text);
  text-decoration: none; border-left: 2px solid transparent; transition: all 0.15s;
}
.landing-country-link:hover { background: rgba(255,255,255,0.05); border-left-color: var(--gold-bright,#d4af37); }

/* Continents grid — 5 non-Europe continents side-by-side */
.landing-continents-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (max-width: 1023px) { .landing-continents-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .landing-continents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .landing-continents-grid { grid-template-columns: 1fr; } }
.landing-continent-card { padding: 16px; }
.landing-continent-title {
  font-family: var(--font-mono,monospace); font-size: 11px; font-weight: 700;
  letter-spacing: 1.32px; text-transform: uppercase;
  margin: 0 0 10px;
}
.landing-continent-card-title {
  font-family: var(--font-mono,monospace); font-size: 11px; font-weight: 700;
  letter-spacing: 1.32px; text-transform: uppercase;
  color: rgb(212, 175, 55);
  margin: 0 0 10px;
}
/* Per-continent neon stripe via --neon-accent CSS variable */
.landing-continent-card.has-neon-stripe::before {
  background: linear-gradient(90deg, transparent 0%, var(--neon-accent, #00D4FF) 50%, transparent 100%);
}
.landing-continent-card.has-neon-stripe::after {
  background: linear-gradient(90deg, transparent 0%, var(--neon-accent, #00D4FF) 50%, transparent 100%);
}

/* FIX 4: Lang selector top-right */
.landing-lang-dropdown {
  position: fixed; top: 20px; right: 20px; z-index: 50;
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  background: var(--glass-card-bg, rgba(11,16,34,0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border, rgba(255,255,255,0.07));
  border-radius: 999px; color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.landing-lang-dropdown:hover { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 8px var(--gold-glow,rgba(212,175,55,0.18)); }
.landing-lang-trigger { display: inline-flex; align-items: center; gap: 4px; }
.landing-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; max-height: 320px;
  overflow-y: auto; background: rgba(11,16,34,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border); border-radius: var(--radius-md,10px);
  padding: 6px; z-index: 210; list-style: none; margin: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 0.2s;
}
.landing-lang-dropdown.open .landing-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.landing-lang-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: var(--radius-sm,6px); font-size: 12px; color: var(--text);
  cursor: pointer; border-left: 2px solid transparent; transition: background 0.15s;
}
.landing-lang-item:hover { background: rgba(255,255,255,0.05); }
.landing-lang-item.is-active { border-left-color: var(--gold-bright); color: var(--gold-bright); }

/* Footer */
.landing-footer { text-align: center; font-size: 12.5px; color: var(--text-muted); padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.05); }
.landing-footer a { color: var(--gold-bright,#d4af37); text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }
/* listing-cards.css — C1: subtle listing cards with premium glow */
.listing-card { background: rgba(15,23,42,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 16px; text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; position: relative; }
.listing-card:hover { transform: translateY(-2px); border-color: rgba(0,212,255,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
/* Premium cards — subtle multi-color neon glow (NO gold) */
.listing-card.is-premium {
  background: linear-gradient(180deg, rgba(30,41,59,0.7) 0%, rgba(15,23,42,0.6) 60%, rgba(2,6,23,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 12px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.listing-card.is-premium::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  pointer-events: none;
  z-index: 1;
}
.listing-card.is-premium::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  filter: blur(4px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  transition: opacity 200ms ease;
}

/* 4-color rotation: cyan, violet, emerald, coral */
.listing-card.is-premium:nth-child(4n+1)::before,
.listing-card.is-premium:nth-child(4n+1)::after { background: linear-gradient(90deg, transparent, rgb(0, 212, 255), transparent); }
.listing-card.is-premium:nth-child(4n+2)::before,
.listing-card.is-premium:nth-child(4n+2)::after { background: linear-gradient(90deg, transparent, rgb(168, 85, 247), transparent); }
.listing-card.is-premium:nth-child(4n+3)::before,
.listing-card.is-premium:nth-child(4n+3)::after { background: linear-gradient(90deg, transparent, rgb(52, 211, 153), transparent); }
.listing-card.is-premium:nth-child(4n+4)::before,
.listing-card.is-premium:nth-child(4n+4)::after { background: linear-gradient(90deg, transparent, rgb(251, 113, 133), transparent); }

.listing-card.is-premium:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,0.35);
}
.listing-card.is-premium:hover::after {
  opacity: 0.75;
}
.listing-card-eyebrow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-bright, #d4af37); margin: 0 0 4px; }
.listing-card-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.3; }
.listing-card-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin: 0; }
.listing-card-badge { position: absolute; top: 10px; right: 10px; background: var(--gold-bright, #d4af37); color: #0f172a; font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.listing-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.listing-section-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.6); margin: 24px 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.listing-section-title.is-premium { color: var(--gold-bright, #d4af37); }
/* listing-clickable.css — hover states for clickable listing cards */
.listing-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.listing-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
}
/* listing-layout.css — C1: two-column content + sidebar for listing pages */
/* Grid-template-areas: page-header spans full width, main+sidebar below */
.listing-page {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header  header"
    "main    sidebar";
  gap: 24px 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
.listing-page > .page-header { grid-area: header; }
.listing-main { grid-area: main; min-width: 0; }
.listing-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; align-self: start; }
.listing-sidebar-card { background: rgba(15,23,42,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 16px; }
.listing-sidebar-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-bright, #d4af37); margin: 0 0 12px; }
.listing-sidebar-mini { display: block; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); text-decoration: none; }
.listing-sidebar-mini:last-child { border-bottom: none; }
.listing-sidebar-mini-title { font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 2px; }
.listing-sidebar-mini-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin: 0; }
@media (max-width: 1024px) {
  .listing-page { grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar"; }
  .listing-sidebar { display: none; }
}
/* listing-search.css — C1: search/filter block above listings */
.listing-search { background: rgba(15,23,42,0.4); padding: 18px 20px; border-radius: 10px; border: 1px solid rgba(0,212,255,0.12); margin-bottom: 20px; }
.listing-search-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-bright, #d4af37); margin: 0 0 10px; }
.listing-search-input-row { display: flex; gap: 10px; margin-bottom: 12px; }
.listing-search-input { flex: 1; padding: 8px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #fff; font-size: 13px; }
.listing-search-input::placeholder { color: rgba(255,255,255,0.3); }
.listing-search-btn { padding: 8px 20px; background: linear-gradient(135deg, var(--gold-bright, #d4af37), var(--gold-deep, #8c7228)); color: #0f172a; font-size: 12px; font-weight: 700; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.listing-search-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.listing-search-select { padding: 7px 10px; background: rgba(15,23,42,0.8); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: rgba(255,255,255,0.7); font-size: 12px; width: 100%; }
@media (max-width: 600px) { .listing-search-filters { grid-template-columns: 1fr 1fr; } }
/* ════════════════════════════════════════════════════════════════
 * live-banner.css — BEWUST NIET GEÏMPORTEERD IN main.css
 *
 * Reden: live-scores feature is uitgesteld tot we een echte sport-
 * data API hebben (SportRadar of equivalent). v11 mockup gebruikte
 * fake scores wat misleidend is op productie.
 *
 * Wanneer SportRadar geïntegreerd wordt:
 *   1. Voeg `@import './components/live-banner.css'` toe aan main.css
 *   2. Plaats live-banner markup terug in home.ejs als eerste child
 *      onder <body> (vóór de topbar)
 *   3. Vervang fake data door fetch van /api/scores endpoint
 *   4. Pas topbar/.nav sticky-offsets aan via --live-banner-h token
 *      — zie OPMERKING bij .live-banner hieronder.
 *
 * NIET importeren omdat het "compleet lijkt" — er is geen data-bron
 * en het zou fake content tonen.
 *
 * Bron: docs/mockups/v11.html regels 137-192.
 *
 * KEYFRAMES — `pulse` (live-dot fade) en `scroll` (track loop) staan
 * in base.css als shared keyframes; gedeeld met premium-ticker. Niet
 * hier dupliceren bij re-activering.
 *
 * AFWIJKING T.O.V. v11 — gerapporteerd ter audit:
 * v11 had `position: relative; z-index: 10;` (niet-sticky). Hier
 * geüpgraded naar `position: sticky; top: 0;` zodat de banner bij
 * scroll zichtbaar blijft. v11's relative was een mockup-shortcut.
 * ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   Banner-shell — sticky bovenaan, dark blur.
   ──────────────────────────────────────────────
   OPMERKING bij re-activering:
   Wanneer live-banner geactiveerd wordt, moet topbar.css aangepast:
     .topbar { top: var(--live-banner-h, 36px); }
   En --live-banner-h moet als token in tokens.css. Idem .nav top
   wordt var(--topbar-h) + var(--live-banner-h). Dit is bewust nu
   NIET gedaan omdat live-banner uit is.
   ────────────────────────────────────────────── */
.live-banner {
  /* FINAL ALIGN FIX 3 1/5/2026 — exact 90 px hoog voor leesbare scores + pills.
     Voetbal4All productie metric. */
  background: rgba(8, 10, 16, 0.92);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--glass-card-border);
  border-radius: 0;
  box-shadow: none;
  position: sticky;  /* Fix C1-3: sticky below navbar on desktop */
  z-index: 105;
  top: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;            /* Fix 3 v4: compact 56px banner */
  margin: 0;
  max-width: var(--max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 56px;
  height: 56px;
}

/* Live-indicator dot — goud pulse */
.live-banner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-glow);
  animation: live-banner-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes live-banner-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* LIVE label */
.live-banner-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 700;
  flex-shrink: 0;
}

/* Marquee track met scroll-animatie */
/* Pass 7: track hidden when empty — marquee-wrapper gets all space */
.live-banner-track {
  display: none; /* hidden when no live scores — JS shows it when data arrives */
}
@keyframes live-banner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.live-banner-match {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.live-banner-comp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-pill);
}
.live-banner-team {
  color: var(--text);
  font-weight: 500;
}
.live-banner-score {
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.live-banner-minute {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  padding: 1px 6px;
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-pill);
}

/* Fix 3 v5: ROOT CAUSE FIX — translateX % is relative to element's computed width.
   With flex:1, computed width = parent width (~1144px), NOT content width (~5772px).
   FIX: wrapper has overflow:hidden + flex:1, track has width:max-content.
   -100%/3 = exactly one set, regardless of total width. */
.live-banner-marquee-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.live-banner-pills {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: marquee-scroll 50s linear infinite; will-change: transform;
}
.live-banner-marquee-wrapper:hover .live-banner-pills {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 2x dup → -50% = naadloos */
}
/* Pass 30: pills met vlaggen + competitie-logos */
.live-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  height: 32px;
}
.lb-flag { font-size: 14px; line-height: 1; flex-shrink: 0; }
.lb-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; filter: brightness(1.1) drop-shadow(0 0 4px rgba(212,175,55,0.2)); }
.lb-league { color: var(--gold-bright); font-weight: 700; letter-spacing: 0.06em; font-size: 10px; }
.lb-team-logo { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin: 0 2px; flex-shrink: 0; }
.lb-teams { color: rgba(255,255,255,0.85); font-size: 11px; }
.lb-teams strong { color: #fff; font-weight: 800; margin: 0 4px; font-variant-numeric: tabular-nums; }
.lb-min { color: #ff6b35; font-weight: 600; font-size: 10px; }
@media (max-width: 600px) { .lb-league { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .live-banner-track { animation: none; }
  .live-banner-dot   { animation: none; }
}

.live-banner-inner {
  display: flex;
  align-items: center;
  height: 26px;
}

/* Fix 3 v4: compact green-dot pill, NOT red tile */
.live-banner-label {
  background: transparent;
  color: var(--gold-bright);
  height: auto;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-pill);
}

/* Pulserende dot — 5px wit met `pulse` keyframes uit base.css */
.live-dot {
  width: 5px;
  height: 5px;
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: pulse 1.6s infinite;
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────
   Scroll-track — 120s loop met `scroll` keyframes uit base.css.
   MARKUP-VEREISTE: zoals premium-ticker-track moet de items-
   sequence 2× gerenderd worden voor naadloze loop.
   v11 voorbeeld: regels 2013-2026 (7 items × 2 = 14 spans).
   ────────────────────────────────────────────── */
.live-track {
  display: flex;
  gap: 22px;
  padding: 0 16px;
  animation: scroll 120s linear infinite;
  white-space: nowrap;
  opacity: 0.78;
}

.live-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}

.live-flag {
  font-size: 12px;
  opacity: 0.9;
}

.live-team {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.live-score {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.live-min {
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

/* Mobile: live-banner scrolls with page (not sticky) */
@media (max-width: 1023px) {
  .live-banner { position: relative; top: auto; }
}
/* main-nav.css — navbar met logo exact midden via flex-1 op beide lists */

.main-nav {
  position: sticky;
  top: 0;
  z-index: 110;
  background: rgba(8, 10, 16, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-card-border);
  font-family: var(--font);
  display: flex;
  align-items: center;
  height: 89px;
  padding: 0 24px;
}

/* Both lists flex-1 → logo stays centered regardless of item count */
.main-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.main-nav-list--left  { flex: 1 1 0; justify-content: flex-end; }
.main-nav-list--right { flex: 1 1 0; justify-content: flex-start; }

/* Logo — flex 0 0 auto, always centered */
.main-nav-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0 16px;
  height: 100%;
}
.main-nav-logo img {
  height: 72px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  display: block;
}

/* Nav links */
.main-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.main-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 89px;
  padding: 0 10px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.main-nav-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.main-nav-link.active { color: var(--gold-bright); text-shadow: 0 0 8px rgba(212,175,55,0.4); }
.main-nav-link.active::after {
  content: ""; position: absolute; bottom: 0; left: 10px; right: 10px; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 50%, transparent);
  box-shadow: 0 0 8px #d4af37, 0 0 16px rgba(212,175,55,0.5);
  border-radius: 2px; pointer-events: none;
}
.main-nav-link i[data-lucide] { width: 12px; height: 12px; }

/* Dropdowns */
/* Override topbar.css .nav-dropdown (position:absolute, visibility:hidden) —
   die regel is bedoeld voor het oude nav-system, niet voor main-nav items */
.main-nav .nav-dropdown,
.main-nav .main-nav-item.nav-dropdown {
  position: relative;
  visibility: visible;
  opacity: 1;
  transform: none;
  display: inline-flex;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-width: auto;
  top: auto;
  left: auto;
}
.main-nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.main-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: rgba(11,16,34,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 8px;
  z-index: 200;
  list-style: none;
  margin: 0;
  box-shadow: var(--glass-card-shadow);
  pointer-events: none;
}
.nav-dropdown:hover .main-nav-dropdown-menu,
.nav-dropdown:focus-within .main-nav-dropdown-menu {
  display: block;
  pointer-events: auto;
}
.main-nav-dropdown-menu li { margin: 0; }
.main-nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}
.main-nav-dropdown-menu a:hover {
  background: rgba(255,255,255,0.05);
  border-left-color: var(--gold-bright);
}

/* CTA + lang wrapper — buiten symmetrische sectie */
.main-nav-cta-wrapper {
  flex: 0 0 auto;
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Taaldropdown */
.main-nav-lang-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-width: 64px;
  transition: all 0.2s;
}
.main-nav-lang-dropdown:hover { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 8px var(--gold-glow); }
.main-nav-lang-trigger { display: inline-flex; align-items: center; gap: 6px; }
.main-nav-lang-trigger i[data-lucide] { width: 12px; height: 12px; }
.main-nav-lang-code { font-family: var(--font-mono); letter-spacing: 0.08em; }

.main-nav-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(11,16,34,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 6px;
  z-index: 210;
  list-style: none;
  margin: 0;
  box-shadow: var(--glass-card-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s;
}
.main-nav-lang-dropdown.open .main-nav-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.15s;
}
.main-nav-lang-item:hover { background: rgba(255,255,255,0.05); }
.main-nav-lang-item.is-active { border-left-color: var(--gold-bright); color: var(--gold-bright); }
.main-nav-lang-flag { font-size: 16px; flex-shrink: 0; }
.main-nav-lang-name { flex: 1; }
.main-nav-lang-abbr { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; }
/* main-nav-cta verwijderd — topbar +Plaatsen dekt dit */

/* Responsive */
@media (max-width: 1100px) {
  .main-nav { padding: 0 12px; }
  .main-nav-link { padding: 0 6px; font-size: 11px; }
  .main-nav-logo img { height: 56px; }
  .main-nav-cta { font-size: 11px; padding: 0 12px; }
}
@media (max-width: 900px) {
  .main-nav { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 12px; }
  .main-nav-list { display: none; flex-direction: column; width: 100%; gap: 4px; }
  .main-nav-list--left, .main-nav-list--right { justify-content: flex-start; }
  .main-nav.is-open .main-nav-list { display: flex; }
  .main-nav-link { height: auto; padding: 10px 12px; }
  .main-nav-logo img { height: 40px; }
}
/* page-header.css — C1: page title + icon + optional ad banner */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 16px 0 20px; padding: 0 4px; }
.page-header-left { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.page-header-icon { width: auto; height: auto; max-height: 72px; flex-shrink: 0; object-fit: contain; }
.page-header-titles h1 { margin: 0; font-size: 26px; font-weight: 800; color: #fff; line-height: 1.2; }
.page-header-titles .page-header-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.5)); }
.page-header-ad { flex: 1; min-width: 200px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.page-header-ad ins.adsbygoogle { width: 100%; display: block; min-height: 90px; }
@media (max-width: 900px) { .page-header { flex-direction: column; align-items: flex-start; } .page-header-ad { width: 100%; min-width: 0; min-height: 60px; } .page-header-icon { max-height: 48px; } }
@media (max-width: 900px) { .page-header-ad ins.adsbygoogle { min-height: 60px; } }
/* plaats.css — sub-stap 3.3 30/4/2026
   Single-page formulier listing-creatie. Witruimte 24px tussen secties,
   labels 500 14px, inputs height 44px padding 12px 14px radius 8px. */

.plaats-page {
  max-width: 880px;
  margin: 32px auto 64px;
  padding: 0 16px;
  color: var(--text, #1a1f3a);
}

.plaats-header {
  margin-bottom: 32px;
}
.plaats-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.plaats-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft, #c4c9dc);
  margin: 0;
}

.plaats-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plaats-section {
  /* Fase A 30/4/2026 — port van Voetbal4All v4 glasmorfisme container,
     consistent met filter-bar.css en bedankt.css. */
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--glass-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: 28px;
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plaats-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, #f4f6fc);
}

.plaats-grid {
  display: grid;
  gap: 16px;
}
.plaats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plaats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .plaats-grid-2, .plaats-grid-3 { grid-template-columns: 1fr; }
}

.plaats-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plaats-field-full { grid-column: 1 / -1; }
.plaats-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft, #c4c9dc);
}
.plaats-help {
  font-size: 12.5px;
  color: var(--text-muted, #9aa3c1);
  line-height: 1.4;
}
.plaats-field input,
.plaats-field select,
.plaats-field textarea {
  /* Fase A 30/4/2026 — hybride: Voetbal4All input bg + 4All-Ventures goud focus */
  height: 44px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text, #f4f6fc);
  font-family: var(--font);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plaats-field textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}
.plaats-field input:focus,
.plaats-field select:focus,
.plaats-field textarea:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Type-pills */
.plaats-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plaats-type-pill {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-card-border, rgba(255,255,255,0.12));
  background: rgba(11,16,34,0.4);
  color: var(--text-soft, #c4c9dc);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.plaats-type-pill:hover {
  border-color: var(--tenant-brand, var(--gold-bright));
  color: var(--text, #f4f6fc);
}
.plaats-type-pill.is-active {
  background: var(--tenant-brand, #0066B3);
  border-color: var(--tenant-brand, #0066B3);
  color: white;
}

/* Premium toggle — gold-soft achtergrond + gold-bright accent border */
.plaats-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--gold-soft);
  border-left: 3px solid var(--gold-bright);
}
.plaats-checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.plaats-checkbox-label {
  font-size: 14px;
  color: var(--text, #f4f6fc);
  line-height: 1.5;
}
.plaats-checkbox-label strong { display: block; margin-bottom: 2px; }

/* Premium options + billing — extra goud accent in active state */
.plaats-section-premium-options,
.plaats-section-billing {
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(212, 175, 55, 0.10) 0%,
      rgba(212, 175, 55, 0.03) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  border-color: rgba(212, 175, 55, 0.30);
  box-shadow:
    var(--glass-card-shadow),
    inset 0 1px 0 rgba(212, 175, 55, 0.18),
    0 0 24px var(--gold-glow);
}
.plaats-section-premium-options select#f-tier-code:focus,
.plaats-section-premium-options select#f-premium-duration:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Pricing widget */
.plaats-pricing-widget {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--glass-card-border, rgba(255,255,255,0.08));
  margin-top: 8px;
}
.plaats-pricing-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plaats-pricing-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-bright, #d4af37);
}
.plaats-pricing-suffix {
  font-size: 13px;
  color: var(--text-faint, #6e7592);
}

/* Submit */
.plaats-section-submit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
}
.plaats-submit {
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--tenant-brand, var(--gold-bright)), var(--tenant-accent, var(--gold-deep)));
  color: white;
}
.plaats-submit:hover { filter: brightness(1.07); }
.plaats-submit-note {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* VAT live-validation status */
#f-vat-status.is-valid   { color: #22c55e; }
#f-vat-status.is-invalid { color: #ef4444; }

/* Dynamic show/hide rules — driven by JS adding .is-hidden class */
.plaats-section[data-show-for]:not(.is-active),
.plaats-event-only:not(.is-active),
.plaats-section[data-show-when]:not(.is-active),
.plaats-section[data-hide-for].is-hidden {
  display: none !important;
}
/* Pass 46c: placement-intro professioneel */
.placement-intro { text-align: center; max-width: 760px; margin: 8px auto 14px; padding: 0 20px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.placement-intro-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.placement-intro-title { font-size: clamp(16px, 1.8vw, 22px); font-weight: 600; line-height: 1.2; color: #fff; margin: 0; letter-spacing: -0.01em; }
.placement-intro-accent { background: linear-gradient(135deg, #d4af37, #fbbf24, #d4af37); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; }
.placement-intro-sub { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 0; max-width: 580px; }
/* premium-carousel.css — sub-stap 3.4 PUNT 6 1/5/2026.
   Champagne-goud premium-card visual met scroll-snap carousel. */

/* Fix 10 v4: mask on outer container, not track */
.premium-carousel {
  margin: 24px 0;
  font-family: var(--font);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}

.premium-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding: 0 32px; /* Pass 41d: genoeg padding zodat gradient niet afknipt */
}
.premium-carousel-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #d4af37, #c9a961, #fbbf24);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin: 0;
  padding: 4px 8px; /* interne padding voor letter-overhang */
  display: inline-block;
  line-height: 1.2;
}
.premium-carousel-controls { display: flex; gap: 6px; }
.premium-carousel-prev,
.premium-carousel-next {
  width: 36px; height: 36px;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.premium-carousel-prev:hover,
.premium-carousel-next:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Fix 3 v5: ROOT CAUSE FIX — width:max-content so translateX % works correctly.
   Track gets its natural content width (e.g. 37000px for 126 cards).
   calc(-100% / 3) = exactly one set regardless of total width.
   Overflow hidden is on parent .premium-carousel. */
.premium-carousel-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding-bottom: 0;
  animation: carousel-scroll 30s linear infinite;
}
.premium-carousel:hover .premium-carousel-track {
  animation-play-state: paused;
}
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 2x dup → -50% = naadloos */
}
.premium-carousel-track::-webkit-scrollbar { height: 4px; }
.premium-carousel-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.premium-carousel-card {
  position: relative;
  flex: 0 0 280px;
  max-width: 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  min-height: 200px;
  background: linear-gradient(180deg, rgba(30,41,59,0.7) 0%, rgba(15,23,42,0.6) 60%, rgba(2,6,23,0.55) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.premium-carousel-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.premium-carousel-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}
.premium-carousel-card:nth-child(8n+1)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 212, 255) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+2)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(192, 132, 252) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+3)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(74, 222, 128) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+4)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(234, 88, 12) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+5)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(167, 139, 250) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+6)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(6, 182, 212) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+7)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(239, 68, 68) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+8)::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(16, 185, 129) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+1)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 212, 255) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+2)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(192, 132, 252) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+3)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(74, 222, 128) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+4)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(234, 88, 12) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+5)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(167, 139, 250) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+6)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(6, 182, 212) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+7)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(239, 68, 68) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+8)::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(16, 185, 129) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:hover {
  transform: translateY(-3px); border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
}

.premium-carousel-card-img {
  height: 80px;             /* Fix 9 v2: compact card height */
  background: var(--bg-soft) center/cover no-repeat;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.premium-carousel-card-img-placeholder {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}
/* Fix 5 sub-3.4: brand-gradient fallback when no DB image */
.premium-carousel-card-img--fallback {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, var(--bg-soft) 60%, rgba(255,255,255,0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.premium-carousel-card-monogram {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.15);
  text-transform: uppercase;
}
.premium-carousel-card-flag {
  position: absolute; top: 8px; right: 8px;
  font-size: 18px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  padding: 4px;
}

.premium-carousel-card-body {
  padding: 12px;             /* FINAL FIX 3 — 12 px padding ipv 14 16 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.premium-carousel-card-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 700;
}
.premium-carousel-card-title {
  font-size: 13px;           /* FINAL FIX 3 — 13 px ipv 14 */
  font-weight: 700;
  margin: 0;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.premium-carousel-card-sub {
  font-size: 11.5px;         /* FINAL FIX 3 */
  color: var(--text-soft);
  line-height: 1.35;
  margin: 0;
}
/* Glass + neon gradient CTA — gold is reserved for status details, not button fills */
.premium-carousel-cta {
  margin-top: auto;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgb(244, 246, 252);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.premium-carousel-cta::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}
.premium-carousel-card:nth-child(8n+1) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 212, 255) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+2) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(192, 132, 252) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+3) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(74, 222, 128) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+4) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(234, 88, 12) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+5) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(167, 139, 250) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+6) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(6, 182, 212) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+7) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(239, 68, 68) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+8) .premium-carousel-cta::before { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(16, 185, 129) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}
.premium-carousel-card:nth-child(8n+1) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 212, 255) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+2) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(192, 132, 252) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+3) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(74, 222, 128) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+4) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(234, 88, 12) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+5) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(167, 139, 250) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+6) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(6, 182, 212) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+7) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(239, 68, 68) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-card:nth-child(8n+8) .premium-carousel-cta::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(16, 185, 129) 50%, rgba(0,0,0,0) 100%); }
.premium-carousel-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-1px);
}

/* Pass 37b: demo-cards erven 3D glas van parent, alleen interne layout */
.premium-carousel-card--demo {
  /* background en border erven van .premium-carousel-card */
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px; min-height: 200px; border-radius: 12px;
}
.premium-carousel-card-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gold-bright); text-transform: uppercase;
  text-shadow: 0 0 6px var(--gold-glow);
}
.premium-carousel-card--demo .premium-carousel-card-title {
  font-size: 16px; margin: 8px 0 12px; line-height: 1.3;
}
/* Pass 41e: CTA met neon-glow gold */
.premium-carousel-card-cta {
  position: relative;
  margin-top: auto; padding: 12px 20px;
  background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border: 1px solid rgba(212,175,55,0.4);
  color: #fff;
  border-radius: 10px; text-decoration: none;
  font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.3);
  transition: all 200ms;
}
.premium-carousel-card-cta::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(90deg, transparent, #d4af37 50%, transparent);
  box-shadow: 0 0 10px #d4af37; pointer-events: none;
}
.premium-carousel-card-cta:hover {
  background: linear-gradient(180deg, rgba(212,175,55,0.28), rgba(212,175,55,0.14));
  border-color: var(--gold-bright); color: var(--gold-bright);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .premium-carousel-card { flex: 0 0 80%; min-width: 220px; }
}

/* Pass 6: GLASEFFECT knoppen — frosted glass + gouden tekst + neon rand per knop.
   Elke knop krijgt een eigen --neon kleur via inline style. */
.placement-type-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 20px 0;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.placement-type-buttons::-webkit-scrollbar { display: none; }

/* Pass 8: LICHTGEVEND EFFECT + gradient-punt bovenzijde + uitgesproken 3D glas.
   Elke knop --neon kleur. Bovenzijde: gradient neon-streak met BRIGHT SPOT midden.
   3D glas: dikke inset shadows, duidelijke licht/donker gradient. */
.placement-type-button {
  --neon: #d4af37;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  /* Uitgesproken 3D glaseffect — donker onderin, lichter bovenin */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.02) 30%,
      rgba(0,0,0,0.15) 100%),
    rgba(11, 16, 34, 0.7);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: var(--gold-bright);
  /* 3D glas randen — zichtbare licht-top, donker-bottom */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 2px solid transparent; /* replaced by ::before neon gradient */
  border-bottom-color: rgba(0, 0, 0, 0.3);
  /* Uitgesproken 3D shadows */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.12),
    inset 0 -3px 4px rgba(0,0,0,0.4),
    0 6px 16px rgba(0,0,0,0.35);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}
.placement-type-button::before { content: none; }
.placement-type-button::after  { content: none; }
.placement-type-button:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.18),
    inset 0 -3px 5px rgba(0,0,0,0.35),
    0 10px 24px rgba(0,0,0,0.4);
}
.ptb-icon { font-size: 16px; flex-shrink: 0; position: relative; z-index: 1; }
.placement-type-button-label { letter-spacing: 0; position: relative; z-index: 1; }
/* premium-divider.css — visual separation between premium and free listings */
.listings-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.listings-section-header--premium {
  color: var(--gold-bright, #d4af37);
}
.listings-section-header--all {
  color: rgba(255, 255, 255, 0.5);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* premium-page.css — sub-stap 2.8
 * Styling voor /premium pagina + homepage CTA-strip.
 */

/* ── Hero ───────────────────────────────────────────────── */
.premium-page { padding-bottom: 40px; }

.premium-hero {
  text-align: center;
  padding: 32px 16px 28px;
  max-width: 900px;
  margin: 0 auto;
}
.premium-hero-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-bright, #e2bd47);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.premium-hero-headline {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--text);
}
.premium-hero-accent {
  background: linear-gradient(135deg, var(--gold-bright, #e2bd47), var(--gold-deep, #a8801c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.premium-hero-sub {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .premium-hero-headline { font-size: 24px; }
}

/* ── Tier-grid (overschrijft .premium-row-grid voor /premium) ── */
.premium-tier-grid {
  margin: 0 auto 32px;
  max-width: 1280px;
  padding: 0 16px;
}

/* ── FAQ ────────────────────────────────────────────────── */
.premium-faq {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 0 20px;
}
.premium-faq-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
}
.premium-faq-item {
  background: var(--bg-soft, #1a1f2a);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.premium-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  list-style: none;
  outline: 0;
}
.premium-faq-item summary::-webkit-details-marker { display: none; }
.premium-faq-item summary::after {
  content: '▾';
  float: right;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.premium-faq-item[open] summary::after { transform: rotate(180deg); }
.premium-faq-item p {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* ── Contact-CTA ───────────────────────────────────────── */
.premium-contact-cta {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  max-width: 760px;
  margin: 0 auto;
}
.premium-contact-cta p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-soft);
}

/* ── Homepage CTA-strip ────────────────────────────────── */
.premium-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 22px;
  margin: 12px 0 24px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
}
.premium-cta-strip p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
}
.premium-cta-strip strong { color: var(--gold-bright); }

.btn-gold {
  display: inline-block;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--gold-bright, #e2bd47), var(--gold-deep, #a8801c));
  color: #1a1408;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: filter 0.12s ease, transform 0.12s ease;
  border: 1px solid rgba(212, 175, 55, 0.6);
}
.btn-gold:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* ── Multi-duration tier-card (TAAK E 28/4/2026) ──────────────
   Compacte prijs-tabel binnen .premium-card--cta op /premium.
   3 kolommen: Duurtijd · Lancering · Standaard.
   Lancering-prijs krijgt gold accent wanneer is_active. */
.premium-tier-multi-durations {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(212, 175, 55, 0.04);
  border-radius: 4px;
  overflow: hidden;
}
.premium-tier-multi-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  align-items: center;
  background: var(--glass-card-bg, rgba(11, 16, 34, 0.55));
}
.premium-tier-multi-head {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(212, 175, 55, 0.08);
  padding-top: 6px;
  padding-bottom: 6px;
}
.premium-tier-multi-label {
  color: var(--text-soft);
  font-weight: 600;
}
.premium-tier-multi-launch {
  color: var(--gold-bright);
  font-weight: 700;
}
.premium-tier-multi-launch.is-active::after {
  content: ' ★';
  font-size: 9px;
  vertical-align: super;
  color: var(--gold);
}
.premium-tier-multi-std {
  color: var(--text-faint);
  text-decoration: line-through;
}
/* premium-ticker.css — gold-accented strip met scrollende premium ads.
 * .ticker-card (de individuele kaartjes) staat in cards.css.
 * Bron: docs/mockups/v11.html regels 1519-1640.
 *
 * SHARED KEYFRAMES — `pulse` en `scroll` zijn gedefinieerd in base.css.
 * .live-banner gebruikt dezelfde animaties; één bron, geen duplicatie.
 *
 * ARCHITECTUUR-NOOT:
 * .premium-ticker is geen card-component (geen content-container).
 * Glass-properties bewust geduplicateerd, niet gedeeld via cards.css.
 * Zo blijft cards.css strikt over content-cards. Een latere refactor
 * die "alle glass" wil samenvoegen, moet déze grens respecteren.
 */

/* ──────────────────────────────────────────────
   Container — glass + gold-tinted gradient overlay.
   Niet in cards.css shared opgenomen: dit is een
   container met eigen radial-blob ::before en gold
   top-line ::after, niet een kaart-met-content.
   ────────────────────────────────────────────── */
.premium-ticker {
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%, rgba(212, 175, 55, 0.07) 100%),
    var(--glass-card-bg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--glass-card-shadow), var(--glass-card-inner-shadow);
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Twee gold-radial blobs links en rechts — geeft de strip diepte */
.premium-ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 400px 100px at 10% 50%, rgba(212, 175, 55, 0.08), transparent 60%),
    radial-gradient(ellipse 300px 80px at 90% 50%, rgba(212, 175, 55, 0.05), transparent 60%);
  pointer-events: none;
}

/* 1px gold top-line — premium-card heeft hetzelfde patroon */
.premium-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.4) 20%,
    rgba(212, 175, 55, 0.6) 50%,
    rgba(212, 175, 55, 0.4) 80%,
    transparent 100%);
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   Inner layout — label links (vast) + scroll-track rechts (flex)
   ────────────────────────────────────────────── */
.premium-ticker-inner {
  display: flex;
  align-items: stretch;
  height: 96px;
  position: relative;
}

/* ──────────────────────────────────────────────
   Label-blok (links, "★ Premium / Net geplaatst")
   ────────────────────────────────────────────── */
.premium-ticker-label {
  background: transparent;
  color: var(--gold-bright);
  padding: 0 20px 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 150px;
  font-family: var(--font-display);
  border-right: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
}

.premium-ticker-label-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* 16px gouden streepje vóór "★ Premium" */
.premium-ticker-label-eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.premium-ticker-label-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
}

.premium-ticker-label-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Pulse-dot — gold met box-shadow glow.
   De glow is wat het premium voelen geeft, niet de pulse-fade alleen.
   `pulse` keyframes komen uit base.css. */
.premium-ticker-pulse {
  width: 5px;
  height: 5px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-bright);
  animation: pulse 1.4s infinite;
}

/* ──────────────────────────────────────────────
   Track — overflow-clipped wrapper rond scrollende rij
   ────────────────────────────────────────────── */
.premium-ticker-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  !! MARKUP-VEREISTE — naadloze loop                          ║
   ║                                                              ║
   ║  De track moet de ticker-card-sequence 2× bevatten. Anders   ║
   ║  springt de animatie zichtbaar bij elke iteratie. Voorbeeld  ║
   ║  in v11.html regel 2384-2410. Bij EJS-partial:               ║
   ║                                                              ║
   ║    <% [...items, ...items].forEach(item => { %>              ║
   ║      <a class="ticker-card">…</a>                            ║
   ║    <% }) %>                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* Pass 6: width:max-content so translateX % works on content width.
   Items are 2x duplicated in EJS → calc(-100% / 2) = one set. */
.premium-ticker-track {
  display: flex;
  width: max-content;
  gap: 10px;
  padding: 12px 14px;
  animation: ticker-scroll 40s linear infinite;
  white-space: nowrap;
  height: 100%;
  align-items: center;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 2)); }
}
/* Pass 32c: 3D glasknoppen met neon-glow top-line per knop + pictogrammen */
.home-quick-row.placement-type-buttons {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
  max-width: 1208px; margin: 22px auto; padding: 0 20px;
}
/* Pass 36h: picto als achtergrondlaag, tekst overlay */
.ptype-btn {
  position: relative; display: block; padding: 0; min-height: 70px;
  background: linear-gradient(180deg, rgba(30,41,59,0.7) 0%, rgba(15,23,42,0.6) 60%, rgba(2,6,23,0.55) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  text-decoration: none; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.ptype-btn::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  border-radius: 0 0 50% 50%; pointer-events: none;
}
.ptype-btn::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 30%; height: 8px;
  transform: translateX(-50%); border-radius: 50%; filter: blur(8px); opacity: 0.85; pointer-events: none;
}
.ptype-btn:nth-child(1)::before, .ptype-btn:nth-child(1)::after { background: linear-gradient(90deg, transparent, #00d4ff 50%, transparent); }
.ptype-btn:nth-child(2)::before, .ptype-btn:nth-child(2)::after { background: linear-gradient(90deg, transparent, #c084fc 50%, transparent); }
.ptype-btn:nth-child(3)::before, .ptype-btn:nth-child(3)::after { background: linear-gradient(90deg, transparent, #4ade80 50%, transparent); }
.ptype-btn:nth-child(4)::before, .ptype-btn:nth-child(4)::after { background: linear-gradient(90deg, transparent, #fbbf24 50%, transparent); }
.ptype-btn:nth-child(5)::before, .ptype-btn:nth-child(5)::after { background: linear-gradient(90deg, transparent, #a78bfa 50%, transparent); }
.ptype-btn:nth-child(6)::before, .ptype-btn:nth-child(6)::after { background: linear-gradient(90deg, transparent, #38bdf8 50%, transparent); }
.ptype-btn:nth-child(7)::before, .ptype-btn:nth-child(7)::after { background: linear-gradient(90deg, transparent, #06b6d4 50%, transparent); }
.ptype-btn:nth-child(8)::before, .ptype-btn:nth-child(8)::after { background: linear-gradient(90deg, transparent, #d4af37 50%, transparent); }
.ptype-btn:hover {
  transform: translateY(-2px); border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
}
/* Pass 43c: hover animatie — picto vergroot + spring-easing */
.ptype-icon { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptype-icon img { width: auto; height: 68px; max-width: 88%; object-fit: contain; opacity: 0.55; filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)) blur(0.2px); transition: opacity 280ms ease-out, filter 280ms ease-out, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ptype-label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 8px; font-size: 13px; font-weight: 700; color: #fff; text-align: center; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.6); transition: opacity 280ms ease-out, transform 280ms ease-out; }
.ptype-btn:hover .ptype-icon { transform: scale(1.15); }
.ptype-btn:hover .ptype-icon img { opacity: 0.95; filter: drop-shadow(0 0 14px rgba(212,175,55,0.5)) blur(0px); }
.ptype-btn:hover .ptype-label { transform: translateY(-2px); opacity: 0.92; }
.ptype-btn:active .ptype-icon { transform: scale(1.05); }
.ptype-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ptype-icon, .ptype-icon img, .ptype-label { transition: none !important; } }
@media (max-width: 1100px) {
  .home-quick-row.placement-type-buttons { grid-template-columns: repeat(4,1fr); }
  .ptype-icon img { height: 76px; }
  .ptype-btn { min-height: 80px; }
  .ptype-label { height: 80px; }
}
@media (max-width: 600px) { .home-quick-row.placement-type-buttons { grid-template-columns: repeat(2,1fr); } }
/* quick-cards.css — 7 aanmeldknoppen met inline 3D-iconen.
 * Layout grid + card-shell + icon-container + gender-marker + text.
 * Bron: docs/mockups/v11.html regels 757-874 + responsive 1962-1968.
 *
 * INLINE CSS-VARS per .quick-card (set via style="..." op de button):
 *   --card-color  — hover border-color, hover box-shadow ring
 *   --card-glow   — ::after radial gradient, hover box-shadow blur,
 *                   hover icon drop-shadow
 *   --icon-color  — gender-marker border + tekst
 *
 * EJS-implementatie:
 *   Card 6 (supportersclub):  --card-color: var(--accent-silver)
 *                             --card-glow:  rgba(196, 201, 220, 0.3)
 *                             --icon-color: var(--accent-silver)
 *   Card 7 (vrouwenvoetbal):  --card-color: var(--accent-pink)
 *                             --card-glow:  rgba(240, 120, 176, 0.4)
 *                             --icon-color: var(--accent-pink)
 *   Cards 1-5: inline hex-waarden (per-card uniek, geen token-mapping).
 *   CSS-vars in inline-style mogen `var(--accent-pink)` referencen — werkt.
 *
 * DOOD-CSS in v11 inline:
 *   --icon-bg, --icon-border worden inline gezet maar nergens in CSS gebruikt.
 *   Bij EJS-partial weglaten — scheelt 50 chars per button.
 *
 * ARCHITECTUUR-NOOT:
 * .quick-card is een button-vorm met glass-look, geen content-card.
 * Glass-properties hier inline herhaald, niet gedeeld via cards.css.
 * Zelfde grens als .premium-ticker.
 */

/* ──────────────────────────────────────────────
   Layout — 7 kolommen op desktop
   ────────────────────────────────────────────── */
.home-quick-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

/* ──────────────────────────────────────────────
   Card-shell — glass + transitions
   ────────────────────────────────────────────── */
.quick-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 80px;
  box-shadow: var(--glass-card-shadow), var(--glass-card-inner-shadow);
}

/* Glass-highlight overlay — zelfde patroon als .card / .col-card */
.quick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-card-highlight);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Inhoud boven de overlay */
.quick-card > * {
  position: relative;
  z-index: 1;
}

/* Radial glow vanaf links-boven — opacity 0 → 1 op hover.
   Gebruikt --card-glow uit inline style, kleurt mee per card-variant. */
.quick-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--card-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Hover — border + ring + glow + lift */
.quick-card:hover {
  border-color: var(--card-color);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--card-color),
    0 0 24px var(--card-glow);
}
.quick-card:hover::after {
  opacity: 1;
}

/* ──────────────────────────────────────────────
   Icon-container — 48×48 met drop-shadow filter.
   transparent background; de drop-shadow geeft het 3D-effect
   op de inline SVG.
   ────────────────────────────────────────────── */
.quick-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  overflow: visible;
  filter:
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.quick-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hover op de card → extra glow op het icon, micro-scale */
.quick-card:hover .quick-card-icon {
  filter:
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 12px var(--card-glow));
  transform: translateY(-1px) scale(1.02);
  transition: all 0.3s ease;
}

/* ──────────────────────────────────────────────
   Gender-marker — 18px ronde indicator rechtsonder de icoon.
   Border + tekstkleur uit --icon-color (per-card variabel).
   Gebruikt voor ⚥ (alle gender) of ♀ (vrouwenvoetbal-card).
   ────────────────────────────────────────────── */
.gender-marker {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: var(--bg);
  border: 1.5px solid var(--icon-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--icon-color);
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ──────────────────────────────────────────────
   Tekst — title + desc met line-clamp.
   ────────────────────────────────────────────── */
.quick-card-text {
  min-width: 0;
  flex: 1;
}

.quick-card-title {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}

.quick-card-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ──────────────────────────────────────────────
   Responsive — 7 → 3 → 2 kolommen
   ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .home-quick-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .home-quick-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* region-map.css — Tier 3 SVG Europa-kaart modal.
 *
 * Tokens (uit tokens.css):
 *   --bg-elevated      paneel-achtergrond
 *   --border-subtle    standaard rand
 *   --silver           hover-fill (subtiel licht)
 *   --gold-bright/-deep selected fill
 *   --text / --text-soft / --text-muted
 *
 * Edge cases:
 *   - Mini-staten (Liechtenstein, San Marino, Vaticaan, Monaco, Andorra) hebben
 *     in de Wikimedia "Blank map of Europe" óf geen apart path, óf zo'n klein
 *     path dat ze niet betrouwbaar te raken zijn op desktop. Ze blijven via de
 *     Tier 2 dropdown bereikbaar. Documenteer in design-doc 2.5b.
 *   - Britse afhankelijkheden (IM, JE, GG, GI), Färöer (FO), Svalbard (SJ) zijn
 *     buiten ons region-model en krijgen [data-unmapped] (geen hover/click).
 *   - Multi-country regions (BENELUX, DACH, BRITISH, IBERIA, SCANDINAVIA, BALKANS,
 *     BALTICS, CEE, MEDITERRANEAN) zijn virtuele combinaties — géén SVG-path.
 *     Bereikbaar via Tier 1 pills, Tier 2 dropdown of cluster-suggest na multi-select.
 */

/* ── Modal backdrop + paneel ──────────────────────────────── */
.region-map-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.region-map-modal[hidden] { display: none; }

.region-map-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.region-map-panel {
  position: relative;
  width: min(1100px, 95vw);
  max-height: 92vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.region-map-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.region-map-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.region-map-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}
.region-map-close {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s ease;
}
.region-map-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── Stage (SVG container) ───────────────────────────────── */
.region-map-stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(20, 26, 36, 1) 0%, rgba(10, 12, 18, 1) 80%);
}
.region-map-stage > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 90vw;
  max-height: 70vh;
}

/* ── SVG path styling ────────────────────────────────────── */
.region-map-stage svg path[id] {
  fill: var(--bg-elevated, #1a2030);
  stroke: var(--border-subtle, #2a2f3a);
  stroke-width: 0.6;
  cursor: pointer;
  transition: fill 0.10s ease, stroke 0.10s ease;
}
.region-map-stage svg path[data-unmapped="1"] {
  fill: rgba(35, 40, 52, 0.6);
  cursor: not-allowed;
  pointer-events: none;
}
.region-map-stage svg path[id]:hover,
.region-map-stage svg path[id].is-hover {
  fill: var(--silver, #c4c9dc);
  stroke: var(--text, #e8eaf2);
  stroke-width: 0.9;
}
/* Cluster-highlight: hover op één land flikkert ook de andere cluster-leden licht aan */
.region-map-stage svg path[id].is-cluster-peer {
  fill: rgba(196, 201, 220, 0.35);
}
.region-map-stage svg path[id].is-selected {
  fill: var(--gold-bright, #e2bd47);
  stroke: var(--gold-deep, #a8801c);
  stroke-width: 1.1;
}
.region-map-stage svg path[id][data-current="1"] {
  stroke: var(--gold-bright, #e2bd47);
  stroke-width: 1.4;
}

/* ── Tooltip ─────────────────────────────────────────────── */
.region-map-tooltip {
  position: fixed;          /* fixed: clientX/clientY-coords werken zonder offset */
  z-index: 9100;
  background: rgba(20, 24, 34, 0.97);
  border: 1px solid var(--border-subtle);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.region-map-tooltip[hidden] { display: none; }
.region-map-tooltip-cluster {
  display: block;
  font-size: 10px;
  color: var(--text-soft);
  font-weight: 400;
  margin-top: 2px;
}

/* ── Footer ──────────────────────────────────────────────── */
.region-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.18);
}
.region-map-info {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.region-map-info-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  padding: 3px 8px;
  border-radius: 12px;
  font-family: var(--font-mono, monospace);
}
.region-map-info-pill--warn {
  border-color: rgba(217, 144, 96, 0.5);
  color: #d99060;
}
.region-map-apply[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .region-map-modal { padding: 0; }
  .region-map-panel { width: 100vw; max-height: 100vh; border-radius: 0; }
  .region-map-stage { padding: 8px; }
  .region-map-header { padding: 12px 14px 8px; }
  .region-map-footer { padding: 10px 14px; flex-wrap: wrap; }
}

/* ── A11y: focus-visible voor keyboard-nav ───────────────── */
.region-map-stage svg path[id]:focus-visible {
  outline: 2px solid var(--gold-bright, #e2bd47);
  outline-offset: 2px;
}
.region-map-close:focus-visible,
.region-map-apply:focus-visible {
  outline: 2px solid var(--gold-bright, #e2bd47);
  outline-offset: 2px;
}
/* shared-cards.css — sub-stap 3a (5/5/2026)
 *
 * Hergebruikbare neon-glow streep boven cards plus hover-states. Wordt
 * non-destructief OPT-IN gemaakt via marker-classes zodat bestaande
 * components die hun eigen card-styling hebben (premium-carousel.css,
 * cards.css, glass-card.css) NIET breken.
 *
 * Activatie:
 *   <article class="card has-neon-stripe">…</article>          // hover-onthul
 *   <article class="card has-neon-stripe is-premium">…</article> // permanent + gold-frame
 *
 * Gebruik tokens uit tokens.css:
 *   --neon-streep-gradient
 *   --card-hover-shadow
 *   --card-premium-shadow
 *   --gold-bright (bestaand, ongewijzigd)
 *   --glass-card-bg / --glass-card-border (bestaand, ongewijzigd)
 *
 * Champagne-goud variabelen ONGEWIJZIGD. Glasmorfisme tokens ONGEWIJZIGD.
 */

/* ── Basis-card met opt-in neon-streep ─────────────────────────── */
.has-neon-stripe {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

.has-neon-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(0, 212, 255)    50%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
  opacity: 0.4;
}

.has-neon-stripe::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)    0%,
    rgb(0, 212, 255)    50%,
    rgba(0, 0, 0, 0)    100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* Talent Profielen sidebar — violet (second col-card after Premium Vacatures) */
.col-card.has-neon-stripe.is-premium + .col-card.has-neon-stripe.is-premium::before {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)      0%,
    rgb(192, 132, 252)    50%,
    rgba(0, 0, 0, 0)      100%
  );
}
.col-card.has-neon-stripe.is-premium + .col-card.has-neon-stripe.is-premium::after {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0)      0%,
    rgb(192, 132, 252)    50%,
    rgba(0, 0, 0, 0)      100%
  );
}

.has-neon-stripe:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
}

/* ── Premium-variant: neutral glass-card, PREMIUM badge is de enige indicator ─ */
.has-neon-stripe.is-premium {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
}

.has-neon-stripe.is-premium:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
}

/* ── Premium-badge rechtsboven ────────────────────────────────── */
.premium-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--gold-bright, #d4af37);
  color: #1a1408;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}

/* ── Hero-blok met picto + gradient-titel (sub-stap 3a Vereiste 1) ── */
.hero-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 20px 0 24px;
}

.hero-block-picto {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
}

.hero-block-content { flex: 1; min-width: 0; }

.hero-block-title {
  margin: 0 0 6px;
  font-family: var(--font-display, 'Montserrat'), system-ui, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(90deg,
    rgba(212, 175, 55, 0.7) 0%,
    rgba(212, 175, 55, 1)   50%,
    rgba(212, 175, 55, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-block-tagline {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft, #a8b3c7);
  line-height: 1.5;
}

.hero-block-stats {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted, #6b7588);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Gradient-divider voor premium / non-premium scheiding ───── */
.section-divider-gradient {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0)   100%);
  border: 0;
  margin: 32px 0;
}

/* ── Premium-section header (subtiele shimmer) ───────────────── */
.premium-section-title {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--gold-bright, #d4af37);
}

.premium-section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--gold-bright, #d4af37), transparent);
}

/* ── Responsive (mobile-first) ──────────────────────────────── */
@media (max-width: 720px) {
  .hero-block { flex-direction: column; gap: 10px; }
  .hero-block-picto { width: 44px; height: 44px; }
  .hero-block-title { font-size: 24px; }
  .hero-block-tagline { font-size: 13px; }
  .premium-section-title { font-size: 17px; margin-bottom: 14px; }
  .section-divider-gradient { margin: 24px 0; }
  .premium-badge { top: 8px; right: 8px; font-size: 9px; padding: 2px 7px; }
}

/* ── Premium card header row (flag + badge) ────────────────── */
.premium-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.premium-card-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.premium-card-flag {
  font-size: 14px;
  line-height: 1;
}

/* ── A11y focus-state ───────────────────────────────────────── */
.has-neon-stripe:focus-within {
  outline: 2px solid var(--gold-bright, #d4af37);
  outline-offset: 3px;
}
/* social-row.css — Pass 28 */
.social-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 20px; max-width: 1208px; margin: 0 auto; }
.social-row-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.social-row-icons { display: flex; gap: 10px; }
.social-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(15,23,42,0.55); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); transition: all 200ms; text-decoration: none; }
.social-icon:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px); }

/* Pass 45b: social icons in edition-bar bovenaan */
.edition-bar-socials { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; margin: 0 6px; border-left: 1px solid rgba(212,175,55,0.15); border-right: 1px solid rgba(212,175,55,0.15); }
.edition-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(15,23,42,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; color: rgba(255,255,255,0.7); text-decoration: none; transition: all 180ms; }
.edition-social-icon:hover { background: rgba(212,175,55,0.12); border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-1px); }

/* section dividers */
.section-divider { max-width: 760px; margin: 32px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), transparent); }

/* skip-to-content (accessibility) */
.skip-to-content { position: absolute; top: -40px; left: 8px; z-index: 1000; padding: 8px 14px; background: var(--gold-bright); color: #000; font-weight: 700; text-decoration: none; border-radius: 6px; transition: top 160ms; }
.skip-to-content:focus { top: 8px; }

/* nav search + login */
.nav-search-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: rgba(255,255,255,0.7); transition: all 200ms; text-decoration: none; }
.nav-search-icon:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); }
.nav-login-link { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: all 200ms; }
.nav-login-link:hover { color: var(--gold-bright); background: rgba(212,175,55,0.06); }

/* Pass 32e: legal dropdown + active gold underline */
.mnav-dropdown { position: relative; }
.mnav-dropdown-trigger { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
.mnav-dropdown-menu {
  position: absolute; top: 100%; right: 0;
  background: rgba(15,23,42,0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,175,55,0.15); border-radius: 10px;
  padding: 8px; min-width: 200px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: all 200ms; z-index: 110;
}
.mnav-dropdown-menu a { display: block; padding: 8px 12px; color: rgba(255,255,255,0.85); text-decoration: none; border-radius: 6px; font-size: 13px; }
.mnav-dropdown-menu a:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); }
.mnav-dropdown:hover .mnav-dropdown-menu, .mnav-dropdown:focus-within .mnav-dropdown-menu {
  opacity: 1; pointer-events: auto; transform: translateY(2px);
}
.mnav-dropdown-divider { height: 1px; background: rgba(212,175,55,0.12); margin: 6px 8px; }
/* standings-sidebar.css — Fix 8 sub-3.4-v4.
   Full team names (no ellipsis) + emoji club-logo + country eyebrow. */

.standings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font);
}

.standings-block {
  background:
    radial-gradient(120% 140% at 50% 30%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0) 70%),
    var(--glass-card-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: 14px 14px;
  box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255,255,255,0.10);
}

.standings-block-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--glass-card-border);
  padding-bottom: 8px;
}
.standings-block-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
  margin-bottom: 2px;
}
.standings-block-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.standings-block-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.standings-rows {
  display: flex;
  flex-direction: column;
}
.standings-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.standings-row:last-child { border-bottom: none; }
.standings-row:hover {
  background: var(--glass-card-bg-hover);
}
.standings-rank {
  width: 20px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
}
.standings-logo {
  flex-shrink: 0;
  font-size: 14px;
  width: 20px;
  text-align: center;
}
.standings-team-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}
.standings-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  font-size: 11.5px;
  /* Fix 8 v4: NO ellipsis — show full name. Column is ~290px, enough for all names. */
}
.standings-pts-val {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-bright);
  font-size: 11px;
  white-space: nowrap;
  margin-left: 4px;
}

.standings-empty {
  padding: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

/* League selector dropdown */
.standings-selector {
  position: relative;
  padding: 8px 12px;
}
.standings-selector-trigger {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--text); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s;
}
.standings-selector-trigger:hover {
  border-color: var(--gold-bright, #d4af37);
}
.standings-selector-flag { font-size: 14px; flex-shrink: 0; }
.standings-selector-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standings-selector-arrow { font-size: 10px; opacity: 0.5; }

.standings-selector-dropdown {
  position: absolute; top: calc(100% - 2px); left: 12px; right: 12px;
  z-index: 20;
  background: rgba(11,16,34,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm, 6px);
  max-height: 260px; overflow-y: auto;
  padding: 4px 0;
}
.standings-selector-dropdown.hidden { display: none; }

.standings-selector-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 7px 10px;
  background: none; border: none;
  color: var(--text); font-size: 11px;
  cursor: pointer; text-align: left;
  transition: background 0.1s;
}
.standings-selector-item:hover { background: rgba(255,255,255,0.06); }
.standings-selector-item.is-active { color: var(--gold-bright, #d4af37); font-weight: 700; }
.standings-selector-item-flag { font-size: 13px; }
.standings-selector-item-tier {
  font-size: 9px; opacity: 0.4; margin-left: auto;
}
/* Pass 36d: stats-counter clusters hover-popover */
.stats-counter-item--clusters { position: relative; }
.stats-counter-cluster-trigger { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.stats-counter-cluster-trigger:hover .stats-counter-number { text-shadow: 0 0 12px rgba(212,175,55,0.7); }
.stats-clusters-popover {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  z-index: 1000; width: 320px;
  background: rgba(15,23,42,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,175,55,0.2); border-radius: 12px; padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6); animation: stats-pop-in 200ms ease-out;
}
.stats-clusters-popover[hidden] { display: none; }
.stats-clusters-popover::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: rgba(15,23,42,0.96); border-top: 1px solid rgba(212,175,55,0.2); border-left: 1px solid rgba(212,175,55,0.2); }
.stats-clusters-popover-header { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--gold-soft); }
.stats-clusters-popover-header strong { font-size: 13px; color: var(--gold-bright); }
.stats-clusters-popover-header span { font-size: 11px; color: rgba(255,255,255,0.55); }
.stats-clusters-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.stats-clusters-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 6px; }
.stats-clusters-list li:hover { background: rgba(212,175,55,0.06); }
.stats-cluster-name { font-size: 11px; color: rgba(255,255,255,0.85); }
.stats-cluster-count { font-size: 12px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
@keyframes stats-pop-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* subpage-layout.css — compact tagline strip for subpages */
.tagline-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 24px;
  max-width: 1208px;
  margin: 0 auto;
}
.tagline-strip-line {
  display: block;
  width: 120px;
  flex-shrink: 1;
  height: 1px;
  border-radius: 1px;
}
.tagline-strip-line--left {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(59, 130, 246, 0.4) 30%,
    rgba(236, 72, 153, 0.5) 60%,
    rgba(249, 115, 22, 0.7) 100%
  );
}
.tagline-strip-line--right {
  background: linear-gradient(90deg,
    rgba(249, 115, 22, 0.7) 0%,
    rgba(236, 72, 153, 0.5) 40%,
    rgba(59, 130, 246, 0.4) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}
.tagline-strip-text {
  font-family: 'Eurostile Extended','Eurostile','Bank Gothic','Orbitron','Montserrat',sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
.tagline-strip-word--blue   { color: #3b82f6; }
.tagline-strip-word--pink   { color: rgb(236, 72, 153); }
.tagline-strip-word--orange { color: rgb(249, 115, 22); }
@media (max-width: 720px) {
  .tagline-strip-line { display: none; }
  .tagline-strip { gap: 0; }
  .tagline-strip-text { font-size: 8px; gap: 4px; }
}

/* Newsletter pre-footer section */
.newsletter-prefooter {
  max-width: 600px;
  margin: 40px auto 0;
  padding: 0 20px;
}
/* topbar.css — sticky top-bar, multi-color logo, tenant-switcher,
 * lang-toggle, primary/ghost buttons, secondaire navigatie met dropdowns.
 * Bron: docs/mockups/v11.html regels 195-416 + mobile @media regel 1973-1976.
 *
 * BESLISSING — .btn-ghost en .btn-primary leven hier. In v11 worden ze ook
 * 1x gebruikt onder de article-list (.btn-ghost "Meer artikels"). Tom's
 * structuur kent geen buttons.css; topbar.css is hun primaire context.
 * Article-event.css verwijst er naar zonder ze te dupliceren.
 */

/* ──────────────────────────────────────────────
   Topbar
   ────────────────────────────────────────────── */
.topbar {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 100; /* was 10 — hoger dan filter-bar (z=50) zodat dropdown overlapt */
}

.topbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Fix 2/5 v2: topbar logo — new PNG */
.topbar-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.topbar-logo-img { height: 36px; width: auto; object-fit: contain; }
/* Pass 46b: social icons rechts in topbar */
.topbar-socials { display: inline-flex; align-items: center; align-self: center; gap: 4px; padding: 0 8px; border-left: 1px solid rgba(212,175,55,0.12); border-right: 1px solid rgba(212,175,55,0.12); flex: 1; justify-content: center; }
.topbar-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; color: rgba(255,255,255,0.65); text-decoration: none; transition: all 180ms; }
.topbar-social-icon:hover { background: rgba(212,175,55,0.1); border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-1px); }

/* ──────────────────────────────────────────────
   Logo (legacy) — Voet4All met multicolor letters.
   .logo-4 en .logo-all gebruiken background-clip:text voor
   de gradient-letters. -webkit-text-fill-color voor Safari.
   ────────────────────────────────────────────── */
.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.025em;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}
.logo-v   { color: var(--logo-blue); }
.logo-o   { color: var(--logo-cyan); }
.logo-e   { color: var(--logo-fuchsia); }
.logo-t   { color: var(--logo-orange); }
.logo-bal { color: var(--text); }
.logo-4 {
  background: linear-gradient(135deg, var(--logo-orange), var(--logo-fuchsia));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  margin: 0 1px;
}
.logo-all {
  background: linear-gradient(90deg, var(--logo-fuchsia), var(--logo-blue));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-suffix {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  margin-left: 3px;
}

/* ──────────────────────────────────────────────
   Tenant switcher — pill-shape met blauw→violet active state.
   Wordt dynamisch gerenderd op basis van actieve tenants in DB.
   ────────────────────────────────────────────── */
.tenant-switcher {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-left: 8px;
}

.tenant-btn {
  background: transparent;
  border: 1px solid transparent;  /* transparent baseline, active state kleurt 'm in */
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: inherit;
}
.tenant-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
/* Active state — outline-stijl (gedesatureerd t.o.v. v11.html origineel).
   Bewust niet de oude gradient: outline vermijdt visuele competitie met
   de gold-CTA en past bij de andere "active pill" patterns elders. */
.tenant-btn.active {
  background: rgba(24, 160, 251, 0.12);
  border-color: rgba(24, 160, 251, 0.4);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(24, 160, 251, 0.15);
}
.tenant-btn .flag {
  font-size: 13px;
}

/* ──────────────────────────────────────────────
   Right-side actions cluster
   ────────────────────────────────────────────── */
.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Lang-toggle — UI-taal switch (NL/FR/DE/EN), 4 talen.
   Sync met hero-slogan-pills (8 talen) — JS regelt dat. */
.lang-toggle {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
}

/* Fix 6 v2: individual buttons with visible separators */
.lang-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}
.lang-toggle-btn + .lang-toggle-btn::before {
  content: '·';
  color: var(--text-faint);
  margin-right: 4px;
  pointer-events: none;
}
.lang-toggle-btn:hover { color: var(--text); }
.lang-toggle-btn.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1408;
  border-radius: var(--radius-sm);
}
.lang-toggle-btn.active::before { display: none; }

/* ──────────────────────────────────────────────
   Buttons — ghost en primary.
   Primary = champagne-goud gradient met donkerbruine tekst.
   Hardgecodeerde tekstkleur (#1a1408) is een contrast-keuze, geen token.
   ────────────────────────────────────────────── */
.btn-ghost {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--border-strong);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1408;
  border: 1px solid rgba(212, 175, 55, 0.5);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.15),
    0 4px 14px rgba(212, 175, 55, 0.18);
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.3),
    0 6px 20px rgba(212, 175, 55, 0.32);
  filter: brightness(1.08);
}

/* ──────────────────────────────────────────────
   Gold outline-button — utility class.
   Subtieler dan .btn-primary (transparent gold bg, geen gradient).
   Breedte-onafhankelijk: container bepaalt width via lokale override.
   Herbruikbaar in newsletter, modals, sidebar-ad, matching-tile, etc.
   ────────────────────────────────────────────── */
.btn-gold-outline {
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-bright);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.3),
    0 0 24px rgba(212, 175, 55, 0.15);
}

/* ──────────────────────────────────────────────
   Secondaire navigatie — sticky onder topbar.
   top:65px is de hoogte van de topbar (14px*2 + lijnhoogte logo).
   Magic number uit v11; later mogelijk parametriseerbaar.
   ────────────────────────────────────────────── */
.nav {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: var(--topbar-h);
  z-index: 99;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 46px;
}

.nav-list {
  display: flex;
  gap: 0;
  flex: 1;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--text-soft);
  padding: 0 14px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}
.nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-arrow {
  font-size: 9px;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
}

/* ──────────────────────────────────────────────
   Dropdowns — hover-driven (geen JS).
   Voor toetsenbord-toegankelijkheid komt later JS-trigger
   op focus-within (niet in CSS-scope).
   ────────────────────────────────────────────── */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  min-width: 240px;
  padding: 6px;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  z-index: 200;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  transition: all 0.1s ease;
}
.nav-dropdown-link:hover {
  background: rgba(24, 160, 251, 0.1);
  color: var(--accent);
}

.nav-dropdown-badge {
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* "Adverteer" CTA — eindstuk van de nav, gold-gradient zoals btn-primary
   maar met andere padding/height passend bij de nav-bar hoogte. */
.nav-link.special {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1408;
  margin-left: auto;
  margin-right: 4px;
  padding: 0 16px;
  height: 32px;
  align-self: center;
  border-radius: var(--radius-sm);
  border-bottom: none;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15);
}
.nav-link.special:hover {
  color: #1a1408;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.3),
    0 4px 14px rgba(212, 175, 55, 0.25);
}

/* ──────────────────────────────────────────────
   Mobile — topbar wrapt, tenant-switcher springt naar onder.
   ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .topbar-inner {
    padding: 10px 16px;
    flex-wrap: wrap;
  }
  .tenant-switcher {
    order: 99;
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .nav-inner {
    padding: 0 16px;
    overflow-x: auto;
  }
  /* Topbar wrapt en wordt hoger op mobile — nav-sticky offset verhogen */
  .nav {
    top: var(--topbar-h-mobile);
  }
}

/* ──────────────────────────────────────────────
   Edition-bar — 2e rij onder topbar met newsletter/regio-filter pills.
   Persistent over pagina's; sync via edition-cookie in fase-3.
   Pills hergebruiken .hero-split-radio styling uit components/hero.css.
   ────────────────────────────────────────────── */
/* Fix 1 sub-3.4: edition-bar merged into topbar, class kept for backward compat */
.edition-bar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 0;
  position: relative;
  z-index: 10;
}

/* Fix 1 sub-3.4: edition pills inline in topbar */
.topbar-editions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  overflow: visible; /* Pass 36e: was auto, knipte dropdown af */
}

.edition-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.edition-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.edition-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.edition-pills .hero-split-radio {
  min-height: 32px;
  padding: 4px 8px;
}

@media (max-width: 700px) {
  .edition-bar { top: var(--topbar-h-mobile); }
  .edition-bar-inner { padding: 0 16px; gap: 8px; }
}

/* Three-tier edition-bar: primary pills + dropdown + map-trigger */
.edition-bar-primary { display: flex; gap: 4px; flex-wrap: wrap; }

/* Tier 1 active state — gold-fill voor sterk visueel signaal van actieve regio.
   Overschrijft .hero-split-radio.active uit hero.css wanneer ook .edition-pill aanwezig. */
.edition-pill.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1408;
  border-color: rgba(212, 175, 55, 0.6);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 4px 14px rgba(212, 175, 55, 0.18);
}
.edition-pill.active:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.edition-other {
  position: relative;
  flex-shrink: 0;
  z-index: 100; /* boven filter-bar (50) */
}
.edition-other[open] {
  z-index: 1000; /* als open: boven alles */
}
.edition-other-toggle {
  cursor: pointer;
  list-style: none;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.edition-other-toggle::-webkit-details-marker { display: none; }
.edition-other[open] .edition-other-toggle {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-bright);
}
.edition-other-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.edition-other-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 380px;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 1000; /* Pass 36e: boven alle andere content */
  background: rgba(15,23,42,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,175,55,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  z-index: 200;
}

.edition-cluster-group {
  margin-bottom: 14px;
}
.edition-cluster-group:last-child { margin-bottom: 0; }
.edition-cluster-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}

.edition-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-soft);
  text-decoration: none;
  transition: background 0.12s ease;
}
.edition-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.edition-dropdown-item.active {
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-bright);
  border-left: 3px solid var(--gold-bright);
  padding-left: 5px;  /* compenseer 3px border-left */
  font-weight: 600;
}
.edition-dropdown-item .flag { font-size: 14px; flex-shrink: 0; }
.edition-dropdown-item .code { flex: 1; min-width: 0; }
.edition-dropdown-item.is-multi { font-weight: 600; }

.cluster-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-bright);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  margin-left: 4px;
  flex-shrink: 0;
}

.edition-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 10px 0;
}

.edition-map-trigger {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(24, 160, 251, 0.06);
  border: 1px dashed rgba(24, 160, 251, 0.3);
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  cursor: not-allowed;
  opacity: 0.7;
}
.edition-map-trigger small { color: var(--text-faint); margin-left: 6px; }

.edition-all {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.edition-all:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.5);
}

/* ──────────────────────────────────────────────
   Geo-IP suggestion-banner (boven topbar)
   ────────────────────────────────────────────── */
.edition-suggestion-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: linear-gradient(90deg, rgba(24, 160, 251, 0.12), rgba(212, 175, 55, 0.08));
  border-bottom: 1px solid rgba(24, 160, 251, 0.3);
  font-size: 12.5px;
  color: var(--text-soft);
  position: sticky;
  top: 0;
  z-index: 105;
}
.edition-suggestion-icon { font-size: 16px; flex-shrink: 0; }
.edition-suggestion-text { flex: 1; min-width: 0; }
.edition-suggestion-text strong { color: var(--text); font-weight: 700; }
.btn-suggest {
  background: var(--accent);
  color: white;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-suggest:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-dismiss:hover { background: var(--bg-soft); color: var(--text); }

/* ──────────────────────────────────────────────
   Multi-region builder (combineer 2+ regio's)
   ────────────────────────────────────────────── */
.edition-multi-section { padding: 4px 0; }

.edition-multi-mode-toggle {
  width: 100%;
  background: rgba(212, 175, 55, 0.06);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  color: var(--gold-bright);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all 0.15s ease;
}
.edition-multi-mode-toggle:hover {
  background: rgba(212, 175, 55, 0.12);
  border-style: solid;
}

.edition-multi-builder {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}
.edition-multi-builder[hidden] { display: none; }
.edition-multi-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.edition-multi-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 4px;
}

.edition-multi-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-soft);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease;
}
.edition-multi-checkbox:hover { background: rgba(255, 255, 255, 0.04); }
.edition-multi-checkbox input { accent-color: var(--accent); flex-shrink: 0; }
.edition-multi-checkbox input:checked + .flag + .code { color: var(--text); font-weight: 600; }
.edition-multi-checkbox .flag { font-size: 13px; flex-shrink: 0; }
.edition-multi-checkbox .code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edition-multi-apply {
  width: 100%;
  font-size: 12px;
  padding: 8px 14px;
}
.edition-multi-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Topbar +Plaatsen dropdown met 8 aanmeld-types */
.topbar-place-dropdown { position: relative; display: inline-flex; }
.topbar-place-trigger { cursor: pointer; }
.topbar-place-trigger i[data-lucide] { width: 14px; height: 14px; }
.topbar-place-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px;
  background: rgba(11,16,34,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border); border-radius: var(--radius-md);
  padding: 6px; z-index: 210; list-style: none; margin: 0;
  box-shadow: var(--glass-card-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 0.2s;
}
.topbar-place-dropdown.open .topbar-place-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar-place-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--radius-sm); font-size: 12px; color: var(--text);
  text-decoration: none; border-left: 2px solid transparent; transition: background 0.15s;
}
.topbar-place-item:hover { background: rgba(255,255,255,0.05); border-left-color: var(--gold-bright); }
.topbar-place-item i[data-lucide] { width: 16px; height: 16px; color: var(--gold-bright); }

/* video-showcase.css — sub-stap 2.7
 * 4-card grid voor highlights/video. Compliance: target=_blank, geen embed.
 */

.video-showcase {
  margin: 24px 0;
}
.video-showcase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.video-showcase-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.video-showcase-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.video-showcase-link {
  color: var(--text-soft);
  font-size: 12px;
  text-decoration: none;
  align-self: flex-end;
}
.video-showcase-link:hover { color: var(--gold-bright); }

.video-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .video-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .video-showcase-grid { grid-template-columns: 1fr; }
}

.video-card {
  display: block;
  background: var(--bg-elevated, #1a1f2a);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.video-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.35);
}

.video-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e1219;
  overflow: hidden;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a4d7a 0%, #0e1219 100%);
}
.video-card-thumb-icon { font-size: 36px; opacity: 0.5; }

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold-bright, #e2bd47);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  pointer-events: none;
  border: 2px solid rgba(212, 175, 55, 0.6);
}

.video-card-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}

.video-card-featured-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--gold-bright, #e2bd47);
  color: #1a1408;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}

.video-card-text { padding: 10px 12px 12px; }
.video-card-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.video-card-desc {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.4;
}