/* Ronde 14: finetunen, geen redesign. Geladen als laatste op alle pagina's; eerdere r-bestanden blijven ongewijzigd.
   Wat dit bestand doet (gemeten in audit/r14-*.mjs, zie RESULT-edc-14.md):
   1. beweging: drie tijden (fast/base/slow) en één easing
   2. staten: hover, active en focus op alles wat klikbaar is
   3. raakvlakken >= 44px op mobiel
   4. ritme: gelijke ruimte tussen hero en eerste sectie, gelijke rasterafstanden
   5. typografie: geen losse woorden, geen tekst onder 14px, bijschriften over beeld met eigen donkere ondergrond
   6. consistentie: evenementrij, kleine knoppen, chips en kaarten op elke pagina gelijk */

/* ------------------------------------------------------------------ 1. BEWEGING */
:root{--t-fast:.16s;--t-base:.28s;--t-slow:.52s;--tap:44px;--sp-1:8px;--sp-2:12px;--sp-3:16px;--sp-4:24px}
.btn{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.ddbtn svg,.vtile .play,.tog::after,.pw-btn{transition:transform var(--t-fast) var(--ease)}
.ed{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),filter var(--t-fast) var(--ease)}
.ev{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.album .slot,.p5-disc,.pw-tog svg{transition:transform var(--t-base) var(--ease)}
.chip4{transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sector{transition:transform var(--t-base) var(--ease),filter var(--t-base) var(--ease)}
.sector .shape{transition:fill var(--t-base) var(--ease)}
.vt{transition:filter var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.pw-panel{transition:height var(--t-base) var(--ease),visibility 0s var(--t-base)}
.pw[data-open] .pw-panel{transition:height var(--t-base) var(--ease),visibility 0s}
.stag>.sg{transition:clip-path var(--t-slow) var(--ease)}
.hv-video{transition:opacity var(--t-slow) var(--ease)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------------------ 2. STATEN */
/* hover: één taal per soort; kleur- of onderstreepwissel voor links, lichte lift voor knoppen, helderheid voor kaarten */
.logo{transition:transform var(--t-fast) var(--ease)}
.logo:hover{transform:rotate(-4deg) scale(1.04)}
.lang a{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lang a:hover:not([aria-current]){background:rgba(234,223,247,.18);color:var(--ma-white)}
.ddbtn{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ddbtn:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(255,206,0,.65)}
.fchip{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.fchip:hover{border-color:var(--ma-yellow);background:rgba(255,206,0,.14)}
.fchip[aria-pressed=true]:hover,.fchip[aria-selected=true]:hover{background:var(--ma-yellow);color:var(--ma-ink)}
.btn-tertiary{transition:text-decoration-color var(--t-fast) var(--ease),text-underline-offset var(--t-fast) var(--ease)}
.btn-tertiary:hover{text-decoration-color:var(--ma-white);text-underline-offset:9px}
.legal a,.ftr a,.mails a,.crumb a,.langnote a{transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
.legal a:hover,.mails a:hover,.crumb a:hover,.langnote a:hover{color:var(--ma-white);text-decoration:underline;text-decoration-color:var(--ma-yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.ftr .soc a:hover,.ftr ul a:hover{color:var(--ma-white)}
.ev:hover .stretch,.ed:hover h3,.album:hover h3{color:var(--ma-white)}
.cb-more:hover{color:var(--ma-white)}
/* active: knoppen en chips zakken 1px, kaarten worden iets donkerder; de kaartrotatie blijft staan */
a.btn:active,button.btn:active,.ddbtn:active,.fchip:active,.pill:active,.chip4:active,.cchip:active,.lang a:active,.pw-btn:active,.pw-link:active,.pw-back:active,.burger:active,.cb-x:active,.cb-more:active{transform:translateY(1px)}
.ed:active,.ev:active,.album:active,.vt:active,.cty:active,.vtile:active{filter:brightness(.92)}
.btn-secondary:active{background:rgba(255,255,255,.18)}
.logo:active{transform:scale(.97)}
/* focus: één zichtbare rand overal (3px, merkroze, 2px afstand); op roze of gele vlakken wit met roze schaduw */
:focus-visible{outline:3px solid var(--ma-magenta);outline-offset:3px}
.btn:focus-visible,.ddbtn:focus-visible,.fchip:focus-visible,.pill:focus-visible,.lang a:focus-visible{outline-color:var(--ma-white);box-shadow:0 0 0 6px var(--ma-magenta)}
.lang a:focus-visible{outline-offset:-3px;box-shadow:none}
.sector:focus-visible{outline:none}
.hdr :focus-visible,.menu :focus-visible,.ftr :focus-visible{outline-offset:3px}

/* ------------------------------------------------------------------ 3. RAAKVLAKKEN (>= 44px op mobiel) */
.lang a{min-height:var(--tap);min-width:var(--tap);justify-content:center}
.lang{border-width:2px}
.cb-more{min-height:var(--tap)}
@media(max-width:800px){
 .cchip{min-height:var(--tap)}
 .legal{gap:0 24px}
 .legal a,.ftr li a,.ftr .soc a,.mails a,.crumb a,.langnote a{display:inline-flex;align-items:center;min-height:var(--tap)}
 .ftr ul{gap:0}
 .ftr .soc a{display:flex}
 .btn-sm,.subnav .btn{min-height:48px}
 .subnav a{min-height:var(--tap);display:inline-flex;align-items:center;padding-block:0}
 .pw-link,.pw-back{min-height:var(--tap);display:inline-flex;align-items:center}
}

/* ------------------------------------------------------------------ 4. RITME */
/* hero -> eerste sectie op de lijstpagina's en event.html: dezelfde ruimte (was 80 en 176). Secties met een eigen achtergrondband en pagina's met een wax-scheiding (boeken, edition) houden hun eigen opvulling */
.page-hero,.ed-hero{padding-block:clamp(36px,6vw,80px) clamp(28px,4vw,56px)}
.page-hero+.sec:not([class*=band]),.page-hero+section:not([class*=band]){padding-top:clamp(24px,3.5vw,48px)!important} /* !important: events, cities en fotos hebben 24px inline */
/* rasters: één schaal 8 / 12 / 16 / 24 */
.cards,.rooms,.travel{gap:var(--sp-4)}
.ev-list{gap:var(--sp-3)}
.cty .ev-list{gap:var(--sp-2)}
.chips,.fchips{gap:var(--sp-1)}

/* ------------------------------------------------------------------ 5. TYPOGRAFIE */
p,li,dd,figcaption,.lead,.small{text-wrap:pretty}
h1,h2,h3,.meta,.ev-main h3,.ed h3{text-wrap:balance}
/* niets onder 14px */
.xp-f figcaption{font-size:.875rem;letter-spacing:.06em;line-height:1.3;max-width:calc(100% - 24px);left:12px;bottom:12px}
.h6-eye span{font-size:.875rem}
.h6-go-s{font-size:1rem;opacity:1}
.pw-now i{font-size:.875rem}
.p5-bar{font-size:.875rem}
.p5-sub{font-weight:500}
.wph figcaption{font-size:1.0625rem;line-height:1.5;padding-top:44px;background:linear-gradient(0deg,rgba(21,10,34,.96) 0,rgba(21,10,34,.82) 55%,rgba(21,10,34,0))}
.vt-cap{background:linear-gradient(0deg,rgba(21,10,34,.94) 0,rgba(21,10,34,.78) 62%,rgba(21,10,34,0));padding-top:36px}
.vt-cap i{font-size:.9375rem;line-height:1.35;color:var(--ma-white);font-weight:600}
.vt-cap b{overflow-wrap:anywhere;hyphens:auto;max-width:100%}
.vt-cap i{text-wrap:balance}
.vt-cc,.cc-badge{background:var(--ct,var(--c))}
.small.muted,.langnote,.chip4 i{font-weight:500}

/* ------------------------------------------------------------------ 6. CONSISTENTIE */
/* evenementrij: chip en knop op dezelfde as, elke rij even hoog, op elke pagina.
   Rijen zonder cover (event.html) kregen sinds ronde 13 toch het raster met coverkolom: terug naar het raster zonder die kolom */
.ev:not(:has(.ev-cover)){grid-template-columns:104px minmax(0,1fr) auto auto}
@media(max-width:800px){.ev:not(:has(.ev-cover)){grid-template-columns:84px minmax(0,1fr)}}
.ev{align-items:center}
.ev .chip{align-self:center}
.ev-cta{align-self:center}
/* kleine knop is overal 48px hoog met dezelfde opvulling (was 44, 48 en 56) */
.btn-sm,.subnav .btn{min-height:48px;padding:0 20px}
/* kaarten en rijen zijn "revealed" (.rev.in zet transform op none en won van de hover); herstel de bedoelde staat, overal gelijk */
.ev.rev.in:hover{transform:translateX(6px);transition-duration:var(--t-fast)}
main:not(:has(.e4)) .ed.rev.in:nth-child(odd){transform:rotate(-.8deg)}
main:not(:has(.e4)) .ed.rev.in:nth-child(even){transform:rotate(.8deg)}
main:not(:has(.e4)) .ed.rev.in:hover{transform:rotate(0) translateY(-4px);transition-duration:var(--t-fast)}
@media(prefers-reduced-motion:reduce){.ev.rev.in:hover{transform:none}main:not(:has(.e4)) .ed.rev.in:nth-child(odd):hover{transform:rotate(-.8deg)}main:not(:has(.e4)) .ed.rev.in:nth-child(even):hover{transform:rotate(.8deg)}}

/* ------------------------------------------------------------------ 7. DISTILL / POLISH (Impeccable) */
/* het tekenglyph ✺ (lint en bijschriften) hangt van het systeemlettertype af (soms emoji-achtig): vervangen door een getekende 8-puntster in dezelfde kleur */
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.0 0.5L14.0 7.2L20.1 3.9L16.8 10.0L23.5 12.0L16.8 14.0L20.1 20.1L14.0 16.8L12.0 23.5L10.0 16.8L3.9 20.1L7.2 14.0L0.5 12.0L7.2 10.0L3.9 3.9L10.0 7.2z'/%3E%3C/svg%3E")}
.ribbon-track span::after,.xp-st b::after{content:"";display:inline-block;width:.8em;height:.8em;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.ribbon-track span::after{color:var(--ma-magenta);vertical-align:-.04em}
.xp-st b::after{color:var(--ma-magenta);vertical-align:-.02em}
/* niets beweegt zonder reden: de pulserende gloed hoort bij één knop (de hoofdactie in de hero), niet bij elke primaire knop */
@media(prefers-reduced-motion:no-preference){.btn-primary{animation:none}.h6-go.btn-primary{animation:pulse 3.4s ease-in-out infinite}}

/* ------------------------------------------------------------------ 8. NA REVIEW */
/* focusrand binnen de scrollcontainer (subnav, kaartenbaan) en boven de vaste cookiebanner */
.subnav a:focus-visible,.cty:focus-visible,.rail :focus-visible{outline-offset:-4px}
html:has(.cb:not([hidden])){scroll-padding-bottom:260px}
/* hover op de laatste klikbare dingen */
.cb-btns .btn:hover{filter:brightness(1.1);box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.cb-x{transition:color var(--t-fast) var(--ease)}.cb-x:hover{color:var(--ma-yellow)}
a.cty{transition:filter var(--t-fast) var(--ease)}a.cty:hover{filter:brightness(1.12)}
.faq summary{transition:color var(--t-fast) var(--ease)}.faq summary:hover{color:var(--ma-yellow)}
/* toetsenbordgebruik: geen vertraagd scrollen, anders ziet het wiel de scroll na een Tab als nieuwe richting en toont het een ander land */
html.kb{scroll-behavior:auto}
@media(max-width:800px){.ftr .two li{margin-bottom:0}}