/*
 * GTGF layoutfase L2 — Trainingsplanner, sessiekaarten pletten tot een onleesbare, ~26 px
 * brede tekstkolom op mobiele breedte (/training-planner/, is_page('training-planner')).
 *
 * Dit is GEEN contrastbug (geen kleurprobleem) maar een cascade-opmaakbug, in dezelfde
 * familie als layoutfase L1 (weekkop-overlap): een eerdere, correct bedoelde fix van het
 * thema zelf wordt door een regel met hogere specificiteit overschreven en komt daardoor
 * nooit tot uitvoering.
 *
 * Waar: op elke dag met twee of meer trainingen ("dubbele dag" — heel gewoon bij
 * triatlon-/meerdaagse-discipline-plannen), op mobiele breedte. Gevonden tijdens het
 * doorlopen van een Triathlon/Middenafstand-70.3-intake met volledige "Meer
 * personalisatie" (FTP, CSS-tempo, hardloop-/fiets-/zwembasisgegevens) op 375 px breedte.
 *
 * Root cause: het thema heeft zelf al een correcte mobiele fix voor #planner-results
 * .planner-week > .planner-day.is-day-active .planner-session, in
 * quality-training-result-v164000.css:
 *
 *   @media (max-width: 760px) {
 *     body.gtgf-v14.gtgf-vs2.gtgf-v1640.gtgf-v1640-training #planner-results
 *     .planner-week>.planner-day.is-day-active .planner-session {
 *       display: block !important;
 *       padding: 17px !important;
 *     }
 *   }
 *
 * Maar deze regel (specificiteit: 1 ID + 8 klassen + 1 elementnaam) wordt op ELKE
 * breedte overschreven door een regel uit het v19-ontwerpsysteem (geleverd in een eerdere
 * fase van dit traject, Fase 1: Ontwerptokens, en al live op gtgf.nl), in
 * assets/css/v19/pages-planner.css:
 *
 *   :root:root:root:root:root:root:root:root body.gt-pages-training
 *   #main-content:not(#a):not(#b):not(#c):not(#d) .planner-session {
 *     display: grid !important;
 *     ...
 *   }
 *
 * Deze regel heeft GEEN mediaquery-beperking (geldt dus ook onder 760 px) en een hogere
 * specificiteit (5 ID-equivalenten: 1 echte #main-content-ID + 4 :not(#fake)-ID's, tegen
 * 1 echte ID bij de theme-eigen mobiele regel) — dus wint de v19-regel de
 * "display"-eigenschap op elke breedte, ook onder 760 px waar het thema juist naar
 * display:block wilde schakelen. Het grid blijft daardoor actief op mobiel, met
 * grid-template-columns: minmax(0,1fr) minmax(170px,220px) uit de eigen basisregel van
 * quality-training-result-v164000.css (zonder mediaquery, regel ~410). Bij een smal
 * scherm claimt de vaste minmax(170px,220px)-kolom (voor de datum/duur-metadata) het
 * grootste deel van de beschikbare breedte, waardoor de "flexibele" minmax(0,1fr)-kolom
 * (met de hele sessie-inhoud: volgordelabel, titel, meta, tags, beschrijving) tot een
 * paar tientallen pixels breed wordt geperst. De tekst daarin wordt niet afgekapt, dus
 * wrapt karakter voor karakter naar een extreem hoge, onleesbare verticale kolom.
 *
 * Dit is dezelfde soort specificiteitsbotsing als layoutfase L1: een eigen, juiste
 * mobiele fix van het thema die stilzwijgend wordt overschreven door een eerder in dít
 * traject geleverde, universeel geldende v19-regel. Zodra display:block weer wint, is
 * grid-template-columns niet meer van toepassing (display:block negeert
 * grid-template-columns) en verdwijnt de samenpers-fout vanzelf mee — er is dus maar één
 * onderliggende oorzaak en één fix nodig.
 *
 * Fix: exact dezelfde selector-reikwijdte als de theme-eigen, geblokkeerde mobiele regel
 * (#planner-results .planner-week > .planner-day.is-day-active .planner-session), binnen
 * dezelfde @media (max-width: 760px)-grens, maar met genoeg extra, altijd-ware
 * specificiteit (acht keer :not(#nooit-bestaand-id) op de echte #planner-results-ID) om
 * gegarandeerd boven de 5 ID-equivalenten van de v19-regel uit te komen — dus 9 in totaal
 * tegen hun 5, ongeacht laadvolgorde. Zelfde bewezen, veilige patroon als de gecorrigeerde
 * layoutfase L1-fix: "html" als gewoon beginpunt van de selectorketen (matcht via de
 * tag-naam), NOOIT een ":root"-keten gevolgd door "html" als aparte selectorschakel (zie
 * L1-NOTITIE.md voor waarom die vorm wiskundig nooit kan matchen).
 *
 * .planner-session__controls (de knoppenrij onderin de kaart) heeft een eigen, vergelijk-
 * bare v19-regel, maar díe zet "display: flex" zonder !important, terwijl de theme-eigen
 * mobiele regel voor .planner-session__controls wél !important gebruikt — !important wint
 * altijd van specificiteit, dus die deelregel werkte al correct en is hier niet opnieuw
 * aangepakt (buiten scope van deze specifieke botsing).
 *
 * Geverifieerd met een headless-Chromium-test (Playwright), buiten WordPress om: een
 * minimale pagina met de echte klassenstructuur, waarin zowel de echte v19-regel als de
 * echte theme-eigen mobiele regel zijn geladen (letterlijk gekopieerd uit de meegeleverde
 * bestanden), op 375 px breedte. Vóór deze fix: display blijft "grid" (de bug, bevestigd).
 * Na deze fix: display wordt "block", in beide laadvolgordes getest (dus niet afhankelijk
 * van toeval qua bestandsvolgorde). Zie L2-NOTITIE.md voor de volledige metingen.
 *
 * LET OP — verschil met eerdere fixes in dit traject: door een tijdelijke onderbreking in
 * de verbinding met een live testbrowser tijdens dit werk, is deze specifieke fix ALLEEN
 * met de headless-Chromium-methode hierboven geverifieerd, niet aanvullend met een
 * visuele screenshot-vergelijking op de echte site (zoals bij eerdere fixes wel gebeurde).
 * De headless-test meet exact dezelfde CSS-regels als op de site staan, dus dit is geen
 * gok — maar zie L2-NOTITIE.md voor de volledige transparantie hierover.
 *
 * Alleen geladen op /training-planner/ (is_page('training-planner')).
 *
 * Uitzetten: define( 'GTGF_LAYOUTFASE_L2', false ); in wp-config.php.
 */

@media (max-width: 760px) {
  html body.gtgf-v14 #planner-results:not(#gtgf-l2-a):not(#gtgf-l2-b):not(#gtgf-l2-c):not(#gtgf-l2-d):not(#gtgf-l2-e):not(#gtgf-l2-f):not(#gtgf-l2-g):not(#gtgf-l2-h) .planner-week > .planner-day.is-day-active .planner-session {
    display: block !important;
    padding: 17px !important;
  }
}