/* ==========================================================================
   agenda — alleen voor deze pagina
   Wordt als laatste geladen, dus wat hier staat gaat voor.
   ========================================================================== */


/* ----- liggende kaart met de foto links -----
   Dezelfde opzet als de aanbodkaarten op de homepage: een fotokolom van 260px
   en daarnaast de tekst. Het verschil is dat deze kaart geen link is maar een
   blok met een link erin, dus hij veert niet op bij hover.                  */
.info-kaart{display:grid;grid-template-columns:260px 1fr;align-items:stretch;
  background:var(--kaart);border:1px solid rgba(142,124,195,.24);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw)}
.info-foto{overflow:hidden;background:#f2edf8}
.info-foto img{width:100%;height:100%;object-fit:cover;min-height:200px}
.info-tekst{padding:34px 38px 36px}
.info-tekst h2{margin:0 0 10px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.info-tekst p{margin:0 0 18px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}
.info-tekst p:last-child{margin-bottom:0}
/* Onder 900px staat de foto boven de tekst in plaats van ernaast, net als de
   aanbodkaarten. Een fotokolom van 260px naast een tekst van 100px breed
   leest niet meer.                                                         */
@media(max-width:900px){
  .info-kaart{grid-template-columns:1fr}
  .info-foto img{aspect-ratio:16/9;min-height:0}
  .info-tekst{padding:26px 26px 30px}
}

/* ----- kop met de foto ernaast -----
   Tekst links op de uitlijnlijn, liggend beeld van 4 bij 3 rechts. Een
   liggende uitsnede laat de ruimte zien waar het over gaat; bij een vierkant
   of staand beeld houd je van een groep een paar mensen over.
   Het vlak eronder is hetzelfde kleurverloop als op de homepage.          */
.hero-duo{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 460px;
  gap:56px;align-items:center;padding:80px var(--lijn) 70px;
  background:linear-gradient(115deg,#f4eef8 0%,#faf3ea 48%,#fdf6e6 100%)}
/* Het overgangsvlak van de menubalk blijft absoluut geplaatst; al het andere
   komt erboven te liggen.                                                  */
.hero-duo > :not(.kop-fade){position:relative;z-index:1}
.hero-duo h1{margin:0 0 24px;font-weight:600;font-size:var(--t-display);
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
/* text-wrap:balance verdeelt de regels zo gelijk mogelijk, zodat er onderaan
   geen los stukje van drie woorden achterblijft.                           */
.hero-duo .hero-lead{margin:0;max-width:520px;text-wrap:balance;
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-lead);
  line-height:1.5;color:var(--ink-soft)}
.hero-duo .btn{margin-top:30px}
.hero-duo figure{margin:0}
.hero-duo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 46%;
  border-radius:var(--radius);box-shadow:0 18px 50px rgba(74,58,104,.16)}
@media(max-width:1100px){
  .hero-duo{grid-template-columns:1fr;gap:34px;padding:56px var(--lijn) 52px}
  .hero-duo img{max-width:520px}
}
@media(max-width:900px){
  .hero-duo{padding:44px var(--lijn) 44px}
}

/* ----- kleurvlak: staat nu niet meer in de pagina -----
   Sinds versie 68 staat er een foto in de kop in plaats van dit vlak. De regels
   blijven staan, zodat je het zonnetje zo weer terug kunt zetten.
   ----- oorspronkelijke uitleg -----
   Dezelfde afmetingen en dezelfde ronding als de foto op de andere twee
   subpagina's, zodat de vier koppen hetzelfde ritme houden. Het zonnetje uit
   het logo staat er groot en zacht in.
   Het bronbestand van het zonnetje krijgt een ruimere viewBox mee: de
   oorspronkelijke sneed de punten van de stralen rechts en onderaan af.   */
.kleurvlak{width:100%;aspect-ratio:4/3;border-radius:var(--radius);position:relative;
  overflow:hidden;box-shadow:0 18px 50px rgba(74,58,104,.10);
  background:linear-gradient(140deg,#e9e2f5 0%,#f6eeda 100%)}
.kleurvlak img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:64%;max-width:64%;object-fit:contain;opacity:.5}
@media(max-width:1100px){ .kleurvlak{max-width:520px} }

/* De leadregel op deze pagina moet op één regel passen. 56 tekens in de
   serif-cursief op 24px is ongeveer 620px breed, terwijl de leadregel op 520px
   stond en dus afbrak. Hier mag hij de volle tekstkolom gebruiken; op smallere
   schermen breekt hij vanzelf, en dan houden vaste spaties "je hier" bij elkaar. */
.hero-duo .hero-lead{max-width:none;text-wrap:normal}

/* ----- de agendakolom -----
   Omdat de kop in het midden staat, staat de kaart eronder dat ook. De kolom
   is 880px: breed genoeg om niet als een smal strookje te ogen, smal genoeg
   om de regels leesbaar te houden.                                        */
.agenda{padding:76px var(--lijn) var(--sectie)}
.agenda-kolom{max-width:880px;margin:0 auto}
.agenda .praktisch-link{margin:26px 0 0}
@media(max-width:900px){ .agenda{padding:44px var(--lijn) var(--sectie)} }