/* ════════════════════════════════════════════════════════
   In de Hekken — Block Theme Custom Styles
   Design tokens via theme.json als CSS-variabelen:
   --wp--preset--color--{slug}
   --wp--preset--font-family--{slug}
   --wp--custom--*
   ════════════════════════════════════════════════════════ */

/* ── DESIGN-SYSTEM TOKENS ──────────────────────────────────────
   Centrale definitie van alle visuele tokens. Zie
   eigen/in-de-hekken/project/design-system.md voor de volledige
   uitleg en conventies. Prefix --idh-* om botsing met
   WordPress --wp--* te vermijden. */
:root {
  /* Kleuren */
  --idh-ink:         #0A0A0A;
  --idh-paper:       #FAF9F6;
  --idh-paper-2:     #FFFFFF;
  --idh-paper-3:     #FAF9F5;  /* subtle bg — gebruikt op archive-hero + SEO-blok */
  --idh-accent:      #C8102E;
  --idh-accent-dark: #9E0D24;
  --idh-muted:       #6B6B6B;
  --idh-line:        #E5E5E5;

  /* Typografie — sitewide IBM Plex Sans als display én body.
     Display = Plex Bold 700 met tight letter-spacing.
     Body    = Plex Regular 400 / SemiBold 600 / Bold 700.
     Mono    = JetBrains Mono (later optioneel naar IBM Plex Mono).
     Slug "display" in theme.json — IBM Plex Sans. Anton uit gefaseerd 25 mei 2026.
     wijst nu naar Plex voor backwards-compat. */
  --idh-font-display: 'IBM Plex Sans', sans-serif;
  --idh-font-body:    'IBM Plex Sans', 'Inter Tight', sans-serif;
  --idh-font-mono:    'JetBrains Mono', monospace;

  /* Type-scale — zie design/typografie-system.md voor regels.
     Drie families, beperkte sizes:
       Plex display: ≥36px (Bold 700, tight letter-spacing)
       Plex body:    18 / 16 / 14 / 22 / 26
       Mono:         11px primary (labels/eyebrows/pills), 10px secondary
                     (dim/tertiaire labels, on-image overlays). Weight
                     standaard 700 voor labels, 500 voor dimmed credits/
                     captions, 600 voor mid-weight (byline/share-buttons).
                     13/14px mono = button-text-uitzonderingen (auth-btn,
                     masthead-cta, mobile-drawer-cta), gedocumenteerd
                     per selector.

     Plex Sans weights (4-tier systeem):
       400 — body lopende tekst, default
       500 — secondary: lead-paragraph (display-lite), sidebar utility-
             links, card-byline meta, photo-credit name
       600 — mid-bold emphasis: article-byline, share-button, auth-meta
       700 — display: titles, eyebrows, pills, headings
     Géén 300 (Light) of 800+ (Black) — weight 300 was alleen
     mobile-drawer-close, gefixed naar 400 in typo-pass 2.

     Body op 18 ipv 19 omdat IBM Plex Sans bredere x-height heeft dan
     Inter Tight; 18 Plex ≈ 19 Inter Tight visueel. */
  --idh-text-mono:    11px;   /* IBM Plex Mono / JetBrains Mono — labels primary */
  --idh-text-mono-xs: 10px;   /* Mono secondary — dim labels, on-image, byline-meta */
  --idh-text-meta:    14px;   /* Plex — captions, supporting */
  --idh-text-card:    16px;   /* Plex — cards, sidebar items */
  --idh-text-body:    18px;   /* Plex — body paragraph */
  --idh-text-lead:    24px;   /* Plex — lead-paragraph (groter dan body voor ademruimte) */
  --idh-text-h3:      26px;   /* Plex — h2/h3 binnen body */
  --idh-text-display-min: 36px; /* display font floor — IBM Plex Sans Bold */

  /* Deprecated aliases — backwards-compat tijdens refactor. Niet
     gebruiken in nieuwe code; oude refs migreren naar mono/meta. */
  --idh-text-sm:      var(--idh-text-mono);   /* was 11 */
  --idh-text-xs:      var(--idh-text-mono);   /* was 10 → mono */
  --idh-text-base:    var(--idh-text-meta);   /* was 13 → meta */

  /* Spacing (4-grid) */
  --idh-space-1:   4px;
  --idh-space-2:   8px;
  --idh-space-3:  12px;
  --idh-space-4:  16px;
  --idh-space-5:  20px;
  --idh-space-6:  24px;
  --idh-space-7:  28px;
  --idh-space-8:  32px;
  --idh-space-10: 40px;
  --idh-space-12: 48px;
  --idh-space-14: 56px;
  --idh-space-18: 72px;

  /* Borders */
  --idh-border-thin:   1px;
  --idh-border-med:    1.5px;
  --idh-border-thick:  2px;
  --idh-border-accent: 3px;
  --idh-radius:        0;

  /* Outer widths */
  --idh-outer-max:   1280px;
  --idh-content-max: 1200px;
  --idh-body-max:    780px;
  --idh-auth-max:    520px;
}

/* ════════════════════════════════════════════════════════════════════════
   SITEWIDE BASELINE — header → content ritme
   ════════════════════════════════════════════════════════════════════════

   Header zit tegen eerste content-element aan, sitewide. WP's default
   block-gap (24-32px) of theme-mt's worden gekilled — alle templates
   (tifo-hero op homepage, page-main, archive-main, single-main) starten
   meteen onder de nav. Eén regel, geen template-specifieke afwijking. */

body > .wp-site-blocks > header.wp-block-template-part + *,
body > .wp-site-blocks > header + section,
body > .wp-site-blocks > header + main {
  margin-top: 0 !important;
}

/* Uitzondering: homepage TIFO-hero krijgt wel ademruimte tot de nav.
   Op alle andere templates plakt hero/main direct tegen header aan,
   maar de homepage-hero is een visueel statement dat ruimte verdient. */
body > .wp-site-blocks > header + .tifo-hero {
  margin-top: var(--idh-space-8) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — sitewide bron van waarheid voor lay-out
   ════════════════════════════════════════════════════════════════════════

   .u-content-wrap = ÉÉN regel voor alle content-containers sitewide.
   Vervangt en standaardiseert: page-breadcrumbs, page-lead-wrap,
   hub-article, archive-grid-wrap inner, archive-seo-inner.
   Alle nieuwe templates gebruiken óf .u-content-wrap óf erven via
   de shared selector hieronder.

   Specs (vast):
   - max-width: 1100px
   - margin-inline: auto !important (overruled WP layout-resets)
   - padding-inline: 40 (desktop) / 20 (≤880px)

   Verticale spacing komt apart per component via padding-top/bottom
   met --idh-space-* tokens (niet margin — door WP's block-gap regels
   die margin overrullen op block-flow children).

   Documentatie: design/spacing-system.md.
   ════════════════════════════════════════════════════════════════════════ */

.u-content-wrap,
.page-breadcrumbs,
.page-lead-wrap,
.hub-article.wp-block-group > .cat-tile-grid,
.hub-article.wp-block-group > .hub-recent,
.hub-article.wp-block-group > .hub-section,
.archive-grid-wrap.wp-block-group > .wp-block-query,
.archive-seo-inner,
.related-posts.wp-block-group,
.idh-hero-inner {
  max-width:      1100px;
  margin-inline:  auto !important;
  padding-inline: var(--idh-space-10);
  box-sizing:     border-box;
}

@media (max-width: 880px) {
  .u-content-wrap,
  .page-breadcrumbs,
  .page-lead-wrap,
  .hub-article.wp-block-group > .cat-tile-grid,
  .hub-article.wp-block-group > .hub-recent,
  .hub-article.wp-block-group > .hub-section,
  .archive-grid-wrap.wp-block-group > .wp-block-query,
  .archive-seo-inner,
  .related-posts.wp-block-group,
  .idh-hero-inner {
    padding-inline: var(--idh-space-5);
  }
}

/* ── DESIGN-SYSTEM COMPONENTEN — Eyebrow + Buttons ─────────────
   Drie button-types + één eyebrow-class. Bestaande component-classes
   (article-share-btn, lezer-cta-btn, auth-btn) blijven werken voor
   backwards-compat — nieuwe componenten gebruiken deze. */

.eyebrow {
  display:        inline-block;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-accent);
  line-height:    1;
}
.eyebrow--muted { color: var(--idh-muted); }
/* .eyebrow--sm DEPRECATED — alle eyebrows nu 11px. Class blijft als
   no-op voor backwards compat; markup mag de modifier behouden. */
.eyebrow--sm    { font-size: var(--idh-text-mono); }

/* Spacing-conventie: eyebrow → titel = var(--idh-space-3) */
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3,
.eyebrow + .h-title {
  margin-top: var(--idh-space-3);
}

/* Buttons — basis */
.btn,
.btn-primary,
.btn-ghost,
.btn-ghost-on-dark {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--idh-space-2);
  padding:         var(--idh-space-3) var(--idh-space-6);
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-base);
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  border-radius:   var(--idh-radius);
  transition:      background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border:          var(--idh-border-med) solid transparent;
  line-height:     1;
}

.btn-primary {
  background:   var(--idh-accent);
  color:        var(--idh-paper-2);
  border-color: var(--idh-accent);
}
.btn-primary:hover {
  background:   var(--idh-accent-dark);
  border-color: var(--idh-accent-dark);
  color:        var(--idh-paper-2);
}

.btn-ghost {
  background:   transparent;
  color:        var(--idh-ink);
  border-color: var(--idh-ink);
}
/* Sitewide regel: ghost-buttons (outline-stijl) → rood vlak on hover.
   Visueel consistent met de spotlight-cta op de homepage hero, en
   met de TIFO-hero "Lees verder" knop. Eén taal voor alle ghost-CTA's. */
.btn-ghost:hover {
  background:   var(--idh-accent);
  border-color: var(--idh-accent);
  color:        var(--idh-paper-2);
}

.btn-ghost-on-dark {
  background:   transparent;
  color:        var(--idh-paper);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-on-dark:hover {
  background:   var(--idh-paper);
  color:        var(--idh-ink);
  border-color: var(--idh-paper);
}

/* Size-modifier */
.btn-sm {
  padding:   var(--idh-space-2) var(--idh-space-3);
  font-size: var(--idh-text-sm);
  gap:       var(--idh-space-1);
}

/* ── GLOBAL ─────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

.wp-site-blocks { overflow-x: hidden; }

.wp-block-post-title a,
.wp-block-post-title a:hover { text-decoration: none; }

/* ── Reset: voorkom default UA-margin op html/body (geeft anders een
   onverklaarbare witte band boven de header op mobiel). ───────── */
html, body { margin: 0 !important; padding: 0 !important; }

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — skip-link + focus-visible
   WCAG 2.4.1 (Bypass Blocks) + 2.4.7 (Focus Visible).
   Skip-link is off-screen tot focus; verschijnt linksboven met accent-rood.
   :focus-visible krijgt sitewide outline op buttons / links / inputs zodat
   keyboard-navigatie zichtbaar is. UA-default (outline:none) wordt overruled.
   ════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position:        absolute;
  top:             -100px;
  left:            16px;
  z-index:         100000;
  padding:         12px 18px;
  background:      var(--idh-accent);
  color:           var(--idh-paper);
  font-family:     var(--idh-font-mono);
  font-size:       14px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  text-decoration: none;
  border-radius:   0;
  box-shadow:      0 4px 14px rgba(0, 0, 0, 0.2);
  transition:      top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--idh-ink);
  outline-offset: 2px;
}

/* Sitewide focus-visible op interactieve elementen. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--idh-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inputs/textareas/selects: outline + accent-border bij focus. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--idh-accent);
  outline-offset: 2px;
}

/* WCAG 2.3.3 (Animation from Interactions) — respecteer OS-voorkeur.
   Gebruikers met motion-sickness, vestibulair-issues of cognitief
   profiel zetten "Verminder beweging" aan; wij gehoorzamen sitewide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior:     auto !important;
  }
}

/* ── HEADER (3-tier) ─────────────────────────────────── */

/* Site-header-inner is nu full-width omdat de donkere nav-strip
   visueel door de paper-randen heen wil. De masthead daarbinnen
   wordt op 1200 gecentreerd via .masthead-wrap. */
.wp-block-template-part[class*="header"] > .wp-block-group,
.site-header-inner.wp-block-group {
  margin: 0 !important;
}

/* ── Tier 1: Masthead — Editorial Brutalist op paper ───────────────────
   .masthead-wrap = 1280px (gelijk aan zones-section outer voor strakke
                    uitlijning van header met de breedste sectie eronder).
   .masthead       = de daadwerkelijke flex-row met brand + acties.
   Geen border-bottom hier — de donkere nav-strip eronder is de
   visuele scheiding. */
.masthead-wrap.wp-block-group {
  max-width:    1280px;
  margin-left:  auto !important;
  margin-right: auto !important;
}

.masthead.wp-block-group {
  padding:     18px 40px;
  gap:         0 !important;
  margin:      0 !important;
  align-items: center !important;
}

/* Brand-block: logo + naam/tagline */
.masthead-brand.wp-block-group {
  gap:         18px !important;
  margin:      0 !important;
  align-items: center !important;
}

.masthead .wp-block-site-logo img {
  height: 80px;
  width:  auto;
}

/* (Voorheen hier: 728x90 ad-slot. Weggehaald — werkte visueel niet,
   ad-monetization gaat later via in-content slots / zijbalk.) */

.masthead-brand-text.wp-block-group {
  gap:    2px !important;
  margin: 0 !important;
}

/* Alle tekst naast het logo verborgen — het embleem doet z'n eigen
   branding (naam en tagline staan al rondom de cirkel in het logo). */
.masthead-brand-text.wp-block-group { display: none; }

/* Acties-block: socials + zoek + Word 12e man */
.masthead-actions.wp-block-group {
  gap:         16px !important;
  margin:      0 !important;
  align-items: center !important;
}

.masthead-socials {
  display:     flex;
  gap:         12px;
  align-items: center;
}

.masthead-socials a {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  color:           var(--wp--preset--color--ink);
  text-decoration: none;
  transition:      color .15s;
}

.masthead-socials a:hover { color: var(--wp--preset--color--accent); }

.masthead-divider {
  display:    inline-block;
  width:      1px;
  height:     20px;
  background: var(--wp--preset--color--border);
}

.masthead-search {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  color:           var(--wp--preset--color--ink);
  text-decoration: none;
  transition:      color .15s;
}

.masthead-search:hover { color: var(--wp--preset--color--accent); }

/* Account-icoon — placeholder voor login (12e man). Linkt nu naar
   /wp-login.php; later eigen account-pagina + magic-link flow. */
.masthead-account {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  color:           var(--wp--preset--color--ink);
  text-decoration: none;
  transition:      color .15s;
}

.masthead-account:hover { color: var(--wp--preset--color--accent); }

.masthead-cta.wp-block-paragraph {
  margin:      0 !important;
  line-height: 1;
}

.masthead-cta a {
  font-family:     var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  color:           var(--wp--preset--color--ink) !important;
  text-decoration: none !important;
  border:          1.5px solid var(--wp--preset--color--ink);
  padding:         10px 16px;
  display:         inline-block;
  transition:      background .15s, color .15s, border-color .15s;
}

.masthead-cta a:hover {
  background:   var(--wp--preset--color--accent);
  color:        var(--idh-paper-2) !important;
  border-color: var(--wp--preset--color--accent);
}

/* ── ACCOUNT-DROPDOWN (desktop, ingelogd) ────────────────
   "Hoi [naam] ▾" toggle + uitklap-menu. Vervangt zowel het account-
   icoon als de losse Word 12e man-CTA zodra iemand is ingelogd, zodat
   de masthead-balk niet te breed wordt. JS togglet .is-open +
   aria-expanded in account-menu.js. */
.masthead-account-menu {
  position: relative;
  display:  inline-flex;
}
.masthead-account-toggle {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  background:     transparent;
  border:         0;
  cursor:         pointer;
  color:          var(--wp--preset--color--ink);
  padding:        6px 4px;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:     color .15s;
}
.masthead-account-toggle:hover,
.masthead-account-menu.is-open .masthead-account-toggle { color: var(--wp--preset--color--accent); }
.masthead-account-caret { transition: transform .2s; }
.masthead-account-menu.is-open .masthead-account-caret { transform: rotate(180deg); }

.masthead-account-dropdown {
  position:       absolute;
  top:            calc(100% + 8px);
  right:          0;
  min-width:      210px;
  background:     var(--idh-paper-2);
  border:         1.5px solid var(--idh-ink);
  border-radius:  var(--idh-radius);
  display:        none;
  flex-direction: column;
  padding:        6px;
  z-index:        120;
  box-shadow:     0 8px 24px rgba(0,0,0,0.18);
}
.masthead-account-menu.is-open .masthead-account-dropdown { display: flex; }
.masthead-account-dropdown a {
  display:        block;
  padding:        9px 12px;
  color:          var(--idh-ink);
  text-decoration: none;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius:  var(--idh-radius);
  transition:     background .12s, color .12s;
}
.masthead-account-dropdown a:hover { background: var(--idh-paper); }
.masthead-account-upgrade { color: var(--idh-accent) !important; }
.masthead-account-upgrade:hover {
  background: var(--idh-accent) !important;
  color:      var(--idh-paper-2) !important;
}
.masthead-account-logout { opacity: 0.65; }
.masthead-account-badge {
  display:        block;
  padding:        4px 12px 8px;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--idh-accent);
}

/* ── ACCOUNT-BLOK in mobile drawer ───────────────────────
   Geen dropdown — drawer is al een paneel, alles uitgeklapt bovenin. */
.mobile-account {
  padding-bottom: 24px;
  border-bottom:  1px solid rgba(255,255,255,0.12);
}
.mobile-account--guest .mobile-account-signin {
  display:        flex;
  align-items:    center;
  gap:            10px;
  margin-top:     16px;
  color:          var(--idh-paper-2);
  text-decoration: none;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity:        0.85;
}
.mobile-account--guest .mobile-account-signin:hover { opacity: 1; }
.mobile-account-head {
  display:       flex;
  align-items:   center;
  gap:           10px;
  color:         var(--idh-paper-2);
  margin-bottom: 16px;
}
.mobile-account-name {
  font-family: var(--idh-font-display);
  font-size:   20px;
  font-weight: 700;
}
.mobile-account-badge {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--idh-accent);
  margin-left:    auto;
}
.mobile-account-link {
  display:        block;
  padding:        8px 0;
  color:          var(--idh-paper-2);
  text-decoration: none;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity:        0.85;
  transition:     opacity .12s;
}
.mobile-account-link:hover { opacity: 1; }
.mobile-account-link--upgrade { color: var(--idh-accent); opacity: 1; }
.mobile-account-link--logout { opacity: 0.6; }

/* Mobile menu-knop — verborgen op desktop, getoond onder 880px.
   Echte <button>; reset native UA-styling, behoud appearance van een link. */
.masthead-menu-btn {
  display:         none;
  background:      none;
  border:          0;
  padding:         0;
  font:            inherit;
  color:           inherit;
  cursor:          pointer;
}

/* ── MOBILE DRAWER ──────────────────────────────────────────────────
   Full-screen overlay. Initieel hidden via [hidden] attribute. JS toggle
   is-open + verwijdert/zet hidden + body-scroll-lock. */
.mobile-drawer {
  display:        flex;            /* maar [hidden] killt visibility */
  position:       fixed;
  inset:          0;
  background:     var(--idh-ink);
  z-index:        9999;
  padding:        32px 28px;
  overflow-y:     auto;
  flex-direction: column;
  gap:            32px;
}

/* [hidden] respecteren ondanks display:flex op .mobile-drawer */
.mobile-drawer[hidden] { display: none !important; }

/* Body kan niet scrollen zolang drawer open is. JS zet deze class. */
body.has-drawer-open { overflow: hidden; }

.mobile-drawer-close {
  position:        absolute;
  top:             16px;
  right:           20px;
  width:           44px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       36px;
  /* Weight 400 (was 300 Light) — Plex Sans 300 was alleen hier in
     gebruik, weg uit het systeem na typo-pass 2. Regular geeft het
     × glyph genoeg body op 36px. */
  font-weight:     400;
  line-height:     1;
  color:           rgba(255,255,255,0.7);
  background:      none;
  border:          0;
  padding:         0;
  text-decoration: none;
  cursor:          pointer;
  transition:      color .15s;
}

.mobile-drawer-close:hover { color: var(--wp--preset--color--accent); }

.mobile-drawer-cta {
  display:         block;
  background:      var(--wp--preset--color--accent);
  color:           var(--idh-paper-2) !important;
  font-family:     var(--wp--preset--font-family--jetbrains-mono);
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  text-align:      center;
  padding:         18px 24px;
  text-decoration: none;
  margin-top:      40px;
}

.mobile-drawer-eyebrow {
  display:         block;
  font-family:     var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:     700;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  color:           var(--wp--preset--color--accent);
  margin-bottom:   16px;
  padding-bottom:  8px;
  border-bottom:   1px solid rgba(255,255,255,0.15);
}

/* Categorieën — IBM Plex Sans display, groot */
.mobile-drawer-cats {
  display:        flex;
  flex-direction: column;
}

.mobile-drawer-cats a {
  font-family:    var(--idh-font-display);
  font-size:      32px;
  font-weight:    400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height:    1.1;
  color:          var(--idh-paper-2);
  text-decoration: none;
  padding:        10px 0;
  border-bottom:  1px solid rgba(255,255,255,0.08);
}

.mobile-drawer-cats a:hover { color: var(--wp--preset--color--accent); }

.mobile-drawer-cats-more {
  font-size:      14px !important;
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-weight:    700 !important;
  letter-spacing: 0.16em !important;
  color:          rgba(255,255,255,0.7) !important;
  padding-top:    18px !important;
  border-bottom:  none !important;
}

/* Praktisch — kleiner mono */
.mobile-drawer-info {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.mobile-drawer-info a {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.85);
  text-decoration: none;
  padding:        8px 0;
}

.mobile-drawer-info a:hover { color: var(--wp--preset--color--accent); }

/* Socials in drawer — groter, met meer ruimte */
.mobile-drawer-socials-row {
  display: flex;
  gap:     22px;
}

.mobile-drawer-socials-row a {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  color:           var(--idh-paper-2);
  text-decoration: none;
  border:          1px solid rgba(255,255,255,0.2);
  transition:      color .15s, border-color .15s;
}

.mobile-drawer-socials-row a:hover {
  color:        var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/* ── BREAKPOINT: ≤ 880px wordt mobile ──────────────────────────────── */
@media (max-width: 880px) {
  /* Verberg desktop-elementen in masthead */
  .masthead-socials,
  .masthead-divider,
  .masthead-search,
  .masthead-account,
  .masthead-cta,
  .main-nav-strip.wp-block-group {
    display: none !important;
  }

  /* Trust-topbar is op mobiel verborgen maar staat nog in de DOM, dus de
     block-gap van .site-header-inner zet 32px margin bovenop de masthead.
     Die witruimte boven het blok weghalen. */
  .masthead-wrap.wp-block-group {
    margin-top: 0 !important;
  }

  /* Logo iets kleiner op mobile (toch nog goed zichtbaar) */
  .masthead .wp-block-site-logo {
    margin:      0 !important;
    line-height: 0;             /* voorkomt baseline-spatiering rond img */
  }
  .masthead .wp-block-site-logo img {
    height:  72px;
    display: block;
  }

  /* Toon menu-knop */
  .masthead-menu-btn {
    display:         inline-block;
    font-family:     var(--wp--preset--font-family--jetbrains-mono);
    font-size: var(--idh-text-mono);
    font-weight:     700;
    letter-spacing:  0.18em;
    text-transform:  uppercase;
    color:           var(--wp--preset--color--ink);
    text-decoration: none;
    padding:         10px 16px;
    border:          1.5px solid var(--wp--preset--color--ink);
    transition:      background .15s, color .15s;
  }

  .masthead-menu-btn:hover {
    background: var(--wp--preset--color--ink);
    color:      var(--idh-paper-2);
  }

  /* Mobile masthead: gelijke verticale ademruimte boven én onder het
     logo/MENU-blok. */
  .masthead.wp-block-group {
    padding:     12px 20px;
    align-items: center !important;
  }
  .masthead-brand.wp-block-group,
  .masthead-actions.wp-block-group {
    margin:      0 !important;
    align-items: center !important;
  }

  /* De hero krijgt op desktop 40px (space-8) marge onder de header. Op mobiel
     gaf dat samen met de masthead-padding veel te veel ruimte ónder het blok,
     terwijl boven alleen de padding zat. Op mobiel hero strak tegen de header:
     boven (pad-top) en onder (pad-bottom) zijn nu gelijk. */
  body > .wp-site-blocks > header + .tifo-hero {
    margin-top: 0 !important;
  }

  /* Hero-mobile rules staan onderaan dit bestand (na de desktop tifo-
     spandoek/bottom CSS) zodat ze in de cascade winnen. */
}

/* ── Tier 2: Donkere nav-strip ───────────────────────────────────────
   Full-width zwart vlak (matched met de footer-kleur). Categorie-nav
   binnen op 1200 gecentreerd, witte mono tekst, rood op hover/active. */
.main-nav-strip.wp-block-group {
  background: var(--idh-ink);
  margin:     0 !important;
}

.main-nav-cats {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             0;
  max-width:       1280px;
  margin:          0 auto;
  padding:         0 40px;
  flex-wrap:       wrap;
}

/* Pill-stramien voor alle nav-items: constante padding + border-radius,
   alleen background + color wisselen tussen states. Voorkomt layout-shift
   bij hover en geeft visuele consistentie ("pillbox-vorm in de hele nav").
   States:
   - idle:   transparante pill, paper-tekst (85% opacity, rustig)
   - hover:  WITTE pill (paper-2), ink-tekst — "afwisten met wit"
   - active: RODE pill (accent), paper-2 tekst — current location
   Tussen items zit gap (geen ::before-separators meer want ze conflicten
   met de pill-vorm). */
.main-nav-cats a {
  font-family:     var(--wp--preset--font-family--jetbrains-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.85);
  padding:         8px 14px;
  text-decoration: none;
  background:      transparent;
  border-radius:   var(--idh-radius);
  transition:      background .15s, color .15s;
  position:        relative;
}

/* Hover = witte pill met ink-tekst. */
.main-nav-cats a:hover {
  background: var(--idh-paper-2);
  color:      var(--idh-ink);
}

/* Active = rode pill met witte tekst. Wint van hover via specificity-
   bundling: actieve link blijft rood ook als je eroverheen hovert. */
.main-nav-cats a.active,
.main-nav-cats a.active:hover {
  background: var(--idh-accent);
  color:      var(--idh-paper-2);
}

/* Nav-strip krijgt iets meer verticale spacing om de kleinere items
   visueel niet te dichtbij top/bottom te laten plakken. */
.main-nav-strip {
  padding-top:    10px !important;
  padding-bottom: 10px !important;
}
.main-nav-cats { gap: 4px; }

/* Mobile drawer: zelfde stramien, andere padding (full-width context). */
.mobile-drawer-cats a {
  background:    transparent;
  border-radius: var(--idh-radius);
  transition:    background .15s, color .15s;
}
.mobile-drawer-cats a:hover {
  background: var(--idh-paper-2);
  color:      var(--idh-ink);
}
.mobile-drawer-cats a.active,
.mobile-drawer-cats a.active:hover {
  background: var(--idh-accent);
  color:      var(--idh-paper-2);
}

/* "Alle categorieën →" — verticale separator + gedimd */
.main-nav-cats-more {
  margin-left: 8px;
  position:    relative;
  opacity:     0.55;
}

.main-nav-cats-more::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        16px;
  bottom:     16px;
  width:      1px;
  background: rgba(255,255,255,0.18);
}

.main-nav-cats-more:hover { opacity: 1; }

/* ── TIFO HERO ───────────────────────────────────────── */

/* Hero op 1280 — gelijk aan header, zones en cat-grid voor één
   strakke verticale lijn over de hele pagina. */
.tifo-hero.wp-block-group {
  position:     relative;
  max-width:    1280px;
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* Hero-blok vult de outer (1200), hoogte 500. Dark bg + strepen.
   Subtiele 1px grijze border (zelfde stijl als item-dividers + cat-grid-top
   — alleen header-bottom + footer-top zijn 2px ink als envelope-anchor). */
.tifo-hero .wp-block-query {
  height:           500px;
  margin:           0 !important;
  position:         relative;
  overflow:         hidden;
  background-color: var(--idh-ink);
  background-image:
    repeating-linear-gradient(-55deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(35deg, rgba(200,16,46,0.04) 0 1px, transparent 1px 28px);
  border-bottom:    1px solid var(--wp--preset--color--border);
}

.tifo-hero .wp-block-post-template {
  height:     100%;
  margin:     0 !important;
  padding:    0 !important;
  gap:        0 !important;
  list-style: none;
}

.tifo-hero .wp-block-post-template > li {
  height:   100%;
  position: relative;
  display:  block;
}

/* Featured image cover vult de volledige hero */
.tifo-cover-bg.wp-block-cover {
  height:           100% !important;
  min-height:       0 !important;
  margin:           0 !important;
  background-color: var(--idh-ink);
}

.tifo-cover-bg .wp-block-cover__inner-container {
  position: absolute !important;
  inset:    0;
  padding:  0 !important;
}

/* Rode topbar binnen de hero — rechtop, smal, niet meer schuin/oversized.
   Vroeger een grote diagonale spandoek over het beeld; werd op brede
   viewports té dominant. Nu een strakke horizontal bar bovenin het
   foto-frame, fonts compacter en links-uitgelijnd voor een krantenkop-
   gevoel. Op mobile wordt deze hidden (zie @media). */
.tifo-spandoek.wp-block-group {
  position:   absolute !important;
  bottom:     0;
  left:       0;
  right:      0;
  background: var(--wp--preset--color--accent) !important;
  padding:    14px var(--idh-space-10);
  margin:     0 !important;
  z-index:    2;
  transform:  none;
}

/* Hero-titel binnen de topbar — links uitgelijnd, één regel, compacter
   dan voorheen zodat de bar dun blijft. */
.tifo-title.wp-block-post-title {
  font-family:        var(--idh-font-display) !important;
  font-size:          clamp(22px, 2.2vw, 32px) !important;
  font-weight:        400 !important;
  text-transform:     uppercase;
  text-align:         left;
  color:              var(--idh-paper-2) !important;
  line-height:        1.1 !important;
  margin:             0 !important;
  display:            -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.tifo-title.wp-block-post-title a { color: var(--idh-paper-2) !important; }

/* Onderste strook: gradient + excerpt + CTA */
.tifo-bottom.wp-block-group {
  position:   absolute !important;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    20px 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  margin:     0 !important;
  z-index:    3;
}

.tifo-byline.wp-block-group {
  flex:      1;
  min-width: 0;
}

/* Kicker in de tifo-bottom — rode pill met witte tekst (zelfde stijl als
   de .cultuur-badge op de Cultuur-cards). Globale conventie: categorie-
   labels op beeld worden rood/wit pill, niet kale tekst. */
.tifo-kicker {
  display:       flex !important;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 8px !important;
  margin-top:    0 !important;
}

.tifo-kicker .wp-block-post-terms__separator { display: none; }

/* Toon overal maar ÉÉN categorie-label op de homepage. Redacteuren
   selecteren vaak 2-3 categorieën per post; dat geeft dubbele/aan-
   elkaar-lopende labels (vooral lelijk in de hero en op cards). */
.tifo-kicker a:not(:first-of-type),
.cultuur-badge a:not(:first-of-type),
.news-cat a:not(:first-of-type),
.ghop-card-cat a:not(:first-of-type),
.meer-card-kicker a:not(:first-of-type) {
  display: none !important;
}

.tifo-kicker a {
  font-family:     var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size:       var(--idh-text-mono) !important;
  font-weight:     700 !important;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  background:      var(--wp--preset--color--accent);
  color:           var(--idh-paper-2) !important;
  padding:         6px 12px;
  display:         inline-block;
  text-decoration: none !important;
  transition:      background .15s;
}

.tifo-kicker a:hover { background: var(--idh-accent-dark); }

.tifo-excerpt.wp-block-post-excerpt {
  font-family: var(--wp--preset--font-family--inter-tight) !important;
  font-size:   15px !important;
  line-height: 1.45;
  max-width:   480px;
  color:       rgba(255,255,255,0.85) !important;
  margin:      0 !important;
}

.tifo-excerpt .wp-block-post-excerpt__excerpt {
  color: rgba(255,255,255,0.85) !important;
}

.tifo-excerpt .wp-block-post-excerpt__more-link { display: none; }

/* TIFO CTA — default rood vlak, hover outline-stijl (matcht spotlight-cta). */
.tifo-cta.wp-block-paragraph {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  font-weight:    700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        10px 16px;
  border:         2.5px solid var(--idh-accent);
  color:          var(--idh-paper-2) !important;
  background:     var(--idh-accent);
  white-space:    nowrap;
  align-self:     flex-end;
  margin:         0 !important;
  flex-shrink:    0;
  cursor:         pointer;
  transition:     background .2s, border-color .2s;
}

.tifo-cta.wp-block-paragraph:hover {
  background:    transparent !important;
  border-color:  var(--idh-paper-2) !important;
  color:         var(--idh-paper-2) !important;
}

/* ── ZONES SECTIE ────────────────────────────────────── */

/* Zones-cols technisch 1280 (40px paddings binnen = rode lijntjes outer
   op 1200, gelijk aan hero/header/meer-cultuur). Geen border-bottom hier
   — de meer-cultuur border-top is de visuele scheiding (en zit ook op 1200). */
.zones-section.wp-block-group {
  max-width:    1280px;
  margin-left:  auto !important;
  margin-right: auto !important;
}

.zones-cols.wp-block-columns {
  max-width:    1280px;
  margin-left:  auto !important;
  margin-right: auto !important;
  gap:          0 !important;
  align-items:  stretch !important;
}

/* Zone 1 + 2 gelijke padding 32px 40px — symmetrische rode lijntjes */
.zone-1-col.wp-block-column {
  padding:      32px 40px !important;
  border-right: 1px solid var(--wp--preset--color--border);
}

.zone-2-col.wp-block-column {
  padding: 32px 40px !important;
}

/* Zone label balk: eyebrow + display-titel, met rood streepje eronder
   als anchor. Twee-laags hierarchie: eyebrow = context ("SNEL NIEUWS"
   / "VERDIEPING"), titel = sectie-anker ("Actueel" / "Cultuur"). */
.zone-label-bar.wp-block-group {
  margin-bottom: 24px !important;
  margin-top:    0 !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--wp--preset--color--accent);
  gap:           16px !important;
  align-items:   flex-end !important;
}

.zone-label-stack.wp-block-group {
  margin:  0 !important;
  gap:     18px !important;
}

/* Eyebrow — klein mono, rood (Actueel) of muted (Cultuur). Met
   pulserende live-dot vóór "Snel nieuws". */
.zone-label-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
  line-height:    1;
}

/* Cultuur-eyebrow (Verdieping) dimmer — geen urgentie, juist rust */
.zone-2-col .zone-label-eyebrow {
  color: var(--wp--preset--color--muted);
}

/* Pulserende dot voor "live"-feel naast Snel nieuws */
.zone-label-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--wp--preset--color--accent);
  box-shadow:    0 0 0 0 rgba(200, 16, 46, 0.6);
  animation:     idh-pulse 2s ease-out infinite;
}

@keyframes idh-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(200, 16, 46, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(200, 16, 46, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(200, 16, 46, 0);    }
}

/* Section-headers ACTUEEL / VOETBALCULTUUR — IBM Plex Sans display.
   Sectie-headers binnen flow mogen tot 28
   omdat ze niet hero zijn (anders dominant naast 6 items). Doc-update. */
.zone-label-title.wp-block-heading {
  font-family:    var(--idh-font-display) !important;
  font-size:      clamp(28px, 2.5vw, 36px) !important;
  font-weight:    400 !important;
  letter-spacing: -0.005em;
  text-transform: none;
  color:          var(--wp--preset--color--ink) !important;
  margin:         0 !important;
  line-height:    1.05;
}

/* Mono-link naast zone-titel (Voetbalcultuur).
   align-items: flex-end op de bar zorgt dat de link op de onderkant
   van de heading rust — geen zweef-effect meer zoals bij baseline. */
.zone-label-link.wp-block-paragraph {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size:      var(--idh-text-mono) !important;
  font-weight:    700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--muted) !important;
  margin:         0 !important;
  padding-bottom: 2px;  /* optisch ietsje boven de rode lijn */
}

.zone-label-link.wp-block-paragraph a {
  color:           inherit;
  text-decoration: none;
}

.zone-label-link.wp-block-paragraph:hover,
.zone-label-link.wp-block-paragraph a:hover {
  color: var(--wp--preset--color--accent) !important;
}

/* Bottom-link voor Actueel kolom — onder de items. Mono pill-loze
   link met chevron, zelfde style als zone-label-link bovenin
   Voetbalcultuur kolom. */
.zone-bottom-link {
  display:         inline-block;
  margin-top:      var(--idh-space-6);
  padding-top:     var(--idh-space-5);
  border-top:      var(--idh-border-thin) solid var(--idh-line);
  width:           100%;
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--idh-muted);
  text-decoration: none;
  transition:      color 0.15s ease;
}

.zone-bottom-link:hover {
  color: var(--idh-accent);
}

/* ── ZONE 1: NIEUWSITEMS ─────────────────────────────── */

.zone-1-col .wp-block-post-template {
  gap:    0 !important;
  margin: 0 !important;
}

.news-item.wp-block-group {
  padding:       14px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin:        0 !important;
  position:      relative;
  cursor:        pointer;
}

.news-item.wp-block-group:last-child { border-bottom: none; }

/* Uitgebreide klikbare zone via pseudo-element op de link */
.news-title.wp-block-post-title a::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  0;
}

.news-meta.wp-block-group,
.news-cat a,
.news-time time {
  position: relative;
  z-index:  1;
}

.news-meta.wp-block-group {
  gap:           8px !important;
  margin-bottom: 6px !important;
  margin-top:    0 !important;
}

.news-time.wp-block-post-date {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent) !important;
}

.news-time.wp-block-post-date time { color: var(--wp--preset--color--accent) !important; }

.news-sep.wp-block-paragraph {
  font-family: var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  color:       var(--wp--preset--color--border) !important;
  margin:      0 !important;
  line-height: 1;
}

.news-cat.wp-block-post-terms {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin:         0 !important;
}

.news-cat .wp-block-post-terms__separator { display: none; }

.news-cat a {
  color:           var(--wp--preset--color--muted) !important;
  text-decoration: none !important;
}

/* Krantenkop-feel — weight 700 (was 500, in strijd met type-system).
   Plex bold op 17 is sterk maar leesbaar; past bij snel-nieuws ritme. */
.news-title.wp-block-post-title {
  font-family: var(--wp--preset--font-family--inter-tight) !important;
  font-size:   17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  color:       var(--wp--preset--color--ink) !important;
  margin:      0 0 5px !important;
  transition:  color .15s;
}

.news-title.wp-block-post-title a { color: var(--wp--preset--color--ink) !important; }

.news-item:hover .news-title.wp-block-post-title,
.news-item:hover .news-title.wp-block-post-title a {
  color: var(--wp--preset--color--accent) !important;
}

.news-excerpt.wp-block-post-excerpt {
  font-family: var(--wp--preset--font-family--inter-tight) !important;
  font-size:   13.5px !important;
  color:       var(--wp--preset--color--muted) !important;
  line-height: 1.5 !important;
  margin:      0 !important;
}

.news-excerpt .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted) !important; }
.news-excerpt .wp-block-post-excerpt__more-link { display: none; }

/* ── ZONE 2: CULTUUR KAARTEN ─────────────────────────── */

.zone-2-col .wp-block-post-template {
  gap:    0 !important;
  margin: 0 !important;
}

.cultuur-card.wp-block-group {
  margin:        0 0 28px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  cursor:        pointer;
  position:      relative;
}

/* Stretched link — de hele card (incl. foto + byline-area) is klikbaar
   naar het artikel, niet alleen de titel. Pseudo-element overlapt
   alles binnen .cultuur-card. Badge krijgt eigen z-index zodat hij
   blijft werken als cat-link. */
.cultuur-title.wp-block-post-title a::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
}
.cultuur-badge.wp-block-post-terms {
  position: relative;
  z-index:  2;
}

.cultuur-card.wp-block-group:last-child {
  border-bottom:  none;
  margin-bottom:  0 !important;
  padding-bottom: 0;
}

/* Uitgebreide klikzone via pseudo-element */
.cultuur-title.wp-block-post-title a::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  0;
}

.cultuur-badge a,
.cultuur-cat a {
  position: relative;
  z-index:  1;
}

/* 16:9 cover met badge rechtsonder */
.cultuur-cover.wp-block-cover {
  aspect-ratio: 16 / 9 !important;
  min-height:   0 !important;
  background-color: var(--wp--preset--color--ink-2);
  margin-bottom: 12px !important;
  margin-top:    0 !important;
}

.cultuur-cover .wp-block-cover__inner-container {
  position:        absolute !important;
  inset:           0;
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: flex-end !important;
  align-items:     flex-end !important;
  padding:         10px !important;
}

/* Badge (categorie-label) rechtsonder in de foto */
.cultuur-badge.wp-block-post-terms {
  margin: 0 !important;
}

.cultuur-badge .wp-block-post-terms__separator { display: none; }

.cultuur-badge a {
  font-family:     var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  font-weight:     700 !important;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  background:      var(--wp--preset--color--accent);
  color:           var(--idh-paper-2) !important;
  padding:         3px 7px;
  text-decoration: none !important;
  display:         inline-block;
}

/* Kaartinhoud onder de foto */
.cultuur-card-body.wp-block-group {
  margin: 0 !important;
}

.cultuur-cat.wp-block-post-terms {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  font-weight:    700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent) !important;
  margin:         0 0 5px !important;
}

.cultuur-cat .wp-block-post-terms__separator { display: none; }
.cultuur-cat a { color: var(--wp--preset--color--accent) !important; text-decoration: none !important; }

.cultuur-title.wp-block-post-title {
  font-family:        var(--wp--preset--font-family--inter-tight) !important;
  font-size:          19px !important;
  font-weight:        700 !important;
  line-height:        1.25 !important;
  color:              var(--wp--preset--color--ink) !important;
  margin:             0 0 8px !important;
  transition:         color .15s;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.cultuur-title.wp-block-post-title a { color: var(--wp--preset--color--ink) !important; }

.cultuur-card:hover .cultuur-title.wp-block-post-title,
.cultuur-card:hover .cultuur-title.wp-block-post-title a {
  color: var(--wp--preset--color--accent) !important;
}

.cultuur-byline.wp-block-group {
  gap:    8px !important;
  margin: 0 !important;
}

/* Beide class-vormen ondersteunen: WP rendert de auteurnaam soms
   als `.wp-block-post-author-name` (hyphen, legacy) en soms als
   `.wp-block-post-author__name` (BEM, nieuwer). Verschilt per
   block-attribuut combinatie. */
.cultuur-byline .wp-block-post-author__name,
.cultuur-byline .wp-block-post-author-name,
.cultuur-byline .wp-block-post-date {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono-xs) !important;
  font-weight:    500 !important;
  color:          var(--wp--preset--color--muted) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin:         0 !important;
}

/* ── HOMEPAGE ZONES — responsive ─────────────────────────────────────
   Op mobile: kolommen stapelen (full-width), padding kleiner, border
   rechts weg. Zone-label-bar stapelt ook: heading bovenop, link eronder.
   Gutenberg's is-not-stacked-on-mobile override via flex-direction. */

@media (max-width: 880px) {
  .zones-cols.wp-block-columns {
    flex-direction: column !important;
  }

  .zone-1-col.wp-block-column,
  .zone-2-col.wp-block-column {
    flex-basis:   100% !important;
    width:        100% !important;
    padding:      24px 20px !important;
    border-right: none !important;
  }

  .zone-2-col.wp-block-column {
    border-top: 1px solid var(--wp--preset--color--border);
  }

  /* Label-balk: heading op volle breedte, link eronder */
  .zone-label-bar.wp-block-group {
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            6px !important;
    padding-bottom: 10px;
  }

  .zone-label-title.wp-block-heading {
    font-size: clamp(26px, 7vw, 32px) !important;
  }

  .zone-bottom-link {
    margin-top: var(--idh-space-5);
  }
}

/* ── CATEGORIE-GRID — speels typografisch ontdek-blok ─── */

.cat-grid-section.wp-block-group {
  border-top:   1px solid var(--wp--preset--color--border);
  max-width:    1280px;
  margin-left:  auto !important;
  margin-right: auto !important;
  padding:      56px 40px !important;
}

/* Sectie-header */
.cat-grid-header.wp-block-group {
  max-width:     720px;
  margin:        0 0 40px !important;
}

.cat-grid-kicker.wp-block-paragraph {
  font-family:    var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size: var(--idh-text-mono) !important;
  font-weight:    700 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent) !important;
  margin:         0 0 12px !important;
  line-height:    1;
}

.cat-grid-title.wp-block-heading {
  font-family:    var(--idh-font-display) !important;
  font-size:      clamp(36px, 4.5vw, 56px) !important;
  font-weight:    400 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height:    0.95 !important;
  color:          var(--wp--preset--color--ink) !important;
  margin:         0 0 16px !important;
}

.cat-grid-intro.wp-block-paragraph {
  font-family: var(--wp--preset--font-family--inter-tight) !important;
  font-size:   17px !important;
  font-weight: 400;
  color:       var(--wp--preset--color--ink-2) !important;
  line-height: 1.55 !important;
  margin:      0 !important;
  max-width:   620px;
}

/* Homepage cat-tile styling is geüpgraded naar de generieke .cat-tile
   component verderop in deze file. .cat-tile-grid--mosaic levert de
   asymmetrische xl/m/s spans op een 12-koloms grid (homepage). */

/* ── FOOTER ──────────────────────────────────────────── */

footer.wp-block-group {
  background:  var(--idh-ink);
  color:       var(--idh-paper-2);
  padding:     56px 40px 32px !important;
  border-top:  2px solid var(--wp--preset--color--ink);
}

/* Brand-block (1e kolom) — geen logo, tagline-anker ipv onzichtbaar embleem */
/* Footer-brand-name gebruikt Anton (sitewide uit gefaseerd 25 mei,
   exclusief teruggebracht voor logo-pattern). Sterker en smaller dan
   Plex 700; voelt als merknaam, niet als titel. */
.footer-brand .footer-brand-name {
  font-family:    'Anton', Impact, var(--idh-font-display);
  font-size:      38px;
  font-weight:    400;
  letter-spacing: 0.02em;
  line-height:    1.0;
  color:          var(--idh-paper-2);
  text-transform: uppercase;
  margin:         0 0 8px;
}

.footer-brand .footer-brand-tagline {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
  margin:         0 0 16px;
}

.footer-brand .footer-brand-text {
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   14px;
  color:       rgba(255,255,255,0.6);
  line-height: 1.55;
  margin:      0 0 20px;
  max-width:   280px;
}

/* Social-icons in de footer-brand-kolom — groter dan in de header,
   met subtiele border-box voor presence op zwarte achtergrond. */
.footer-socials {
  display: flex;
  gap:     12px;
}

.footer-socials a {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  color:           rgba(255,255,255,0.7);
  text-decoration: none;
  border:          1px solid rgba(255,255,255,0.2);
  transition:      color .15s, border-color .15s;
}

.footer-socials a:hover {
  color:        var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/* Widget-headers (CULTUUR / LANDEN / etc) — accent-rood ipv onleesbaar grijs */
.footer-heading {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
  margin:         0 0 14px;
  padding-bottom: 8px;
  border-bottom:  1px solid rgba(255,255,255,0.12);
}

/* Link-lijsten in de kolommen */
.footer-links {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}

.footer-links li {
  padding:       0 !important;
  margin-bottom: 8px;
}

.footer-links li::marker { display: none; }

.footer-links a {
  font-family:     var(--wp--preset--font-family--inter);
  font-size:       14px;
  color:           rgba(255,255,255,0.75);
  text-decoration: none;
  transition:      color .15s;
  position:        relative;
  display:         inline-block;
}

.footer-links a::after {
  content:          '';
  position:         absolute;
  left:             0;
  right:            0;
  bottom:           -2px;
  height:           1px;
  background:       currentColor;
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .3s cubic-bezier(.2,.6,.2,1);
}

.footer-links a:hover {
  color: var(--wp--preset--color--accent);
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

.footer-links .footer-link-more {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.45);
}

/* Separator — gecentreerd binnen de content-grid (1120 wide = 1200
   wideSize - 80 padding), met gelijke verticale ademruimte boven én
   onder. Explicit `margin-inline: auto` is nodig omdat de constrained
   layout van de parent anders één kant overschrijft. */
footer .footer-separator,
footer .wp-block-separator {
  border-color:  rgba(255,255,255,0.15) !important;
  background:    rgba(255,255,255,0.15) !important;
  border-width:  0 0 1px 0 !important;
  height:        0 !important;
  width:         100% !important;
  max-width:     1120px !important;
  margin-left:   auto !important;
  margin-right:  auto !important;
  margin-top:    24px !important;
  margin-bottom: 24px !important;
}

/* Bottom-rij: copyright + designer-credit, horizontaal én vertikaal
   gecentreerd. flex-direction: column zorgt dat als we later een
   tweede regel toevoegen (bv © 2010-2026), die ook netjes stacked. */
.footer-bottom.wp-block-group {
  display:         flex !important;
  flex-direction:  column;
  align-items:     center !important;
  justify-content: center !important;
  gap:             4px !important;
  text-align:      center;
  padding-top:     4px;
}

.footer-copyright,
.footer-designer {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.55);
  margin:         0;
}

.footer-designer a {
  color:           rgba(255,255,255,0.85);
  text-decoration: none;
  transition:      color .15s;
  position:        relative;
  display:         inline-block;
}

.footer-designer a::after {
  content:          '';
  position:         absolute;
  left:             0;
  right:            0;
  bottom:           -2px;
  height:           1px;
  background:       currentColor;
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .3s cubic-bezier(.2,.6,.2,1);
}

.footer-designer a:hover           { color: var(--wp--preset--color--accent); }
.footer-designer a:hover::after    { transform: scaleX(1); }

/* External-link arrow naast 072DESIGN — subtiel, baseline-uitgelijnd.
   Onderlijn-animatie (a::after) loopt tot aan einde tekst, niet onder
   de SVG. Geen offset op de animatie nodig — SVG zit binnen <a> en
   currentColor zorgt dat hij meekleurt op hover. */
.footer-designer-arrow {
  display:        inline-block;
  margin-left:    4px;
  vertical-align: -1px;
  opacity:        0.7;
  transition:     opacity .15s, transform .2s;
}
.footer-designer a:hover .footer-designer-arrow {
  opacity:   1;
  transform: translate(1px, -1px);
}

/* ── FOOTER MOBILE ──────────────────────────────────────────────────
   Brand-block full-width bovenaan, 4 info-kolommen daarna in 2x2 grid
   (compacter verticaal, meer ademruimte tussen secties dan een lange
   stack van 5 kolommen onder elkaar). */
@media (max-width: 880px) {
  footer.wp-block-group {
    padding: 40px 24px 28px !important;
  }

  footer.wp-block-group .wp-block-columns {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   36px 24px !important;
    margin-bottom:         28px !important;
  }

  footer.wp-block-group .wp-block-column {
    flex-basis: auto !important;
    width:      auto !important;
    padding:    0 !important;
  }

  /* Brand-blok over de volle breedte bovenaan */
  footer.wp-block-group .wp-block-column.footer-brand {
    grid-column:   1 / -1;
    margin-bottom: 8px;
  }

  .footer-brand .footer-brand-text {
    max-width: 100%;
    margin-bottom: 24px;
  }

  /* Compactere headings + links op mobile */
  .footer-heading {
    font-size:      9px;
    margin:         0 0 10px;
    padding-bottom: 6px;
  }

  .footer-links li { margin-bottom: 6px; }
  .footer-links a  { font-size: 13px; }

  /* Bottom-rij: alleen 072DESIGN credit, centraal */
  .footer-bottom.wp-block-group {
    justify-content: center !important;
    gap:             0 !important;
  }
}

/* ════════════════════════════════════════════════════════
   MOBILE HERO — schone rewrite (2026-05-25).
   Foto vult de hero. Onderaan een flex-column stack:
   pill (kicker) bovenop, titel eronder. Linear-gradient via
   pseudo-element op de cover voor leesbaarheid. Geen
   absolute-positioning meer op spandoek/bottom — geen overlap.
   ════════════════════════════════════════════════════════ */
@media (max-width: 880px) {

  .tifo-hero.wp-block-group {
    max-width: none !important;
    margin:    0 !important;
  }
  .tifo-hero .wp-block-query {
    max-width:        none !important;
    background-color: transparent !important;
    background-image: none !important;
    height:           auto !important;
  }

  /* Cover: vaste hoogte + featured image fillt via WP's __image-background.
     Inner-container = flex column met content onderaan + gradient pseudo. */
  .tifo-cover-bg.wp-block-cover {
    height:     420px !important;
    min-height: 0 !important;
    padding:    0 !important;
    position:   relative !important;
  }
  .tifo-cover-bg .wp-block-cover__image-background {
    object-fit:      cover !important;
    object-position: center !important;
    width:           100% !important;
    height:          100% !important;
  }
  .tifo-cover-bg .wp-block-cover__inner-container {
    position:        relative !important;
    height:          100% !important;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-end !important;
    padding:         0 !important;
    margin:          0 !important;
    z-index:         2;
  }
  /* Gradient onder de tekst voor leesbaarheid */
  .tifo-cover-bg .wp-block-cover__inner-container::before {
    content:        '';
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         0;
    height:         60%;
    background:     linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 45%, transparent 100%);
    pointer-events: none;
    z-index:        -1;
  }

  /* Spandoek en bottom in flex flow onderaan. Bottom (= pill) eerst,
     dan spandoek (= title) eronder. Geen dim-overlay meer; alleen de
     gradient ::before zorgt voor leesbaarheid. */
  .tifo-bottom.wp-block-group {
    position:        static !important;
    background:      transparent !important;
    flex-direction:  column !important;
    align-items:     flex-start !important;
    padding:         0 20px 0 !important;
    margin:          0 !important;
    gap:             0 !important;
    bottom:          auto !important;
    order:           1;
  }
  .tifo-spandoek.wp-block-group {
    position:   static !important;
    background: transparent !important;
    transform:  none !important;
    width:      auto !important;
    padding:    8px 20px 22px !important;
    margin:     0 !important;
    bottom:     auto !important;
    top:        auto !important;
    order:      2;
  }

  .tifo-title.wp-block-post-title,
  .tifo-title.wp-block-post-title a {
    font-family: var(--idh-font-display) !important;
    font-size:   clamp(26px, 7vw, 36px) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color:       var(--idh-paper-2) !important;
    text-align:  left !important;
    line-height: 1.05 !important;
    text-shadow: none !important;
    margin:      0 !important;
  }

  .tifo-byline.wp-block-group { width: 100%; flex: none; }
  .tifo-kicker { margin: 0 !important; }

  /* Excerpt + CTA niet tonen op mobile */
  .tifo-excerpt.wp-block-post-excerpt,
  .tifo-cta.wp-block-paragraph {
    display: none !important;
  }

  /* ── Categorie-tegels: horizontale carrousel op mobile ──────────
     Op desktop: 6-col grid met asymmetrische spans. Op mobile:
     scrollable carrousel met snap, alle tegels gelijke breedte. */
  .cat-tiles-grid {
    display:            flex !important;
    grid-template-columns: none !important;
    overflow-x:         auto;
    overflow-y:         hidden;
    scroll-snap-type:   x mandatory;
    -webkit-overflow-scrolling: touch;
    gap:                12px !important;
    padding:            4px 20px 8px;
    margin:             0 -40px;
    scrollbar-width:    none;
  }

  .cat-tiles-grid::-webkit-scrollbar { display: none; }

  .cat-tile {
    flex:              0 0 auto !important;
    grid-column:       unset !important;
    width:             240px !important;
    min-height:        160px !important;
    scroll-snap-align: start;
  }

  .cat-tile--xl,
  .cat-tile--m,
  .cat-tile--s {
    grid-column: unset !important;
    min-height:  160px !important;
  }

  /* Op mobile alle tegels-namen gelijke maat (kleiner dan desktop) */
  .cat-tile-name,
  .cat-tile--xl .cat-tile-name {
    font-size: clamp(24px, 5.8vw, 30px) !important;
  }

  /* Sectie-padding compacter — space-8/space-5 (was 36px = off-token). */
  .cat-grid-section.wp-block-group {
    padding:  var(--idh-space-8) var(--idh-space-5) !important;
    position: relative;
  }

  /* Cultuur cards compacter op mobile (minder verticale ruimte
     tussen cards en kortere intervals tussen foto+titel+byline). */
  .cultuur-card.wp-block-group {
    margin:        0 0 20px !important;
    padding-bottom: 20px;
  }

  .cultuur-cover.wp-block-cover { margin-bottom: 10px !important; }
  .cultuur-title.wp-block-post-title { margin: 0 0 6px !important; }

  /* Oude scroll-hint vervangen door .cat-tile-dots — JS in cat-tiles.js
     synct de actieve dot tijdens carousel-scroll. Geen tekst-hint meer. */

}

/* ════════════════════════════════════════════════════════════════════════
   SINGLE POST — Long-read template
   Layout: header (kicker + display-titel + deck + byline) op 760px,
   featured image op 1200px (breed), body op 720px voor leesbaarheid.
   Galleries vallen binnen body-kolom (720) — break-out treatment komt
   later als de Jetpack-shortcodes naar Core Gallery zijn gemigreerd.
   ════════════════════════════════════════════════════════════════════════ */

.single-main.wp-block-group {
  margin:  0 !important;
  padding: 0;
}

/* ── Article header ─────────────────────────────────────────────────── */

.article-header.wp-block-group {
  max-width:     760px;
  margin:        56px auto 0 !important;
  padding:       0 40px;
  text-align:    left;
}

/* Categorie-pill bovenaan — zelfde stijl als cultuur-card badge */
.article-kicker.wp-block-post-terms {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.article-kicker .wp-block-post-terms__separator { display: none; }
.article-kicker a:not(:first-of-type) { display: none; } /* alleen eerste cat */

.article-kicker a {
  display:          inline-block;
  background:       var(--wp--preset--color--accent);
  color:            var(--idh-paper-2) !important;
  padding:          6px 12px;
  text-decoration:  none !important;
  transition:       background 0.15s ease;
}
.article-kicker a:hover { background: var(--idh-accent-dark); }

/* Titel — IBM Plex Sans display, groot, krantenkop-feel */
.article-title.wp-block-post-title {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(36px, 5.6vw, 64px);
  line-height:    1.02;
  letter-spacing: -0.005em;
  color:          var(--wp--preset--color--ink);
  text-transform: none;
}
.article-title a { color: inherit !important; }

/* Deck — korte excerpt onder titel, Inter Tight, lichter */
.article-deck.wp-block-post-excerpt {
  font-family:  var(--wp--preset--font-family--inter-tight);
  font-size:    20px;
  line-height:  1.5;
  font-weight:  400;
  color:        var(--wp--preset--color--muted);
  max-width:    640px;
}
.article-deck .wp-block-post-excerpt__excerpt {
  margin: 0;
}
.article-deck .wp-block-post-excerpt__more-link { display: none; }

/* Byline — auteur · datum, mono. Forceren op identieke size/weight
   op alle child-elementen: WP rendert auteurnaam soms in <p>, datum
   in <time>, en theme.json kan eigen font-sizes opleggen. Met !important
   omdat WP-core block-styles anders winnen op specificity. */
.article-byline.wp-block-group {
  padding-top:    20px;
  border-top:     1px solid var(--wp--preset--color--line);
  align-items:    center !important;
  gap:            12px !important;
}

.article-byline,
.article-byline .article-byline-authors,
.article-byline .article-byline-x,
.article-byline .wp-block-post-author,
.article-byline .wp-block-post-author__content,
.article-byline .wp-block-post-author__name,
.article-byline .wp-block-post-author-name,
.article-byline .wp-block-post-author__name a,
.article-byline .wp-block-post-author-name a,
.article-byline .wp-block-post-date,
.article-byline .wp-block-post-date time,
.article-byline .wp-block-post-date a,
.article-byline .article-byline-dot {
  font-family:     var(--wp--preset--font-family--jetbrains-mono) !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  line-height:     1.2 !important;
  letter-spacing:  0.08em !important;
  text-transform:  uppercase;
  color:           var(--wp--preset--color--ink) !important;
  margin:          0 !important;
  text-decoration: none;
}

/* × separator tussen co-authors — rood accent, iets meer ruimte
   eromheen om als duidelijk leesteken te functioneren */
.article-byline .article-byline-x {
  color:        var(--wp--preset--color--accent) !important;
  margin:       0 8px !important;
  font-weight:  700 !important;
  display:      inline-block;
}

/* Datum altijd grijs — secundaire info t.o.v. de auteur(s) in zwart.
   Geforceerd hier omdat de globale byline-rule alles op ink zet. */
.article-byline .wp-block-post-date,
.article-byline .wp-block-post-date time,
.article-byline .wp-block-post-date a {
  color: var(--wp--preset--color--muted) !important;
}

.article-byline .wp-block-post-author__name a:hover,
.article-byline .wp-block-post-author-name a:hover {
  color: var(--wp--preset--color--accent) !important;
}

.article-byline .article-byline-dot {
  color:   var(--wp--preset--color--muted) !important;
  opacity: 0.6;
}

/* ── Featured image — 1200 wide, ruime margins ─────────────────────── */

.article-featured-wrap.wp-block-group {
  max-width:    1200px;
  margin:       48px auto 56px !important;
  padding:      0 40px;
}

.article-featured img,
.article-featured-wrap .wp-block-post-featured-image img {
  display:      block;
  width:        100%;
  height:       auto;
  max-height:   620px;
  object-fit:   cover;
}

/* Foto-credit als cut-out IN de hero-foto, rechtsonder.
   Paper-blok dat "in" de foto knipt, met rood streepje bovenop
   (consistent met het 2px-rood-lijn-systeem in de header/zones).
   Label is mono, "Foto" in rood + naam in ink.
   Render: shortcode in functions.php → .article-featured-credit div.
   We selecteren dus zonder .wp-block-group context-class. */
.article-featured-wrap.wp-block-group {
  position: relative;
}
.article-featured-credit {
  position:       absolute;
  right:          40px;
  bottom:         0;
  z-index:        2;
  display:        inline-flex;
  align-items:    baseline;
  gap:            8px;
  background:     var(--wp--preset--color--paper);
  border-top:     2px solid var(--wp--preset--color--accent);
  padding:        10px 16px 9px;
  margin:         0;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--ink);
}
.article-featured-credit-label {
  color:        var(--wp--preset--color--accent);
  font-weight:  700;
}
.article-featured-credit-name {
  color:       var(--wp--preset--color--ink);
  font-weight: 500;
}

/* ── Article body — 780 wide, leesbare typografie ──────────────────── */

.article-body-wrap.wp-block-group {
  max-width:    780px;
  margin:       0 auto !important;
  padding:      0 40px 12px;
}

.article-body {
  font-family:    var(--wp--preset--font-family--inter-tight);
  font-size:      19px;
  line-height:    1.65;
  color:          var(--wp--preset--color--ink);
  letter-spacing: -0.003em;
}

/* WP-core / theme.json zet een eigen font-size op <p>, dus we moeten
   het expliciet op de child-selectors herhalen, anders inheriten p's
   de WP-default (17px). */
.article-body p,
.article-body li {
  font-size:      19px;
  line-height:    1.65;
}

/* Lead-paragraaf: eerste alinea krijgt grotere display-treatment.
   Patroon op de site: eerste paragraaf is altijd <strong> gewikkeld,
   maar we styleren op :first-of-type ipv strong — robuuster en werkt
   ook als de auteur de bold-wrap een keer vergeet. */
.article-body > p:first-of-type {
  font-size:      23px;
  line-height:    1.5;
  font-weight:    500;
  color:          var(--wp--preset--color--ink);
  margin-top:     0;
  margin-bottom:  40px;
}
.article-body > p:first-of-type strong { font-weight: 500; } /* reset double-bold */

/* Body paragraphs */
.article-body p {
  margin: 0 0 22px;
}

/* Inline emphasis */
.article-body strong { font-weight: 700; }
.article-body em     { font-style: italic; }

/* Inline links — rood, subtiele underline die op hover dikt */
.article-body a {
  color:                 var(--wp--preset--color--accent);
  text-decoration:       underline;
  text-decoration-color: rgba(200, 16, 46, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:            text-decoration-color 0.15s ease;
}
.article-body a:hover {
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 2px;
}

/* Sectie-koppen (H3 is conventie in oude posts; H2 mag ook). Geen
   IBM Plex Sans display hier — te dominant in lopend long-read. Inter Tight bold,
   ruime top-margin als enige visuele anchor (geen lijntje, geen
   uppercase). Schoner, magazine-stijl, en blijft werken ongeacht
   semantische niveau (H2/H3). */
.article-body h2,
.article-body h3 {
  font-family:    var(--wp--preset--font-family--inter-tight);
  font-weight:    700;
  font-size:      26px;
  line-height:    1.25;
  color:          var(--wp--preset--color--ink);
  margin:         52px 0 14px;
  padding:        0;
  border:         0;
  letter-spacing: -0.005em;
}

.article-body h4 {
  font-family:    var(--wp--preset--font-family--inter-tight);
  font-weight:    700;
  font-size:      18px;
  line-height:    1.3;
  margin:         32px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pull-quote (blockquote) — rood vlak met witte display-tekst, groot
   semi-transparant curly-quote als watermark, breakout uit body-kolom.
   Moedigt redactie aan om quotes actief te gebruiken — ze SPRINGEN
   uit de tekst, niet alleen typografisch maar ook als kleurvlak.
   Brutalist + magazine-pull-quote tegelijk. */
.article-body blockquote,
.article-body .wp-block-quote {
  position:       relative;
  margin:         56px -40px;
  padding:        40px 44px 36px 96px;
  background:     var(--wp--preset--color--accent);
  color:          var(--idh-paper-2);
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      36px;
  line-height:    1.12;
  letter-spacing: -0.005em;
  font-style:     normal;
  border:         0;
}
.article-body blockquote::before,
.article-body .wp-block-quote::before {
  content:        '\201C'; /* curly opening quote — werkt mooier dan ascii " */
  position:       absolute;
  left:           24px;
  top:            -8px;
  font-family:    Georgia, "Times New Roman", serif;
  font-size:      150px;
  line-height:    1;
  color:          rgba(255, 255, 255, 0.18);
  font-weight:    700;
  pointer-events: none;
  user-select:    none;
}
.article-body blockquote p,
.article-body .wp-block-quote p {
  margin: 0;
  color:  inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.article-body blockquote cite,
.article-body .wp-block-quote cite {
  display:        block;
  margin-top:     18px;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.85);
  font-style:     normal;
}

/* Lists — UL krijgt custom rood rondje via ::before (zie sitewide
   .body-rich-list-bullet block onderaan style.css). OL behoudt default. */
.article-body ul,
.article-body ol {
  margin:       0 0 24px;
  padding-left: 0;
}
.article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 8px; }

/* Inline images / figures binnen body — netjes binnen 720 kolom */
.article-body img,
.article-body figure {
  max-width: 100%;
  height:    auto;
}
.article-body figure {
  margin: 32px 0;
}
.article-body figure figcaption,
.article-body .wp-caption-text {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  letter-spacing: 0.04em;
  color:          var(--wp--preset--color--muted);
  margin-top:     8px;
  text-align:     left;
}

/* ── Galleries — tiled/justified layout ──────────────────────────────
   Onze eigen renderer (functions.php → post_gallery filter) bouwt
   `.gallery.gallery-tiled` met items die hun originele aspect-ratio
   als CSS custom property `--ar` meekrijgen. Flexbox-row dan distribueert
   horizontaal en alle items in dezelfde rij krijgen dezelfde hoogte.
   Resultaat: Flickr/Jetpack-tiled-effect zonder JS, foto's behouden
   verhouding en niets wordt gerokken via crop. PhotoSwipe wordt door
   lightbox.js gehook't op `a.gallery-tiled-item`.
   Breakout uit de 780-body-kolom naar 1100 wide voor ademruimte. */

.article-body .gallery-tiled {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  margin:      48px 0;
  list-style:  none;
  padding:     0;

  /* Breakout naar 1200 wide — lijnt strak met de header masthead-wrap,
     zones en cat-grid (allemaal 1280 outer, 1200 content). Body-kolom
     blijft op 780, dus de gallery springt visueel uit de tekst. Op
     viewports onder 1280 valt de gallery netjes terug op viewport-edge
     minus 40 paddings.
     De 500 = (1200 doel) - (780 wrap - 80 wrap-padding) = 500. */
  width:       calc(100% + 500px);
  max-width:   min(1200px, calc(100vw - 80px));
  margin-left: 50%;
  transform:   translateX(-50%);
}

.article-body .gallery-tiled-item {
  /* flex-grow = aspect-ratio (br/h), flex-basis = ideale breedte
     gegeven 240px row-height. Items met hogere ratio (landscape)
     worden breder; portret-shots krijgen minder ruimte. min-width
     voorkomt te smalle slivers in rijen met veel kleine ratios. */
  flex:        var(--ar, 1) 1 calc(320px * var(--ar, 1));
  height:      320px;
  min-width:   140px;
  display:     block;
  overflow:    hidden;
  background:  #f0f0f0;
  position:    relative;
  cursor:      zoom-in;
}

.article-body .gallery-tiled-item img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.2s ease;
}

.article-body .gallery-tiled-item:hover img {
  transform: scale(1.04);
}

/* Subtiel "klik om te vergroten"-affordance: rechtsboven zoom-pictogram
   verschijnt op hover. Pure CSS, geen icon-font. */
.article-body .gallery-tiled-item::after {
  content:    '';
  position:   absolute;
  top:        10px;
  right:      10px;
  width:      24px;
  height:     24px;
  background:
    linear-gradient(transparent 45%, var(--idh-paper-2) 45%, var(--idh-paper-2) 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, var(--idh-paper-2) 45%, var(--idh-paper-2) 55%, transparent 55%);
  opacity:    0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.article-body .gallery-tiled-item:hover::after { opacity: 0.85; }

/* ── Lees-ook card (in-body cross-link via [lees_ook] shortcode) ──
   Compact horizontaal blok dat de body-flow onderbreekt op een
   natuurlijke plek. Foto links, content rechts (eyebrow + display-titel
   + cat-pill), rode arrow rechtsuit. Breakout naar 900 wide — minder
   uitgesproken dan galleries, maar wel duidelijk uit de body-kolom. */

.article-body .lees-ook {
  margin:      36px 0;
  width:       calc(100% + 240px);
  max-width:   min(900px, calc(100vw - 80px));
  margin-left: 50%;
  transform:   translateX(-50%);
}

.article-body .lees-ook-link {
  display:         flex;
  align-items:     center;
  gap:             20px;
  padding:         14px 18px 14px 14px;
  border:          1.5px solid var(--wp--preset--color--ink);
  background:      var(--wp--preset--color--paper);
  text-decoration: none !important;
  color:           var(--wp--preset--color--ink);
  transition:      background 0.15s ease, color 0.15s ease;
}
.article-body .lees-ook-link:hover {
  background: var(--wp--preset--color--ink);
  color:      var(--wp--preset--color--paper);
}
.article-body .lees-ook-link:hover .lees-ook-eyebrow {
  color: var(--wp--preset--color--paper);
}

.article-body .lees-ook-thumb {
  display:           block;
  flex:              0 0 110px;
  width:             110px;
  height:            72px;
  background-size:   cover;
  background-position: center;
  background-color:  #eee;
}

.article-body .lees-ook-body {
  flex:           1 1 auto;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
}

.article-body .lees-ook-eyebrow {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
  line-height:    1;
  transition:     color 0.15s ease;
}

/* Inter Tight bold 20 — was Anton 22, te klein als display.
   is een card-binnen-body, body-bold past beter. */
.article-body .lees-ook-title {
  font-family:    var(--idh-font-body);
  font-size:      20px;
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.005em;
  /* clamp naar 2 regels op smalle viewports */
  display:           -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  text-overflow:      ellipsis;
  color:              inherit;
}

.article-body .lees-ook-cat {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--muted);
  line-height:    1;
}
.article-body .lees-ook-link:hover .lees-ook-cat {
  color: rgba(255, 255, 255, 0.7);
}

.article-body .lees-ook-arrow {
  flex:           0 0 auto;
  font-family:    var(--idh-font-display);
  font-size:      24px;
  line-height:    1;
  color:          var(--wp--preset--color--accent);
  transition:     transform 0.2s ease, color 0.15s ease;
}
.article-body .lees-ook-link:hover .lees-ook-arrow {
  color:     var(--wp--preset--color--paper);
  transform: translateX(4px);
}

/* ── Legacy WP-core gallery (fallback voor edge cases) ──────────────
   Strategie: weg van Jetpack (zit in post-launch-deprecate-lijst).
   Mocht een [gallery] een keer zonder ids voorkomen of door een ander
   filter al gerendered worden, dan vangt deze styling het op. */

.article-body .gallery:not(.gallery-tiled) {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
  margin:                40px 0;

  /* Break-out uit de 780-body-kolom naar 1100 wide, gecentreerd.
     De body-wrap heeft 40px side-padding, dus negative-margin op die
     waarde haalt 'm uit de constraint. Calc voor de extra breedte: */
  width:                 calc(100% + 320px);
  max-width:             1100px;
  margin-left:           50%;
  transform:             translateX(-50%);
}

.article-body .gallery.gallery-columns-1 { grid-template-columns: 1fr; }
.article-body .gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.article-body .gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.article-body .gallery.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.article-body .gallery.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

.article-body .gallery-item,
.article-body .gallery dl {
  margin:  0 !important;
  padding: 0;
}

.article-body .gallery-icon,
.article-body .gallery br + br { display: block; }
.article-body .gallery br { display: none; }

.article-body .gallery-item img {
  display:     block;
  width:       100%;
  height:      100%;
  aspect-ratio: 4 / 3;
  object-fit:  cover;
  border:      0 !important;
  transition:  opacity 0.2s ease;
}
.article-body .gallery-item a:hover img { opacity: 0.85; }

/* Per-image caption uit Jetpack/WP — mono, klein, gedimd */
.article-body .gallery-caption,
.article-body .wp-caption-text {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono-xs);
  letter-spacing: 0.04em;
  color:          var(--wp--preset--color--muted);
  margin-top:     6px;
  text-align:     left;
  padding:        0;
}

/* WP Core Gallery block (toekomstige posts) — zelfde break-out treatment */
.article-body .wp-block-gallery {
  margin:      40px 0;
  width:       calc(100% + 320px);
  max-width:   1100px;
  margin-left: 50%;
  transform:   translateX(-50%);
}
.article-body .wp-block-gallery img {
  display: block;
}

/* ── Related posts — 3 cards onder de article ──────────────────────── */

/* Full-bleed paper-3 als visuele scheiding met de article-body erboven.
   Section strekt edge-to-edge over het viewport; padding-inline centreert
   de content op max 1120 (= oud 1200 met 2×40 padding). Onder 1200vw valt
   het terug op 40px padding-inline. */
.related-posts.wp-block-group {
  max-width:  none;
  margin:     var(--idh-space-18) 0 0 !important;
  padding:    56px max(40px, calc((100vw - 1120px) / 2)) 72px !important;
  background: var(--idh-paper-3);
  border-top: 1px solid var(--wp--preset--color--line);
}

.related-header.wp-block-group {
  margin:      0 0 40px !important;
  align-items: baseline !important;
}

.related-eyebrow {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
}

/* Related-articles section header — IBM Plex Sans display. */
.related-heading {
  font-family:    var(--idh-font-display);
  font-size:      clamp(28px, 2.5vw, 36px);
  font-weight:    400;
  color:          var(--wp--preset--color--ink);
  margin:         0;
  letter-spacing: -0.005em;
}

.related-query .wp-block-post-template {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
  margin:                0;
  padding:               0;
  list-style:            none;
}

/* Related-card specifieke CSS staat in de gedeelde CARD COMPONENT section
   verderop (rond regel 5570) waar .archive-card en .related-card samen
   gestyled worden. Hier alleen layout-grid van de related-strip. */

/* ── Share-bar ────────────────────────────────────────────────────
   Sticky-vrije rij met Web Share API (mobile/iOS native) + fallback
   knoppen voor X / Facebook / WhatsApp / E-mail / Link-kopiëren.
   Geen third-party SDKs (geen Facebook SDK, geen X widget) — alles
   via directe share-URLs. JS-init in assets/js/share.js. */

.article-share-wrap {
  max-width: 780px;
  margin:    28px auto 0 !important;
  padding:   0 40px;
}

.article-share-bar {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             10px;
  padding:         16px 0;
  border-top:      1px solid var(--wp--preset--color--line);
  border-bottom:   1px solid var(--wp--preset--color--line);
}

.article-share-label {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
  margin-right:   6px;
}

.article-share-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         8px 14px;
  background:      transparent;
  border:          1px solid var(--wp--preset--color--ink);
  color:           var(--wp--preset--color--ink);
  font-family:     var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:     600;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  transition:      background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.article-share-btn:hover {
  background:   var(--wp--preset--color--ink);
  color:        var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--ink);
}

.article-share-btn[data-share-type="native"] {
  background:   var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color:        var(--idh-paper-2);
  display:      none; /* JS voegt .is-native toe als navigator.share kan */
}
.article-share-btn[data-share-type="native"].is-native { display: inline-flex; }
.article-share-btn[data-share-type="native"]:hover {
  background:   var(--idh-accent-dark);
  border-color: var(--idh-accent-dark);
}

.article-share-btn[data-share-type="copy"].is-copied {
  background:   var(--wp--preset--color--ink);
  color:        var(--wp--preset--color--paper);
}

.article-share-icon {
  width:  14px;
  height: 14px;
  flex:   0 0 14px;
}

/* ── Auteur-profiel card onderaan article ────────────────────────
   Outline-box, zelfde visuele taal als "Word 12e man"-button in
   header (1.5px ink border, transparante achtergrond). Geen rood
   streepje, geen tint-fill — schoner en consistent. */

.article-author-card.wp-block-group {
  max-width: 780px;
  margin:    44px auto 0 !important;
  padding:   32px 0 0;
  display:   flex !important;
  gap:       22px !important;
  align-items: flex-start !important;
  background:  transparent;
  border:      0;
  border-top:  1px solid var(--wp--preset--color--line);
}

.article-author-card .wp-block-avatar img {
  display:       block;
  width:         80px !important;
  height:        80px !important;
  border-radius: 50%;
  object-fit:    cover;
  background:    #f0f0f0;
  flex:          0 0 80px;
}

.article-author-info.wp-block-group {
  flex:    1 1 auto;
  margin:  0 !important;
  gap:     0 !important;
}

.article-author-eyebrow {
  display:        block;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
  margin-bottom:  4px;
}

/* Inter Tight bold 20 — was Anton, te klein.
   Author-name is een card-titel binnen auteur-blok, body-bold. */
.article-author-name.wp-block-post-author-name {
  font-family:    var(--idh-font-body);
  font-size:      20px;
  font-weight:    700;
  line-height:    1.2;
  margin:         0 0 8px !important;
  letter-spacing: -0.005em;
}
.article-author-name a {
  color:           var(--wp--preset--color--ink);
  text-decoration: none;
}
.article-author-name a:hover { color: var(--wp--preset--color--accent); }

.article-author-bio.wp-block-post-author-biography {
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   14px;
  line-height: 1.5;
  color:       var(--wp--preset--color--ink);
  margin:      0 0 12px !important;
}
.article-author-bio p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Social/website-iconen — rij van outline-circles, hover → rode fill */
.article-author-links {
  display:     flex;
  gap:         8px;
  margin:      0;
  align-items: center;
}
.article-author-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  margin-left:     -4px;
  border:          0;
  color:           var(--idh-muted);
  text-decoration: none;
  transition:      color 0.15s ease;
}
.article-author-link svg {
  width:  16px;
  height: 16px;
  display: block;
}
.article-author-link:hover {
  color: var(--wp--preset--color--accent);
}

/* ── Article-credit-strip (co-author / gastauteur / ingezonden) ──
   Verschijnt onder de byline als post-meta _idh_credit gevuld is.
   Klein mono-label met rood streepje voor; subtiel maar zichtbaar. */
.article-credit-strip {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  margin:         16px 0 0;
  padding:        6px 0;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--muted);
}
.article-credit-strip-bar {
  display:    inline-block;
  width:      24px;
  height:     2px;
  background: var(--wp--preset--color--accent);
  flex:       0 0 24px;
}
.article-credit-strip-text {
  color: var(--wp--preset--color--ink);
}

/* ── BREAKPOINT: ≤ 880px wordt mobile — single post ─────────────── */
@media (max-width: 880px) {

  .article-header.wp-block-group {
    margin-top: 32px !important;
    padding:    0 20px;
  }

  .article-title.wp-block-post-title {
    font-size:   clamp(30px, 8vw, 44px);
    line-height: 1.05;
  }

  .article-deck.wp-block-post-excerpt {
    font-size:   17px;
    line-height: 1.5;
  }

  .article-byline.wp-block-group {
    flex-wrap: wrap;
    gap:       8px !important;
  }

  .article-featured-wrap.wp-block-group {
    margin:  32px 0 40px !important;
    padding: 0;
  }
  .article-featured img,
  .article-featured-wrap .wp-block-post-featured-image img {
    max-height: 360px;
  }

  .article-body-wrap.wp-block-group {
    padding: 0 20px 16px;
  }

  .article-body,
  .article-body p,
  .article-body li                    { font-size: 17px; line-height: 1.6; }
  .article-body > p:first-of-type     { font-size: 20px; line-height: 1.5; margin-bottom: 32px; }
  .article-body h2,
  .article-body h3                    { font-size: 22px; margin-top: 40px; margin-bottom: 12px; }
  .article-body blockquote,
  .article-body .wp-block-quote {
    font-size:   24px;
    margin:      36px -20px;
    padding:     28px 24px 24px 64px;
  }
  .article-body blockquote::before,
  .article-body .wp-block-quote::before {
    font-size: 100px;
    left:      14px;
    top:       -6px;
  }

  /* Tiled gallery: kleinere row-height, breakout naar viewport-edge.
     Items met --ar van bv 0.67 worden nu 120px wide ipv 160 — past beter
     in 2 rijen op mobile. */
  .article-body .gallery-tiled {
    width:        calc(100% + 40px);
    max-width:    none;
    margin-left:  -20px;
    margin-right: -20px;
    transform:    none;
    gap:          4px;
  }
  .article-body .gallery-tiled-item {
    flex:        var(--ar, 1) 1 calc(220px * var(--ar, 1));
    height:      220px;
    min-width:   100px;
  }

  /* Legacy fallback */
  .article-body .gallery:not(.gallery-tiled),
  .article-body .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    width:        calc(100% + 40px);
    max-width:    none;
    margin-left:  -20px;
    margin-right: -20px;
    transform:    none;
    gap:          6px;
  }

  /* Lees-ook card: viewport-edge breakout, kleinere thumb */
  .article-body .lees-ook {
    margin:       28px 0;
    width:        calc(100% + 40px);
    max-width:    none;
    margin-left:  -20px;
    margin-right: -20px;
    transform:    none;
  }
  .article-body .lees-ook-link {
    padding: 12px 14px 12px 12px;
    gap:     14px;
  }
  .article-body .lees-ook-thumb {
    flex: 0 0 80px;
    width:  80px;
    height: 60px;
  }
  .article-body .lees-ook-title { font-size: 18px; }
  .article-body .lees-ook-arrow { font-size: 20px; }

  /* Foto-credit: blijft cut-out maar rechtsonder met smaller padding */
  .article-featured-credit {
    right:   16px !important;
    padding: 8px 12px 7px !important;
    font-size: 10px !important;
  }

  /* Share-bar op mobile: STICKY onderaan viewport. NRC/Instagram-stijl,
     blijft altijd in beeld voor één-tik delen. Icon-only knoppen om de
     bar overzichtelijk te houden. Facebook + Mail verbergen (te niche
     op mobile), focus op native share + WhatsApp + X + copy. */
  .article-share-wrap {
    position:  fixed;
    bottom:    0;
    left:      0;
    right:     0;
    z-index:   50;
    max-width: none !important;
    margin:    0 !important;
    padding:   0;
    background: var(--wp--preset--color--paper);
    border-top: 2px solid var(--wp--preset--color--accent);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    /* iPhone home-indicator safe area */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .article-share-bar {
    padding:         12px 14px;
    border:          0;
    gap:             8px;
    justify-content: space-around;
    flex-wrap:       nowrap;
  }

  /* Knoppen: icon-only, vierkant, touch-target ≥ 44px */
  .article-share-btn {
    flex:           1 1 0;
    min-width:      44px;
    min-height:     44px;
    padding:        10px;
    justify-content: center;
    gap:            0;
  }
  .article-share-btn span {
    display: none; /* labels verbergen — alleen iconen */
  }
  .article-share-icon {
    width:  18px;
    height: 18px;
  }

  /* Verberg minder-belangrijke knoppen op de sticky-mobile-bar */
  .article-share-btn[data-share-type="facebook"],
  .article-share-btn[data-share-type="email"] {
    display: none !important;
  }

  /* Sticky share-bar onderaan claimt ~72px. Spacer NIET op .single-main
     leggen (anders zit er witte ruimte ná het paper-3 related-blok tot
     de footer). Spacer zit in plaats daarvan op .related-posts zelf —
     paper-3 loopt door tot achter de bar. */
  .single-main.wp-block-group {
    padding-bottom: 0;
  }

  /* Auteur-card: stacken op mobile (avatar boven, info onder).
     Border-stijl blijft outline — geen rood streepje meer. */
  .article-author-card.wp-block-group {
    margin:  36px 20px 0 !important;
    padding: 28px 0 0;
    flex-direction: column !important;
    gap:     16px !important;
  }
  .article-author-card .wp-block-avatar img {
    width:  64px !important;
    height: 64px !important;
    flex:   0 0 64px;
  }
  .article-author-name.wp-block-post-author-name { font-size: 20px; }

  /* Related posts mobile: paper-3 bg blijft, padding compacter,
     grid wordt scroll-snap carousel (3 cards horizontaal swipen). */
  .related-posts.wp-block-group {
    margin-top: 56px !important;
    padding:    40px 0 56px !important;
  }
  /* Header en eventueel andere niet-carousel-content houden de 20px
     side-padding zodat ze niet tegen viewport-rand plakken. */
  .related-posts.wp-block-group > .related-header {
    padding-inline: 20px;
  }
  .related-header.wp-block-group {
    flex-direction: column;
    align-items:    flex-start !important;
    gap:            8px !important;
  }
  .related-heading { font-size: 24px; }

  /* Carousel — pure CSS scroll-snap, swipe-able. Cards 80vw breed,
     edge-bleed via padding-inline 20px op de container, snap-align
     start zodat ze netjes uitlijnen na swipe. */
  .related-query .wp-block-post-template {
    display:             flex;
    grid-template-columns: none;
    gap:                 var(--idh-space-4);
    overflow-x:          auto;
    scroll-snap-type:    x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    padding:             0 20px 8px;
    margin:              0;
    scrollbar-width:     none;
  }
  .related-query .wp-block-post-template::-webkit-scrollbar { display: none; }
  .related-query .wp-block-post-template > * {
    flex:              0 0 calc(80vw - 24px);
    max-width:         320px;
    scroll-snap-align: start;
  }
  .related-card-image img { height: 200px; }

}

/* ════════════════════════════════════════════════════════════════════════
   AUTH — /aanmelden/ + /inloggen/ (Path 2B wachtwoord-flow)
   Outline-stijl consistent met "Word 12e man"-button en auteur-card.
   ════════════════════════════════════════════════════════════════════════ */

.auth-main.wp-block-group {
  margin:  0 !important;
  padding: 0 var(--idh-space-5);
}

/* 2-koloms split: pitch links, form rechts. Op mobile stack — form
   eerst voor conversie (lezer kan direct doorklikken zonder eerst
   pitch te scrollen). */
.auth-split.wp-block-group {
  display:               grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap:                   0 !important;
  margin:                var(--idh-space-14) auto var(--idh-space-18) !important;
  max-width:             1100px;
  align-items:           stretch;
}

/* Pitch-paneel — donker vlak met rode top-border, brutalist taal die
   bij de rest van de site past. Sluit naadloos aan op de form-card
   rechts (border-right: 0 op pitch, border-left: 0 op card). */
.auth-pitch {
  background:  var(--idh-ink);
  color:       var(--idh-paper);
  padding:     var(--idh-space-10) var(--idh-space-8);
  border-top:  var(--idh-border-accent) solid var(--idh-accent);
  display:     flex;
  flex-direction: column;
  gap:         var(--idh-space-4);
}

.auth-pitch-eyebrow {
  color: var(--idh-accent) !important;
}

.auth-pitch-title {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(28px, 3.2vw, 38px);
  line-height:    1.05;
  letter-spacing: -0.005em;
  color:          var(--idh-paper);
  margin:         var(--idh-space-3) 0 0;
}

.auth-pitch-intro {
  font-family: var(--idh-font-body);
  font-size:   15px;
  line-height: 1.55;
  color:       rgba(255, 255, 255, 0.78);
  margin:      0;
}

.auth-pitch-list {
  list-style: none;
  padding:    0;
  margin:     var(--idh-space-3) 0 0;
  display:    flex;
  flex-direction: column;
  gap:        var(--idh-space-3);
}
.auth-pitch-list li {
  display: flex;
  gap:     var(--idh-space-3);
  font-family: var(--idh-font-body);
  font-size:   14px;
  line-height: 1.5;
  color:       rgba(255, 255, 255, 0.85);
}
.auth-pitch-list strong { color: var(--idh-paper); font-weight: 600; }
.auth-pitch-list a {
  color:           var(--idh-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-pitch-bullet {
  flex:           0 0 16px;
  color:          var(--idh-accent);
  font-family:    var(--idh-font-display);
  font-size:      18px;
  line-height:    1.3;
}

.auth-card.wp-block-group {
  margin:      0 !important;
  padding:     var(--idh-space-10) var(--idh-space-8);
  border:      var(--idh-border-med) solid var(--idh-ink);
  border-left: 0; /* sluit naadloos aan op pitch-paneel */
  background:  var(--idh-paper-2);
  max-width:   none;
}

.auth-eyebrow {
  display:        inline-block;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--accent);
}

.auth-title.wp-block-heading {
  font-family:    var(--idh-font-display) !important;
  font-weight:    400 !important;
  font-size:      clamp(36px, 5vw, 48px) !important;
  line-height:    1.05 !important;
  letter-spacing: -0.005em;
  color:          var(--wp--preset--color--ink) !important;
}

.auth-intro {
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   16px;
  line-height: 1.5;
  color:       var(--wp--preset--color--muted);
  margin:      0 0 28px;
}

/* Errors */
.auth-errors {
  background:   rgba(200, 16, 46, 0.08);
  border-left:  3px solid var(--wp--preset--color--accent);
  padding:      12px 14px;
  margin:       0 0 20px;
}
.auth-errors p {
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   14px;
  line-height: 1.4;
  margin:      0;
  color:       var(--wp--preset--color--ink);
}
.auth-errors p + p { margin-top: 6px; }
.auth-errors a { color: var(--wp--preset--color--accent); }

/* Form */
.auth-form {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.auth-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.auth-label {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--wp--preset--color--ink);
}

.auth-input {
  font-family:  var(--wp--preset--font-family--inter-tight);
  font-size:    16px;
  line-height:  1.4;
  color:        var(--wp--preset--color--ink);
  padding:      12px 14px;
  border:       1.5px solid var(--wp--preset--color--ink);
  background:   var(--idh-paper-2);
  border-radius: 0;
  appearance:   none;
  transition:   border-color 0.15s ease;
}
.auth-input:focus {
  outline:      none;
  border-color: var(--wp--preset--color--accent);
}

.auth-hint {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  color:       var(--wp--preset--color--muted);
  letter-spacing: 0.02em;
}

.auth-checkbox {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   14px;
  color:       var(--wp--preset--color--ink);
  cursor:      pointer;
}
.auth-checkbox input { accent-color: var(--wp--preset--color--accent); }

/* Honeypot — verbergen zonder aria-hidden (bots zien hem wel) */
.auth-honeypot {
  position: absolute;
  left:     -9999px;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

/* Buttons */
.auth-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         14px 22px;
  font-family:     var(--wp--preset--font-family--jetbrains-mono);
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  transition:      background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border-radius:   0;
}
.auth-btn--primary {
  background:    var(--wp--preset--color--accent);
  color:         var(--idh-paper-2);
  border:        1.5px solid var(--wp--preset--color--accent);
}
.auth-btn--primary:hover {
  background:    var(--idh-accent-dark);
  border-color:  var(--idh-accent-dark);
}
.auth-btn--ghost {
  background:    transparent;
  color:         var(--wp--preset--color--ink);
  border:        1.5px solid var(--wp--preset--color--ink);
}
.auth-btn--ghost:hover {
  background:    var(--wp--preset--color--ink);
  color:         var(--wp--preset--color--paper);
}

/* Aanmelden — twee keuze-knoppen (gratis lezer / 12e man) onder elkaar.
   De wrapper neutraliseert losse knop-marges; de afstand boven de groep
   komt van de form-gap (16px), niet van extra witruimte. */
.auth-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--idh-space-3);
  margin:         0;
}
.auth-actions .auth-btn {
  width:  100%;
  margin: 0;
}
.auth-actions-hint {
  margin:         var(--idh-space-2) 0 0;
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size:      var(--idh-text-mono);
  line-height:    1.5;
  letter-spacing: 0.02em;
  color:          var(--wp--preset--color--muted);
}
.auth-meer {
  margin:      0;
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   14px;
  text-align:  center;
}
.auth-meer a {
  color:           var(--wp--preset--color--accent);
  text-decoration: none;
  font-weight:     600;
}
.auth-meer a:hover { text-decoration: underline; }

.auth-legal {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  color:       var(--wp--preset--color--muted);
  margin:      4px 0 0;
  letter-spacing: 0.02em;
}
.auth-legal a {
  color:           var(--wp--preset--color--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-footer {
  margin:         24px 0 0;
  padding-top:    20px;
  border-top:     1px solid var(--wp--preset--color--line);
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.auth-switch {
  font-family:  var(--wp--preset--font-family--inter-tight);
  font-size:    14px;
  text-align:   center;
  margin:       0;
  color:        var(--wp--preset--color--muted);
}
.auth-switch a {
  color:           var(--wp--preset--color--accent);
  text-decoration: none;
  font-weight:     600;
}
.auth-switch a:hover { text-decoration: underline; }

/* 12e man upgrade-pad — prominent rood vlak met twee regels.
   Geeft de paid-route gelijke prominentie als de gratis lezer-route. */
.auth-upgrade {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             4px;
  padding:         14px 18px;
  background:      var(--wp--preset--color--accent);
  color:           var(--idh-paper-2);
  text-decoration: none;
  text-align:      center;
  transition:      background 0.15s ease;
}
.auth-upgrade:hover { background: var(--idh-accent-dark); }

/* IBM Plex Sans 18 — was Anton 20px.
   Body-bold past beter bij promo-context binnen auth-card. */
.auth-upgrade-label {
  font-family:    var(--idh-font-body);
  font-size:      18px;
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.005em;
  color:          inherit;
}

.auth-upgrade-meta {
  font-family:    var(--wp--preset--font-family--jetbrains-mono);
  font-size: var(--idh-text-mono);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.85);
}

.auth-already {
  text-align: center;
}
.auth-already p {
  font-family: var(--wp--preset--font-family--inter-tight);
  font-size:   15px;
  color:       var(--wp--preset--color--ink);
  margin:      0 0 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE — MEESTGELEZEN (brutalist 5-kaarten-rij)
   Vervangt de oude cat-grid sinds 28 mei 2026. Vijf kaarten met grote
   display-nummers 01-05 als visueel anker (rugnummers-vibe). Geen
   featured images — typografisch statement, past tussen beeld-zware
   spotlight (boven) en lezer-CTA (onder).
   ════════════════════════════════════════════════════════════════════════ */

.most-read-section {
  /* White bg ipv paper: visueel onderscheid t.o.v. paper-1 lezer-CTA
     hieronder, en cards krijgen paper-hover (omgekeerde van trust-bar
     pattern). Geen top-border — most-read sluit direct aan op spotlight
     hierboven (spotlight heeft eigen donker beeld als visuele scheiding,
     én spotlight-section padding-bottom is 0). */
  background: var(--idh-paper-2);
}

.most-read-wrap {
  max-width: 1280px;
  margin:    0 auto;
  /* Top-padding 32: minimale ademruimte boven titel zodat het blok
     direct onder spotlight aansluit zonder dat de titel tegen de rand
     plakt. Bottom 80 voor evenwicht naar lezer-CTA. */
  padding:   32px 40px 80px;
}

/* Header — titel + lopende intro-zin. Title matcht .zone-label-title
   size/weight zodat het parallel loopt aan "Actueel" / "Voetbalcultuur"
   zone-titels hierboven. Intro geeft de bezoeker context. */
.most-read-head {
  margin-bottom: 32px;
  max-width:     720px;
}

.most-read-title {
  font-family:    var(--idh-font-display);
  font-size:      36px;
  font-weight:    700;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height:    1.05;
  color:          var(--idh-ink);
  margin:         0 0 12px;
}

.most-read-intro {
  font-family:  var(--idh-font-body);
  font-size:    17px;
  font-weight:  400;
  line-height:  1.55;
  color:        var(--idh-ink-2);
  margin:       0;
  max-width:    620px;
}

/* 5-koloms grid, gelijke breedte. List-styling eraf. */
.most-read-grid {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(5, 1fr);
  gap:        0;
  border-top: 1px solid var(--wp--preset--color--border);
}

.most-read-item {
  margin:  0;
  padding: 0;
  /* Verticale hairline tussen kaarten (rechter-rand, behalve laatste).
     Brutalist accent — geen ronde kaders, scherpe lijnen. */
  border-right: 1px solid var(--wp--preset--color--border);
}
.most-read-item:last-child { border-right: 0; }

.most-read-card {
  /* Flex column zodat .most-read-date naar onderkant kan met margin-top:
     auto — alle datums zitten op gelijke baseline (bottom van card),
     met dynamische witruimte boven afhankelijk van titel-lengte. */
  display:         flex;
  flex-direction:  column;
  padding:         24px 24px 20px;
  text-decoration: none;
  color:           var(--idh-ink);
  transition:      background .15s, color .15s;
  height:          100%;
}
/* Hover invert: default white-bg → cream paper-bg op hover.
   Subtiele beweging zonder kleur-conflict met de rode accent. */
.most-read-card:hover { background: var(--idh-paper); }
.most-read-card:hover .most-read-rank { color: var(--idh-accent); }
.most-read-card:hover .most-read-card-title { color: var(--idh-accent); }

/* Grote display-nummer (rugnummer-vibe). Mono-cijfers in display-font,
   80-100px clamped. */
.most-read-rank {
  display:        block;
  font-family:    var(--idh-font-display);
  font-size:      clamp(64px, 7vw, 96px);
  font-weight:    700;
  line-height:    0.9;
  letter-spacing: -0.02em;
  color:          var(--idh-ink);
  margin-bottom:  16px;
  transition:     color .15s;
}

.most-read-body {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  /* Body groeit zodat date kan bottom-aligned via mt:auto */
  flex:           1;
}

/* wpautop wikkelt <time> en andere inline-elements ongevraagd in <p>.
   display:contents maakt die <p>-wrappers visueel transparant zodat
   de echte child (.most-read-date) flex-item wordt en margin-top:auto
   correct werkt. Geldt voor alle direct-child <p>'s binnen card/body. */
.most-read-card > p,
.most-read-body > p {
  display:     contents;
  margin:      0;
}

/* Cat-pill — mono caps in accent, geen background (verschilt van
   archive-card pill in image — die heeft wel achtergrond). Hier rustig
   inline label. */
.most-read-cat {
  display:        block;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-accent);
  line-height:    1;
}

.most-read-card-title {
  font-family:    var(--idh-font-display);
  font-size:      18px;
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.005em;
  color:          var(--idh-ink);
  margin:         0;
  /* Max 3 regels — afkappen met ellipsis bij langere titels. */
  display:               -webkit-box;
  -webkit-line-clamp:    3;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
  text-overflow:         ellipsis;
  transition:            color .15s;
}

.most-read-date {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono-xs);
  font-weight:    500;
  color:          var(--idh-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height:    1;
  /* mt: auto duwt date naar bottom van card-flex-container, zodat alle
     datums op zelfde y-positie zitten en de witruimte tussen titel en
     date varieert ipv onder de date. */
  margin-top:     auto;
  padding-top:    12px;
}

/* Mobile: horizontaal scrollbare carousel (zelfde patroon als cat-tiles
   en related-posts op mobile). Compacter dan desktop: kleinere
   rank-cijfers, minder padding, peek-of-next-item zichtbaar zodat de
   carousel onmiddellijk leesbaar is als "swipe voor meer". */
@media (max-width: 880px) {
  .most-read-wrap {
    padding: 32px 0 40px;
  }
  .most-read-head {
    margin: 0 20px 20px;
  }
  .most-read-grid {
    grid-template-columns: none;
    display:               flex;
    overflow-x:            auto;
    overflow-y:            hidden;
    scroll-snap-type:      x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Padding-left geeft de carousel start-positie; padding-right >
       item-margin = peek-of-next zichtbaar zonder dat de carousel
       overscrollt. */
    padding:               0 20px 4px;
    gap:                   0;
    border-top:            0;
    scrollbar-width:       none;
  }
  .most-read-grid::-webkit-scrollbar { display: none; }
  .most-read-item {
    /* 62% breedte = ~38% peek-of-next zichtbaar op mobile.
       Borders rondom voor "kaart"-gevoel. */
    flex:                  0 0 62%;
    scroll-snap-align:     start;
    border:                1px solid var(--wp--preset--color--border);
    margin-right:          -1px; /* overlapping hairlines */
  }
  .most-read-item:last-child { margin-right: 0; }
  .most-read-card { padding: 20px 18px; }
  .most-read-rank {
    font-size: 56px;
    margin-bottom: 14px;
  }
  .most-read-card-title { font-size: 16px; }
  .most-read-date { margin-top: 2px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE — "Word lezer" CTA-strook (tussen zones en cat-grid)
   Zwart vlak met rode rand-accent, display-titel, mono pitch, witte CTA-knop.
   ════════════════════════════════════════════════════════════════════════ */

.lezer-cta-section.wp-block-group {
  max-width:    1280px !important;
  margin:       0 auto !important;
  padding:      0 40px;
}

/* Lezer-CTA — light variant. Voorheen zwart-op-zwart met de footer
   eronder (te veel donker stapeling). Nu paper-bg met ink tekst en
   rode top-accent — herhaalt de paper-accent uit de trust-topbar als
   subtiel design-element voor "actie-blokken" door de site. */
.lezer-cta {
  position:       relative;
  /* Margin-top space-14 ipv space-12: trekt boven- en onderzijde gap
     gelijk t.o.v. most-read sectie hierboven (visueel rustiger ritme). */
  margin:         var(--idh-space-14) 0 var(--idh-space-12);
  padding:        var(--idh-space-10) var(--idh-space-12);
  background:     var(--idh-paper);
  color:          var(--idh-ink);
  border-top:     var(--idh-border-accent) solid var(--idh-accent);
  border:         var(--idh-border-thin) solid var(--idh-line);
  border-top:     var(--idh-border-accent) solid var(--idh-accent);
  display:        grid;
  grid-template-columns: 1fr auto;
  gap:            var(--idh-space-8);
  align-items:    center;
}

.lezer-cta-content {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.lezer-cta-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-sm);
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--idh-accent);
}

/* Pill-variant — sitewide uniform per design-system "eyebrows & pills":
   padding 6/12, mono 11, weight 700, letter-spacing 0.14em, margin-bottom
   12px naar titel. Zie design/typografie-system.md. */
.lezer-cta-pill {
  display:        inline-block;
  align-self:     flex-start;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-paper);
  background:     var(--idh-accent);
  padding:        6px 12px;
  line-height:    1;
  margin-bottom:  var(--idh-space-3);
}

.lezer-cta-title {
  font-family:    var(--idh-font-display);
  font-size:      clamp(28px, 3vw, 36px);
  font-weight:    400;
  line-height:    1.05;
  letter-spacing: -0.005em;
  color:          var(--idh-ink);
  margin:         0;
}

.lezer-cta-text {
  font-family: var(--idh-font-body);
  font-size:   16px;
  line-height: 1.5;
  color:       var(--idh-muted);
  margin:      0;
  max-width:   560px;
}

.lezer-cta-actions {
  display: flex;
  gap:     12px;
  flex-shrink: 0;
}

.lezer-cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         var(--idh-space-3) var(--idh-space-6);
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-base);
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  transition:      background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space:     nowrap;
  line-height:     1;
}
.lezer-cta-btn--primary {
  background:   var(--idh-accent);
  color:        var(--idh-paper-2);
  border:       var(--idh-border-med) solid var(--idh-accent);
}
.lezer-cta-btn--primary:hover {
  background:   var(--idh-accent-dark);
  border-color: var(--idh-accent-dark);
}
.lezer-cta-btn--ghost {
  background:    transparent;
  color:         var(--idh-ink);
  border:        var(--idh-border-med) solid var(--idh-ink);
}
.lezer-cta-btn--ghost:hover {
  background:    var(--idh-accent);
  color:         var(--idh-paper-2);
  border-color:  var(--idh-accent);
}

/* NOTICE-BANNER — geünificeerde info-strip-stijl staat bij TRUST-TOPBAR
   (paper-bg, hairline + accent-linkerrand, mono accent-label). */

/* ════════════════════════════════════════════════════════════════════════
   GRAVITY FORMS — re-skin volgens In de Hekken design-systeem
   ════════════════════════════════════════════════════════════════════════

   Target: Gravity Forms 2.5+ output in 'gravity-theme' mode. Default GF
   styling wordt overschreven met onze design-tokens — mono caps labels,
   paper inputs met ink border (geen radius), submit als .btn-primary,
   error-states in accent-rood.

   Selectors gebaseerd op standaard GF DOM-structuur. Geldt voor elke
   form-instantie via [gravityform id="X"] shortcode in body-content. */

.gform_wrapper {
  /* Default GF max-width/margin opzij, theme regelt containment */
  margin:  var(--idh-space-8) 0 0 !important;
  padding: 0 !important;
  font-family: var(--idh-font-body) !important;
  color: var(--idh-ink) !important;
}

.gform_wrapper form {
  margin: 0;
  padding: 0;
}

/* ── Fields list — geen ul-bullets, ruimte tussen velden ───────────── */
.gform_wrapper .gform_fields {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
  display:    grid !important;
  gap:        var(--idh-space-6) !important;
}

.gform_wrapper .gfield {
  margin:  0 !important;
  padding: 0 !important;
}

/* ── Labels — mono caps, accent-red ─────────────────────────────────── */
.gform_wrapper .gfield_label {
  display:        block !important;
  font-family:    var(--idh-font-mono) !important;
  font-size:      var(--idh-text-mono) !important;
  font-weight:    700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          var(--idh-accent) !important;
  margin:         0 0 var(--idh-space-2) !important;
  line-height:    1.2 !important;
}
.gform_wrapper .gfield_required {
  color:       var(--idh-accent) !important;
  margin-left: 4px !important;
}

/* ── Inputs / textareas / selects — paper-bg, ink-border, geen radius ─ */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
  width:        100% !important;
  padding:      var(--idh-space-3) var(--idh-space-4) !important;
  background:   var(--idh-paper-2) !important;
  border:       1.5px solid var(--idh-ink) !important;
  border-radius: 0 !important;
  font-family:  var(--idh-font-body) !important;
  font-size:    16px !important;  /* 16px voorkomt iOS-zoom op focus */
  font-weight:  400 !important;
  line-height:  1.4 !important;
  color:        var(--idh-ink) !important;
  box-shadow:   none !important;
  outline:      none !important;
  transition:   border-color 0.15s ease, background-color 0.15s ease !important;
}

.gform_wrapper .ginput_container textarea {
  min-height: 160px !important;
  resize:     vertical !important;
  font-family: var(--idh-font-body) !important;
}

/* ── Focus-state — accent-rode border ───────────────────────────────── */
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus {
  border-color: var(--idh-accent) !important;
  background:   var(--idh-paper-2) !important;
}

/* ── Placeholder — muted-token geeft al voldoende dempen (WCAG-veilig
   contrast ~4.5:1). Geen extra opacity meer (was 0.7 = randje contrast). */
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
  color: var(--idh-muted) !important;
}

/* ── Description / sublabel — kleiner, gedempt ─────────────────────── */
.gform_wrapper .gfield_description {
  font-family: var(--idh-font-body) !important;
  font-size:   var(--idh-text-sm) !important;
  color:       var(--idh-muted) !important;
  margin:      var(--idh-space-2) 0 0 !important;
  line-height: 1.4 !important;
}

/* ── Name-field — Voornaam + Achternaam naast elkaar ────────────────── */
/* GF rendert .ginput_complex met sub-inputs; wij willen 2 zichtbare velden
   (first + last) altijd in 2 kolommen op desktop. Hidden inputs (prefix,
   middle, suffix) blijven onzichtbaar via inline display:none van GF zelf. */
.gform_wrapper .ginput_complex.ginput_container_name {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   var(--idh-space-4) !important;
}
.gform_wrapper .ginput_complex.ginput_container_name > span {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.gform_wrapper .ginput_complex.ginput_container_name > span.hidden_sub_label,
.gform_wrapper .ginput_complex.ginput_container_name > span.ginput_full,
.gform_wrapper .ginput_complex.ginput_container_name > span[style*="display: none"] {
  display: none !important;
}
@media (max-width: 599px) {
  .gform_wrapper .ginput_complex.ginput_container_name {
    grid-template-columns: 1fr !important;
  }
}

/* ── Submit-button — identiek aan .btn-primary ──────────────────────── */
.gform_wrapper .gform_footer {
  margin:  var(--idh-space-8) 0 0 !important;
  padding: 0 !important;
}

.gform_wrapper .gform_footer .gform_button {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         var(--idh-space-3) var(--idh-space-6) !important;
  background:      var(--idh-accent) !important;
  color:           var(--idh-paper) !important;
  border:          0 !important;
  border-radius:   0 !important;
  font-family:     var(--idh-font-mono) !important;
  font-size:       var(--idh-text-base) !important;
  font-weight:     700 !important;
  letter-spacing:  0.06em !important;
  text-transform:  uppercase !important;
  cursor:          pointer !important;
  transition:      background-color 0.15s ease, transform 0.15s ease !important;
  box-shadow:      none !important;
}

.gform_wrapper .gform_footer .gform_button:hover {
  background: var(--idh-ink) !important;
  transform:  translateY(-1px) !important;
}

.gform_wrapper .gform_footer .gform_button:active {
  transform: translateY(0) !important;
}

/* ── Error-states ───────────────────────────────────────────────────── */
.gform_wrapper .gfield_error .gfield_label {
  color: var(--idh-accent) !important;
}

.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container textarea,
.gform_wrapper .gfield_error .ginput_container select {
  border-color: var(--idh-accent) !important;
  background:   rgba(200, 16, 46, 0.04) !important;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font-family: var(--idh-font-body) !important;
  font-size:   var(--idh-text-sm) !important;
  font-weight: 600 !important;
  color:       var(--idh-accent) !important;
  margin:      var(--idh-space-2) 0 0 !important;
  padding:     0 !important;
  background:  transparent !important;
  border:      0 !important;
}

/* ── Validation-summary bovenaan form ───────────────────────────────── */
.gform_wrapper .gform_validation_errors {
  padding:      var(--idh-space-5) var(--idh-space-6) !important;
  margin:       0 0 var(--idh-space-6) !important;
  background:   var(--idh-ink) !important;
  color:        var(--idh-paper) !important;
  border-left:  6px solid var(--idh-accent) !important;
  border-right: 0 !important;
  border-top:   0 !important;
  border-bottom: 0 !important;
}
.gform_wrapper .gform_validation_errors h2 {
  font-family:    var(--idh-font-mono) !important;
  font-size:      var(--idh-text-mono) !important;
  font-weight:    700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          var(--idh-accent) !important;
  margin:         0 0 var(--idh-space-2) !important;
  line-height:    1.2 !important;
}
.gform_wrapper .gform_validation_errors a {
  color:                 var(--idh-paper) !important;
  text-decoration:       underline !important;
  text-decoration-color: var(--idh-accent) !important;
  text-underline-offset: 3px !important;
}

/* ── Confirmation-message (na succesvolle submit) ──────────────────── */
.gform_confirmation_wrapper,
.gform_wrapper .gform_confirmation_message {
  padding:      var(--idh-space-6) var(--idh-space-7) !important;
  background:   var(--idh-paper-2) !important;
  border-left:  6px solid var(--idh-accent) !important;
  font-family:  var(--idh-font-body) !important;
  font-size:    var(--idh-text-body) !important;
  line-height:  1.55 !important;
  color:        var(--idh-ink) !important;
  margin:       var(--idh-space-8) 0 0 !important;
}

/* ── Multi-column rows (GF column-layout) ──────────────────────────── */
.gform_wrapper .gfield--width-half {
  grid-column: span 1 !important;
}
@media (min-width: 600px) {
  .gform_wrapper .gform_fields {
    grid-template-columns: 1fr 1fr !important;
  }
  .gform_wrapper .gfield--width-full {
    grid-column: 1 / -1 !important;
  }
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .gform_wrapper .gform_fields {
    grid-template-columns: 1fr !important;
  }
  .gform_wrapper .gform_footer .gform_button {
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — auth + lezer-cta
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  /* Auth-split: form eerst (conversie), pitch eronder */
  .auth-split.wp-block-group {
    grid-template-columns: 1fr;
    margin: var(--idh-space-8) auto var(--idh-space-12) !important;
  }
  .auth-pitch {
    order:      2; /* na de card */
    padding:    var(--idh-space-7) var(--idh-space-6);
    border-top: var(--idh-border-accent) solid var(--idh-accent);
  }
  .auth-pitch-title { font-size: 26px; }
  .auth-card.wp-block-group {
    margin:      0 !important;
    padding:     var(--idh-space-7) var(--idh-space-6);
    border-left: var(--idh-border-med) solid var(--idh-ink);
  }
  .auth-input { font-size: 16px; padding: 11px 12px; }

  .lezer-cta {
    grid-template-columns: 1fr;
    padding:               32px 24px;
    gap:                   20px;
    margin:                36px 0;
  }
  .lezer-cta-actions {
    flex-direction: column;
    align-items:    stretch;
  }
  .lezer-cta-btn {
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN-SYSTEM CONSISTENCY-OVERRIDES
   Universal regels die alle bestaande eyebrow-classes naar dezelfde
   typografische basis trekken. Bestaande color/positioning blijft;
   alleen font-family, size, letter-spacing en weight worden geüniformeerd.
   Zie design-system.md voor de tokens.
   ════════════════════════════════════════════════════════════════════════ */

.zone-label-eyebrow,
.article-author-eyebrow,
.auth-eyebrow,
.lezer-cta-eyebrow,
.related-eyebrow,
.cat-grid-kicker,
.article-credit-strip-text,
.article-share-label,
.article-featured-credit-label,
.lees-ook-eyebrow {
  font-family:    var(--idh-font-mono) !important;
  font-size:      var(--idh-text-sm) !important;
  font-weight:    700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height:    1 !important;
}

/* Specifiek: zone-label-eyebrow blijft 10px want hij staat dicht onder
   de zone-bar en moet kleiner zijn dan h1's eyebrow */
.zone-label-eyebrow {
  font-size: var(--idh-text-xs) !important;
}

/* Eyebrow → titel spacing: alle eyebrow-classes uniform 12px boven de
   titel die erop volgt. Werkt voor zowel direct sibling als binnen
   zone-label-stack waar gap-property al deze rol vervult. */
.article-author-eyebrow + .article-author-name,
.auth-eyebrow + .auth-title,
.lezer-cta-eyebrow + .lezer-cta-title {
  margin-top: var(--idh-space-3) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   BUTTON CONSISTENCY
   Bestaande primary-button-classes aligneren met .btn-primary tokens
   (padding, font-size, letter-spacing). Color en hover-state blijven.
   ════════════════════════════════════════════════════════════════════════ */

.lezer-cta-btn,
.auth-btn,
.article-share-btn {
  padding:        var(--idh-space-3) var(--idh-space-6);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-base);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius:  var(--idh-radius);
  line-height:    1;
}

/* Share-bar buttons in body-flow zijn de "small" variant */
.article-share-btn {
  padding:   var(--idh-space-2) var(--idh-space-3);
  font-size: var(--idh-text-sm);
  gap:       var(--idh-space-1);
}

/* ════════════════════════════════════════════════════════════════════════
   TRUST-STRIP — feiten-strook tussen TIFO-hero en zones
   Subtiele mono-strip met "Sinds 2010 · 1939 verhalen · Stem...". Geen
   verzonnen lezer-aantallen — alleen feiten die we kunnen onderbouwen.
   Boven en onder een dunne grijze lijn voor visuele separatie.
   ════════════════════════════════════════════════════════════════════════ */
.trust-strip.wp-block-group {
  margin:  0 !important;
  padding: 0;
  background: var(--idh-paper);
  border-top:    var(--idh-border-thin) solid var(--idh-line);
  border-bottom: var(--idh-border-thin) solid var(--idh-line);
}

.trust-strip-inner {
  max-width: var(--idh-content-max);
  margin:    0 auto;
  padding:   var(--idh-space-3) var(--idh-space-10);
  display:   flex;
  flex-wrap: wrap;
  align-items:     center;
  justify-content: center;
  gap:       var(--idh-space-3);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-sm);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-muted);
}

.trust-strip-item strong {
  color:       var(--idh-ink);
  font-weight: 700;
}

.trust-strip-sep {
  color:   var(--idh-accent);
  opacity: 0.8;
}

@media (max-width: 880px) {
  .trust-strip-inner {
    padding:        var(--idh-space-3) var(--idh-space-5);
    gap:            var(--idh-space-2);
    font-size:      10px;
    letter-spacing: 0.1em;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SPOTLIGHT — "Verhaal van de week" full-bleed
   Eén grote featured image als achtergrond, dark gradient-overlay
   onderaan voor leesbaarheid, alle content (eyebrow + cat + display-titel
   + excerpt + CTA) bottom-positioned binnen 1280 outer. Filmposter-stijl.
   ════════════════════════════════════════════════════════════════════════ */
.spotlight-section.wp-block-group {
  margin:  0 !important;
  /* Bottom-padding 0 zodat het most-read blok hieronder direct aansluit
     op het spotlight-beeld (was 40px witruimte tussen ze in). */
  padding: var(--idh-space-10) 0 0;
}

.spotlight {
  position:            relative;
  display:             block;
  width:               100%;
  height:              clamp(440px, 60vh, 640px);
  background-size:     cover;
  background-position: center;
  background-color:    var(--idh-ink);
  overflow:            hidden;
  /* Geen rode top-border meer — voegde te weinig toe en zat te dicht
     op de scheidingslijn boven. */
}

.spotlight-link {
  display:         block;
  position:        absolute;
  inset:           0;
  text-decoration: none;
  color:           inherit;
}

/* Lichtere gradient overlay onderaan voor leesbaarheid zonder de
   foto te begraven. Foto blijft het primaire visuele element. */
.spotlight-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.42) 35%,
    rgba(0, 0, 0, 0.10) 65%,
    transparent 85%
  );
  transition: opacity 0.3s ease;
}
.spotlight-link:hover .spotlight-overlay {
  opacity: 0.9;
}

/* Content overlay — bottom-left binnen 1280 outer-grid. Spacing
   tussen pill, title, excerpt en CTA via gap. Plex ascender-witruimte
   op title wordt met negative margin opgevangen zodat optische
   afstand pill→title gelijk voelt aan title→excerpt en excerpt→CTA. */
.spotlight-content {
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         0;
  padding:        0 var(--idh-space-10) var(--idh-space-10);
  max-width:      var(--idh-outer-max);
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            var(--idh-space-4);  /* 16px — iets ruimer dan default 12 */
  color:          var(--idh-paper);
}

/* "Verhaal van de week" pill — vervangt categorie + eyebrow. Eén
   visueel anchor element ipv twee concurrerende. Rode pill stijl
   consistent met article-kicker en cultuur-badge. */
.spotlight-pill {
  display:        inline-block;
  align-self:     flex-start;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-paper);
  background:     var(--idh-accent);
  padding:        6px 12px;
  line-height:    1;
  margin:         0;
}

.spotlight-title {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(36px, 5vw, 64px);
  line-height:    1.02;
  letter-spacing: -0.005em;
  color:          var(--idh-paper);
  /* Plex Bold heeft fors ascender-witruimte boven cap-height (~25-30%
     van em). -0.6em compenseert dat zodat pill→title optisch 12-16px
     voelt, gelijk aan title→excerpt. -0.1em onderaan compenseert
     descender-witruimte. */
  margin:         -0.6em 0 -0.1em;
  max-width:      900px;
  transition:     color 0.15s ease;
  text-shadow:    0 2px 12px rgba(0, 0, 0, 0.4);
}
.spotlight-link:hover .spotlight-title { color: var(--idh-accent); }

.spotlight-excerpt {
  font-family: var(--idh-font-body);
  font-size:   17px;
  line-height: 1.55;
  color:       rgba(255, 255, 255, 0.85);
  margin:      0;
  max-width:   720px;
}

/* CTA op afbeelding — default rood vlak met witte tekst, hover wordt
   outline-stijl (transparante bg + witte border). Patroon herbruikt op
   alle CTAs over een fotografische achtergrond (spotlight, TIFO, etc.). */
.spotlight-cta {
  display:        inline-block;
  align-self:     flex-start;
  margin:         0;  /* gap op .spotlight-content geeft spacing */
  padding:        10px 16px;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-paper-2);
  background:     var(--idh-accent);
  border:         2.5px solid var(--idh-accent);
  white-space:    nowrap;
  transition:     background 0.2s, border-color 0.2s;
}
/* Hover → outline-stijl (transparant met witte border). Trigger op de
   .spotlight-parent want .spotlight-link is absolute inset:0 en bedekt
   de CTA — daardoor bereiken hover-events de CTA nooit direct. Parent
   :hover bubbelt wél door beide elementen heen. */
.spotlight:hover .spotlight-cta,
.spotlight-link:hover .spotlight-cta,
.spotlight-cta:hover,
.spotlight-cta.is-hovered {
  background:    transparent !important;
  border-color:  var(--idh-paper-2) !important;
  color:         var(--idh-paper-2) !important;
}

@media (max-width: 880px) {
  .spotlight {
    height: clamp(380px, 70vh, 520px);
  }
  .spotlight-content {
    padding: var(--idh-space-6);
    gap:     var(--idh-space-2);
  }
  .spotlight-title    { font-size: clamp(28px, 8vw, 40px); }
  .spotlight-excerpt  { font-size: 15px; max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   TRUST-TOPBAR — sitewide topbar bovenaan, boven masthead
   Smalle ink-strook met witte tekst. Past visueel in de sandwich
   topbar (ink) → masthead (paper) → nav-strip (ink). Op mobile: hide,
   want daar voelt het meer als ruis dan structuur — header heeft al
   genoeg verticale ruimte op klein scherm.
   ════════════════════════════════════════════════════════════════════════ */
.trust-topbar {
  background: var(--idh-paper);
  color:      var(--idh-ink);
  border-bottom: var(--idh-border-thin) solid var(--idh-line);
}

.trust-topbar-inner {
  max-width: var(--idh-outer-max);
  margin:    0 auto;
  padding:   8px var(--idh-space-10);
  display:   flex;
  flex-wrap: wrap;
  align-items:     center;
  justify-content: center;
  gap:       var(--idh-space-3);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-xs);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-muted);
}

.trust-topbar-item strong {
  color:       var(--idh-ink);
  font-weight: 700;
}

.trust-topbar-sep {
  color:   var(--idh-accent);
  opacity: 0.85;
}

@media (max-width: 880px) {
  .trust-topbar { display: none; }
}

/* ── NOTICE-BANNER (no-gambling e.d.) ─────────────────────────────────
   In lijn met de andere info-strips (trust-topbar, header-banner) en
   .auth-errors: paper-bg, hairline + accent-linkerrand, mono accent-label,
   body-tekst. Eén herkenbare notice-stijl sitewide. */
.notice-banner {
  margin:      0 0 var(--idh-space-8);
  padding:     var(--idh-space-5) var(--idh-space-6);
  background:  var(--idh-paper);
  border:      var(--idh-border-thin) solid var(--idh-line);
  border-left: 3px solid var(--idh-accent);
}
.notice-banner-title {
  margin:         0 0 var(--idh-space-2);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-accent);
}
.notice-banner-body {
  margin:      0;
  font-family: var(--idh-font-body);
  font-size:   14px;
  line-height: 1.5;
  color:       var(--idh-ink);
}
.notice-banner-body strong {
  color:       var(--idh-ink);
  font-weight: 700;
}
.notice-banner-body a {
  color:           var(--idh-accent);
  text-decoration: underline;
}

/* Sidebar-promo (12e man) in dezelfde notice-stijl: van rood blok naar
   paper + hairline + accent-linkerrand. Alleen het kleurenschema draait;
   layout/typografie blijft. Knop van paper-op-rood naar rood-op-paper. */
.page-sidebar-section.page-supporter-promo {
  background:  var(--idh-paper) !important;
  border:      var(--idh-border-thin) solid var(--idh-line) !important;
  border-left: 3px solid var(--idh-accent) !important;
  padding:     var(--idh-space-5) var(--idh-space-6);
}
.page-supporter-promo .page-supporter-eyebrow { color: var(--idh-accent) !important; }
.page-supporter-promo .page-supporter-title   { color: var(--idh-ink) !important; }
.page-supporter-promo .page-supporter-cta {
  background: var(--idh-accent) !important;
  color:      var(--idh-paper-2) !important;
  border:     1.5px solid var(--idh-accent) !important;
}
.page-supporter-promo .page-supporter-cta:hover {
  background:   var(--idh-accent-dark) !important;
  border-color: var(--idh-accent-dark) !important;
  color:        var(--idh-paper-2) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   BASIS INFO-PAGE TEMPLATE
   Hergebruikt single-post body-typografie en spacing-tokens. Geen
   hero, geen kicker, geen related — alleen display page-title + body.
   ════════════════════════════════════════════════════════════════════════ */

.page-main.wp-block-group {
  background: var(--idh-paper-2);
  margin:     0 !important;
  padding:    0;
}

/* Reset WP's default block-gap op direct children — anders krijg je
   32px margin-top op breadcrumbs en lead-wrap (zoals .archive-main al doet).
   Alleen verticaal, anders breekt margin-left/right auto op gecenterde
   wrappers (.page-breadcrumbs, .page-lead-wrap, .u-content-wrap). */
.page-main > * { margin-block: 0 !important; }

/* .page-hero / .archive-hero CSS verwijderd 28 mei 2026 — vervangen
   door [idh_hero] shortcode (.idh-hero) als sitewide bron van waarheid.
   Zie wiki commit ~2afa352 voor migratie. */

/* Layout-wrapper: 2-koloms grid op desktop (body + utility-sidebar),
   single column op <1100px viewport (sidebar verschuift onder body). */
.page-layout.wp-block-group {
  max-width: 1100px;
  /* Bottom space-8 ipv space-18 — uniformeert footer-gap met andere
     templates (alle pages ~32px tot footer ipv 72 voor info-pages). */
  margin:    var(--idh-space-14) auto var(--idh-space-8) !important;
  padding:   0 var(--idh-space-10);
  display:   grid;
  grid-template-columns: minmax(0, 780px) 260px;
  gap:       var(--idh-space-14);
  align-items: start;
}

.page-body-wrap.wp-block-group {
  min-width: 0;
  margin:    0 !important;
  padding:   0;
}

.page-body {
  font-family:    var(--idh-font-body);
  font-size:      var(--idh-text-body);
  line-height:    1.65;
  color:          var(--idh-ink);
  letter-spacing: -0.003em;
}

/* WP-core / theme.json forceren we expliciet zoals in article-body */
.page-body p,
.page-body li {
  font-size:   var(--idh-text-body);
  line-height: 1.65;
}
.page-body p { margin: 0 0 22px; }

.page-body strong { font-weight: 700; }
.page-body em     { font-style: italic; }

.page-body a {
  color:                 var(--idh-accent);
  text-decoration:       underline;
  text-decoration-color: rgba(200, 16, 46, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:            text-decoration-color 0.15s ease;
}
.page-body a:hover {
  text-decoration-color: var(--idh-accent);
  text-decoration-thickness: 2px;
}

.page-body h2,
.page-body h3 {
  font-family:    var(--idh-font-body);
  font-weight:    700;
  font-size:      var(--idh-text-h3);
  line-height:    1.25;
  color:          var(--idh-ink);
  margin:         var(--idh-space-14) 0 var(--idh-space-3);
  padding:        0;
  border:         0;
  letter-spacing: -0.005em;
}

/* ── Separator boven h2 op informatiepagina's ─────────────────────────
   Elke h2 in page-body krijgt automatisch een hairline + witruimte,
   identiek aan .s12m-section-body. Editors hoeven geen wrappers toe te
   voegen — een gewone heading volstaat.
   Uitzondering: h2's binnen s12m-componenten of lezer-cta die hun
   eigen scheidslijn al via de parent krijgen. */
.page-body h2 {
  padding-top: var(--idh-space-10);
  border-top:  var(--idh-border-thin) solid var(--idh-line);
}
.page-body .s12m-section-body h2,
.page-body .lezer-cta h2 {
  padding-top: 0;
  border-top:  0;
}
.page-body h4 {
  font-family:    var(--idh-font-body);
  font-weight:    700;
  font-size:      18px;
  line-height:    1.3;
  margin:         var(--idh-space-8) 0 var(--idh-space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-body ul,
.page-body ol {
  margin:       0 0 var(--idh-space-6);
  padding-left: var(--idh-space-6);
}
.page-body li { margin-bottom: var(--idh-space-2); }

.page-body img,
.page-body figure {
  max-width: 100%;
  height:    auto;
}
.page-body figure { margin: var(--idh-space-8) 0; }

/* ── Breadcrumbs strip (onder hero, boven content-grid) ────────────── */
/* .page-breadcrumbs erft .u-content-wrap (zie utility-section bovenaan).
   Hier alleen padding-top + typografie. */
.page-breadcrumbs {
  padding-top:    var(--idh-space-7);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-breadcrumbs-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-wrap:  wrap;
  align-items: center;
  gap:        var(--idh-space-2);
}

.page-breadcrumbs-item {
  display:     flex;
  align-items: center;
  gap:         var(--idh-space-2);
  color:       var(--idh-muted);
}

/* Separator " › " tussen items, niet voor het eerste */
.page-breadcrumbs-item + .page-breadcrumbs-item::before {
  content: '›';
  color:   var(--idh-muted);
  font-weight: 400;
}

.page-breadcrumbs-link {
  color:           var(--idh-muted);
  text-decoration: none;
  transition:      color 0.15s ease;
}

.page-breadcrumbs-link:hover {
  color: var(--idh-accent);
}

.page-breadcrumbs-current {
  color:       var(--idh-accent);
  font-weight: 700;
}

@media (max-width: 880px) {
  .page-breadcrumbs {
    padding: var(--idh-space-4) var(--idh-space-5) 0;
    font-size: var(--idh-text-xs);
  }
}

/* ── Utility-sidebar ───────────────────────────────────────────────── */
.page-sidebar {
  position:     sticky;
  top:          var(--idh-space-10);
  align-self:   start;
  display:      flex;
  flex-direction: column;
  gap:          var(--idh-space-8);
  font-family:  var(--idh-font-body);
  border-left:  var(--idh-border-thin) solid var(--idh-line);
  padding-left: var(--idh-space-8);
}

.page-sidebar-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--idh-space-3);  /* 12px: label hoort bij lijst, niet bij vorige sectie */
}

/* Sidebar-label = mono 11px (zelfde als alle eyebrows sitewide). */
.page-sidebar-label {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-muted);
  padding-bottom: var(--idh-space-3);
  border-bottom:  var(--idh-border-thin) solid var(--idh-line);
}

/* ── Module 1: praktisch-nav ───────────────────────────────────────── */
.page-praktisch-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        0;  /* geen extra ruimte, padding op de link zelf doet het werk */
}

.page-praktisch-list li { margin: 0; }

/* Sidebar nav-links: kleiner en lichter dan body-tekst — utility, niet content. */
.page-praktisch-link {
  display:         block;
  padding:         6px 0;
  font-family:     var(--idh-font-body);
  font-size:       14px;
  font-weight:     500;
  line-height:     1.4;
  color:           var(--idh-ink);
  text-decoration: none;
  letter-spacing:  0;
  transition:      color 0.15s ease;
}

.page-praktisch-link:hover {
  color: var(--idh-accent);
}

.page-praktisch-link.is-active {
  color:       var(--idh-accent);
  font-weight: 600;
}

/* ── Module 2: recent ──────────────────────────────────────────────── */
.page-recent-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--idh-space-4);  /* 16px: compacter dan 20px */
}

.page-recent-item { margin: 0; }

/* Cat-eyebrow = mono 11px (zelfde size als alle mono sitewide). */
.page-recent-cat {
  display:        block;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-accent);
  margin-bottom:  4px;
}

/* Recent-link: 15px/500 — lichter dan card-grid, past in smalle sidebar. */
.page-recent-link {
  display:         block;
  font-family:     var(--idh-font-body);
  font-size:       15px;
  font-weight:     500;
  line-height:     1.35;
  color:           var(--idh-ink);
  text-decoration: none;
  letter-spacing:  -0.005em;
  transition:      color 0.15s ease;
}

.page-recent-link:hover {
  color: var(--idh-accent);
}

/* ── Module 3: 12e man promoblok ───────────────────────────────────── */
.page-supporter-promo {
  gap:            var(--idh-space-3) !important;
  background:     var(--idh-accent);
  color:          var(--idh-paper);
  padding:        var(--idh-space-6) var(--idh-space-5);
  border:         var(--idh-border-thick) solid var(--idh-ink);
  border-radius:  var(--idh-radius);
}

/* Eyebrow op rood — paper-tint, mono 11px. */
.page-supporter-eyebrow {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.82);
}

/* Promo-titel in IBM Plex Sans body-bold (20px).
   < 36px is in design-system uitgesloten — was 26px voorheen. */
.page-supporter-title {
  font-family:    var(--idh-font-body);
  font-weight:    700;
  font-size:      20px;
  line-height:    1.2;
  letter-spacing: -0.005em;
  color:          var(--idh-paper);
  margin:         0;
}

.page-supporter-cta {
  display:         inline-block;
  margin-top:      var(--idh-space-2);
  padding:         var(--idh-space-3) var(--idh-space-5);
  background:      var(--idh-paper);
  color:           var(--idh-ink);
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          var(--idh-border-med) solid var(--idh-paper);
  text-align:      center;
  transition:      background 0.15s ease, color 0.15s ease;
}

.page-supporter-cta:hover {
  background:   var(--idh-ink);
  color:        var(--idh-paper);
  border-color: var(--idh-ink);
}

/* ── Sidebar onder body op <1100px ─────────────────────────────────── */
@media (max-width: 1099px) {
  .page-layout.wp-block-group {
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
  }
  .page-sidebar {
    position:     static;
    margin-top:   var(--idh-space-10);
    padding:      var(--idh-space-8) 0 0;
    border-left:  0;
    border-top:   var(--idh-border-thin) solid var(--idh-line);
  }
}

/* Mobile */
@media (max-width: 880px) {
  .page-layout.wp-block-group {
    /* Mobile bottom-margin ook space-8 (32) — matched aan andere
       mobile templates voor consistente footer-gap sitewide. */
    margin:  var(--idh-space-8) auto var(--idh-space-8) !important;
    padding: 0 var(--idh-space-5);
  }
  .page-body,
  .page-body p,
  .page-body li { font-size: 17px; line-height: 1.6; }
  .page-body h2,
  .page-body h3 { font-size: 22px; margin-top: var(--idh-space-10); }
}

/* ════════════════════════════════════════════════════════════════════════
   /12e-man/ PITCH-PAGINA (page-12e-man.html)
   Hero → perks → waarom → redactie → pricing (rood vlak) → FAQ.
   Eigen prefix s12m-* om botsing met andere componenten te voorkomen.
   ════════════════════════════════════════════════════════════════════════ */

.s12m-main.wp-block-group {
  margin:  0 !important;
  padding: 0;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.s12m-hero {
  background:    var(--idh-paper);
  border-bottom: var(--idh-border-thin) solid var(--idh-line);
  padding:       var(--idh-space-18) 0 var(--idh-space-14);
}

.s12m-hero-inner {
  max-width: 880px;
  margin:    0 auto;
  padding:   0 var(--idh-space-10);
  text-align: left;
}

.s12m-pill {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--idh-space-2);
  padding:          6px 12px;
  background:       var(--idh-accent);
  color:            var(--idh-paper);
  font-family:      var(--idh-font-mono);
  font-size:        var(--idh-text-mono);
  font-weight:      700;
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  border-radius:    var(--idh-radius);
  margin-bottom:    var(--idh-space-3);
}

.s12m-pill-sep {
  opacity: 0.6;
  font-weight: 400;
}

.s12m-hero-title {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(44px, 6.4vw, 76px);
  line-height:    1.02;
  letter-spacing: -0.01em;
  color:          var(--idh-ink);
  text-transform: none;
  margin:         var(--idh-space-5) 0 var(--idh-space-6);
}

.s12m-hero-lead {
  font-family:    var(--idh-font-body);
  font-size:      var(--idh-text-lead);
  line-height:    1.55;
  color:          var(--idh-ink);
  max-width:      680px;
  margin:         0 0 var(--idh-space-8);
}

.s12m-hero-cta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--idh-space-3);
  align-items: center;
  margin:      var(--idh-space-8) 0 var(--idh-space-14);
}

/* ── Knoppen in page-body: voorkom dat .page-body a de knopkleuren
   en underline overschrijft. Zowel default als hover expliciet —
   anders wint de hogere specificiteit van .page-body a ook op :hover. */
.page-body a.btn,
.page-body a.lezer-cta-btn {
  text-decoration: none;
}
.page-body a.btn-primary,
.page-body a.lezer-cta-btn--primary {
  color: var(--idh-paper-2);
}
.page-body a.btn-primary:hover,
.page-body a.lezer-cta-btn--primary:hover {
  color: var(--idh-paper-2);
  text-decoration: none;
}
.page-body a.btn-ghost,
.page-body a.lezer-cta-btn--ghost {
  color: var(--idh-ink);
}
.page-body a.btn-ghost:hover,
.page-body a.lezer-cta-btn--ghost:hover {
  color: var(--idh-paper-2);
  text-decoration: none;
}

/* ── lezer-cta binnen page-body (780px kolom): vertical stack +
   paper-3 achtergrond voor contrast + compactere whitespace. */
.page-body .lezer-cta {
  grid-template-columns: 1fr;
  background:            var(--idh-paper-3);
  padding:               var(--idh-space-7) var(--idh-space-8);
  gap:                   var(--idh-space-5);
}
.page-body .lezer-cta-content {
  gap: 6px;
}
.page-body .lezer-cta-pill {
  margin-bottom: 4px;
}
/* .page-body h2 heeft margin-top: space-14 — die resetten voor de lezer-cta titel.
   Ook font-family en weight terugzetten naar lezer-cta design-waarden. */
.page-body .lezer-cta-title {
  margin:      0;
  font-family: var(--idh-font-display);
  font-weight: 400;
  font-size:   clamp(28px, 3vw, 36px);
}
.page-body .lezer-cta-actions {
  flex-direction: row;
  flex-wrap:      wrap;
  align-items:    flex-start;
}

/* ── Lead-paragraaf onder de hero — iets groter dan body. */
.page-body .s12m-lead {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-lead);
  line-height: 1.55;
  color:       var(--idh-ink);
  margin:      0;
  max-width:   720px;
}

/* ── Body-section: eyebrow + body-titel + content (binnen 780). */
.page-body .s12m-section-body {
  margin-top:    var(--idh-space-14);
  padding-top:   var(--idh-space-10);
  border-top:    var(--idh-border-thin) solid var(--idh-line);
}

.page-body .s12m-section-body .eyebrow {
  display:        block;
  margin-bottom:  var(--idh-space-3);
}

.page-body .s12m-body-title {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(28px, 3vw, 36px);
  line-height:    1.05;
  letter-spacing: -0.025em;
  color:          var(--idh-ink);
  margin:         0 0 var(--idh-space-6);
}

/* ── Perks-stack: 3 rijen ipv 3 cards naast elkaar. */
.s12m-perks-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--idh-space-7);
}

.s12m-perk-row {
  display:    flex;
  gap:        var(--idh-space-5);
  align-items: flex-start;
}

.s12m-perk-row .s12m-perk-num {
  flex-shrink:    0;
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      48px;
  line-height:    1;
  color:          var(--idh-accent);
  letter-spacing: -0.025em;
  min-width:      60px;
}

.s12m-perk-row .s12m-perk-title {
  font-family:    var(--idh-font-body);
  font-weight:    700;
  font-size:      20px;
  line-height:    1.25;
  color:          var(--idh-ink);
  margin:         0 0 var(--idh-space-2);
  letter-spacing: -0.005em;
}

.s12m-perk-row .s12m-perk-body {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-card);
  line-height: 1.55;
  color:       var(--idh-ink);
  margin:      0;
}

/* ── Pricing binnen body (rood vlak, max 780). */
.s12m-pricing-body {
  margin:         var(--idh-space-14) 0 0;
  padding:        var(--idh-space-10) var(--idh-space-8);
  background:     var(--idh-accent);
  color:          var(--idh-paper);
  text-align:     center;
  scroll-margin-top: var(--idh-space-10);
}

.s12m-pricing-body .eyebrow {
  display:       inline-block;
  margin-bottom: var(--idh-space-3);
}

.s12m-pricing-body-title {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(28px, 3vw, 36px);
  line-height:    1.05;
  letter-spacing: -0.025em;
  color:          var(--idh-paper);
  margin:         0 0 var(--idh-space-7);
}

.s12m-pricing-body .s12m-price {
  display:        inline-flex;
  align-items:    baseline;
  gap:            var(--idh-space-2);
  margin:         0 0 var(--idh-space-6);
}

.s12m-pricing-body .s12m-price-amount {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(64px, 8vw, 96px);
  line-height:    0.95;
  letter-spacing: -0.03em;
  color:          var(--idh-paper);
}

.s12m-pricing-body .s12m-price-period {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-card);
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.85);
}

.s12m-pricing-body .s12m-pricing-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--idh-space-2);
  padding:         var(--idh-space-3) var(--idh-space-8);
  background:      var(--idh-paper);
  color:           var(--idh-ink);
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          var(--idh-border-med) solid var(--idh-paper);
  border-radius:   var(--idh-radius);
  transition:      background 0.15s ease, color 0.15s ease;
}

.s12m-pricing-body .s12m-pricing-cta:hover {
  background:   var(--idh-ink);
  color:        var(--idh-paper);
  border-color: var(--idh-ink);
}

.s12m-pricing-body .s12m-pricing-meta {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-card);
  line-height: 1.55;
  color:       rgba(255, 255, 255, 0.85);
  margin:      var(--idh-space-6) 0 0;
  max-width:   500px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile inline-12e-man tweaks */
@media (max-width: 880px) {
  .s12m-perk-row {
    gap: var(--idh-space-3);
  }
  .s12m-perk-row .s12m-perk-num {
    font-size: 36px;
    min-width: 48px;
  }
  .s12m-pricing-body {
    padding: var(--idh-space-8) var(--idh-space-5);
  }
}

/* ── Generic section ───────────────────────────────────────────────── */
.s12m-section {
  padding: var(--idh-space-18) 0;
}

.s12m-section + .s12m-section {
  border-top: var(--idh-border-thin) solid var(--idh-line);
}

.s12m-section-head {
  max-width: 880px;
  margin:    0 auto var(--idh-space-10);
  padding:   0 var(--idh-space-10);
}

.s12m-section-title {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(32px, 4.4vw, 52px);
  line-height:    1.05;
  letter-spacing: -0.005em;
  color:          var(--idh-ink);
  text-transform: none;
  margin:         var(--idh-space-3) 0 0;
}

/* ── Perks ─────────────────────────────────────────────────────────── */
.s12m-perks-grid {
  max-width:     1200px;
  margin:        0 auto;
  padding:       0 var(--idh-space-10);
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           var(--idh-space-6);
}

.s12m-perk {
  background: var(--idh-paper-2);
  border:     var(--idh-border-med) solid var(--idh-ink);
  padding:    var(--idh-space-8) var(--idh-space-7);
  display:    flex;
  flex-direction: column;
  gap:        var(--idh-space-3);
}

.s12m-perk-num {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      56px;
  line-height:    1;
  color:          var(--idh-accent);
  letter-spacing: -0.02em;
}

.s12m-perk-title {
  font-family:    var(--idh-font-body);
  font-weight:    700;
  font-size:      22px;
  line-height:    1.2;
  color:          var(--idh-ink);
  margin:         var(--idh-space-2) 0 0;
  letter-spacing: -0.005em;
}

.s12m-perk-body {
  font-family: var(--idh-font-body);
  font-size:   17px;
  line-height: 1.55;
  color:       var(--idh-ink);
  margin:      0;
}

/* ── Prose (waarom / redactie) ─────────────────────────────────────── */
.s12m-prose {
  max-width: 780px;
  margin:    0 auto;
  padding:   0 var(--idh-space-10);
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-body);
  line-height: 1.65;
  color:       var(--idh-ink);
  letter-spacing: -0.003em;
}

.s12m-prose p { margin: 0 0 22px; }
.s12m-prose p:last-child { margin-bottom: 0; }

/* ── .idh-page-link — sitewide utility voor "ga naar pagina" tekstlinks.
   Patroon: border-top als scheiding, muted mono uppercase, hover accent.
   Gebruik op <a> direct of als wrapper-p > a.
   Zelfde visueel als .zone-bottom-link (homepage categorie-footer). */
.idh-page-link,
.s12m-inline-link a {
  display:         block;
  padding-top:     var(--idh-space-5);
  border-top:      var(--idh-border-thin) solid var(--idh-line);
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--idh-muted);
  text-decoration: none;
  transition:      color 0.15s ease;
}
.idh-page-link:hover,
.s12m-inline-link a:hover {
  color: var(--idh-accent);
  text-decoration: none;
}

/* page-body override: voorkom dat .page-body a de link-stijl overschrijft */
.page-body a.idh-page-link,
.page-body .s12m-inline-link a {
  color:           var(--idh-muted);
  text-decoration: none;
}
.page-body a.idh-page-link:hover,
.page-body .s12m-inline-link a:hover {
  color:           var(--idh-accent);
  text-decoration: none;
}

/* Wrapper-paragraaf: ruimte boven, geen extra eigen styling */
.s12m-inline-link {
  margin-top: var(--idh-space-8) !important;
}

/* Waarom heeft een subtiele paper-bg om af te wisselen */
.s12m-waarom {
  background: var(--idh-paper);
}

/* ── Pricing (rood vlak) ───────────────────────────────────────────── */
.s12m-pricing {
  background:    var(--idh-accent);
  color:         var(--idh-paper);
  padding:       var(--idh-space-18) 0;
  scroll-margin-top: var(--idh-space-10);
}

.s12m-pricing-inner {
  max-width: 720px;
  margin:    0 auto;
  padding:   0 var(--idh-space-10);
  text-align: center;
}

.eyebrow--on-accent {
  color: rgba(255, 255, 255, 0.85);
}

.s12m-pricing-title {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(32px, 4.4vw, 52px);
  line-height:    1.05;
  letter-spacing: -0.005em;
  color:          var(--idh-paper);
  text-transform: none;
  margin:         var(--idh-space-3) 0 var(--idh-space-10);
}

.s12m-price {
  display:        inline-flex;
  align-items:    baseline;
  gap:            var(--idh-space-2);
  margin:         0 0 var(--idh-space-8);
}

.s12m-price-amount {
  font-family:    var(--idh-font-display);
  font-weight:    400;
  font-size:      clamp(72px, 11vw, 128px);
  line-height:    0.95;
  letter-spacing: -0.02em;
  color:          var(--idh-paper);
}

.s12m-price-period {
  font-family: var(--idh-font-mono);
  font-size:   var(--idh-text-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:       rgba(255, 255, 255, 0.85);
}

.s12m-pricing-cta {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--idh-space-2);
  padding:          var(--idh-space-4) var(--idh-space-10);
  background:       var(--idh-paper);
  color:            var(--idh-ink);
  font-family:      var(--idh-font-mono);
  font-size:        var(--idh-text-base);
  font-weight:      700;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  text-decoration:  none;
  border:           var(--idh-border-med) solid var(--idh-paper);
  border-radius:    var(--idh-radius);
  transition:       background 0.15s ease, color 0.15s ease;
}

.s12m-pricing-cta:hover {
  background: var(--idh-ink);
  color:      var(--idh-paper);
  border-color: var(--idh-ink);
}

.s12m-pricing-meta {
  font-family: var(--idh-font-body);
  font-size:   15px;
  line-height: 1.55;
  color:       rgba(255, 255, 255, 0.8);
  margin:      var(--idh-space-8) 0 0;
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.s12m-faq-list {
  max-width: 880px;
  margin:    0 auto;
  padding:   0 var(--idh-space-10);
}

.s12m-faq-item {
  border-top: var(--idh-border-thin) solid var(--idh-line);
  padding:    0;
}

.s12m-faq-item:last-child {
  border-bottom: var(--idh-border-thin) solid var(--idh-line);
}

.s12m-faq-q {
  list-style:    none;
  cursor:        pointer;
  display:       flex;
  align-items:   flex-start;
  justify-content: space-between;
  gap:           var(--idh-space-6);
  padding:       var(--idh-space-6) 0;
  font-family:   var(--idh-font-body);
  font-weight:   600;
  font-size:     19px;
  line-height:   1.35;
  color:         var(--idh-ink);
  letter-spacing: -0.005em;
  position:      relative;
  transition:    color 0.15s ease;
}

.s12m-faq-q::-webkit-details-marker { display: none; }
.s12m-faq-q::marker                 { display: none; content: ''; }

.s12m-faq-q::after {
  content:    '+';
  flex-shrink: 0;
  font-family: var(--idh-font-display);
  font-weight: 400;
  font-size:   28px;
  line-height: 1;
  color:       var(--idh-accent);
  transition:  transform 0.2s ease;
  transform-origin: center;
  margin-top:  -2px;
}

.s12m-faq-item[open] .s12m-faq-q::after {
  content:   '−';
}

.s12m-faq-q:hover { color: var(--idh-accent); }

.s12m-faq-a {
  padding:     0 0 var(--idh-space-6);
  font-family: var(--idh-font-body);
  font-size:   17px;
  line-height: 1.6;
  color:       var(--idh-ink);
  max-width:   720px;
}

.s12m-faq-a p { margin: 0 0 var(--idh-space-3); }
.s12m-faq-a p:last-child { margin-bottom: 0; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .s12m-hero {
    padding: var(--idh-space-10) 0 var(--idh-space-8);
  }
  .s12m-hero-inner,
  .s12m-section-head,
  .s12m-prose,
  .s12m-perks-grid,
  .s12m-pricing-inner,
  .s12m-faq-list {
    padding-left:  var(--idh-space-5);
    padding-right: var(--idh-space-5);
  }
  .s12m-hero-title {
    font-size:   clamp(34px, 9vw, 48px);
    margin:      var(--idh-space-4) 0 var(--idh-space-5);
  }
  .s12m-hero-lead {
    font-size:   18px;
    line-height: 1.55;
    margin-bottom: var(--idh-space-6);
  }
  .s12m-hero-cta { gap: var(--idh-space-2); }
  .s12m-hero-cta .btn,
  .s12m-hero-cta .lezer-cta-btn { font-size: 12px; padding: var(--idh-space-3) var(--idh-space-5); }

  .s12m-section { padding: var(--idh-space-12) 0; }
  .s12m-section-head { margin-bottom: var(--idh-space-7); }
  .s12m-section-title { font-size: clamp(28px, 7vw, 36px); }

  .s12m-perks-grid {
    grid-template-columns: 1fr;
    gap: var(--idh-space-4);
  }
  .s12m-perk { padding: var(--idh-space-6) var(--idh-space-5); }
  .s12m-perk-num { font-size: 44px; }
  .s12m-perk-title { font-size: 20px; }

  .s12m-prose { font-size: 17px; line-height: 1.6; }
  .s12m-prose p { margin-bottom: 18px; }

  .s12m-pricing { padding: var(--idh-space-12) 0; }
  .s12m-price-amount { font-size: clamp(64px, 18vw, 96px); }
  .s12m-pricing-cta {
    padding: var(--idh-space-3) var(--idh-space-7);
    font-size: 12px;
  }
  .s12m-pricing-meta { font-size: 14px; }

  .s12m-faq-q     { font-size: 17px; padding: var(--idh-space-5) 0; gap: var(--idh-space-3); }
  .s12m-faq-q::after { font-size: 24px; }
  .s12m-faq-a     { font-size: 16px; padding-bottom: var(--idh-space-5); }
}

/* ════════════════════════════════════════════════════════════════════════
   SITEWIDE DISPLAY-OVERRIDE — IBM Plex Sans Bold
   IBM Plex Sans Bold is 700. Display en body zijn beide IBM Plex Sans.
   Alle display-classes krijgen weight 700 + tight letter-spacing zodat
   ze het magazine-cover gevoel behouden dat we met het experiment hadden.
   font-weight op display-titels:
   overruled door deze regel via !important.
   ════════════════════════════════════════════════════════════════════════ */

.tifo-title.wp-block-post-title,
.zone-label-title.wp-block-heading,
.spotlight-title,
.cat-grid-title.wp-block-heading,
.cat-tile-name,
.lezer-cta-title,
.article-title.wp-block-post-title,
.page-title.wp-block-post-title,
.s12m-hero-title,
.s12m-section-title,
.s12m-pricing-title,
.s12m-price-amount,
.s12m-perk-num,
.auth-title.wp-block-heading,
.auth-pitch-title,
.related-heading,
.mobile-drawer-cats a {
  font-weight:    700 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
}
/* Footer-brand-name moet wél uppercase blijven (brand-titel-pattern).
   Was per ongeluk meegenomen in bovenstaande sitewide override. */

/* ════════════════════════════════════════════════════════════════════════
   BODY-LISTS — rode rondjes als bullet voor UL
   Vervangt default disc met custom rood bolletje. Em-based zodat het
   schaalt met font-size. Geldt op alle body-content (article-body voor
   single-post, page-body voor info-pages, s12m-prose voor /12e-man/).
   OL behoudt default nummering.
   ════════════════════════════════════════════════════════════════════════ */

.article-body ul,
.page-body ul,
.s12m-prose ul {
  list-style: none;
  padding-left: 0;
}

.article-body ul > li,
.page-body ul > li,
.s12m-prose ul > li {
  position:     relative;
  padding-left: 1.5em;
}

.article-body ul > li::before,
.page-body ul > li::before,
.s12m-prose ul > li::before {
  content:       "";
  position:      absolute;
  left:          0.2em;
  top:           0.62em;
  width:         0.5em;
  height:        0.5em;
  background:    var(--idh-accent);
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER-BANNER — partner-promo IN de masthead, naast logo
   Beheerbaar via Customizer (Personaliseren → Header-banner). Default:
   072DESIGN-promo. Pill links, korte tekst middle, CTA-link rechts.
   Verbergt onder 1200px (niet genoeg ruimte tussen brand en utility-rij).
   ════════════════════════════════════════════════════════════════════════ */

.header-banner {
  display:   none;
  flex:      1;
  min-width: 0;
}

@media (min-width: 1200px) {
  .header-banner {
    display:         flex;
    align-items:     center;
    justify-content: center;
  }
}

.header-banner-inner {
  width:        100%;
  margin:       0 var(--idh-space-8);
  padding:      var(--idh-space-2) var(--idh-space-5);
  display:      flex;
  align-items:  center;
  gap:          var(--idh-space-4);
  background:   var(--idh-paper);
  border:       var(--idh-border-thin) solid var(--idh-line);
}

.header-banner-pill {
  display:        inline-block;
  flex-shrink:    0;
  padding:        6px 12px;
  background:     var(--idh-accent);
  color:          var(--idh-paper);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius:  var(--idh-radius);
  line-height:    1;
}

.header-banner-text {
  flex:           1;
  min-width:      0;
  font-family:    var(--idh-font-body);
  font-size:      14px;
  font-weight:    600;
  color:          var(--idh-ink);
  letter-spacing: -0.005em;
  line-height:    1.35;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.header-banner-cta {
  flex-shrink:     0;
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--idh-ink);
  text-decoration: none;
  border-bottom:   2px solid var(--idh-ink);
  padding-bottom:  2px;
  transition:      color 0.15s ease, border-color 0.15s ease;
}

.header-banner-cta:hover {
  color:        var(--idh-accent);
  border-color: var(--idh-accent);
}

/* ═══ CATEGORIE-ARCHIEF ═══════════════════════════════════════════════
   templates/archive.html — paper-strook header + 3-koloms post-grid +
   query-pagination + optionele SEO/affiliate-block onderaan.
   Grid hergebruikt het related-card-patroon (single.html) maar dan
   met archive-card-prefix zodat we onafhankelijk kunnen tunen.
   ═════════════════════════════════════════════════════════════════════ */

.archive-main {
  background:    var(--idh-paper);
  margin:        0 !important;       /* gap onder nav-strip wegnemen */
}
/* WP-core block-gap tussen sibling-secties uitzetten — onze drie blokken
   sluiten visueel direct op elkaar aan. ALLEEN verticale margins, niet
   horizontale (anders breekt margin-left/right auto op .page-breadcrumbs
   en .page-lead-wrap). */
.archive-main > * { margin-block: 0 !important; }
/* Block-gap die WP-core toevoegt op .wp-site-blocks > footer wegnemen,
   anders ontstaat een witte/paper-strook tussen het laatste eigen blok
   en de zwarte footer. Geldt voor templates waar onderaan een
   getinte/full-bleed sectie staat (archive SEO-blok, single related-posts
   paper-bg, etc). */
body.archive .wp-site-blocks > footer,
body.search  .wp-site-blocks > footer,
body.single  .wp-site-blocks > footer {
  margin-block-start: 0 !important;
}

/* ── Archive-hero — page-hero look-alike (consistent met page.html
   en /voetbalcultuur/). Full-bleed cover met term-image als bg,
   dimming, RUBRIEK pill + Plex Bold titel onderaan-links. ────── */
.archive-header.wp-block-group {
  background:    transparent;
  margin:        0 !important;
  padding:       0;
  max-width:     none !important;
}

/* .archive-hero CSS verwijderd 28 mei 2026 — vervangen door [idh_hero]
   shortcode. Zie regel ~4090 voor de bijbehorende .page-hero cleanup. */

/* ── Gedeeld page-lead patroon — gebruikt op archive (description) en
   hub (intro). Wrapper 1100 centered, inner 780 links-uitgelijnd zodat
   het visueel onder breadcrumbs uitlijnt. Eén bron van waarheid.

   NB: explicit margin-left/right auto + !important omdat WP's
   .is-layout-flow op de main-parent een margin: 0 oplegt aan children.
   Dat zou onze auto-centering breken. ─── */
/* .page-lead-wrap erft .u-content-wrap (max-width + margin-inline auto +
   padding-inline). Hier alleen padding-top/bottom. */
.page-lead-wrap {
  padding-top:    var(--idh-space-6);
  padding-bottom: var(--idh-space-10);
}

.page-lead {
  max-width:      780px;
  margin:         0;
  font-family:    var(--idh-font-body);
  font-size:      var(--idh-text-body);
  line-height:    1.65;
  color:          var(--idh-ink);
}

.page-lead p {
  /* Erf font-size/line-height van .page-lead — anders pakt sitewide
     <p>-styling (17px / body-size) over en wordt term_description()
     visueel kleiner dan een raw-text-lead op page-templates. */
  font-size:   inherit;
  line-height: inherit;
  color:       inherit;
}
.page-lead p:first-child { margin-top: 0; }
.page-lead p:last-child  { margin-bottom: 0; }

/* Backwards-compat alias — archive-description was de oude class */
.archive-description {
  /* leeg — output past nu .page-lead-wrap + .page-lead. Alias laat ik
     staan voor het geval iets externs nog naar deze class wijst. */
}

/* Mobile */
@media (max-width: 880px) {
  /* Spacing onder hero op mobile: breadcrumbs ademen + lead-tekst krijgt
     padding-top zodat hij niet vastplakt aan breadcrumbs. Padding-inline
     erft via .u-content-wrap shared rule (space-5). */
  .page-breadcrumbs {
    padding-top: var(--idh-space-6);
  }
  .page-lead-wrap {
    padding-top:    var(--idh-space-5);
    padding-bottom: var(--idh-space-7);
  }
  /* .page-lead font-size erft van desktop (body-size). Geen mobile-override nodig. */
}

/* Breadcrumbs — boven eyebrow, mono small, link in ink met accent op hover */
.archive-breadcrumbs {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             var(--idh-space-2);
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--idh-muted);
  margin-bottom:   var(--idh-space-5);
}
.archive-breadcrumbs a {
  color:           var(--idh-ink);
  text-decoration: none;
  transition:      color 0.15s ease;
}
.archive-breadcrumbs a:hover { color: var(--idh-accent); }
.archive-breadcrumb-sep { color: var(--idh-muted); }
.archive-breadcrumb-current {
  color: var(--idh-accent);
}

/* .archive-eyebrow als wrapper bestond ooit, niet meer in markup. Dead-code
   verwijderd (audit LOW). .archive-count blijft als directe selector. */
.archive-count {
  font-family:     var(--idh-font-mono);
  font-size:       var(--idh-text-mono);
  font-weight:     700;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  color:           var(--idh-accent);
}
.archive-title {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(40px, 5vw, 64px);
  line-height:    1.05;
  letter-spacing: -0.025em;
  color:          var(--idh-ink);
  margin:         0;
}
.archive-description {
  margin-top:  var(--idh-space-5);
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-body);
  line-height: 1.55;
  color:       var(--idh-ink);
  max-width:   620px;
}
.archive-description p { margin: 0 0 var(--idh-space-3); }
.archive-description p:last-child { margin-bottom: 0; }

/* Outer-wrap full-bleed wit blok, inner erft .u-content-wrap. */
.archive-grid-wrap.wp-block-group {
  background: var(--idh-paper-2);
  max-width:  none !important;
  padding:    var(--idh-space-12) 0 var(--idh-space-18);
}
/* Inner wp-block-query erft .u-content-wrap (sitewide shared rule).
   Geen lokale max-width / padding-inline / margin meer nodig. */
/* Asymmetrisch grid: 12-koloms basis, pure modulo-cycle 3-2 (5 per cycle).
   Werkt automatisch voor elke perPage deelbaar door 5 (10/15/20). */
.archive-query .archive-grid.wp-block-post-template {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   var(--idh-space-8) var(--idh-space-7);
  margin:                0;
  padding:               0;
  list-style:            none;
}
/* WP wrapt elke post in <li class="wp-block-post"> — die zit in het grid,
   niet de article eronder. Targeting moet dus op > li. */
.archive-query .archive-grid > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Modulo-cycle: positions 5n+1/+2/+3 (3-cards-rij) = span 4,
   positions 5n+4/+5 (2-grote-cards-rij) = span 6. Pure om-en-om. */
.archive-query .archive-grid > li:nth-child(5n+1),
.archive-query .archive-grid > li:nth-child(5n+2),
.archive-query .archive-grid > li:nth-child(5n+3) {
  grid-column: span 4;
}
.archive-query .archive-grid > li:nth-child(5n+4),
.archive-query .archive-grid > li:nth-child(5n+5) {
  grid-column: span 6;
}
/* 2-rij krijgt iets grotere titel — subtiel verschil (default 22 → 24)
   zodat 2-card-rijen visueel anders ademen zonder lomp aan te voelen. */
.archive-query .archive-grid > li:nth-child(5n+4) .archive-card-title,
.archive-query .archive-grid > li:nth-child(5n+5) .archive-card-title {
  font-size: 24px;
}

/* ════════════════════════════════════════════════════════════════════════
   CARD COMPONENT — shared base voor .archive-card én .related-card
   .archive-card: in archive.html + hub-recent + hub-pages (3/2 image,
                  cat-pill absolute IN image als rode badge)
   .related-card: in single.html related-strip (vaste 200px image height,
                  cat-pill inline boven titel)
   Identieke regels gegroepeerd, modifier-specifieke verschillen apart.
   ════════════════════════════════════════════════════════════════════════ */

/* Base wrap — flex column, no margin, transparent. archive-card krijgt
   position:relative als anker voor de absolute cat-pill in image. */
.archive-card.wp-block-group,
.archive-card,
.related-card.wp-block-group,
.related-card {
  margin:         0 !important;
  background:     transparent;
  display:        flex;
  flex-direction: column;
}
.archive-card.wp-block-group,
.archive-card { position: relative; }

/* Image — shared display, breedte, object-fit. */
.archive-card-image.wp-block-post-featured-image,
.archive-card-image,
.related-card-image.wp-block-post-featured-image,
.related-card-image {
  margin-bottom: var(--idh-space-4) !important;
}
.archive-card-image img,
.related-card-image img {
  display:    block;
  width:      100%;
  object-fit: cover;
}
/* Modifier — archive gebruikt aspect-ratio voor responsive height,
   related gebruikt vaste 200px voor compacte 3-kolom strip. */
.archive-card-image img { height: auto; aspect-ratio: 3/2; }
.related-card-image img { height: 200px; }

/* Cat-label — mono caps. Archive: rode pill absolute IN image (badge).
   Related: inline rode tekst boven titel (subtiel label). */
.archive-card-cat.wp-block-post-terms,
.archive-card-cat,
.related-card-cat.wp-block-post-terms,
.related-card-cat {
  font-family:    var(--idh-font-mono);
  font-weight:    700;
  text-transform: uppercase;
}
.archive-card-cat .wp-block-post-terms__separator,
.related-card-cat .wp-block-post-terms__separator { display: none; }
.archive-card-cat a:not(:first-of-type),
.related-card-cat a:not(:first-of-type) { display: none; }

/* Archive cat-pill (rood vlak IN image). */
.archive-card-cat.wp-block-post-terms,
.archive-card-cat {
  position:       absolute;
  top:            var(--idh-space-3);
  left:           var(--idh-space-3);
  z-index:        2;
  padding:        4px 10px;
  background:     var(--idh-accent);
  border-radius:  var(--idh-radius);
  font-size:      var(--idh-text-mono);
  letter-spacing: 0.12em;
  line-height:    1;
  white-space:    nowrap;
  max-width:      calc(100% - var(--idh-space-6));
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.archive-card-cat a {
  color:           var(--idh-paper) !important;
  text-decoration: none !important;
}

/* Related cat-label (inline tekst). */
.related-card-cat.wp-block-post-terms,
.related-card-cat {
  font-size:      10px;
  letter-spacing: 0.16em;
}
.related-card-cat a {
  color:           var(--idh-accent) !important;
  text-decoration: none !important;
}

/* Title — shared font/weight/color, modifier voor size + lh + spacing. */
.archive-card-title.wp-block-post-title,
.archive-card-title,
.related-card-title.wp-block-post-title,
.related-card-title {
  font-family: var(--idh-font-display);
  font-weight: 700;
  color:       var(--idh-ink);
}
.archive-card-title.wp-block-post-title,
.archive-card-title {
  font-size:      22px;
  line-height:    1.2;
  letter-spacing: -0.015em;
  margin:         0 0 var(--idh-space-3) !important;
}
.related-card-title.wp-block-post-title,
.related-card-title {
  font-size:      19px;
  line-height:    1.25;
  letter-spacing: -0.005em;
  margin:         0 0 10px !important;
}
.archive-card-title a,
.related-card-title a {
  color:           var(--idh-ink) !important;
  text-decoration: none;
  transition:      color 0.15s ease;
}
.archive-card:hover .archive-card-title a,
.related-card:hover .related-card-title a { color: var(--idh-accent) !important; }

/* Byline — mono caps flex met dot-separator. Identiek voor beide kaarttypes:
   pakt zowel WP-block (.wp-block-group) als PHP-rendered (geen group) variant. */
.archive-card-byline.wp-block-group,
.archive-card-byline,
.related-card-byline.wp-block-group,
.related-card-byline {
  display:        flex;
  flex-wrap:      wrap;
  font-family:    var(--idh-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--idh-muted);
  margin:         0 !important;
  align-items:    center !important;
  gap:            6px !important;
}
.archive-card-byline,
.archive-card-byline .wp-block-post-author__name,
.archive-card-byline .wp-block-post-author-name,
.archive-card-byline .wp-block-post-author__name a,
.archive-card-byline .wp-block-post-author-name a,
.archive-card-byline .wp-block-post-date,
.archive-card-byline .wp-block-post-date time,
.archive-card-byline .archive-card-dot,
.related-card-byline,
.related-card-byline .wp-block-post-author__name,
.related-card-byline .wp-block-post-author-name,
.related-card-byline .wp-block-post-author__name a,
.related-card-byline .wp-block-post-author-name a,
.related-card-byline .wp-block-post-date,
.related-card-byline .wp-block-post-date time,
.related-card-byline .related-card-dot {
  font-size:       10px !important;
  line-height:     1.2;
  font-weight:     500;
  color:           var(--idh-muted);
  text-decoration: none;
}
.archive-card-byline .wp-block-post-author__name,
.archive-card-byline .wp-block-post-author-name,
.related-card-byline .wp-block-post-author__name,
.related-card-byline .wp-block-post-author-name { margin: 0; }
.archive-card-byline .wp-block-post-date,
.related-card-byline .wp-block-post-date { margin: 0; }
.archive-card-dot,
.related-card-dot { opacity: 0.5; }

/* ── Pagination (klassieke nummering, gecentreerd) ──────────────── */
.archive-pagination {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top:     var(--idh-space-12) !important;
  padding-top:    var(--idh-space-7);
  border-top:     var(--idh-border-thin) solid var(--idh-line);
  align-items:    center !important;
  gap:            var(--idh-space-3) !important;
}
.archive-pagination a,
.archive-pagination .page-numbers {
  color:           var(--idh-ink);
  text-decoration: none;
  padding:         var(--idh-space-2) var(--idh-space-3);
  transition:      color 0.15s ease, background 0.15s ease;
}
.archive-pagination a:hover { color: var(--idh-accent); }
.archive-pagination .current,
.archive-pagination .page-numbers.current {
  color: var(--idh-accent);
}
.archive-pagination .wp-block-query-pagination-previous,
.archive-pagination .wp-block-query-pagination-next {
  color:       var(--idh-ink);
  font-weight: 700;
}

.archive-empty {
  text-align:    center;
  font-family:   var(--idh-font-body);
  font-size:     var(--idh-text-body);
  color:         var(--idh-muted);
  padding:       var(--idh-space-14) var(--idh-space-7);
}

/* ── SEO + affiliate-block onderaan (subtle paper-3) ────────────── */
.archive-seo {
  background: var(--idh-paper-3);
}
/* .archive-seo-inner erft .u-content-wrap. Hier alleen vertical padding. */
.archive-seo-inner {
  padding-top:    var(--idh-space-10);
  padding-bottom: var(--idh-space-14);
}
.archive-seo-title {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(28px, 3vw, 36px);
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--idh-ink);
  margin:         0 0 var(--idh-space-7);
  padding-bottom: var(--idh-space-4);
  border-bottom:  var(--idh-border-thin) solid var(--idh-line);
}
.archive-seo-intro,
.archive-seo-body {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-body);
  line-height: 1.65;
  color:       var(--idh-ink);
  max-width:   780px;
}
.archive-seo-intro p,
.archive-seo-body p { margin: 0 0 var(--idh-space-4); }
.archive-seo-intro p:last-child,
.archive-seo-body p:last-child { margin-bottom: 0; }

/* SEO-body prose: koppen, lijsten, inline-links met accent-underline */
.archive-seo-body h2,
.archive-seo-body h3 {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  letter-spacing: -0.015em;
  color:          var(--idh-ink);
  margin:         var(--idh-space-7) 0 var(--idh-space-3);
}
.archive-seo-body h2 { font-size: 26px; line-height: 1.2; }
.archive-seo-body h3 { font-size: 20px; line-height: 1.25; }
.archive-seo-body a {
  color:                       var(--idh-accent);
  text-decoration:             underline;
  text-decoration-thickness:   1px;
  text-underline-offset:       3px;
  transition:                  color 0.15s ease;
}
.archive-seo-body a:hover { color: var(--idh-accent-dark); }
.archive-seo-body ul,
.archive-seo-body ol {
  margin:    var(--idh-space-3) 0 var(--idh-space-5);
  padding:   0 0 0 var(--idh-space-6);
  font-size: var(--idh-text-body);
}
.archive-seo-body ul li,
.archive-seo-body ol li { margin: 0 0 var(--idh-space-2); }
.archive-seo-body ul li::marker { color: var(--idh-accent); }
/* Sectie-eyebrows binnen het SEO-blok (Verder lezen / Handige links) */
.archive-seo-section {
  margin-top:    var(--idh-space-10);
  padding-top:   var(--idh-space-4);
  border-top:    var(--idh-border-thin) solid var(--idh-line);
}
.archive-seo-section-eyebrow {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--idh-ink);
  margin-bottom:  var(--idh-space-5);
}
.archive-seo-section-eyebrow--accent {
  color:          var(--idh-accent);
  margin-top:     var(--idh-space-10);
  padding-top:    var(--idh-space-4);
  border-top:     var(--idh-border-thin) solid var(--idh-line);
}

/* Interne links — 2 of 3 koloms grid, geen card-look. Editorial-strak. */
.archive-seo-links {
  list-style: none;
  margin:     0;
  padding:    0;
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--idh-space-5) var(--idh-space-8);
}
.archive-seo-links li { margin: 0; padding: 0; }
.archive-seo-links a {
  display:         flex;
  flex-direction:  column;
  gap:             4px;
  padding:         var(--idh-space-3) 0;
  border-top:      var(--idh-border-thin) solid var(--idh-line);
  text-decoration: none;
  color:           var(--idh-ink);
  transition:      color 0.15s ease, border-color 0.15s ease;
}
.archive-seo-links a:hover {
  color:        var(--idh-accent);
  border-color: var(--idh-accent);
}
.archive-seo-link-label {
  font-family:    var(--idh-font-display);
  font-size:      18px;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -0.01em;
}
.archive-seo-link-sub {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-meta);
  color:       var(--idh-muted);
  line-height: 1.4;
}

.archive-seo-cards-eyebrow {
  margin-top:     var(--idh-space-10);
  padding-top:    var(--idh-space-4);
  border-top:     var(--idh-border-thin) solid var(--idh-line);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--idh-accent);
  margin-bottom:  var(--idh-space-5);
}
.archive-seo-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--idh-space-5);
}
.archive-seo-card {
  display:         flex;
  flex-direction:  column;
  gap:             var(--idh-space-2);
  padding:         var(--idh-space-5);
  background:      var(--idh-paper);
  border:          var(--idh-border-thin) solid var(--idh-line);
  text-decoration: none;
  color:           var(--idh-ink);
  transition:      border-color 0.15s ease, transform 0.15s ease;
}
.archive-seo-card:hover {
  border-color: var(--idh-accent);
  transform:    translateY(-2px);
}
.archive-seo-card-label {
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--idh-accent);
}
.archive-seo-card-tagline {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-card);
  line-height: 1.4;
  color:       var(--idh-ink);
}
.archive-seo-card-cta {
  margin-top:     auto;
  padding-top:    var(--idh-space-3);
  border-top:     var(--idh-border-thin) solid var(--idh-line);
  font-family:    var(--idh-font-mono);
  font-size: var(--idh-text-mono-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--idh-muted);
  transition:     color 0.15s ease;
}
.archive-seo-card:hover .archive-seo-card-cta { color: var(--idh-accent); }

/* ── Mobile / tablet ────────────────────────────────────────────────
   Onder 1100px valt het 3-2-3-3 asymmetrische ritme weg en stapelen
   alle artikelen netjes onder elkaar in volle breedte. Geen 2-koloms
   interim (gaf hick-ups: span-6 voor 2-rij won op specificity en
   maakte ritme alsnog scheef). */
/* Tablet (881-1099): 2-col grid zonder ritme — alle cards span 6 (=2-col),
   geen 3-2 modulo want te krap voor 3 cards naast elkaar. */
@media (max-width: 1099px) and (min-width: 881px) {
  .archive-query .archive-grid > li,
  .archive-query .archive-grid > li:nth-child(5n+1),
  .archive-query .archive-grid > li:nth-child(5n+2),
  .archive-query .archive-grid > li:nth-child(5n+3),
  .archive-query .archive-grid > li:nth-child(5n+4),
  .archive-query .archive-grid > li:nth-child(5n+5) {
    grid-column: span 6;
  }
  .archive-query .archive-grid > li:nth-child(5n+4) .archive-card-title,
  .archive-query .archive-grid > li:nth-child(5n+5) .archive-card-title {
    font-size: 22px;
  }
}
@media (max-width: 880px) {
  .archive-query .archive-grid.wp-block-post-template {
    grid-template-columns: 1fr;
    gap:                   var(--idh-space-8);
  }
  /* Override desktop modulo spans — anders winnen die op specificity */
  .archive-query .archive-grid > li,
  .archive-query .archive-grid > li:nth-child(5n+1),
  .archive-query .archive-grid > li:nth-child(5n+2),
  .archive-query .archive-grid > li:nth-child(5n+3),
  .archive-query .archive-grid > li:nth-child(5n+4),
  .archive-query .archive-grid > li:nth-child(5n+5) {
    grid-column: 1 / -1;
  }
  .archive-query .archive-grid > li:nth-child(5n+4) .archive-card-title,
  .archive-query .archive-grid > li:nth-child(5n+5) .archive-card-title {
    font-size: 22px;
  }
  .archive-seo-cards { grid-template-columns: repeat(2, 1fr); }
  .archive-seo-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  /* Split-section stack: foto boven, tekst onder */
  .archive-header-grid {
    grid-template-columns: 1fr;
    gap: var(--idh-space-7);
    align-items: start;
  }
  .archive-header-media {
    aspect-ratio: 16/9;
    min-height: 0;
  }
}
@media (max-width: 720px) {
  .archive-header.wp-block-group { padding: 0; }
  .archive-grid-wrap.wp-block-group { padding: var(--idh-space-8) 0 var(--idh-space-12); }
  .archive-grid-wrap.wp-block-group > .wp-block-query { padding: 0 var(--idh-space-5); }
  .archive-query .archive-grid.wp-block-post-template { grid-template-columns: 1fr; gap: var(--idh-space-7); }
  /* Alle cards uniform op mobile — geen titel-override voor de 2-rij */
  .archive-query .archive-grid > li:nth-child(4) .archive-card-title,
  .archive-query .archive-grid > li:nth-child(5) .archive-card-title {
    font-size: 22px;
  }
  .archive-seo-inner { padding: var(--idh-space-8) var(--idh-space-5) var(--idh-space-10); }
  .archive-seo-head { flex-direction: column; gap: var(--idh-space-2); }
  .archive-seo-cards { grid-template-columns: 1fr; }
  .archive-seo-links { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   HUB-LANDINGPAGE — /voetbalcultuur/, later ook /landen/
   Vol-breed layout (geen sidebar). Structuur: hero → breadcrumbs →
   intro lead → 8-card grid (4×2) → featured posts (3 in rij) →
   SEO-content uit Gutenberg. Hergebruikt page-hero + breadcrumbs uit
   page.html, eigen .hub-* components voor body.
   ════════════════════════════════════════════════════════════════════════ */

/* .hub-article = full-bleed wit canvas (zoals .archive-grid-wrap).
   Inner blocks (.cat-tile-grid, .hub-recent, .hub-seo) erven u-content-wrap. */
.hub-article.wp-block-group {
  background: var(--idh-paper-2);
  max-width:  none !important;
  margin:     0 !important;
  padding:    var(--idh-space-12) 0 var(--idh-space-18);
}

/* Intro-lead links-uitgelijnd onder breadcrumbs (geen auto-centering). */
.hub-intro {
  max-width:    780px;
  margin:       0 0 var(--idh-space-14);
  padding:      0;
  text-align:   left;
}

.hub-lead {
  font-family:    var(--idh-font-body);
  font-size:      var(--idh-text-body);
  line-height:    1.65;
  color:          var(--idh-ink);
  margin:         0;
}

/* ════════════════════════════════════════════════════════════════════════
   CAT-TILE — herbruikbare category-tile component
   Output van [cat_tiles] shortcode. Gebruikt op /voetbalcultuur/ en
   straks /landen/, /categorieen/, etc. Featured image + gradient-overlay
   + count-badge rechtsboven + categorie-titel onderaan (line-clamp 2).
   ════════════════════════════════════════════════════════════════════════ */

.cat-tile-grid {
  margin: 0 0 var(--idh-space-14);
}

.cat-tile-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(2, 1fr);
  gap:        var(--idh-space-6);
}

/* Mosaic-variant: 12-koloms grid met asymmetrische spans (xl/m/s).
   Gebruikt op homepage 'Op de tribune' — pattern xl,s,m,m,s,xl.

   Row-height vast via grid-auto-rows (clamp voor responsive). Tile zelf
   krijgt geen aspect-ratio maar groeit naar 100% van item — dat voorkomt
   witte vlakken onder kleinere tegels (XL en S in dezelfde rij zouden
   anders 8px verschillen door gap-rekenwerk binnen 12-col grid). */
.cat-tile-grid--mosaic .cat-tile-list {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows:        clamp(260px, 28vw, 380px);
  gap:                   var(--idh-space-4);
}
.cat-tile-grid--mosaic .cat-tile-item                 { grid-column: span 6; }  /* fallback */
.cat-tile-grid--mosaic .cat-tile-item--xl             { grid-column: span 8; }
.cat-tile-grid--mosaic .cat-tile-item--m              { grid-column: span 6; }
.cat-tile-grid--mosaic .cat-tile-item--s              { grid-column: span 4; }

/* Tile vult het hele LI — geen aspect-ratio (overrijdt sitewide .cat-tile
   default 3/2), height groeit mee met grid-auto-rows. */
.cat-tile-grid--mosaic .cat-tile {
  aspect-ratio: auto;
  height:       100%;
}

.cat-tile-item { margin: 0; }

.cat-tile {
  display:         block;
  position:        relative;
  aspect-ratio:    3 / 2;
  overflow:        hidden;
  background:      var(--idh-ink);
  text-decoration: none;
}

.cat-tile-bg {
  position:    absolute;
  inset:       0;
  background-position: center;
  background-size:     cover;
  transition:  transform 0.5s ease;
}

.cat-tile:hover .cat-tile-bg {
  transform: scale(1.06);
}

.cat-tile-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
}

/* Count-badge rechtsboven — accent-pill, zelfde formaat als .eyebrow */
.cat-tile-badge {
  position:       absolute;
  top:            var(--idh-space-4);
  right:          var(--idh-space-4);
  padding:        4px 10px;
  background:     var(--idh-accent);
  color:          var(--idh-paper);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius:  var(--idh-radius);
  line-height:    1;
  white-space:    nowrap;
}

/* Categorie-titel onderaan — wrap-laag forceert bottom-alignment van
   tekst (anders zwemt 1-regel titel hoog in het min-height-block).
   Inner .cat-tile-title doet line-clamp 2 zodat lange titels (Against
   Modern Football) netjes wrappen i.p.v. afsnijden. */
.cat-tile-titlewrap {
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         0;
  padding:        var(--idh-space-6);
  display:        flex;
  align-items:    flex-end;
  min-height:     120px;
}

.cat-tile-title {
  width:          100%;
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(22px, 2.4vw, 30px);
  line-height:    1.1;
  letter-spacing: -0.025em;
  color:          var(--idh-paper);
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}

/* Scroll-indicator dots — alleen zichtbaar op mobile (carousel-modus).
   Desktop is een 2-col grid dus dots zijn niet relevant. */
.cat-tile-dots {
  display: none;
}
@media (max-width: 880px) {
  .cat-tile-dots {
    display:         flex;
    gap:             8px;
    margin:          var(--idh-space-4) 0 0;
    padding:         0 var(--idh-space-5);
    list-style:      none;
    justify-content: center;
  }
  .cat-tile-dot {
    width:           7px;
    height:          7px;
    margin:          0;
    border-radius:   50%;
    background:      var(--idh-line);
    transition:      background-color 0.18s ease, transform 0.18s ease;
  }
  .cat-tile-dot.is-active {
    background:      var(--idh-accent);
    transform:       scale(1.25);
  }
}

/* ── Recent posts strip: hergebruikt .archive-card-* classes voor
   visuele consistentie met /category/<slug>/ archieven. Wrapper-grid
   in eigen 3-koloms ritme (anders dan archive's 3-2-3-3). ────────── */
.hub-recent {
  margin: 0 0 var(--idh-space-14);
}

.hub-recent-head {
  margin: 0 0 var(--idh-space-7);
  padding-bottom: var(--idh-space-3);
  border-bottom:  var(--idh-border-thick) solid var(--idh-accent);
}

/* Cluster-section header wrap (gebruikt op /alle-categorieen/).
   Geen eigen content behalve een .hub-recent-head — wrap is er om de
   header in de 1100-wrap te trekken via u-content-wrap shared selector. */
.hub-section {
  margin: 0 0 var(--idh-space-7);
}

.hub-recent-title {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(28px, 2.5vw, 36px);
  line-height:    1.05;
  letter-spacing: -0.025em;
  color:          var(--idh-ink);
  margin:         0;
}

.hub-recent-grid {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(12, 1fr);
  gap:        var(--idh-space-8) var(--idh-space-7);
}

/* Modulo-cycle 3-2 identiek aan .archive-grid voor visuele consistentie
   tussen /voetbalcultuur/ hub en /category/<slug>/ archieven. */
.hub-recent-item { margin: 0; }
.hub-recent-grid > .hub-recent-item:nth-child(5n+1),
.hub-recent-grid > .hub-recent-item:nth-child(5n+2),
.hub-recent-grid > .hub-recent-item:nth-child(5n+3) {
  grid-column: span 4;
}
.hub-recent-grid > .hub-recent-item:nth-child(5n+4),
.hub-recent-grid > .hub-recent-item:nth-child(5n+5) {
  grid-column: span 6;
}
.hub-recent-grid > .hub-recent-item:nth-child(5n+4) .archive-card-title,
.hub-recent-grid > .hub-recent-item:nth-child(5n+5) .archive-card-title {
  font-size: 24px;
}

/* Image in archive-card render (PHP-rendered <img>) — zelfde 3:2 aspect
   als archive-grid cards voor visuele identiek. */
.hub-recent-item .archive-card-image {
  display:       block;
  margin-bottom: var(--idh-space-4);
}
.hub-recent-item .archive-card-image img {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 3 / 2;
  object-fit:   cover;
}

/* ── SEO-block (uit Gutenberg page-content) ────────────────────────── */
.hub-seo.wp-block-group {
  max-width: 780px;
  margin:    var(--idh-space-14) auto 0 !important;
  padding:   var(--idh-space-10) 0 0;
  border-top: var(--idh-border-thin) solid var(--idh-line);
}

.hub-seo-body {
  font-family: var(--idh-font-body);
  font-size:   var(--idh-text-body);
  line-height: 1.65;
  color:       var(--idh-ink);
}

.hub-seo-body p { margin: 0 0 22px; }
.hub-seo-body h2,
.hub-seo-body h3 {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  letter-spacing: -0.015em;
  color:          var(--idh-ink);
  margin:         var(--idh-space-7) 0 var(--idh-space-3);
}
.hub-seo-body h2 { font-size: 26px; line-height: 1.2; }
.hub-seo-body h3 { font-size: 20px; line-height: 1.25; }
.hub-seo-body a {
  color:                 var(--idh-accent);
  text-decoration:       underline;
  text-decoration-color: rgba(200, 16, 46, 0.35);
  text-underline-offset: 3px;
}

/* Mobile carousel — tiles in horizontale row met scroll-snap.
   Geen JS: pure CSS scroll-snap met -webkit-overflow-scrolling: touch.
   Reden: Recent-blok direct onder de tegels blijft zichtbaar, magazine-
   feel, en geen 8 tiles onder elkaar scrollen op kleine devices. */
@media (max-width: 880px) {
  .hub-article.wp-block-group {
    padding: var(--idh-space-8) 0 var(--idh-space-12);
  }
  /* Carousel-mode op mobile — bumped specificity om .cat-tile-grid--mosaic
     grid-template-columns te overrulen (anders blijft die 12-col grid). */
  .cat-tile-grid .cat-tile-list,
  .cat-tile-grid--mosaic .cat-tile-list {
    display:             flex;
    grid-template-columns: none;
    gap:                 var(--idh-space-3);
    overflow-x:          auto;
    scroll-snap-type:    x mandatory;
    padding:             0;  /* scrollbar is verborgen, geen pad-bottom nodig */
    -webkit-overflow-scrolling: touch;
    scrollbar-width:     none;            /* Firefox */
  }
  .cat-tile-list::-webkit-scrollbar { display: none; } /* Webkit */

  /* Carousel-tile sizing — override mosaic spans op mobile (alle tiles
     gelijk 78% voor peek). */
  .cat-tile-grid .cat-tile-item,
  .cat-tile-grid--mosaic .cat-tile-item,
  .cat-tile-grid--mosaic .cat-tile-item--xl,
  .cat-tile-grid--mosaic .cat-tile-item--m,
  .cat-tile-grid--mosaic .cat-tile-item--s {
    flex:              0 0 78%;
    grid-column:       auto;
    scroll-snap-align: start;
  }
  .cat-tile-badge {
    top:     var(--idh-space-3);
    right:   var(--idh-space-3);
    padding: 3px 8px;
  }
  .cat-tile-titlewrap {
    padding:    var(--idh-space-5);
    min-height: 90px;
  }
  .cat-tile-title {
    font-size: clamp(20px, 5vw, 24px);
  }
  .hub-recent-grid {
    grid-template-columns: 1fr;
    gap: var(--idh-space-7);
  }
  /* Override desktop nth-child grid-column spans — anders blijven items
     verschillende breedtes houden in 1fr grid (overflow). Op mobile alles
     full-width, ook de 2-grote-rij items. */
  .hub-recent-grid > .hub-recent-item,
  .hub-recent-grid > .hub-recent-item:nth-child(5n+1),
  .hub-recent-grid > .hub-recent-item:nth-child(5n+2),
  .hub-recent-grid > .hub-recent-item:nth-child(5n+3),
  .hub-recent-grid > .hub-recent-item:nth-child(5n+4),
  .hub-recent-grid > .hub-recent-item:nth-child(5n+5) {
    grid-column: 1 / -1;
  }
  /* Uniforme title-size op mobile — geen 2-rij-uitbouw onder 880 */
  .hub-recent-grid > .hub-recent-item:nth-child(5n+4) .archive-card-title,
  .hub-recent-grid > .hub-recent-item:nth-child(5n+5) .archive-card-title {
    font-size: 22px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   IDH-HERO — sitewide hero-pattern (één bron van waarheid)
   Rendert via [idh_hero] shortcode. Vervangt .page-hero (wp:cover) en
   .archive-hero (custom) implementaties. Eén HTML-structuur, één CSS,
   identiek rendering op alle templates.
   ════════════════════════════════════════════════════════════════════════ */

.idh-hero {
  position:            relative;
  min-height:          clamp(320px, 38vw, 480px);
  background-color:    var(--idh-ink);
  background-position: center;
  background-size:     cover;
  background-repeat:   no-repeat;
  border-bottom:       var(--idh-border-thick) solid var(--idh-ink);
  display:             flex;
  align-items:         flex-end;
}

.idh-hero-dim {
  position: absolute;
  inset:    0;
  /* background-color via inline style (rgba met dim-percentage) */
}

.idh-hero-inner {
  position:      relative;
  z-index:       2;
  width:         100%;
  /* horizontale containment (max-width + margin-inline + padding-inline)
     erft via .u-content-wrap shared selector. Hier alleen verticale. */
  padding-block: var(--idh-space-12) var(--idh-space-10);
}

.idh-hero-inner .page-eyebrow {
  display:        inline-block;
  /* margin-bottom 0 — sitewide regel .eyebrow + h1 levert al 12px gap. */
  margin:         0;
  padding:        6px 12px;
  background:     var(--idh-accent);
  color:          var(--idh-paper);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius:  var(--idh-radius);
}

.idh-hero-title {
  font-family:    var(--idh-font-display);
  font-weight:    700;
  font-size:      clamp(44px, 6.4vw, 80px);
  line-height:    1.02;
  letter-spacing: -0.025em;
  color:          var(--idh-paper);
  text-transform: none;
  /* override sitewide .eyebrow + h1 (12px) — pill→title moest dichter. */
  margin:         var(--idh-space-2) 0 0;
  text-shadow:    0 2px 12px rgba(0, 0, 0, 0.55);
  max-width:      900px;
}

.idh-hero-inner .page-eyebrow + .idh-hero-title {
  margin-top: var(--idh-space-2);
}

@media (max-width: 880px) {
  .idh-hero {
    min-height: clamp(220px, 50vw, 320px);
  }
  .idh-hero-inner {
    padding-block: var(--idh-space-7) var(--idh-space-6);
  }
  .idh-hero-title {
    font-size:   clamp(32px, 8vw, 48px);
    line-height: 1.05;
  }
}

/* /mijn-account/ rendert binnen .page-body, waar `.page-body a` (rood +
   underline, specificiteit 0-1-1) de witte knoptekst van .auth-btn--primary
   overrulet. Specificiteit terugwinnen zodat de upgrade-CTA leesbaar is. */
.account-dash a.auth-btn--primary,
.account-dash a.auth-btn--primary:hover {
  color:           var(--idh-paper-2);
  text-decoration: none;
}

/* GF naam-veld alignment-fix: de .ginput_container_name-grid werd 716px in
   een 704px veld (stak 6px per kant uit, voorbij e-mail/textarea). De inputs
   hadden min-width:auto, waardoor de 1fr-kolommen niet onder hun intrinsieke
   breedte konden krimpen. min-width:0 op container + inputs lost het op.
   Appended ná de bestaande naam-regels zodat het de !important-set wint. */
.gform_wrapper .ginput_complex.ginput_container_name {
  width:     100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin:    0 !important;
}
.gform_wrapper .ginput_complex.ginput_container_name > span input {
  min-width: 0 !important;
}

/* ── TIFO-hero desktop = mobiele opzet (2026-05-31) ─────────────────────
   Traditioneler en strakker: categorie-pill boven een platte vette witte
   titel, direct op de foto (geen rode balk). Spiegelt de mobiele layout.
   Hele blok klikbaar via stretched link. Foto gecentreerd. Leesbaarheid
   via een gradient onderaan; de dim-overlay is sitewide weg (zie onderaan). */
@media (min-width: 881px) {
  /* Inner-container: kolom met content onderaan */
  .tifo-cover-bg .wp-block-cover__inner-container {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-end !important;
    position:        absolute !important;
    inset:           0;
    padding:         0 !important;
  }
  .tifo-cover-bg .wp-block-cover__image-background {
    object-fit:      cover !important;
    object-position: center !important;
  }
  /* Gradient onder de tekst (vervangt de dim-overlay) */
  .tifo-cover-bg .wp-block-cover__inner-container::before {
    content:        '';
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         0;
    height:         55%;
    background:     linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.38) 45%, transparent 100%);
    pointer-events: none;
    z-index:        1;
  }
  /* Categorie-pill — boven de titel, links uitgelijnd onderaan */
  .tifo-bottom.wp-block-group {
    display:    block !important;
    position:   static !important;
    background: transparent !important;
    padding:    0 var(--idh-space-10) !important;
    margin:     0 0 var(--idh-space-3) 0 !important;
    z-index:    2;
    order:      1;
  }
  .tifo-kicker { margin: 0 !important; }
  /* Titel — platte vette witte tekst op de foto (geen rode balk) */
  .tifo-spandoek.wp-block-group {
    position:   static !important;
    background: transparent !important;
    transform:  none !important;
    width:      auto !important;
    max-width:  min(78%, 880px) !important;
    padding:    0 var(--idh-space-10) var(--idh-space-7) !important;
    margin:     0 !important;
    z-index:    2;
    order:      2;
  }
  .tifo-spandoek .tifo-title.wp-block-post-title,
  .tifo-spandoek .tifo-title.wp-block-post-title a {
    font-family:        var(--idh-font-display) !important;
    font-size:          clamp(30px, 3.2vw, 46px) !important;
    font-weight:        700 !important;
    text-transform:     none !important;
    color:              var(--idh-paper-2) !important;
    line-height:        1.05 !important;
    text-shadow:        none !important;
    -webkit-line-clamp: 2;
  }
  /* Hele foto klikbaar: stretched link over de cover */
  .tifo-title.wp-block-post-title a::after {
    content:  "";
    position: absolute;
    inset:    0;
    z-index:  1;
  }
}

/* Dim-overlay sitewide weg — foto op volle helderheid; de gradient onderaan
   regelt de leesbaarheid van het label en de titel (op desktop én mobiel). */
.tifo-cover-bg > .wp-block-cover__background { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Account-dashboard (/mijn-account/) — rol-bewust statusscherm.
   Plat/scherp, mono-labels conform de rest van de site. Geen boxes;
   structuur via spacing + één hairline. Naam/e-mail vet, geen
   browser-inspringing op de <dd>. (8 juni 2026)
   ═══════════════════════════════════════════════════════════════ */
.account-dash { max-width: 640px; }

/* Gedeelde mono-labels (zelfde taal als .eyebrow / .page-sidebar-label) */
.account-dash-eyebrow,
.account-card-label,
.account-details-label {
  display:        block;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-muted);
}

.account-dash-head    { margin-bottom: var(--idh-space-7); }
.account-dash-eyebrow { margin-bottom: var(--idh-space-2); }
.account-dash-title   { margin: 0; }

/* Statusblok (rol / supporter / lezer): label strak boven de titel */
.account-card        { margin-bottom: var(--idh-space-7); }
.account-card-label  { margin-bottom: var(--idh-space-1); }
.account-card-title  { margin: 0 0 var(--idh-space-3); }
.account-card-text   { margin: 0; max-width: 52ch; color: var(--idh-muted); }
.account-card .auth-btn { margin-top: var(--idh-space-5); }

/* Supporter-badge (alleen in supporter-staat) */
.account-card-badge {
  display:        inline-block;
  margin-bottom:  var(--idh-space-2);
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--idh-accent);
}

/* Je gegevens — hairline-scheiding + nette label/waarde-grid */
.account-details {
  margin-bottom: var(--idh-space-7);
  padding-top:   var(--idh-space-6);
  border-top:    1px solid var(--idh-line);
}
.account-details-label { margin-bottom: var(--idh-space-5); }
.account-details-list  { margin: 0; display: grid; gap: var(--idh-space-4); }
.account-details-row {
  display:               grid;
  grid-template-columns: 160px 1fr;
  gap:                   var(--idh-space-4);
  align-items:           baseline;
}
.account-details-row dt {
  margin:         0;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--idh-muted);
}
.account-details-row dd {
  margin:      0;                      /* fix de verspringing */
  font-weight: 700;                    /* naam + e-mail vet */
  font-size:   var(--idh-text-body);
  color:       var(--idh-ink);
}
.account-details-hint {
  margin:    var(--idh-space-5) 0 0;
  font-size: var(--idh-text-sm);
  color:     var(--idh-muted);
}

/* Uitloggen — mono-link */
.account-logout {
  display:        inline-block;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--idh-ink);
}

/* Mobiel: label boven waarde i.p.v. naast elkaar */
@media (max-width: 600px) {
  .account-details-row { grid-template-columns: 1fr; gap: var(--idh-space-1); }
}

/* De dashboard-titel is een h2 in .page-body en pakte daardoor de editorial
   top-border + grote marge op (regel ~4627). Resetten zodat "Je rol" strak
   boven "Beheerder" staat — geen los gat/lijntje ertussen. */
.page-body .account-card-title {
  margin-top:  0;
  padding-top: 0;
  border-top:  0;
}

/* ═══════════════════════════════════════════════════════════════
   Reacties (article-comments) — alleen ingelogde lezers reageren.
   Sluit aan op de site: mono-labels, IBM Plex body, .auth-form-stijl
   voor het formulier. Plat/scherp. (8 juni 2026)
   ═══════════════════════════════════════════════════════════════ */
.article-comments {
  margin-top:  var(--idh-space-10);
  padding-top: var(--idh-space-8);
  border-top:  1px solid var(--idh-line);
}
.article-comments-eyebrow { display: block; margin-bottom: var(--idh-space-2); }
.article-comments-title {
  margin: 0 0 var(--idh-space-7);
  font-family: var(--idh-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--idh-ink);
}

.comment-list { list-style: none; margin: 0 0 var(--idh-space-8); padding: 0; }
.comment-list .children { list-style: none; margin: var(--idh-space-5) 0 0; padding-left: var(--idh-space-5); border-left: 2px solid var(--idh-line); }
.comment-item { margin: 0 0 var(--idh-space-6); }
.comment-body { display: flex; gap: var(--idh-space-4); align-items: flex-start; }
.comment-avatar img { display: block; width: 44px; height: 44px; border-radius: 50%; }
.comment-main { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: var(--idh-space-2); margin-bottom: var(--idh-space-1); }
.comment-author { font-weight: 700; color: var(--idh-ink); }
.comment-dot { color: var(--idh-muted); }
.comment-date {
  font-family: var(--idh-font-mono);
  font-size: var(--idh-text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--idh-muted);
}
.comment-text { color: var(--idh-ink); line-height: 1.6; }
.comment-text p { margin: 0 0 var(--idh-space-3); }
.comment-text p:last-child { margin-bottom: 0; }
.comment-reply { margin-top: var(--idh-space-2); }
.comment-reply a, .comment-reply .comment-reply-link {
  font-family: var(--idh-font-mono);
  font-size: var(--idh-text-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--idh-accent);
  text-decoration: none;
}
.comment-reply a:hover { text-decoration: underline; }

/* Formulier — leunt op .auth-form/.auth-input/.auth-btn */
.comment-form-title {
  margin: 0 0 var(--idh-space-4);
  font-family: var(--idh-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--idh-ink);
}
.comment-logged-in { margin: 0 0 var(--idh-space-4); font-size: var(--idh-text-sm); color: var(--idh-muted); }
.comment-logged-in a { color: var(--idh-accent); }
.comment-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.comment-form .form-submit { margin: var(--idh-space-4) 0 0; }

/* Uitgelogd → inlog/aanmeld-prompt */
.comment-login-prompt {
  padding: var(--idh-space-6);
  background: #fff;
  border: 1px solid var(--idh-line);
}
.comment-login-text { margin: 0 0 var(--idh-space-4); color: var(--idh-ink); }
.comment-login-actions { display: flex; flex-wrap: wrap; gap: var(--idh-space-3); margin: 0; }
.comment-closed { font-size: var(--idh-text-sm); color: var(--idh-muted); }

/* ═══════════════════════════════════════════════════════════════
   Gastartikel-blok — brand-stijl (plat/wit, rood accent, mono-label).
   Geldt voor het nieuwe [idh_gastartikel] én het legacy .gastartikel-box
   (handmatige HTML in oudere artikelen), zodat alles consistent oogt.
   Vervangt de paarse dashed WPCode-snippet. (8 juni 2026)
   ═══════════════════════════════════════════════════════════════ */
.article-gastartikel,
.gastartikel-box {
  margin:        28px 0;
  padding:       18px 22px;
  background:    #fff;
  border:        1px solid var(--idh-line);
  border-left:   3px solid var(--idh-accent);
  border-radius: 0;
  position:      relative;
}
.article-gastartikel-label,
.gastartikel-box::before {
  display:        block;
  font-family:    var(--idh-font-mono);
  font-size:      var(--idh-text-mono);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--idh-accent);
  margin-bottom:  8px;
  /* legacy badge-positionering resetten */
  position:   static;
  background: none;
  padding:    0;
  top:        auto;
  left:       auto;
  border-radius: 0;
}
.gastartikel-box::before { content: "Gastartikel"; }
.article-gastartikel-text { margin: 0; color: var(--idh-ink); line-height: 1.6; }
.article-gastartikel a,
.gastartikel-box a {
  color:           var(--idh-accent);
  font-weight:     700;
  text-decoration: none;
}
.article-gastartikel a:hover,
.gastartikel-box a:hover { text-decoration: underline; }