/* =====================================================================
   Calendar (ronde 2, 2026-11-06): opener met titel links, knoppen rechts; drieluik (.sf3); daaronder één lijst op datum.
   Bovenop /paginas.css, /pagina-systeem.css, /sjabloon.css en /blokken.css.
   ===================================================================== */
/* ---------- 1. opener: titel links, tekst + knoppen rechts, onderkant knoppen = onderlijn titel ---------- */
.cal__top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:5vw;align-items:end}
.cal__l .stm{text-box:trim-end cap alphabetic}
.cal__r .cal__b{margin:0;padding:0;gap:1.2vw;justify-content:flex-end}
/* ---------- 2. de lijst: datum | naam + plaats | knoplabel; lijnen enkel tússen de rijen; de naam schuift in bij hover ---------- */
.cal__list{list-style:none;margin:5vw 0 0;padding:0}
.cal__list > li + li{border-top:1px solid var(--ln)}
.cal__row{display:grid;grid-template-columns:13vw minmax(0,1fr) auto;column-gap:3vw;align-items:baseline;padding:2vw 0;color:inherit;text-decoration:none}
.cal__list > li:first-child .cal__row{padding-top:0}
.cal__d,.cal__n{display:block}
.cal__d .lst,.cal__n .lst{display:block;margin:0;transition:transform .4s var(--ease)}
.cal__d .cap,.cal__n .cap{display:block;margin-top:.6vw}
.cal__go{white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.cal__row:hover .cal__n .lst{transform:translateX(.6vw)}
.cal__end{display:flex;justify-content:flex-end}
/* ---------- gsm (Laura 2026-11-06): compacter, gelijke knoppen met lucht, de hele agenda in één oogopslag ---------- */
@media (max-width:767px){
  .cal__top{display:block}
  .cal__r{margin-top:var(--r2)}
  /* titel op Laura's vier regels: 8,6vw is de grootste maat waarop 'gedacht te maken van' op één regel past */
  html:not(#a) body:not(#z) main[data-ritme] .cal__l h1.stm{font-size:8.6vw !important;white-space:nowrap;text-wrap:nowrap}
  /* knoppen: samen zo breed als de titelkolom, even breed, 5vw ertussen */
  .cal__r .cal__b{flex-wrap:nowrap;justify-content:flex-start;gap:5vw;margin-top:0}
  html:not(#a) body:not(#z) .cal__r .cal__b > a{flex:1 1 0;min-width:0;padding-left:2vw;padding-right:2vw;text-align:center;white-space:nowrap}
  /* lijst: datum klein links, naam + plaats rechts, pijltje; de knoplabels vallen weg, de hele rij klikt door */
  .cal__list{margin-top:var(--r3)}
  .cal__row{grid-template-columns:20vw minmax(0,1fr) 3.4vw;column-gap:2.4vw;padding:4.4vw 0;align-items:start}
  .cal__list > li:last-child .cal__row{padding-bottom:0}
  .cal__d .cap{margin-top:1vw}
  html:not(#a) body:not(#z) main[data-ritme] .cal__d .lst{font-family:var(--f-caps);font-weight:400;text-transform:uppercase;font-size:var(--t-eyebrow) !important;line-height:1.3 !important;letter-spacing:-.02em;white-space:nowrap;margin-top:.2em}
  html:not(#a) body:not(#z) main[data-ritme] .cal__n .lst{font-size:4.5vw !important;line-height:1.25 !important;letter-spacing:-.02em}
  .cal__n .cap{margin-top:1vw}
  html:not(#a) body:not(#z) .cal__row .cal__go{display:none !important}
  .cal__row::after{content:"";align-self:start;width:3.4vw;height:3.4vw;margin-top:1.6vw;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12h20M15 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12h20M15 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
  .cal__end{justify-content:flex-start}
  /* knoppen naast elkaar (regel uit blokken.css), maar in de hero van Calendar met de 5vw die Laura goedkeurde */
  html:not(#a) body:not(#z) .md[data-pg="calendar"] .cal__r .cal__b{gap:5vw}
}