/* district-gids.css — De kaartkamer: gids-overzicht + artikelpagina's.
   Laad na css/origami.css en css/origami-district.css. Alleen kaartkamer-specifiek;
   tokens en bouwstenen komen uit de gedeelde lagen. */

/* — Overzicht: routekaarten op de kaarttafel — */
.fold-card b{font-size:.84rem;letter-spacing:.02em}
.kaartkamer-note{margin:2.4rem 0 0;font-size:.85rem;font-weight:700;letter-spacing:.04em;color:var(--petrol)}
.kaartkamer-note a{border-bottom:1px solid currentColor;padding-bottom:.1rem}
.kaartkamer-note a:hover{color:var(--crimson)}

/* — Artikelhero: langere koppen dan een gewoon district — */
.district-main>article{display:grid;grid-template-columns:minmax(0,48rem) minmax(14rem,18rem);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.article-hero{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(1rem,3vw,2rem)}
.article-hero .eyebrow,.article-hero h1{grid-column:1}
.article-hero .eyebrow{align-self:end;margin-bottom:0}
.article-hero h1{max-width:24ch;font-size:clamp(2.25rem,4.4vw,3.9rem)}
.article-visual{position:relative;grid-column:2;grid-row:1 / 3;margin:0;padding:.65rem;background:#fff;border:1px solid rgba(28,43,46,.15);box-shadow:.7rem .8rem 0 rgba(18,82,91,.1);transform:rotate(.7deg)}
.article-visual::before{content:"";position:absolute;z-index:1;top:-.6rem;left:50%;width:4.8rem;height:1.2rem;background:rgba(244,200,75,.58);border:1px solid rgba(28,43,46,.08);transform:translateX(-50%) rotate(-2deg)}
.article-visual picture,.article-visual img{display:block;width:100%}
.article-visual img{height:auto;aspect-ratio:3/2;object-fit:cover}

/* — Leeskolom: één uitgevouwen routekaart, rustige maat (~68ch) — */
.article-body{grid-column:1;grid-row:2;max-width:none;width:100%;padding:clamp(1.5rem,3.5vw,2.8rem)}
.article-body p,.article-body li{font-size:1.02rem;line-height:1.65}
.article-body p{margin:0 0 1.15rem}
.article-body>p:last-child{margin-bottom:0}
.article-body h2{position:relative;font:400 clamp(1.65rem,2.6vw,2.15rem)/1.12 var(--serif);margin:2.5rem 0 .9rem;padding-top:1.4rem;border-top:1px solid rgba(28,43,46,.24)}
.article-body h2::before{content:"";position:absolute;top:-.32rem;left:1.2rem;width:.58rem;height:.58rem;background:var(--crimson);transform:rotate(45deg)}
.article-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.article-body h2:first-child::before{display:none}
.article-body h3{font:400 1.32rem/1.15 var(--serif);letter-spacing:-.02em;margin:1.9rem 0 .55rem}
.article-body a{color:var(--petrol);font-weight:700;border-bottom:1px solid currentColor;padding-bottom:.08rem}
.article-body a:hover{color:var(--crimson)}
.article-body ul,.article-body ol{margin:0 0 1.15rem;padding-left:1.3rem}
.article-body li{margin:.55rem 0}
.article-body li::marker{color:var(--crimson)}

/* — Rekenblok: kassabonnetje naast de kaart — */
.rekenblok{margin:1.7rem 0;padding:1.15rem 1.35rem;background:#fff;border:1px solid rgba(28,43,46,.22);box-shadow:.5rem .5rem 0 rgba(244,200,75,.55);clip-path:polygon(0 0,97% 0,100% 7%,100% 100%,3% 100%,0 94%);font-size:.95rem;line-height:1.6}
.rekenblok .dim{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol)}
.rekenblok .ok{font-weight:700;color:var(--crimson)}

/* — Citaat: gevouwen kantlijnnotitie — */
.article-body blockquote{margin:1.7rem 0;padding:1rem 1.25rem;border-left:3px solid var(--crimson);background:rgba(244,200,75,.14);clip-path:polygon(0 0,100% 0,100% 86%,96.5% 100%,0 100%);font-style:italic}
.article-body blockquote p:last-child{margin-bottom:0}

/* — Veelgestelde vragen: notities langs de vouwlijn — */
.faq{margin-top:1.1rem}
.faq p{margin:0;padding:1rem 0;border-top:1px dashed rgba(28,43,46,.25)}
.faq p strong{display:block;margin-bottom:.3rem}

/* — Notitie onder de district-CTA — */
.article-rail{grid-column:2;grid-row:2;position:sticky;top:6rem;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-rail>p{margin:0 0 .9rem;font:500 .7rem/1.4 var(--mono);text-transform:uppercase;color:var(--petrol)}
.article-rail ol{display:grid;gap:.65rem;margin:0;padding:0;list-style:none;counter-reset:toc}
.article-rail li{counter-increment:toc;display:grid;grid-template-columns:1.5rem 1fr;gap:.45rem;font-size:.82rem;line-height:1.35}
.article-rail li::before{content:counter(toc,decimal-leading-zero);font:500 .65rem/1.6 var(--mono);color:var(--crimson)}
.article-rail a:hover{color:var(--crimson)}
.article-rail-cta{display:inline-block;margin-top:1.2rem;padding-bottom:.1rem;border-bottom:1px solid currentColor;font-weight:800;color:var(--petrol)}
.district-main article>.district-cta{grid-column:1 / -1;width:100%}
.district-cta .cta-note{margin:.25rem 0 0;font:500 .7rem/1.4 var(--mono);text-transform:uppercase;color:var(--petrol)}

@media (max-width:780px){
  .district-main>article,.article-hero{grid-template-columns:1fr}
  .article-hero .eyebrow,.article-hero h1,.article-visual{grid-column:1}
  .article-hero .eyebrow{grid-row:1}
  .article-hero h1{grid-row:2}
  .article-visual{grid-row:3;transform:none}
  .article-rail,.article-body{grid-column:1;grid-row:auto}
  .article-rail{position:static;top:auto}
  .article-body{padding:1.3rem 1.15rem}
  .article-hero h1{font-size:clamp(2rem,7.5vw,2.6rem)}
}

/* Begrippen hebben leesbreedte nodig: maximaal drie rustige kaarten per rij. */
.glossary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.glossary-grid .fold-card{min-height:13rem}
@media (max-width:960px){.glossary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.glossary-grid{grid-template-columns:1fr}.glossary-grid .fold-card{min-height:0}}