/* =====================================================================
   Gedeelde blokken (2026-11-06): regels van goedgekeurde Aanbod-blokken die ook op andere pagina's staan
   (Meet the team, Calendar, …). Een kopie van de gsm-regels uit /aanbod.css, zodat Aanbod zelf onaangeroerd blijft.
   Laden na /pagina-systeem.css en /sjabloon.css, vóór het pagina-eigen bestand.
   ===================================================================== */

/* ---------- koffieblok zoals op Aanbod (.kf-ab): gsm = foto eerst, dan de gespreide titel, tekst en knoppen ---------- */
@media (max-width:767px){
  .kf-ab{display:flex;flex-direction:column}
  .kf-ab .ft__grid{display:contents}
  .kf-ab .kf__spread{order:-2;flex-direction:row;margin-bottom:var(--r3)}
  .kf-ab .kf__spread span + span{align-self:auto}
  .kf-ab .ft__pic{order:-1;aspect-ratio:4/3;margin-bottom:var(--r3)}
  .kf-ab .ft__r{margin-top:var(--r2)}
  .kf-ab .ft__b{gap:7vw;padding-top:0 !important}
  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}
  /* 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) .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}
}

/* ---------- Mark your calendar (.anu): maandlijn met punten boven drie kolommen; gsm: lijn met punten, foto's onder elkaar ---------- */
.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}
@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}
}
@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}
  .anu__end{margin-left:0}
}

/* ---------- tegels (.tg): foto 4:5, eyebrow, naam, één regel uitleg; vorm van Mark your calendar (homepage/Aanbod), ook voor afleveringen
   kolommen: --tg-cols (3 = agenda, 5 = podcast). Gsm: twee per rij. ---------- */
.tg__g{list-style:none;margin:5vw 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--tg-cols,3),minmax(0,1fr));column-gap:2vw;row-gap:5vw}
.tg__pic{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--brand-brown)}
.tg__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.tg__pic:hover img{transform:scale(1.03)}
.tg__dd{margin:1.4vw 0 0}
.tg__n{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}
.tg__w{margin-top:.8vw;text-wrap:pretty}
.tg__end{display:flex;justify-content:flex-end}
.tg__pic--sq{aspect-ratio:1/1}
@media (max-width:767px){
  .tg__g{margin-top:14vw;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4vw;row-gap:10vw}
  .tg__dd{margin-top:3vw;white-space:nowrap}
  .tg__du{display:none}
  .tg__pl{display:block}
  .tg__n{margin-top:2vw;font-size:5.2vw;line-height:1.15}
  .tg__w{margin-top:2vw}
  .tg__end{justify-content:flex-start}
}

/* =====================================================================
   Regels die Laura herhaaldelijk gaf (2026-11-06), nu voor álle pagina's die blokken.css laden:
   1. twee knoppen staan altijd naast elkaar, ook op gsm (maten van Club: 3vw binnenmarge, 2.3vw ertussen, samen de volle breedte);
      past het label niet, dan een korter gsm-label via .t-d/.t-m (nooit een kleinere letter)
   2. een Obviously-titel in twee delen (.ttl--2) staat op desktop gestapeld en op gsm op één regel, deel links en deel rechts, 7.4vw
   3. de kaart "in a nutshell" laat haar tekst gewoon doorlopen: geen puntvorm, geen balans, de volle kaartbreedte
   ===================================================================== */
.t-m{display:none}
.ttl--2 span{display:block}
html:not(#a) body:not(#z) .cz__k .bdy{text-wrap:normal;max-width:none;text-align:left}
@media (max-width:767px){
  .t-d{display:none}.t-m{display:inline}
  html:not(#a) body:not(#z) :is(.hr__b,.ft__b,.cal__b,.ep-l__b,.vb-d__cta,.tg__end,.bw__end){display:flex;flex-wrap:nowrap;align-items:center;gap:2.3vw;width:100%}
  html:not(#a) body:not(#z) :is(.hr__b,.ft__b,.cal__b,.ep-l__b,.vb-d__cta) > a{flex:1 1 auto;min-width:0;padding-left:3vw;padding-right:3vw;white-space:nowrap;text-align:center;justify-content:center}
  html:not(#a) body:not(#z) .ttl--2{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap;font-size:7.4vw;line-height:.95}
  html:not(#a) body:not(#z) .ttl--2 span{display:inline;font-size:7.4vw}
}