/* =====================================================================
   Eventpagina's (2026-11-06): try-out day en Summer Day, één sjabloon. Bovenop /paginas.css, /pagina-systeem.css, /sjabloon.css en /blokken.css.
   Volgorde: desktop per blok, dan gsm (≤767px).
   ===================================================================== */
/* ---------- waarom / wachtlijst: kop links (eyebrow, titel, smalle tekst), rechts de lijst of het formulier ---------- */
.ev-w{display:grid;grid-template-columns:4fr 8fr;column-gap:4vw;align-items:start}
.ev-w .ev-w__p{margin-top:var(--s-groep);max-width:29vw;text-align:left;text-wrap:pretty}
.ev-w__l{padding-top:.3vw}
.ev-why .bs__l{margin-top:0}
/* ---------- prijs: één formule, de tekst in de kaart begint op de hoogte van de lijst ---------- */
.ev-pr .pr__top{display:block}
.ev-pr .pr__top .txt{max-width:29vw;text-align:left}
@media (min-width:1025px){.ev-pr .pr__top .txt{white-space:nowrap}}
.ev-pr .pz__pr{min-width:9vw}
/* Summer Day: What's included compacter, de lijst krijgt de breedte zodat elke rij op één regel past */
@media (min-width:768px){
  [data-pg="summer"] .ev-pr .pz{margin-top:4vw;padding:2.6vw 2.4vw 2.2vw}
  [data-pg="summer"] .ev-pr .pz__room{padding-top:0}
  [data-pg="summer"] .ev-pr .pz__grid{grid-template-columns:8fr 4fr;column-gap:3vw}
  [data-pg="summer"] .ev-pr .pz__ch{padding-left:3vw}
  [data-pg="summer"] .ev-pr .pz__inc{padding-top:0;justify-content:flex-start}
  [data-pg="summer"] .ev-pr .pz__inc .vk-rows li{padding:.7vw 0}
  [data-pg="summer"] .ev-pr .pz__inc .vk-rows li:first-child{padding-top:0}
  [data-pg="summer"] .ev-pr .pz__inc .vk-rows li:last-child{padding-bottom:0}
  [data-pg="summer"] .ev-pr .pz__rooms{margin-top:1.4vw}
}
/* ---------- praktisch: Obviously gespreid, kaarten eronder ---------- */
.ev-pk .vk-grid{margin-top:7vw}
/* ---------- Summer Day: waarom met vinkjes, ook op desktop ---------- */
@media (min-width:768px){
  [data-pg="summer"] .ev-why .bs__l > li{display:grid;grid-template-columns:2.8vw minmax(0,1fr);align-items:baseline}
  [data-pg="summer"] .ev-why .bs__ico{display:block}
  [data-pg="summer"] .ev-why .bs__ico .vk-ico{width:1.2vw;height:1.2vw;position:relative;top:0;stroke-width:1.6}
}
/* ---------- Summer Day: "Zo voelde 2026": kop links, link rechts, de film eronder ---------- */
.ev-fk{display:flex;justify-content:space-between;align-items:baseline;gap:4vw}
.ev-fk .stm{white-space:nowrap}
/* ---------- wachtlijst: titel links, rechts één zin en het formulier op één regel ---------- */
.ev-wl__g{display:grid;grid-template-columns:4fr 8fr;column-gap:4vw;align-items:end}
.ev-f{margin-top:var(--s-groep)}
.ev-f__rij{display:flex;align-items:center;gap:2vw}
.ev-f input{flex:1 1 auto;min-width:0;padding:.6vw 0;background:transparent;border:0;border-bottom:1px solid var(--ln,currentColor);border-radius:0;color:inherit;font-family:var(--f-licht);font-weight:300;font-size:var(--t-lijst);line-height:1.3}
.ev-f input::placeholder{color:inherit;opacity:1}
.ev-f input:focus{outline:none;border-bottom-color:var(--brand-blue)}
.ev-f button{flex:none;cursor:pointer;border:0;white-space:nowrap}
.ev-f__err,.ev-f__fine{margin-top:1.2vw}
.ev-f__err[hidden],.ev-f__ty[hidden],.ev-f[hidden]{display:none !important}
.ev-f__fine a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* =====================================================================
   gsm (≤767px)
   ===================================================================== */
@media (max-width:767px){
  /* hero: de twee knoppen op één regel, de kaart met de titel op één regel (zoals Club) */
  .md .evh .hr__b{flex-wrap:nowrap;justify-content:flex-start;gap:2.4vw}
  html:not(#a) body:not(#z) .md .evh .hr__b > a{flex:none;padding-left:3vw;padding-right:3vw;white-space:nowrap}
  .md .evh .cz__k{padding:8vw 5vw 6vw}
  .md .evh .cz__k .lst{font-size:5.75vw;letter-spacing:-.015em;white-space:nowrap}
  .md .evh .cz__k .bdy{margin-top:3vw}
  .ev-w{display:block}
  .ev-w .ev-w__p{max-width:none;margin-top:var(--r2);text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
  .ev-w__l{margin-top:var(--r3);padding-top:0}
  .ev-pr .pr__top .txt{max-width:none}
  .ev-fk{display:block}
  .ev-fk .tp__lnk{display:inline-block;margin-top:var(--r2)}
  .ev-wl__g{display:block}
  .ev-wl__r{margin-top:var(--r3)}
  .ev-f{margin-top:var(--r2)}
  .ev-f__rij{display:block}
  .ev-f input{display:block;width:100%;font-size:5vw;padding:2vw 0}
  .ev-f button{margin-top:6vw}
  .ev-f__err,.ev-f__fine{margin-top:4vw}
}

/* eventvideo's zijn stille snippets: geen geluidsknop (Laura 2026-11-06) */
:is([data-pg="tryout"],[data-pg="summer"]) .rv__snd{display:none}

/* try-out (Laura 2026-11-06): vinkjes ook op desktop, lijnen tot de rechterrand van het raster */
@media (min-width:768px){
  [data-pg="tryout"] .ev-why .bs__lijst{width:auto}
  [data-pg="tryout"] .ev-why .bs__l > li{display:grid;grid-template-columns:2.8vw minmax(0,1fr);align-items:baseline}
  [data-pg="tryout"] .ev-why .bs__ico{display:block}
  [data-pg="tryout"] .ev-why .bs__ico .vk-ico{width:1.2vw;height:1.2vw;position:relative;top:0;stroke-width:1.6}
}
/* try-out, uitlijning (Laura 2026-11-06): lijst loopt van eyebrow tot onderkant bodytekst; prijskaart: lijst van "Jouw try-out" tot onderkant knop; titel naar kaart = titel naar foto */
@media (min-width:1025px){
  [data-pg="tryout"] .ev-why .ev-w__l{padding-top:0}
  [data-pg="tryout"] .ev-why .bs__l > li{padding:1.85vw 0 2.05vw}
  [data-pg="tryout"] .ev-why .bs__l > li:first-child{padding-top:0}
  [data-pg="tryout"] .ev-why .bs__l > li:last-child{padding-bottom:0}
  [data-pg="tryout"] .ev-pr .pz{margin-top:5vw}
  [data-pg="tryout"] .ev-pr .pz__inc{padding-top:0;justify-content:flex-start}
  [data-pg="tryout"] .ev-pr .pz__inc .vk-rows li{padding:1.17vw 0}
  [data-pg="tryout"] .ev-pr .pz__inc .vk-rows li:first-child{padding-top:0}
  [data-pg="tryout"] .ev-pr .pz__inc .vk-rows li:last-child{padding-bottom:0}
}
@media (max-width:767px){[data-pg="tryout"] .ev-pr .pz__inc .vk-rows li:last-child{padding-bottom:0}}
