/* menu: de <br> in een groepssticker geldt enkel op gsm */
.ab__grp > .vk-tag br{display:none}
/* link vanaf homepage of hero: titel en sticker blijven onder de menubalk zichtbaar */
.ab__grp{scroll-margin-top:10.5vw}
@media (max-width:1024px){.ab__grp{scroll-margin-top:22vw}}
/* bewijs-slider: korte quotes, dus smallere kaarten dan op Club; cijfers dicht onder de slider */
@media (min-width:1025px){
  .bs__trk .bw__q{width:23vw}
  .bs__trk .bw__t{font-size:1.5vw;line-height:1.25}
}
.bw-ab.bs .bw__nums{margin-top:3.6vw}
/* What's next: enkel de titels boven de tekst, geen 01 · First (Laura 2026-11-05) */
.ab-zs .zs__when,.ab-zs .zs__steps .md-n{display:none}
.ab-zs .zs__steps .lst{margin-top:0}
/* Next up: de vorm van de homepage: maandlijn met punten, daaronder drie kolommen met foto, datum en naam */
.anu__axis{position:relative;height:2.6vw;margin-top:4vw}
.anu__m{position:absolute;bottom:1.1vw;font-family:var(--f-caps);text-transform:uppercase;font-size:.78vw;letter-spacing:.02em;line-height:1;white-space:nowrap;text-box:cap alphabetic}
.anu__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.anu__dot{position:absolute;bottom:calc(-.35vw + .5px);width:.7vw;height:.7vw;margin-left:-.35vw;border-radius:50%;background:currentColor}
.anu__evs{list-style:none;margin:2.4vw 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4vw}
.anu__pic{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.anu__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anu__dd{margin:1.4vw 0 0}
.anu__nl{display:inline-block;margin-top:.9vw;color:inherit;text-decoration:none;font-family:var(--f-licht);font-weight:300;font-size:1.7vw;line-height:1.1;letter-spacing:-.015em;white-space:nowrap}
.anu__end{display:flex;justify-content:flex-end;margin-top:2.6vw}
/* tablet en gsm: lijn met punten aan de zijkant, foto's onder elkaar (zoals de homepage) */
@media (max-width:1024px){
  html:not(#a) body:not(#z) .anu .anu__st{display:flex !important;flex-direction:row !important;justify-content:space-between !important;margin:0}
  html:not(#a) body:not(#z) .anu .anu__st span{display:inline !important;width:auto !important}
  .anu__axis{display:none}
  .anu__evs{position:relative;margin:10vw 0 0;padding:0 0 0 9vw;grid-template-columns:minmax(0,1fr);row-gap:11vw}
  .anu__evs::before{content:"";position:absolute;left:1.4vw;top:1vw;bottom:0;width:1px;background:currentColor}
  .anu__ev{position:relative}
  .anu__ev::before{content:"";position:absolute;left:-8.87vw;top:0;width:2.8vw;height:2.8vw;border-radius:50%;background:currentColor}
  .anu__dd{margin:3.4vw 0 0}
  .anu__nl{margin-top:2vw;font-size:5.2vw;line-height:1.15;white-space:normal}
  .anu__end{display:block;margin:11vw 0 0 9vw}
}
/* menu: wat enkel op gsm staat (woord, knoplabel, prijs in de stijl van de link) */
.ab__m,.ab__e .ab__prijs{display:none}

/* =====================================================================
   Aanbod: pagina-eigen fijnregeling op gsm (≤767px), bovenop /pagina-systeem.css (Club-systeem + ritme-laag).
   Maten, witruimte, linkerlijn en puntvorm komen uit de ritme-laag; hier staat enkel wat echt van deze pagina is.
   Desktop staat in /paginas.css (rondes AANBOD). Uitleg: _dev/pitstop/STIJLGIDS-PAGINAS.md.
   ===================================================================== */
@media (max-width:767px){
  /* HERO (Laura 2026-11-05): titel, foto, de vier soorten aanbod onder de foto, knoppen; geen bodytekst */
  .md .hw2{display:flex;flex-direction:column;padding-top:24vw}
  .hw2 .hw2__top{display:contents}
  .hw2 .hw2__cap{order:1}
  .hw2 .hw2__t{order:2}
  .hw2 .hw2__pic{order:3;margin-top:14vw}
  .hw2 .hw2__links{order:4;margin:5vw 0 0 !important;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0}
  html:not(#a) body:not(#z) .hw2 .hw2__links .tp__lnk{font-size:2.85vw !important;letter-spacing:-.03em}
  .hw2 .hw2__b{order:5;margin-top:9vw !important;display:flex;flex-wrap:nowrap;align-items:stretch;gap:2vw}
  html:not(#a) body:not(#z) .hw2 .hw2__b > a{flex:1 1 auto;padding-left:2.6vw;padding-right:2.6vw;text-align:center;white-space:nowrap}
  .hw2 .hb__frame{aspect-ratio:2/1;height:auto}   /* helemaal uitgezoomd: de beelden zijn 2:1, dus de hele foto is zichtbaar (Laura 2026-11-06) */
  /* de pil rechtsboven op de foto; de linkerkant wijst omhoog, naar de titel */
  html:not(#a) body:not(#z) .hw2 .hw2__stk{top:-9.5vw !important;right:-2vw !important;left:auto !important;bottom:auto !important;transform:rotate(5deg) !important;animation:none !important;font-size:clamp(12px,3.2vw,13.5px)}

  /* MENU: een lange sticker mag op gsm over twee regels (de <br> geldt enkel hier) */
  .ab__grp > .vk-tag br{display:inline}
  .ab__grp > .vk-tag{line-height:1.25}

  /* MENU (Laura 2026-11-05): alles in de kaart, de sticker op de bovenrand; lucht rond de Obviously-titel, onderaan de kaart en tussen de segmenten */
  .md .ab__grp{margin:var(--r4) calc(-1*var(--kx)) 0 !important;padding:15vw var(--kx) 11vw !important}
  .md .ab__top + .ab__grp{margin-top:var(--r3) !important}
  .md .ab__grp + .ab__grp{margin-top:18vw !important}
  .ab__kop{margin:0 0 11vw}

  /* rij (Laura 2026-11-05): elke rij dezelfde opbouw. Woord in Mori op twee regels (Podcast op één), even brede pil rechts op de onderlijn,
     dan de tekst op één vaste maat, dan de link; overal dezelfde afstanden */
  .ab__r{grid-template-columns:minmax(0,1fr) 38vw;grid-template-areas:"w prijs" "p p" "e e";column-gap:3vw;row-gap:0;padding:10vw 0;align-items:start}
  .ab__r:first-child{padding-top:0}
  .ab__r:last-child{padding-bottom:0}
  .ab__r > div:first-child{grid-area:w;align-self:last baseline}
  .ab__r .ab__tag{display:none}
  html:not(#a) body:not(#z) .ab .ab__grp .ab__w{display:block;font-size:7.4vw !important;line-height:1.08 !important;white-space:nowrap;text-box:trim-both cap alphabetic}
  .ab__w br{display:inline}
  .ab__m{display:inline}
  html:not(#a) body:not(#z) .ab__r .ab__p{grid-area:p;width:100%;max-width:none;margin-top:6vw;text-align:left;text-wrap:wrap}
  .ab__r .ab__e{display:contents}
  html:not(#a) body:not(#z) .ab__r .ab__e .tp__lnk{display:inline-block;margin:0 !important;white-space:nowrap}
  html:not(#a) body:not(#z) .ab__r .ab__e .tp__lnk:first-child{grid-area:e;justify-self:start;margin-top:6vw !important}
  /* prijs in een pil, overal even breed, op de onderlijn van de titel */
  html:not(#a) body:not(#z) .ab__r .ab__e .ab__prijs{grid-area:prijs;justify-self:stretch;align-self:last baseline;box-sizing:border-box;text-align:center;text-decoration-line:none !important;text-box:none;padding:.65em .4em;border-radius:999px;background:var(--brand-blue);color:var(--brand-brown);transform:rotate(-2deg)}
  .ab__sub{margin-top:2.5vw}

  /* BEWIJS: cijfers onder de slider, twee per rij, op de gutter */
  .bw-ab.bs .bw__nums{margin-top:10vw !important;column-gap:6vw;row-gap:10vw}
  .bw-ab .bw__nums .cap{margin-top:3vw}

  /* WAT PAST BIJ MIJ: slotzin als item-titel, knop eronder */
  .kz__end{flex-direction:column;align-items:flex-start;gap:var(--r2)}
  /* slotzin: mee met de rand van de kaarten, op twee regels (Laura 2026-11-05) */
  .kz__end{margin-left:calc(-1*var(--kx))}
  .kz__end .lst br{display:inline}
  html:not(#a) body:not(#z) .kz__end .lst{white-space:nowrap}

  /* WHAT'S NEXT (Laura 2026-11-05): geen Obviously, 'Van koffie tot try-out' is de titel; geen 01/dan boven de stappen */
  .ab-zs > .ttl--spread{display:none}
  .ab-zs > .ttl--spread + .stm{margin-top:0 !important}

  /* KOFFIE: zoals Club eerst de foto, dan de titel, de tekst en de knoppen */
  .kf-ab{display:flex;flex-direction:column}
  .kf-ab .ft__grid{display:contents}
  .kf-ab .ft__pic{order:-1;aspect-ratio:4/3;margin-bottom:var(--r3)}
  .kf-ab .kf__spread{flex-direction:row;margin-bottom:0}
  .kf-ab .kf__spread span + span{align-self:auto}
  .kf-ab .ft__r{margin-top:var(--r2)}
  .kf-ab .ft__b{gap:7vw;padding-top:0 !important}
}

/* gsm: stappen zoals op de andere pagina's ("Stap 1, 2, 3", zelfde maten; Laura 2026-11-05) */
@media (max-width:767px){
  .ab-zs .zs__when{display:block}
  main[data-ritme] .ab-zs .zs__steps .lst{font-size:5.6vw !important;margin-top:0}
  main[data-ritme] .ab-zs .zs__steps .bdy{font-size:3.65vw !important;line-height:1.5 !important}
}

/* gsm (Laura 2026-11-06): tijdlijn op één regel, blauwe knop naar de agenda */
@media (max-width:767px){
  .nl-d{display:none}
  html:not(#a) body:not(#z) .anu__end .tp__lnk{display:inline-block;background:var(--brand-blue);color:var(--brand-brown);border-radius:999px;padding:calc(1.1em - 1px) 1.7em;line-height:1 !important;text-decoration-line:none !important;text-box:none;margin-top:0 !important}
}

/* hero op desktop (Laura 2026-11-06): titel links, knoppen rechts met hun onderkant op de onderlijn van de titel;
   de aanbodwoorden rechts uitgelijnd onder de foto */
@media (min-width:1025px){
  .md .hw2{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cap ." "t b" "pic pic" "l l";column-gap:5vw}
  .hw2 .hw2__top{display:contents}
  .hw2 .hw2__cap{grid-area:cap}
  .hw2 .hw2__t{grid-area:t}
  .hw2 .hw2__b{grid-area:b;align-self:end;justify-content:flex-end;margin:0 0 .79vw;padding:0}   /* .79vw = van de onderkant van de titelregel tot de onderlijn van de letters */
  .hw2 .hw2__pic{grid-area:pic;margin-top:7.5vw}
  .hw2 .hb__frame{height:38vw}   /* hoog genoeg om op de koffiefoto het schenken te zien (Laura 2026-11-06) */
  html:not(#a) body:not(#z) .hw2 .hw2__stk{color:var(--p-geel)}
  .hw2 .hw2__links{grid-area:l;justify-self:end;justify-content:flex-end;margin:1.8vw 0 0 !important;gap:3vw}
}

/* stappen op desktop: titel links, knop rechts op dezelfde onderlijn, de tijdlijn er dicht onder */
@media (min-width:1025px){
  .ab-zs .zs__kop .stm{text-box:none}
  .ab-zs .zs__kop > a{margin-bottom:.79vw}
  .ab-zs > .zs__kop + .zs__tl{margin-top:4vw}
}

/* tijdlijn over de volle breedte van het blok (stond samengedrukt in de eerste kolom) */
.ag-ab > .anu{grid-column:1 / -1}

/* koffiefoto: op tablet en gsm de onderkant van het bestand, zodat ook daar het schenken in beeld is (Laura 2026-11-06) */
@media (max-width:1024px){.hw2 .hb__frame img[src*="breed-koffie"]{object-position:50% 100% !important}}
/* stoelen, meditatie, diner, villa: op elk scherm de bovenkant van het bestand, met lucht boven de hoofden (Laura 2026-11-06) */

/* gsm (Laura 2026-11-06): tekst in de pil geel; agendaknop start op de tijdlijn; "Not sure where" boven de foto; tekst over de volle breedte */
@media (max-width:767px){
  html:not(#a) body:not(#z) .hw2 .hw2__stk{color:var(--p-geel)}
  .anu__end{margin-left:0}
  .kf-ab .kf__spread{order:-2;margin-bottom:var(--r3)}
  .kf-ab .ft__pic{order:-1}
  html:not(#a) body:not(#z) .kf-ab .ft__r .lead{max-width:none;width:100%;text-wrap:wrap}
  html:not(#a) body:not(#z) main[data-ritme] .kf-ab .ft__r .lead br{display:none !important}   /* ook de automatische regeleindes: die maakten de tekst smal */
  /* afstanden titel, foto en tekst: de maten die Laura op Meet the team goedkeurde, nu voor elk koffieblok (2026-11-06) */
  html:not(#a) body:not(#z) .kf-ab .kf__spread{margin-bottom:3.6vw}
  html:not(#a) body:not(#z) .kf-ab .ft__pic{margin-bottom:8vw}
  html:not(#a) body:not(#z) .kf-ab .ft__r{margin-top:0}
  html:not(#a) body:not(#z) main[data-ritme] .kf-ab .ft__b{margin-top:var(--s-groep) !important}
  /* koffieknoppen: naast elkaar, tekst mooi binnen de knop, breedte volgens het label (Laura 2026-11-06) */
  html:not(#a) body:not(#z) .md .kf-ab .ft__b{display:flex;flex-wrap:nowrap;align-items:center;gap:3vw;width:100%}
  html:not(#a) body:not(#z) .md .kf-ab .ft__b > a{flex:1 1 auto;min-width:0;padding-left:2vw;padding-right:2vw;white-space:nowrap;text-align:center;justify-content:center}
}