/* =====================================================================
   Club Ommetoer: salespage (/club-ommetoer.html) + verhalen (/club-verhalen.html).
   Enkel op die twee pagina's geladen, na /paginas.css en /pagina-systeem.css (het herbruikbare systeem).
   Hier staat enkel wat Club-eigen is.
   Volgorde: desktop per blok, dan tablet (≤1024px), dan gsm (≤767px).
   ===================================================================== */

/* ---------- 1. hero: Club-hero = de hero van het sjabloon (/sjabloon.css) ---------- */

/* ---------- 3. uitspraak op een foto: component in /pagina-systeem.css ---------- */

/* ---------- 4. resortprogramma: vijf pijlers, de kern in blauw met een gele sticker ---------- */
.md .pl .vk--blauw .vk-tag{background:var(--p-geel);color:var(--brand-brown)}
.pl img[src*="hero-yoga"]{object-position:30% 50%}
.pl .vk-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}  /* vijf even brede kaarten: een lange titel ('Get challenged') mag een kolom niet breder (en de foto hoger) maken */
.pl .pc__b .lst{white-space:nowrap;text-wrap:nowrap}
.pl .pc__b .bdy{margin-top:1.8vw}
/* bij hover: de kaart komt iets naar je toe, de foto kijkt zacht omhoog en elke sticker reageert op zijn eigen pijler */
@media (hover:hover) and (min-width:768px){
  .pl .pc__c{cursor:default;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
  .pl .pc__c:hover{transform:translateY(-.5vw)}
  .pl .pc__pic img{transition:object-position 1.6s cubic-bezier(.2,.7,.1,1)}
  .pl .pc__c:hover .pc__pic img{object-position:50% 30%}
  .pl .pc__c:hover .pc__pic img[src*="hero-yoga"]{object-position:45% 50%}
  .pl .pc__c:nth-child(1):hover .vk-tag{animation:cl-still 1.8s cubic-bezier(.2,.7,.1,1) forwards}
  .pl .pc__c:nth-child(2):hover .vk-tag{animation:cl-move .9s cubic-bezier(.3,.7,.3,1)}
  .pl .pc__c:nth-child(3):hover .vk-tag{animation:cl-grow .7s cubic-bezier(.3,1.6,.5,1) forwards}
  .pl .pc__c:nth-child(4):hover .vk-tag{animation:cl-dare .7s ease-in-out}
  .pl .pc__c:nth-child(5):hover .vk-tag{animation:cl-fun .9s cubic-bezier(.3,.7,.3,1) forwards}
}
@keyframes cl-still{to{transform:rotate(0deg) scale(1.04)}}
@keyframes cl-move{0%,100%{transform:rotate(-2deg) translateY(0)}30%{transform:rotate(-2deg) translateY(-.7vw)}55%{transform:rotate(-2deg) translateY(0)}75%{transform:rotate(-2deg) translateY(-.3vw)}}
@keyframes cl-grow{to{transform:rotate(-2deg) scale(1.14)}}
@keyframes cl-dare{0%,100%{transform:rotate(-2deg)}20%{transform:rotate(4deg)}40%{transform:rotate(-6deg)}60%{transform:rotate(3deg)}80%{transform:rotate(-3deg)}}
@keyframes cl-fun{from{transform:rotate(-2deg)}to{transform:rotate(358deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.pl .pc__c:hover .vk-tag{animation:none}}

/* ---------- 5. een dag op Club Ommetoer: tijdlijn met vaste foto, component in /pagina-systeem.css ---------- */

/* ---------- 8. na deze week: uitkomsten op één rij, component in /pagina-systeem.css ---------- */

/* de garantie op oceaanwater: tekst geel, pil bruin met blauwe letters */
.vk--wide.pz__g{margin-top:2vw;padding-top:3.2vw}
.vk--wide.pz__g .txt{max-width:60vw}
.md .vk--blauw.pz__g{background:#5E6F58 url("/assets/photos/water-texture.webp") center/cover no-repeat !important;color:var(--p-geel) !important;--ln:var(--p-lijn-licht)}
.md .vk--blauw.pz__g .txt{color:var(--p-geel)}
.md .vk--blauw.pz__g .vk-tag{background:var(--brand-brown);color:var(--p-geel)}   /* tekst in de garantiebubbel geel (Laura 2026-11-02) */

/* ---------- 10. koffie onderaan: smallere alinea ---------- */
#koffie .lead{max-width:30vw;text-wrap:pretty}
#koffie .lead br{display:none}

/* ---------- regels in puntvorm (hero, uitspraak Laura): /sjabloon.css ---------- */

/* ---------- verhalenpagina ---------- */
.cv .txt{margin-top:var(--s-kop)}
.cv__end{display:flex;align-items:center;gap:2.4vw}
.cv__grid > .bw__q:nth-last-child(-n+2){grid-column:span 3}

/* =====================================================================
   tablet (≤1024px): alles onder elkaar, zoals de andere pagina's
   ===================================================================== */
@media (max-width:1024px){
  .pz__grid{display:block}
  .vk--wide.pz__g{margin-top:5vw;padding-top:9vw}
  .vk--wide.pz__g .txt{max-width:none}
  #koffie .lead{max-width:none}
  .cv__end{flex-wrap:wrap;gap:5vw}
  .cv__grid > .bw__q:nth-last-child(-n+2){grid-column:1 / -1}
}

/* voor wie: dezelfde rijhoogte als de lijst "Na deze week" (de lettermaat was al gelijk) */
@media (min-width:1025px){
  [data-pg="club"] .vw__l{margin-top:2.2vw}
  [data-pg="club"] .vw__l > li:not(:first-child){padding-top:1.3vw}
  [data-pg="club"] .vw__l > li:not(:last-child){padding-bottom:1.5vw}
}

/* =====================================================================
   gsm (≤767px): dezelfde rustige, elegante look als op desktop.
   Eén typeschaal, gelijke marges links en rechts, lopende tekst uitgevuld
   met woordafbreking, en compacte blokken die je openklapt.
   ===================================================================== */
@media (max-width:767px){
  /* hero: de kaart "in a nutshell" met de titel op één regel */
  .md .cz__k{padding:8vw 5vw 6vw}
  .md .cz__k .lst{font-size:5.75vw;letter-spacing:-.015em;white-space:nowrap}
  .cz__k .lst br{display:none}
  .cz__k .bdy{margin-top:3vw}
  /* "een dagske vrij": doorlopende tekst in één alinea, geen puntvorm; zelfde maat als de koffietekst */
  .md .wk__end .lead{font-size:4.75vw;line-height:1.32;white-space:normal;text-wrap:pretty}
  /* hero en koffie: de twee knoppen op één regel */
  .md[data-pg="club"] :is(.ch .hr__b,#koffie .ft__b){flex-wrap:nowrap;justify-content:flex-start;gap:2.4vw}
  html:not(#a) body:not(#z) .md[data-pg="club"] :is(.ch .hr__b,#koffie .ft__b) > a{flex:none;padding-left:3vw;padding-right:3vw;white-space:nowrap}

  /* pijlers en team als uitklapkaarten (ul.klap, zie systeem): team iets hogere strook; uitsnedes per foto */
  .pl .pc__pic img[src*="p-challenge"]{object-position:50% 26%}
  .tm .pc__pic img{object-position:50% 28%}
  /* het hele hoofd onder de sticker, in de dichte strook én opengeklapt */
  .tm .pc__pic img[src*="teamlaura"]{object-position:50% 20%}
  .tm .pc__pic img[src*="teamanso"]{object-position:50% 39%}
  .tm .pc__pic img[src*="teammichiel"]{object-position:50% 6%}
  .tm .pc__pic img[src*="teamaxelle"]{object-position:50% 50%}

  /* de plek */

  /* prijs */
  .vk--wide.pz__g{padding:8vw 6vw 6vw}
  .vk--wide.pz__g .txt{line-height:1.55}
  .vk--wide.pz__g .txt br{display:none}
}

/* Club-verhalen, gsm (2026-11-05): "Terug naar Club Ommetoer" past niet naast de pil; zakt eronder zodat de pagina niet zijwaarts scrolt */
@media (max-width:767px){main[data-pg="club-verhalen"] .ft__b{flex-wrap:wrap;row-gap:4vw}}

/* ---------- club-verhalen: geen hero, start meteen op de verhalen (Laura 2026-11-06) ---------- */
[data-pg="club-verhalen"] .bw .cap + .ttl--spread{margin-top:var(--s-klein,1.6vw)}
[data-pg="club-verhalen"] .bw__q :is(p,.bw__t){text-wrap:pretty}
.cv__end .md-ghost{flex:none}
@media (max-width:767px){
  .cv-d{display:none}
  .cv__end{flex-wrap:nowrap;gap:2.4vw}
  html:not(#a) body:not(#z) .cv__end > a{flex:none;padding-left:3vw;padding-right:3vw;white-space:nowrap}
}