/* ═══════════════════════════════════════════════════════════════════════
   blog.css — de publieke blog

   Erft de merklaag van style.css. Wat hier anders is: geen levend veld,
   geen banden, geen golven. Een blog is lezen, en alles wat daarbij niet
   helpt staat in de weg. Eén kolom, ruime regelafstand, en verder de
   letters en kleuren van de rest van de site.

   Wat erbij kwam in september: een omslagbeeld op de kaart en boven het
   stuk, een leestijd, een auteursblok onder elk stuk, en "lees ook".
   ═══════════════════════════════════════════════════════════════════════ */

.blog-body { background: var(--haver); }

.blog {
  max-width: 820px; margin: 0 auto;
  padding: clamp(96px, 12vh, 130px) clamp(20px, 5vw, 48px) clamp(60px, 9vh, 110px);
}

/* ── de lijst ──────────────────────────────────────────────────────── */
.blog__kop { max-width: 36ch; margin-bottom: clamp(32px, 5vh, 56px); }
.blog__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.025em;
  font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.08;
  margin: .7rem 0 1rem;
}
.blog__lead {
  font-family: var(--type); font-size: 1.02rem; line-height: 1.7;
  color: var(--inkt-dof); max-width: 46ch;
}
.blog__leeg {
  font-family: var(--serif); font-style: italic; font-size: 1.1rem;
  line-height: 1.65; color: var(--inkt-dof); max-width: 40ch;
}

/* De lijstpagina mag breder dan een artikel. Een artikel is 820px omdat
   dat de leesbare regellengte is; een overzicht is geen lopende tekst. */
.blog--lijst { max-width: 1140px; }
/* De kop stond op 36ch omdat een artikel 820px breed is. Op een overzicht
   van 1140px wordt "Wat ik onderweg tegenkom" dan in drie stukken gehakt
   met een half scherm leeg ernaast. */
.blog--lijst .blog__kop { max-width: 62ch; }
.blog--lijst .blog__titel { max-width: 15ch; }

/* Vult zichzelf: zolang er 300px over is komt er een kaart naast, pas
   daarna een rij erbij. Geen mediaquery nodig — die zou op elke tussenmaat
   het verkeerde antwoord geven. */
.bloglijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  /* stretch, niet start: met start hebben drie kaarten naast elkaar drie
     verschillende onderkanten en dan lijkt het raster stuk in plaats van
     gevarieerd. Het verschil moet uit de kaart komen, niet uit de rij. */
  align-items: stretch;
}
.blogkaart { display: grid; }
.blogkaart__link { height: 100%; }
/* Het beeld bovenaan, de tekst eronder, en "lees verder" onderaan het vlak —
   ook als de ene samenvatting twee regels langer is dan de andere. Zonder
   dit hing hij halverwege de kaart met een leeg stuk eronder. */
.blogkaart--beeld:not(.blogkaart--groot) > .blogkaart__link {
  display: grid; grid-template-rows: auto 1fr;
}
.blogkaart--woord:not(.blogkaart--groot) > .blogkaart__link {
  display: grid; grid-template-rows: 1fr;
}
.blogkaart__woord { display: flex; flex-direction: column; }
.blogkaart__verder { margin-top: auto; padding-top: .5rem; }
/* Het nieuwste stuk ligt over de volle breedte. */
.blogkaart--groot { grid-column: 1 / -1; }

/* ── geen twee kaarten hetzelfde ──────────────────────────────────────
   Drie tinten uit de beige familie, net als de kiezels op de mentorpagina:
   genoeg verschil om ze uit elkaar te houden, geen enkele die iets anders
   belooft. Groen blijft waar het iets betekent — hier alleen in "lees
   verder". */
.blogkaart[data-tint="1"] > .blogkaart__link {
  background: rgba(240, 232, 214, .62);
  border-color: rgba(255, 252, 245, .7);
}
.blogkaart[data-tint="1"] > .blogkaart__link:hover { background: rgba(243, 236, 220, .82); }
.blogkaart[data-tint="2"] > .blogkaart__link {
  background: rgba(230, 221, 203, .6);
  border-color: rgba(255, 251, 243, .64);
}
.blogkaart[data-tint="2"] > .blogkaart__link:hover { background: rgba(235, 226, 208, .8); }

/* Een stuk zonder omslagbeeld is geen kaart met een gat: het krijgt een
   grotere titel en meer lucht, zodat de tekst zelf het beeld is. */
.blogkaart--woord:not(.blogkaart--groot) .blogkaart__woord {
  padding: clamp(26px, 3.4vw, 36px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 30px);
}
.blogkaart--woord:not(.blogkaart--groot) .blogkaart__titel {
  font-size: clamp(1.45rem, 2.9vw, 1.9rem);
}
.blogkaart__link {
  display: block; text-decoration: none; overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -32px rgba(34,31,26,.4);
  transition: background-color 180ms var(--ease-uit), transform 180ms var(--ease-uit);
}
.blogkaart__link:hover {
  background: rgba(255,255,255,.72);
  transform: translateY(-2px);
}
.blogkaart__woord { padding: clamp(22px, 3vw, 30px); }
/* Het omslagbeeld op de kaart: liggend, 3:2, altijd gevuld. Het eerste
   stuk is het nieuwste en krijgt een groter beeld; de rest een smaller. */
.blogkaart__beeld {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
/* In een kolom van ~330px past geen beeld náást tekst: dan blijft er voor
   allebei te weinig over. Beeld bovenaan, tekst eronder. Het grote stuk
   staat wél naast elkaar, want dat heeft de volle breedte. */
.blogkaart--beeld:not(.blogkaart--groot) .blogkaart__beeld { aspect-ratio: 3 / 2; }
.blogkaart--groot.blogkaart--beeld .blogkaart__link {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
}
.blogkaart--groot.blogkaart--beeld .blogkaart__beeld { aspect-ratio: 4 / 3; height: 100%; }
.blogkaart__meta {
  margin: 0 0 .5rem;
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(43,36,30,.72);
}
.blogkaart__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.2;
  color: var(--inkt); margin: 0 0 .6rem;
}
.blogkaart--groot .blogkaart__titel { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.blogkaart__kort {
  font-family: var(--type); font-size: .97rem; line-height: 1.65;
  color: rgba(43,36,30,.8); margin: 0 0 .9rem; max-width: 52ch;
}
.blogkaart__verder {
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--groen-diep);
}

/* ── één artikel ───────────────────────────────────────────────────── */
.artikel__terug {
  font-family: var(--grotesk); font-weight: 600; font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(43,36,30,.72); text-decoration: none;
}
.artikel__terug:hover { color: var(--groen-diep); }
.artikel__meta {
  margin: 1.6rem 0 .5rem;
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(43,36,30,.72);
}
.artikel__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.025em;
  font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.1;
  margin: 0 0 1rem; max-width: 22ch;
}
.artikel__lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6;
  color: rgba(43,36,30,.8); margin: 0 0 clamp(24px, 3.5vh, 36px); max-width: 48ch;
}
/* Het omslagbeeld boven het stuk: de volle kolom, zachte hoeken, en een
   verhouding die op een telefoon niet het hele scherm opeet. */
.artikel__omslag { margin: 0 0 clamp(28px, 4.5vh, 48px); }
.artikel__omslag img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: clamp(18px, 3vw, 30px);
}
/* De leesbreedte is bewust smaller dan de kolom: 66 tekens is waar een oog
   zonder moeite de volgende regel terugvindt. */
.artikel__lijf { max-width: 66ch; }
.artikel__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.24;
  margin: clamp(30px, 4.5vh, 46px) 0 .8rem;
}
.artikel__tekst {
  font-family: var(--type); font-size: 1.02rem; line-height: 1.75;
  color: rgba(43,36,30,.88); margin: 0 0 1.15rem;
}
.artikel__citaat {
  margin: clamp(26px, 4vh, 40px) 0; padding-left: 20px;
  border-left: 2px solid rgba(58,107,68,.45);
}
.artikel__citaat p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.55;
  color: rgba(43,36,30,.82); margin: 0;
}
.artikel__stap {
  font-family: var(--type); font-size: 1.02rem; line-height: 1.7;
  color: rgba(43,36,30,.88); margin: 0 0 1rem;
}
.artikel__stap span {
  display: block;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--groen-diep);
  margin-bottom: .2rem;
}
.artikel__kader {
  margin: clamp(26px, 4vh, 40px) 0; padding: clamp(18px, 2.6vw, 24px);
  border-radius: 20px; background: rgba(58,107,68,.07);
  border: 1px solid rgba(58,107,68,.16);
}
.artikel__kader-titel {
  display: block; margin-bottom: .5rem;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--groen-diep);
}
.artikel__kader p {
  font-family: var(--type); font-size: .97rem; line-height: 1.68;
  color: rgba(43,36,30,.86); margin: 0 0 .5rem;
}
.artikel__kader p:last-child { margin-bottom: 0; }
/* een beeld in het stuk: mag breder dan de leesbreedte */
.artikel__beeld { margin: clamp(26px, 4vh, 40px) 0; max-width: 100%; }
/* Klein, middel of groot — per beeld gekozen in het dashboard. Een kleine
   foto staat in het midden van de leeskolom; links uitgelijnd leest ze als
   een vergeten miniatuur. Op een telefoon is "middel" toch de volle
   breedte: 520px past daar niet, en dat regelt max-width: 100% vanzelf. */
.artikel__beeld--klein  { max-width: min(100%, 320px); margin-inline: auto; }
.artikel__beeld--middel { max-width: min(100%, 520px); margin-inline: auto; }
.artikel__beeld img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(14px, 2.5vw, 24px);
}
.artikel__beeld figcaption {
  margin-top: 8px;
  font-family: var(--type); font-size: .84rem; line-height: 1.5;
  color: rgba(43,36,30,.66);
}
.artikel__knop { margin: clamp(22px, 3vh, 34px) 0; }
/* Video en audio staan in een afgeschermde bucket; op de blog noemen we ze
   alleen. Zie de uitleg in api/blog.mjs. */
.artikel__media {
  margin: clamp(22px, 3vh, 34px) 0; padding: 14px 18px;
  border-radius: 16px; border: 1px dashed rgba(43,36,30,.24);
  font-family: var(--type); font-size: .95rem; color: rgba(43,36,30,.8);
}
.artikel__media span {
  display: block; margin-top: .2rem;
  font-size: .82rem; color: rgba(43,36,30,.62);
}

/* ── wie het schreef ───────────────────────────────────────────────── */
.artikel__voet {
  margin-top: clamp(40px, 6vh, 70px); padding-top: clamp(24px, 3.5vh, 36px);
  border-top: 1px solid rgba(43,36,30,.14);
}
.auteur {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px;
  align-items: start; max-width: 62ch;
}
.auteur__beeld { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.auteur__woord strong {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem;
  color: var(--inkt); letter-spacing: -.01em;
}
.auteur__woord > span {
  display: block; margin: 2px 0 10px;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(43,36,30,.66);
}
.auteur__woord p {
  margin: 0 0 14px; font-family: var(--type); font-size: .95rem; line-height: 1.65;
  color: rgba(43,36,30,.82);
}

/* ── lees ook ──────────────────────────────────────────────────────── */
.leesook { margin-top: clamp(48px, 7vh, 80px); }
.leesook__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 1rem;
}
/* Ook hier eerst naast elkaar: twee suggesties onder een artikel horen
   in één blik te passen, niet als twee volle rijen onder elkaar. */
.leesook__lijst {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; align-items: stretch;
}
.leesook .blogkaart__titel { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.leesook .blogkaart__kort { display: none; }
/* Een teaser krijgt een lager beeld dan een kaart in het overzicht: 3:2 in
   een halve artikelkolom is een foto van een kwart scherm voor een voetnoot. */
.leesook .blogkaart__beeld { aspect-ratio: 16 / 9; }
.leesook .blogkaart__woord { padding: clamp(16px, 2.2vw, 22px); }

@media (max-width: 620px) {
  .blog { padding-top: clamp(88px, 11vh, 110px); }
  .blogkaart--groot.blogkaart--beeld .blogkaart__link { grid-template-columns: 1fr; }
  .blogkaart--groot.blogkaart--beeld .blogkaart__beeld { aspect-ratio: 3 / 2; height: auto; }
  .auteur { grid-template-columns: 56px 1fr; gap: 14px; }
  .auteur__beeld { width: 56px; height: 56px; }
}


/* ═══ De agenda ═══════════════════════════════════════════════════════
   Dezelfde kaarten als de blog, met een groot dagcijfer links. */
.agendalijst { display: grid; gap: clamp(12px, 2vh, 18px); }
.agendakaart__link {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: clamp(18px, 2.6vw, 26px); text-decoration: none;
  border-radius: 24px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -32px rgba(34,31,26,.4);
  transition: background-color 180ms var(--ease-uit), transform 180ms var(--ease-uit);
}
.agendakaart__link:hover { background: rgba(255,255,255,.72); transform: translateY(-2px); }
.agendakaart__datum {
  display: grid; justify-items: center; align-content: center;
  width: 76px; height: 76px; border-radius: 20px;
  background: rgba(58,107,68,.1); color: var(--groen-diep);
}
.agendakaart--groot .agendakaart__datum { background: var(--groen); color: var(--room); }
.agendakaart__dag { font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
.agendakaart__maand { font-family: var(--grotesk); font-weight: 600; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.agendakaart__meta { margin: 0 0 .4rem; font-family: var(--grotesk); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(43,36,30,.72); }
.agendakaart__titel { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; color: var(--inkt); margin: 0 0 .5rem; }
.agendakaart__kort { font-family: var(--type); font-size: .95rem; line-height: 1.6; color: rgba(43,36,30,.8); margin: 0 0 .6rem; max-width: 56ch; }
.agendakaart__plaatsen { font-family: var(--grotesk); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--groen-diep); }
.agenda__voorbij { margin-top: clamp(30px, 5vh, 50px); }
.agenda__voorbij summary { cursor: pointer; font-family: var(--serif); font-size: 1.3rem; color: rgba(43,36,30,.7); margin-bottom: 14px; }
.agendalijst--voorbij .agendakaart__link { opacity: .78; }
.evenement__feiten { display: grid; gap: 10px; margin: 0 0 1.4rem; max-width: 48ch; }
.evenement__feiten div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; }
.evenement__feiten dt { font-family: var(--grotesk); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(43,36,30,.66); }
.evenement__feiten dd { margin: 0; font-family: var(--type); font-size: 1rem; line-height: 1.55; color: var(--inkt); }
.evenement__feiten dd span { color: rgba(43,36,30,.7); font-size: .9rem; }
.evenement__acties { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 clamp(24px, 3.5vh, 36px); }
@media (max-width: 620px) {
  .agendakaart__link { grid-template-columns: 60px 1fr; gap: 14px; }
  .agendakaart__datum { width: 60px; height: 60px; }
  .agendakaart__dag { font-size: 1.5rem; }
}


/* ── een YouTube-video in een stuk ────────────────────────────────────
   Zelfde afspraak als in de ledenzone: de speler komt er pas bij een
   klik in, zodat er vóór die klik niets naar YouTube gaat. */
.artikel__film { margin: clamp(26px, 4vh, 40px) 0; }
.artikel__filmknop, .artikel__speler {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: clamp(14px, 2.5vw, 24px);
}
.artikel__filmknop {
  position: relative; cursor: pointer;
  background: linear-gradient(168deg, #43764C, #2C5334);
  box-shadow: 0 22px 44px -30px rgba(24,40,26,.7);
}
.artikel__filmknop span {
  position: absolute; top: clamp(18px, 3vw, 28px); left: 24px; right: 24px;
  font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.3rem);
  color: rgba(247,242,232,.94); line-height: 1.3;
}
/* de driehoek: dezelfde als de speelknop in de ledenzone */
.artikel__filmknop::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; margin: -11px 0 0 -7px;
  border-left: 20px solid rgba(247,242,232,.95);
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  transition: transform 160ms var(--ease-uit);
}
.artikel__filmknop:hover::after { transform: scale(1.12); }
.artikel__film figcaption {
  margin-top: 8px; font-family: var(--type); font-size: .84rem;
  color: rgba(43,36,30,.66);
}

/* een link midden in een alinea (poort-1.html, en wat Nele later in een
   stuk zet): de kleur van het merk, geen browserblauw */
.artikel__tekst a {
  color: var(--groen-diep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.artikel__tekst a:hover { text-decoration-thickness: 2px; }
/* "← Alle stukken" was 11px hoog: op een telefoon niet te raken */
.artikel__terug { display: inline-block; padding-block: 14px; margin-block: -14px 0; }