/*
Theme Name: PO90 Kadence Child
Theme URI: https://passionover90.nl
Description: Rood-wit-zwart Kadence child theme voor PassionOver90.
Author: PassionOver90
Template: kadence
Version: 1.2.1
Text Domain: po90
*/
/* Het Version-nummer hierboven is alleen documentatie; het stuurt de browsercache
   niet aan. Dat doet functions.php, die het versienummer in de URL uit de
   bestandsdatum haalt (style.css?ver=<filemtime>). Elke upload geeft dus vanzelf
   een nieuwe URL en daarmee een verse download.
   Zie je na een upload toch niets veranderen, controleer dan eerst of functions.php
   met die filemtime-regel op de server staat:
   curl -s https://passionover90.nl/ | grep -o 'po90-kadence-child/style.css?ver=[^"]*'
   Staat daar een vast nummer als 1.0.0, dan is functions.php nog de oude. */
:root{--po90-red:#D71920;--po90-red-dark:#a80e14;--po90-black:#111;--po90-charcoal:#1e1e1e;--po90-white:#f5f5f5;--po90-grey:#d9d9d9;--po90-gold:#c39a45;
/* Breedte van de voorpagina. --po90-wrap is de enige knop die je normaal aanraakt:
   hij stuurt zowel de secties als de uitlijning van de herotekst.
   --po90-gutter is de marge langs de schermranden op smalle schermen.
   --po90-hero-text is hoe breed de tekstkolom in de hero mag worden. */
--po90-wrap:1240px;--po90-gutter:1.5rem;--po90-hero-text:44rem;
/* Hoe ver het hero-artwork van de rechterrand af staat. Groter = verder naar links.
   Een negatieve waarde duwt het juist naar buiten, deels uit beeld. */
--po90-hero-x:6rem;
/* Leesbreedte van de tekstkolom in een artikel (single.php). Rond de 70 tekens per regel. */
--po90-read:44rem;}
body{background:var(--po90-white);color:var(--po90-black)}
a{color:var(--po90-red)}a:hover{color:var(--po90-red-dark)}
.site-header,.site-footer{background:var(--po90-black);color:#fff}.site-header a,.site-footer a{color:#fff}
/* Hero: Designer-artwork rechts, tekst links. Was hero-stadium-vinyl.svg op center/cover met min-height:72vh.
   Het artwork staat op zwart, dus 'auto 100%' laat het naadloos in de zwarte hero opgaan
   in plaats van dat 'cover' de bovenkant en onderkant van de bal wegsnijdt. */
.po90-hero{min-height:clamp(21rem,40vh,28rem);display:grid;align-items:center;position:relative;overflow:hidden;color:#fff;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.97) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 66%),url(assets/images/hero-football-vinyl.jpg) right var(--po90-hero-x) center/auto 100% no-repeat,#000;padding-block:clamp(2rem,4.5vw,3.5rem);padding-inline:max(var(--po90-gutter),(100% - var(--po90-wrap))/2 + var(--po90-gutter))}
@media(max-width:1200px){.po90-hero{--po90-hero-x:-3rem;background-size:auto,auto 82%}}
.po90-hero__inner{max-width:var(--po90-hero-text)}.po90-kicker{color:var(--po90-gold);font-weight:800;letter-spacing:.18em;text-transform:uppercase}.po90-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.88;margin:.15em 0;color:#fff;text-transform:uppercase}.po90-hero h2{font-size:clamp(1.15rem,2.2vw,1.8rem);color:#fff;margin:.2em 0 .4em}.po90-hero p{margin:.5em 0}.po90-btn{display:inline-block;padding:.95rem 1.3rem;background:var(--po90-red);color:#fff!important;text-decoration:none;font-weight:800;text-transform:uppercase;border-radius:3px}.po90-btn:hover{background:#fff;color:var(--po90-black)!important}.po90-btn--ghost{background:transparent;border:2px solid #fff;margin-left:.5rem}
.po90-wrap{max-width:var(--po90-wrap);margin:auto;padding:4.5rem var(--po90-gutter)}.po90-section-title{font-size:clamp(2rem,4vw,3.5rem);text-transform:uppercase;margin:0 0 1.5rem}.po90-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.po90-card{background:#fff;border-bottom:5px solid var(--po90-red);box-shadow:0 12px 35px rgba(0,0,0,.09);overflow:hidden}.po90-card__visual{aspect-ratio:16/9;background:var(--po90-charcoal) center/cover no-repeat}.po90-card__body{padding:1.4rem}.po90-card h3{margin:.2rem 0 .6rem}.po90-label{font-size:.75rem;font-weight:900;color:var(--po90-red);letter-spacing:.12em;text-transform:uppercase}.po90-dark{background:var(--po90-black);color:#fff}.po90-dark .po90-section-title,.po90-dark h3{color:#fff}.po90-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}.po90-feature__visual{min-height:420px;background:url(assets/images/hero-matchday.svg) center/cover;border-left:9px solid var(--po90-red)}.po90-shop .po90-card{border-color:var(--po90-gold)}.po90-price{font-size:1.25rem;font-weight:900}.po90-newsletter{background:var(--po90-red);color:#fff;text-align:center;padding:4rem 1.5rem}.po90-newsletter h2{color:#fff}.po90-pill{display:inline-block;background:var(--po90-gold);color:#111;padding:.35rem .65rem;font-size:.72rem;font-weight:900;text-transform:uppercase}.woocommerce span.onsale,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--po90-red)!important;color:#fff!important}.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--po90-red)!important}
@media(max-width:850px){.po90-grid{grid-template-columns:1fr}.po90-feature{grid-template-columns:1fr}.po90-hero{min-height:26rem;background-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.9) 46%,#000 62%),url(assets/images/hero-football-vinyl.jpg);background-position:0 0,center top;background-size:auto,auto 52%;align-items:end}.po90-btn--ghost{margin:.7rem 0 0;display:table}}
/* Blog overzicht featured images */
.post-top-featured {
height: 50px !important;
width: 100%;
object-fit: cover;
display: block;
}

/* ==========================================================================
   Artikelpagina (single.php)
   ========================================================================== */

/* Hero. De uitgelichte afbeelding wordt als background-image in de template gezet,
   inclusief het verloop, zodat de titel altijd op donker staat. Geen afbeelding?
   Dan pakt .po90-post-hero--plain een rode diagonaal op zwart. */
.po90-post-hero,.po90-foto-hero{position:relative;display:grid;align-items:end;min-height:clamp(20rem,52vh,32rem);background:#000 center/cover no-repeat;color:#fff;padding-block:clamp(2.5rem,6vw,4rem);padding-inline:max(var(--po90-gutter),(100% - var(--po90-wrap))/2 + var(--po90-gutter))}
.po90-post-hero--plain{background-image:linear-gradient(115deg,#000 0%,#000 58%,var(--po90-red-dark) 58%,var(--po90-red-dark) 62%,#000 62%);min-height:clamp(16rem,34vh,22rem)}
.po90-post-hero__inner{max-width:var(--po90-hero-text)}
.po90-post-hero .po90-kicker a{color:var(--po90-gold);text-decoration:none}
.po90-post-hero .po90-kicker a:hover{color:#fff}
.po90-post-title{font-size:clamp(2.1rem,5vw,3.9rem);line-height:.95;margin:.25em 0 .3em;color:#fff;text-transform:uppercase;text-wrap:balance}
.po90-post-lead{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.5;color:#e6e6e6;margin:0 0 1.2rem;max-width:38rem}
/* Metaregel: auteur, datum, leestijd. De scheidingsstreepjes zijn rode blokjes. */
.po90-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.1rem;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cfcfcf}
.po90-post-meta>span{display:flex;align-items:center;gap:.5rem}
.po90-post-meta>span+span::before{content:"";width:6px;height:6px;background:var(--po90-red);display:inline-block;margin-right:.6rem}
.po90-avatar{border-radius:50%;border:2px solid var(--po90-red)}

/* Tekstkolom. Alles binnen de leesbreedte, behalve afbeeldingen en blokken
   met de Gutenberg-klasse alignwide/alignfull. */
.po90-post-layout{padding-block:clamp(2.5rem,5vw,4rem)}
.po90-post-body{max-width:var(--po90-read);margin-inline:auto;font-size:1.1rem;line-height:1.72;color:#1a1a1a}
/* Kadence heeft een eigen kleurenpalet voor bodytekst. Zonder deze regels kleurt de
   tekst van het artikel blauwgrijs mee met dat palet in plaats van met PO90-zwart. */
.po90-post-body p,.po90-post-body li,.po90-post-body dd{color:#1a1a1a}
.po90-post-body strong,.po90-post-body b{color:#000;font-weight:800}
/* De eerste alinea is de intro: iets groter, met een rode streep ervoor. */
.po90-post-body>p:first-of-type{font-size:1.22rem;line-height:1.55;color:#2a2a2a;padding-left:1.15rem;border-left:4px solid var(--po90-red)}
/* Korte regels achter elkaar horen als ritme te lezen, niet als losse blokken.
   Vandaar iets krappere ruimte onder een alinea dan gebruikelijk. */
.po90-post-body p{margin:0 0 1.05em;text-wrap:pretty}
.po90-post-body h2{font-size:clamp(1.6rem,3vw,2.3rem);text-transform:uppercase;line-height:1.1;color:var(--po90-black);text-wrap:balance;margin:2.2em 0 .6em;padding-top:1.1rem;border-top:4px solid var(--po90-red);display:table}
.po90-post-body h3{font-size:1.35rem;margin:1.9em 0 .5em;color:var(--po90-black);text-wrap:balance}
.po90-post-body h4{font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;margin:1.7em 0 .4em;color:var(--po90-black)}
.po90-post-body a{color:var(--po90-red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.po90-post-body a:hover{background:var(--po90-red);color:#fff;text-decoration:none}
.po90-post-body ul,.po90-post-body ol{margin:0 0 1.35em;padding-left:1.3em}
.po90-post-body li{margin-bottom:.5em}
.po90-post-body ul{list-style:none;padding-left:0}
.po90-post-body ul li{position:relative;padding-left:1.4em}
.po90-post-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--po90-red)}
.po90-post-body blockquote{margin:2em 0;padding:.2em 0 .2em 1.5rem;border-left:5px solid var(--po90-gold);font-size:1.3rem;line-height:1.45;font-style:italic;color:var(--po90-charcoal)}
.po90-post-body blockquote cite{display:block;margin-top:.6rem;font-size:.85rem;font-style:normal;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--po90-red)}
/* Optioneel, voor bijvoorbeeld de tracklist van een mixtape: selecteer de alinea in
   de blokeditor, ga naar Geavanceerd > Extra CSS-klasse(n) en typ daar po90-tracklist. */
.po90-post-body .po90-tracklist{background:var(--po90-black);color:#fff;padding:1.05rem 1.25rem;border-left:5px solid var(--po90-gold);font-weight:700;line-height:1.55}
.po90-post-body img{max-width:100%;height:auto;display:block}
.po90-post-body figure{margin:2.2em 0}
/* Bijschrift onder een foto. WordPress en Kadence zetten die van zichzelf
   gecentreerd; hier staat hij links, tegen het rode streepje aan. */
.po90-post-layout .po90-post-body figcaption{margin-top:.6rem;font-size:.85rem;color:#5a5a5a;border-left:3px solid var(--po90-red);padding-left:.7rem;text-align:left}
/* Brede blokken mogen buiten de leeskolom uitlopen tot aan --po90-wrap. */
.po90-post-body .alignwide{width:min(var(--po90-wrap),100vw - 2*var(--po90-gutter));margin-left:50%;transform:translateX(-50%)}
.po90-post-body .alignfull{width:100vw;margin-left:50%;transform:translateX(-50%);max-width:none}
.po90-post-body .wp-block-pullquote{border-block:4px solid var(--po90-red);padding:1.6rem 0;text-align:center}
.po90-post-body hr,.po90-post-body .wp-block-separator{border:0;height:4px;background:var(--po90-red);width:70px;margin:2.6em 0}
.po90-post-body table{width:100%;border-collapse:collapse;font-size:.95rem}
.po90-post-body th,.po90-post-body td{border-bottom:1px solid var(--po90-grey);padding:.6rem .5rem;text-align:left}
.po90-post-body th{background:var(--po90-black);color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.po90-post-pages{max-width:var(--po90-read);margin:2rem auto;font-weight:800}

/* Delen en tags: dezelfde leesbreedte als de tekst. */
.po90-post-share,.po90-post-tags{max-width:var(--po90-read);margin:2.5rem auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-top:1.4rem;border-top:1px solid var(--po90-grey)}
.po90-post-share .po90-label,.po90-post-tags .po90-label{margin-right:.4rem}
.po90-share-btn{display:inline-block;padding:.5rem .85rem;background:var(--po90-black);color:#fff!important;text-decoration:none;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:3px}
.po90-share-btn:hover{background:var(--po90-red)}
.po90-post-tags a{display:inline-block;padding:.4rem .75rem;background:var(--po90-white);border:2px solid var(--po90-black);color:var(--po90-black)!important;text-decoration:none;font-size:.78rem;font-weight:800;text-transform:uppercase}
.po90-post-tags a:hover{background:var(--po90-black);color:#fff!important}

/* Auteursblok */
.po90-author{max-width:var(--po90-read);margin:3rem auto 0;display:grid;grid-template-columns:96px 1fr;gap:1.4rem;align-items:start;background:var(--po90-black);color:#fff;padding:1.8rem;border-bottom:5px solid var(--po90-red)}
.po90-author__avatar{border-radius:50%;width:96px;height:96px}
.po90-author__name{margin:.15rem 0 .5rem;color:#fff;text-transform:uppercase}
.po90-author p{margin:0 0 .8rem;color:#dcdcdc;font-size:.98rem;line-height:1.6}
.po90-author__link{color:var(--po90-gold)!important;font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;text-decoration:none}
.po90-author__link:hover{color:#fff!important}

/* Vorige/volgende verhaal */
.po90-postnav-wrap{border-top:5px solid var(--po90-red)}
.po90-postnav{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding-block:2.5rem}
.po90-postnav__item{display:block;padding:1.3rem 1.5rem;background:var(--po90-charcoal);color:#fff!important;text-decoration:none;border-left:5px solid var(--po90-red)}
.po90-postnav__item--next{border-left:0;border-right:5px solid var(--po90-red);text-align:right}
.po90-postnav__item:hover{background:var(--po90-red)}
.po90-postnav__item:hover .po90-label{color:#fff}
.po90-postnav__title{display:block;margin-top:.4rem;font-size:1.15rem;font-weight:800;line-height:1.25}

.po90-related{padding-top:3.5rem}
.po90-comments{padding-top:1rem}

@media(max-width:850px){
.po90-post-hero{min-height:clamp(17rem,46vh,24rem)}
.po90-author{grid-template-columns:1fr;text-align:center;justify-items:center}
.po90-postnav{grid-template-columns:1fr}
.po90-postnav__item--next{text-align:left;border-right:0;border-left:5px solid var(--po90-red)}
.po90-post-body .alignwide{width:auto;margin-left:0;transform:none}
}

/* ==========================================================================
   Voorpagina: linkerkolom met de drie rubriek-inzetjes (front-page.php)
   ========================================================================== */

/* --po90-rail is de breedte van de linkerkolom, --po90-rail-top hoeveel ruimte
   er boven de meelopende (sticky) kolom blijft. Heb je een vastgezette header,
   zet --po90-rail-top dan op ongeveer de hoogte daarvan. */
:root{--po90-rail:20rem;--po90-rail-top:1.5rem}

.po90-home{display:grid;grid-template-columns:var(--po90-rail) minmax(0,1fr);gap:2.5rem;align-items:start}

/* De kolom loopt mee tijdens het scrollen zolang er verhalen naast staan. */
.po90-picks{position:sticky;top:var(--po90-rail-top);display:grid;gap:1.25rem}

.po90-pick{background:#fff;border-bottom:4px solid var(--po90-red);box-shadow:0 12px 35px rgba(0,0,0,.09);overflow:hidden}
.po90-pick__link{display:block;text-decoration:none;color:inherit}
/* De uitgelichte afbeelding van het bericht staat als background-image in de template. */
.po90-pick__visual{display:block;position:relative;aspect-ratio:16/10;background:var(--po90-charcoal) center/cover no-repeat;transition:filter .2s}
.po90-pick--leeg .po90-pick__visual{background:linear-gradient(115deg,#000 0%,#000 56%,var(--po90-red-dark) 56%,var(--po90-red-dark) 61%,#000 61%)}
.po90-pick__label{position:absolute;left:0;bottom:0;background:var(--po90-gold);color:#111;padding:.32rem .6rem;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.po90-pick__body{display:block;padding:.95rem 1rem 1.05rem}
.po90-pick__title{display:block;font-size:1.02rem;font-weight:800;line-height:1.25;text-wrap:balance}
.po90-pick__meta{display:block;margin-top:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6a6a6a}
.po90-pick__link:hover .po90-pick__title{color:var(--po90-red)}
.po90-pick__link:hover .po90-pick__visual{filter:brightness(1.1)}
/* Losse link naar het hele rubriek-archief, onder de kaart. */
.po90-pick__more{display:block;padding:.6rem 1rem;background:var(--po90-black);color:#fff!important;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.po90-pick__more:hover{background:var(--po90-red)}

.po90-main .po90-section-title{margin-top:.6rem}

/* Laatste verhalen: het nieuwste bericht groot, de drie daarna klein ernaast. */
.po90-latest{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.po90-latest__rest{display:grid;gap:1rem}
.po90-label a{text-decoration:none}

.po90-card--lead .po90-card__visual{display:block;aspect-ratio:16/10}
.po90-card--lead .po90-card__body{padding:1.5rem}
.po90-card--lead h3{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.15;text-wrap:balance}
.po90-card--lead h3 a{color:inherit;text-decoration:none}
.po90-card--lead h3 a:hover{color:var(--po90-red)}
.po90-card--lead p{margin:0 0 .9rem}

/* Kleine kaart: vierkante foto links, tekst rechts. */
.po90-mini{display:grid;grid-template-columns:7.5rem minmax(0,1fr);background:#fff;border-bottom:4px solid var(--po90-red);box-shadow:0 12px 35px rgba(0,0,0,.09);overflow:hidden}
.po90-mini__visual{display:block;min-height:6rem;background:var(--po90-charcoal) center/cover no-repeat;transition:filter .2s}
.po90-mini__visual:hover{filter:brightness(1.1)}
.po90-mini__body{padding:.8rem .95rem .85rem}
.po90-mini h3{margin:.2rem 0 .35rem;font-size:.98rem;line-height:1.25}
.po90-mini h3 a{color:inherit;text-decoration:none}
.po90-mini h3 a:hover{color:var(--po90-red)}
.po90-mini__meta{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6a6a6a}

/* Onder 1100px gaan de drie inzetjes naast elkaar boven de verhalen staan. */
@media(max-width:1100px){
.po90-home{grid-template-columns:1fr;gap:3rem}
.po90-picks{position:static;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem}
}
@media(max-width:850px){
.po90-picks{grid-template-columns:1fr}
.po90-latest{grid-template-columns:1fr}
.po90-mini{grid-template-columns:6.5rem minmax(0,1fr)}
}

/* ==========================================================================
   Matchday Sounds — landingspagina (category-matchday-sounds.php)
   ========================================================================== */

/* Kop van de rubriek. Zelfde opzet als de artikelpagina: de foto en het zwarte
   verloop worden als inline-style door de template gezet, zodat het pad naar de
   themamap altijd klopt. Ander plaatje? Zie category-matchday-sounds.php. */
.po90-ms-hero{position:relative;display:grid;align-items:center;min-height:clamp(19rem,44vh,27rem);color:#fff;background:#000 right center/cover no-repeat;padding-block:clamp(2.5rem,6vw,4rem);padding-inline:max(var(--po90-gutter),(100% - var(--po90-wrap))/2 + var(--po90-gutter))}
.po90-ms-hero__inner{max-width:var(--po90-hero-text)}
.po90-ms-title{font-size:clamp(2.3rem,5.5vw,4.2rem);line-height:.9;margin:.15em 0 .3em;color:#fff;text-transform:uppercase;text-wrap:balance}
.po90-ms-lead{font-size:clamp(1rem,1.6vw,1.28rem);line-height:1.55;color:#e4e4e4;max-width:38rem;margin:0 0 1.5rem}
.po90-ms-nav{display:flex;flex-wrap:wrap;gap:.6rem}
.po90-ms-chip{display:inline-block;padding:.55rem .9rem;border:2px solid rgba(255,255,255,.35);color:#fff!important;text-decoration:none;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.po90-ms-chip:hover{background:var(--po90-red);border-color:var(--po90-red)}

/* De drie blokken. Nummer, titel en knop staan op één regel boven een rode streep. */
.po90-strand{padding-block:clamp(2.8rem,6vw,4.5rem)}
.po90-strand--dark{background:var(--po90-black);color:#fff}
.po90-strand__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.5rem;padding-bottom:1.3rem;border-bottom:4px solid var(--po90-red);margin-bottom:2rem}
.po90-strand__num{font-size:clamp(2.2rem,5vw,3.4rem);line-height:.75;font-weight:900;color:var(--po90-gold)}
.po90-strand__titles{flex:1 1 20rem}
.po90-strand__title{font-size:clamp(1.6rem,3.4vw,2.6rem);text-transform:uppercase;line-height:1;margin:0}
.po90-strand--dark .po90-strand__title{color:#fff}
.po90-strand__intro{margin:.7rem 0 0;max-width:46rem;color:#4a4a4a;line-height:1.55}
.po90-strand--dark .po90-strand__intro{color:#cfcfcf}
.po90-strand__more{align-self:flex-end}
.po90-strand__leeg{margin:0;padding:1.6rem;border:3px dashed rgba(0,0,0,.18);font-weight:700;color:#666}
.po90-strand--dark .po90-strand__leeg{border-color:rgba(255,255,255,.22);color:#cfcfcf}

/* De drie onderdelen naast elkaar in één band, in plaats van drie volle banden
   onder elkaar. Zo staat alles wat erna komt niet meer een halve meter lager.
   De opmaak van de kaarten zelf verandert niet: die komt uit de regels hierboven,
   en omdat po90-strand--dark nu op de band staat blijven die gewoon gelden. */
.po90-strands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;align-items:start}
.po90-strands .po90-strand{padding-block:0}

/* Kop van een kolom: nummer naast de titel, introzin en knop eronder. */
.po90-strands .po90-strand__head{gap:.8rem 1rem;margin-bottom:1.4rem}
.po90-strands .po90-strand__num{font-size:2.4rem}
.po90-strands .po90-strand__titles{flex:1 1 8rem}
.po90-strands .po90-strand__title{font-size:clamp(1.3rem,1.8vw,1.7rem)}
.po90-strands .po90-strand__intro{font-size:.92rem;line-height:1.5}
.po90-strands .po90-strand__more{flex:1 0 100%;align-self:stretch;text-align:center;padding:.7rem 1rem;font-size:.8rem}

/* Binnen een kolom staan de berichten onder elkaar, ongeacht hoeveel het er zijn. */
.po90-strands .po90-ms-grid,
.po90-strands .po90-ms-grid--1,
.po90-strands .po90-ms-grid--2{grid-template-columns:minmax(0,1fr);gap:1.1rem}
.po90-strands .po90-card__visual{aspect-ratio:16/10}
.po90-strands .po90-card__body{padding:1rem 1.1rem 1.1rem}
.po90-strands .po90-ms-grid .po90-card h3{font-size:1.02rem}
.po90-strands .po90-ms-grid .po90-card p{font-size:.88rem;line-height:1.5}

/* Onder 1100px is een derde van de breedte te smal voor een kaart met foto;
   dan gaan de drie onderdelen alsnog onder elkaar staan. */
@media(max-width:1100px){
.po90-strands{grid-template-columns:1fr;gap:3.5rem}
.po90-strands .po90-ms-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.po90-strands .po90-strand__more{flex:0 0 auto;text-align:left}
}

/* Kaarten. Eén bericht wordt geen kaart over de volle breedte, twee blijven halve. */
.po90-ms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.po90-ms-grid--1{grid-template-columns:minmax(0,28rem)}
.po90-ms-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.po90-ms-grid .po90-card__visual{display:block}
.po90-ms-grid .po90-card h3{font-size:1.15rem;line-height:1.25}
.po90-ms-grid .po90-card h3 a{color:inherit;text-decoration:none}
.po90-ms-grid .po90-card h3 a:hover{color:var(--po90-red)}
.po90-ms-grid .po90-card p{margin:0;color:#4a4a4a}
.po90-strand--dark .po90-card{background:var(--po90-charcoal);color:#fff}
.po90-strand--dark .po90-card .po90-label{color:var(--po90-gold)}
.po90-strand--dark .po90-card p{color:#cfcfcf}
.po90-strand--dark .po90-card h3 a:hover{color:var(--po90-gold)}

/* Oudere afleveringen onderaan het categorie-archief. */
.po90-ms-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem}
.po90-ms-archief .navigation{margin-top:2.5rem}
.po90-ms-archief .page-numbers{display:inline-block;padding:.5rem .85rem;margin-right:.35rem;background:#fff;border-bottom:3px solid var(--po90-red);font-weight:800;text-decoration:none}
.po90-ms-archief .page-numbers.current{background:var(--po90-black);color:#fff}

/* Afsluiter met doorverwijzingen naar de andere rubrieken. */
.po90-ms-outro{background:var(--po90-red);color:#fff;text-align:center;padding:clamp(2.5rem,5vw,3.5rem) var(--po90-gutter)}
.po90-ms-outro h2{color:#fff;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.3rem);margin:0 0 .5rem}
.po90-ms-outro p{margin:0 0 1.3rem}
.po90-ms-outro .po90-btn{background:#fff;color:var(--po90-black)!important}
.po90-ms-outro .po90-btn:hover{background:var(--po90-black);color:#fff!important}
.po90-ms-outro .po90-btn--ghost{background:transparent;color:#fff!important;border-color:#fff}
.po90-ms-outro .po90-btn--ghost:hover{background:var(--po90-black);border-color:var(--po90-black)}

@media(max-width:850px){
.po90-ms-grid,.po90-ms-grid--1,.po90-ms-grid--2{grid-template-columns:1fr}
.po90-strand__more{width:100%;text-align:center}
.po90-ms-outro .po90-btn{display:block;margin:0 auto .6rem}
.po90-ms-outro .po90-btn--ghost{margin-left:auto}
}

/* ==========================================================================
   Categorie-archief (category.php) — geldt voor alle rubrieken en subrubrieken
   ========================================================================== */

/* De kop, de knoppen en het kaartenraster komen uit de blokken hierboven
   (.po90-ms-hero, .po90-ms-chip, .po90-ms-grid). Hieronder staat alleen wat
   daar nog niet in zat. */

/* Hoofdrubriek boven de titel: klikbaar terug naar het bovenliggende archief. */
.po90-ms-hero .po90-kicker a{color:var(--po90-gold);text-decoration:none}
.po90-ms-hero .po90-kicker a:hover{color:#fff}

/* Kadence kleurt koppen mee met zijn eigen palet. Op een archiefkop levert dat
   een donkerblauwe titel op een donkere foto op: onleesbaar. Deze regels zetten
   de tekst in de kop weer op wit. De !important staat er omdat het palet van
   Kadence ná het childtheme wordt ingeladen. */
.po90-arch .po90-ms-hero,
.po90-arch .po90-ms-hero .po90-ms-title,
.po90-arch .po90-ms-hero h1{color:#fff!important}
.po90-arch .po90-ms-hero .po90-ms-lead{color:#e4e4e4!important}

/* Een rubriekomschrijving is vaak een paar zinnen lang. Op 38rem wordt dat een
   smalle, hoge kolom tekst. Hier mag hij breder: de kop van een archief heeft
   toch niets naast zich staan. Het zwarte verloop over de foto loopt in
   category.php navenant verder door naar rechts, anders zou het eind van de
   regels op het lichte deel van de foto vallen. */
.po90-arch .po90-ms-hero__inner{max-width:64rem}
.po90-arch .po90-ms-hero .po90-ms-lead{max-width:60rem}

/* Bij zoveel tekst wordt het rustiger als de regels iets minder hoog zijn dan
   de standaard introzin van een landingspagina. */
.po90-arch .po90-ms-hero .po90-ms-lead{font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.6}
.po90-arch .po90-ms-hero .po90-kicker{color:var(--po90-gold)!important}
.po90-arch .po90-ms-hero .po90-kicker a{color:var(--po90-gold)!important}
.po90-arch .po90-ms-hero .po90-kicker a:hover{color:#fff!important}

/* Kadence geeft de pagina van zichzelf een blauwwitte achtergrond. Hier het
   gebroken wit uit de huisstijl, zodat de kaarten er niet koel bij staan. */
.po90-arch{background:var(--po90-white)}

/* Aantal verhalen, staat onder de omschrijving. */
.po90-arch__telling{margin:0 0 1.2rem;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bfbfbf}

/* De terugknop tussen de subrubrieken krijgt de goudkleur, zodat hij niet
   met de subrubrieken zelf wordt verward. */
.po90-ms-chip--terug{border-color:var(--po90-gold);color:var(--po90-gold)!important}
.po90-ms-chip--terug:hover{background:var(--po90-gold);border-color:var(--po90-gold);color:#111!important}

/* Paginering onder het raster. */
.po90-arch .navigation{margin-top:3rem}
.po90-arch .nav-links{display:flex;flex-wrap:wrap;gap:.4rem}
.po90-arch .page-numbers{display:inline-block;padding:.55rem .9rem;background:#fff;border-bottom:3px solid var(--po90-red);font-weight:800;text-decoration:none;color:var(--po90-black)}
.po90-arch .page-numbers:hover{background:var(--po90-red);color:#fff}
.po90-arch .page-numbers.current{background:var(--po90-black);color:#fff}
.po90-arch .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.po90-arch__terug{margin:1.5rem 0 0}

/* ==========================================================================
   Fotopagina (template-fotopagina.php)
   ========================================================================== */

/* Dit blok verving het oude "Fotoverhaal"-blok. Waarom opnieuw:

   - De oude regels zetten de breedte op de losse <img> met een negatieve marge.
     WordPress en Kadence laten de <figure> eromheen echter krimpen tot de foto
     zelf, en dan valt die truc stil: de foto bleef op tekstbreedte staan.
   - Het nummer zat in het bijschrift, dus zonder bijschrift geen nummer.
   - Alles ging met !important naar volle breedte, waardoor links/rechts
     uitlijnen onmogelijk was.

   Nu wordt de breedte op de <figure> gezet en erven de foto en het bijschrift
   die gewoon over. Het nummer staat als gouden blokje op de foto.

   De klassen heten po90-fp-. Die naam is nieuw, dus oude regels die nog in
   Weergave > Customizer > Extra CSS staan kunnen er niet meer overheen.

   PO90-FOTOPAGINA-V4 — markering om te controleren of de juiste versie op de
   server staat: zoek hierop in style.css via de browser. */

/* De maatvoering van de foto's. Dit zijn de knoppen die je normaal aanraakt:

   --po90-fp-breed    hoe breed een gewone foto maximaal wordt. Dit is de
                      standaardmaat. Groter mag altijd nog per foto met de knop
                      "Breed" of "Volledige breedte" in de editor.
   --po90-fp-hoog     hoogtegrens. Zonder deze wordt een staande foto op volle
                      breedte hoger dan het scherm. 78vh = ruim driekwart van de
                      schermhoogte. De foto krimpt dan evenredig mee, hij wordt
                      niet bijgesneden.
   --po90-fp-inzet    breedte van een foto die je links of rechts uitlijnt.
   --po90-fp-uitsteek hoe ver zo'n inzet de kantlijn in steekt, naast de
                      tekstkolom. Op 0 blijft hij binnen de tekst.
   --po90-fp-gat      ruimte tussen de inzet en de tekst ernaast. */
:root{--po90-fp-breed:56rem;--po90-fp-hoog:78vh;--po90-fp-inzet:24rem;--po90-fp-uitsteek:8rem;--po90-fp-gat:2.2rem}

/* Voorkomt een horizontale schuifbalk door een foto op volledige breedte. */
.po90-fp{overflow-x:clip}

/* Kop. Hoger dan bij een gewoon verhaal, het verloop wordt pas onderin donker. */
/* Hoogte van de kop. --po90-fp-kop is de knop: hoger of lager zetten en de rest
   schuift mee. Stond op clamp(26rem,74vh,42rem) en vulde daarmee bijna het hele
   eerste scherm; nu ongeveer 45%, zodat de eerste foto's meteen in beeld komen. */
:root{--po90-fp-kop:clamp(19rem,46vh,28rem)}
.po90-fp-hero{position:relative;display:grid;align-items:end;min-height:var(--po90-fp-kop);background:#000 center/cover no-repeat;color:#fff;padding-block:clamp(2rem,4.5vw,3rem);padding-inline:max(var(--po90-gutter),(100% - var(--po90-wrap))/2 + var(--po90-gutter))}
.po90-fp-hero--plain{background-image:linear-gradient(115deg,#000 0%,#000 58%,var(--po90-red-dark) 58%,var(--po90-red-dark) 62%,#000 62%);min-height:clamp(16rem,34vh,22rem)}
.po90-fp-hero__inner{max-width:var(--po90-hero-text)}
.po90-fp-hero .po90-kicker a{color:var(--po90-gold);text-decoration:none}
.po90-fp-hero .po90-kicker a:hover{color:#fff}
.po90-fp-title{font-size:clamp(1.9rem,3.9vw,3rem);line-height:1;margin:.2em 0 .25em;color:#fff;text-transform:uppercase;text-wrap:balance}
.po90-fp-lead{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.5;color:#e6e6e6;margin:0 0 1rem;max-width:38rem}
.po90-fp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.1rem;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cfcfcf}
.po90-fp-meta>span{display:flex;align-items:center;gap:.5rem}
.po90-fp-meta>span+span::before{content:"";width:6px;height:6px;background:var(--po90-red);display:inline-block;margin-right:.6rem}

/* Tekstkolom. Blijft op leesbreedte; de foto's lopen erbuiten.
   De ::after ruimt de zwevende inzetten op, zodat het deelblok eronder niet
   naast een foto belandt. */
.po90-fp-layout{padding-block:clamp(2.5rem,5vw,4rem)}
.po90-fp-body{max-width:var(--po90-read);margin-inline:auto;font-size:1.14rem;line-height:1.72;color:#1a1a1a;counter-reset:po90fp}
.po90-fp-body::after{content:"";display:block;clear:both}
/* Kadence kleurt bodytekst mee met zijn eigen palet; hier PO90-zwart. */
.po90-fp-body p,.po90-fp-body li,.po90-fp-body dd{color:#1a1a1a}
.po90-fp-body strong,.po90-fp-body b{color:#000;font-weight:800}
.po90-fp-body p{margin:0 0 1.05em;text-wrap:pretty}
.po90-fp-body>p:first-of-type{font-size:1.24rem;line-height:1.55;color:#2a2a2a;padding-left:1.15rem;border-left:4px solid var(--po90-red)}
.po90-fp-body h2{font-size:clamp(1.6rem,3vw,2.3rem);text-transform:uppercase;line-height:1.1;color:var(--po90-black);text-wrap:balance;margin:2.2em 0 .6em;padding-top:1.1rem;border-top:4px solid var(--po90-red);display:table;clear:both}
.po90-fp-body h3{font-size:1.35rem;margin:1.9em 0 .5em;color:var(--po90-black);text-wrap:balance}
.po90-fp-body a{color:var(--po90-red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.po90-fp-body a:hover{background:var(--po90-red);color:#fff;text-decoration:none}
.po90-fp-body ul,.po90-fp-body ol{margin:0 0 1.35em;padding-left:1.3em}
.po90-fp-body li{margin-bottom:.5em}
.po90-fp-body ul{list-style:none;padding-left:0}
.po90-fp-body ul li{position:relative;padding-left:1.4em}
.po90-fp-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--po90-red)}
.po90-fp-body blockquote{margin:2em 0;padding:.2em 0 .2em 1.5rem;border-left:5px solid var(--po90-gold);font-size:1.3rem;line-height:1.45;font-style:italic;color:var(--po90-charcoal);clear:both}
.po90-fp-body hr,.po90-fp-body .wp-block-separator{border:0;height:4px;background:var(--po90-red);width:70px;margin:2.6em 0;clear:both}
.po90-fp-pages{margin:2rem 0;font-weight:800;clear:both}

/* --- Foto's ------------------------------------------------------------- */

/* Standaard: een rustige maat, wat breder dan de tekstkolom maar niet zo breed
   als de site. Groter kan altijd per foto met de knop "Breed" of "Volledige
   breedte" in de blokwerkbalk; zie de regels verderop.

   width:max-content met een max-width betekent: zo breed als de foto zelf,
   maar nooit breder dan --po90-fp-breed. Een kleine foto wordt dus niet meer
   uitgerekt tot hij korrelig is, en de zwarte bijschriftbalk blijft precies zo
   breed als de foto. (max-content en niet fit-content: fit-content zou de
   margin-left van 50% hieronder van de beschikbare ruimte aftrekken en elke
   foto halveren.) Direct-kind (>) zodat een foto binnen een citaat of kolom
   met rust gelaten wordt. */
.po90-fp-body>figure,
.po90-fp-body>.wp-block-image,
.po90-fp-body>.wp-block-kadence-image{display:block;position:relative;clear:both;box-sizing:border-box;width:max-content;max-width:min(var(--po90-fp-breed),calc(100vw - 2*var(--po90-gutter)));margin:2.8rem 0 2.8rem 50%;transform:translateX(-50%);padding:0}

/* Zet een blok een extra laagje om de figure heen, dan vult die binnenste
   figure simpelweg de wikkel. Anders zou de breedte twee keer worden toegepast. */
.po90-fp-body>*>figure{width:max-content;max-width:100%;margin:0;padding:0;transform:none;float:none}

/* Nummer als gouden blokje op de foto. Staat op elke figure, dus ook op een
   foto zonder bijschrift. Niet gewenst bij een specifieke foto? Zet daar de
   extra CSS-klasse po90-geen-nummer op. */
.po90-fp-body figure{position:relative;counter-increment:po90fp}
.po90-fp-body figure::before{content:counter(po90fp,decimal-leading-zero);position:absolute;top:0;left:0;z-index:2;padding:.35rem .7rem;background:var(--po90-gold);color:#111;font-size:.82rem;font-weight:900;font-style:normal;letter-spacing:.12em;line-height:1.2}
.po90-fp-body figure.po90-geen-nummer{counter-increment:none}
.po90-fp-body figure.po90-geen-nummer::before{content:none}
/* Een ingesloten video of tabel is geen foto en krijgt dus geen nummer. */
.po90-fp-body figure.wp-block-embed,
.po90-fp-body figure.wp-block-table{counter-increment:none}
.po90-fp-body figure.wp-block-embed::before,
.po90-fp-body figure.wp-block-table::before{content:none}

/* De foto zelf. max-height is de rem op staande foto's: zonder die regel wordt
   een portretfoto op volle breedte anderhalf beeldscherm hoog. De foto krimpt
   evenredig mee (geen bijsnijden), en omdat de figure max-content is krimpt de
   bijschriftbalk netjes mee. */
.po90-fp-body figure img{display:block;width:auto;max-width:100%;max-height:var(--po90-fp-hoog);height:auto;margin:0}

/* Bijschrift: zwarte balk tegen de onderkant van de foto, even breed als de foto.
   De !important staat er omdat WordPress en Kadence hun eigen opmaak voor
   .wp-element-caption ná het childtheme laden; zonder deze blijft het bijschrift
   gecentreerd en grijs. Alleen hier gebruiken, niet als gewoonte.

   width:0 met min-width:100% ziet er vreemd uit maar is nodig: de figure meet
   zich naar de foto (fit-content), en zonder deze truc zou een lange
   bijschriftregel de figure alsnog tot de maximale breedte oprekken. */
.po90-fp-body figcaption{display:block!important;box-sizing:border-box;width:0!important;min-width:100%!important;max-width:none!important;margin:0!important;padding:.85rem 1.1rem!important;background:var(--po90-black)!important;color:#dcdcdc!important;font-size:.9rem!important;font-style:normal!important;line-height:1.5;border-left:5px solid var(--po90-red);text-align:left!important}

/* Inzet links of rechts, met de tekst ernaast. In de editor: selecteer de foto
   en kies in de blokwerkbalk "Links uitlijnen" of "Rechts uitlijnen". */
.po90-fp-body>figure.alignleft,
.po90-fp-body>figure.alignright,
.po90-fp-body>.alignleft,
.po90-fp-body>.alignright{width:var(--po90-fp-inzet);max-width:none;transform:none;margin-block:.5rem 1.6rem;
/* clear:both zodat een tweede inzet altijd ónder de vorige begint. Zonder dit
   kan een inzet links en een inzet rechts naast elkaar komen te staan en wordt
   de tekst ertussen een veel te smalle kolom. */
clear:both}
.po90-fp-body>figure.alignleft,
.po90-fp-body>.alignleft{float:left;margin-left:calc(-1*var(--po90-fp-uitsteek));margin-right:var(--po90-fp-gat)}
.po90-fp-body>figure.alignright,
.po90-fp-body>.alignright{float:right;margin-right:calc(-1*var(--po90-fp-uitsteek));margin-left:var(--po90-fp-gat)}
/* Een inzet heeft een vaste breedte, dus daar vult de foto de kolom wel op. */
.po90-fp-body>figure.alignleft img,
.po90-fp-body>figure.alignright img,
.po90-fp-body>.alignleft img,
.po90-fp-body>.alignright img{width:100%;max-height:none}

/* "Breed" (alignwide): tot aan de sitebreedte. Gebruik dit voor de foto's die
   het verhaal dragen, niet voor alle. */
.po90-fp-body>.alignwide{max-width:min(calc(var(--po90-wrap) - 2*var(--po90-gutter)),calc(100vw - 2*var(--po90-gutter)))}

/* "Volledige breedte" (alignfull): van schermrand tot schermrand. Hier geen
   hoogtegrens, dat is nou juist de bedoeling van deze knop. */
.po90-fp-body>.alignfull{width:100vw;max-width:none;margin-left:50%;transform:translateX(-50%)}
.po90-fp-body>.alignfull img{width:100%;max-height:none}

/* Wedstrijdgegevens. Zet deze klasse op een alinea via
   Blok > Geavanceerd > Extra CSS-klasse(n): po90-wedstrijd */
.po90-fp-body .po90-wedstrijd{margin:2.2rem 0;padding:1.1rem 1.3rem;background:var(--po90-black);color:#fff;border-left:5px solid var(--po90-gold);font-size:.95rem;font-weight:800;letter-spacing:.04em;line-height:1.6;text-transform:uppercase;clear:both}

/* Vanaf hier is er naast de tekstkolom te weinig ruimte om de kantlijn in te
   steken. De inzet blijft binnen de tekst en wordt wat smaller. */
@media(max-width:1100px){
:root{--po90-fp-uitsteek:0rem;--po90-fp-inzet:18rem}
}

/* Op een telefoon staat alles onder elkaar op volle breedte. De hoogtegrens mag
   daar ruimer: een staande foto is op een telefoon juist het natuurlijke formaat. */
@media(max-width:850px){
:root{--po90-fp-hoog:92vh;--po90-fp-kop:clamp(15rem,42vh,21rem)}
.po90-fp-body>figure,
.po90-fp-body>.wp-block-image,
.po90-fp-body>.wp-block-kadence-image,
.po90-fp-body>.alignfull{width:100%;max-width:100%;margin:2rem 0;transform:none}
.po90-fp-body>figure.alignleft,
.po90-fp-body>figure.alignright,
.po90-fp-body>.alignleft,
.po90-fp-body>.alignright{float:none;width:100%;margin-inline:0}
}