/* plotta-inzichten.css: de opmaak van /inzichten (S36).
 *
 * Een eigen bestand, niet in plotta-site.css: dat laadt ook in de app, en een
 * artikelopmaak hoort daar niet bij elke opening mee te komen. Alleen de tokens van
 * plotta-site.css (:root), geen eigen kleuren. De pagina's maakt
 * scripts/inzichten-bouw.js; de klassen beginnen allemaal met .iz-.
 */

.iz { padding-bottom:56px; }
/* plotta-site.css geeft elke section 72px boven en onder (de blokken van de homepage);
   hier zijn secties delen van één tekst. :where() houdt de specificiteit gelijk aan die
   van `section`, zodat deze regel wint (hij laadt later) en een eigen klasse van hem. */
:where(.iz) section { padding:0; }
.iz-smal { max-width:760px; }
[hidden] { display:none !important; }

/* De navigatie: Inzichten staat aan op de pagina's van de sectie zelf. */
.nav-links a.iz-nav-actief { color:var(--foam); }
.nav-links a.iz-nav-actief[aria-current] { background:var(--hull); }

.iz-voorvertoning { margin:0; padding:10px 28px; background:var(--warn-bg); color:var(--warn-tekst); font-size:14px; text-align:center; }

/* ===== kruimelpad ===== */
.iz-kruimel { padding-top:28px; }
.iz-kruimel ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--mist); }
.iz-kruimel li + li::before { content:'/'; margin-right:6px; color:var(--ink-40); }
.iz-kruimel a { text-decoration:underline; text-underline-offset:2px; }
.iz-kruimel a:hover { color:var(--foam); }

/* ===== de kop van een stuk ===== */
.iz-kop { padding:22px 0 8px; }
.iz-kop h1 { font-size:42px; margin:0 0 16px; }
.iz-meta { margin:0 0 14px; font-size:14px; color:var(--mist); }
.iz-meta a { color:var(--foam); text-decoration:underline; text-underline-offset:2px; }
/* Soort actueel: de stand van zaken, boven de titel. */
.iz-stand { margin:0 0 10px; font-size:14px; font-weight:600; color:var(--green-700); }
.iz-themas { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.iz-themas a { display:inline-block; font-size:12px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.6); color:var(--green-700); border:1px solid var(--line); }
.iz-themas a:hover { background:var(--hull); }

/* ===== Read in English: knop en venster (popover, geen script) ===== */
.iz-engels { margin:0 0 6px; }
.iz-engels-knop { font:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:9px; border:1px solid var(--line); background:var(--hull); color:var(--mist); cursor:pointer; }
.iz-engels-knop:hover { color:var(--foam); border-color:var(--green-700); }
.iz-engels-venster { max-width:520px; width:calc(100% - 32px); margin:auto; padding:24px 26px 20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--hull); color:var(--foam); box-shadow:var(--card-shadow); font-size:14.5px; line-height:1.6; }
.iz-engels-venster::backdrop { background:rgba(15,31,23,.28); }
.iz-engels-venster h2 { font-size:22px; margin:0 0 10px; }
.iz-engels-venster p { margin:0 0 12px; }
.iz-engels-venster ul { margin:0 0 14px; padding-left:20px; }
.iz-engels-venster li { margin:0 0 6px; }
.iz-engels-venster a { color:var(--green-700); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.iz-engels-dicht { font:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:9px; border:1px solid var(--line); background:var(--hull-2); color:var(--foam); cursor:pointer; }

/* ===== kort gezegd ===== */
.iz-kern { margin:22px 0 8px; padding:18px 22px; background:var(--hull); border:1px solid var(--line); border-left:3px solid var(--beam); border-radius:var(--radius); }
.iz-kern-kop { margin:0 0 6px !important; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--beam-tekst); }
.iz-kern p { margin:0; font-size:16.5px; line-height:1.6; }

/* ===== de tekst ===== */
.iz-tekst { font-size:17px; line-height:1.72; color:var(--foam); }
.iz-tekst > :first-child { margin-top:22px; }
.iz-tekst p { margin:0 0 18px; }
.iz-tekst h2 { font-size:28px; margin:38px 0 12px; }
.iz-tekst h3 { font-size:21px; margin:28px 0 10px; }
.iz-tekst h2[id], .iz-tekst h3[id] { scroll-margin-top:84px; }
.iz-tekst ul, .iz-tekst ol, .iz-betekent ul, .iz-betekent ol { margin:0 0 18px; padding-left:24px; }
.iz-tekst li, .iz-betekent li { margin:0 0 8px; }
.iz-tekst a, .iz-betekent a, .iz-bronnen a { color:var(--green-700); text-decoration:underline; text-underline-offset:2px; }
.iz-tekst blockquote { margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--sage-300); font-family:'Newsreader',Georgia,serif; font-size:20px; font-style:italic; color:var(--green-700); }
.iz-tekst blockquote p { margin:0 0 10px; }
.iz-tekst code, .iz-betekent code { font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:.86em; padding:1px 5px; border-radius:5px; background:var(--hull-2); border:1px solid var(--line-soft); }
.iz-tabel { overflow-x:auto; margin:6px 0 22px; }
.iz-tabel table { width:100%; border-collapse:collapse; font-size:15px; background:var(--hull); }
.iz-tabel th, .iz-tabel td { text-align:left; vertical-align:top; padding:9px 12px; border:1px solid var(--line); }
.iz-tabel th { background:var(--hull-2); font-weight:600; }
.iz-ref { font-size:.72em; line-height:0; }
.iz-ref a { text-decoration:none !important; padding:0 1px; }

/* ===== wat dit voor jou betekent ===== */
.iz-betekent { margin:30px 0 8px; padding:22px 24px 6px; background:var(--hull); border:1px solid var(--line); border-radius:var(--radius-lg); font-size:16.5px; line-height:1.68; }
.iz-betekent h2 { font-size:24px; margin:0 0 12px; }
.iz-betekent p { margin:0 0 16px; }

/* ===== bronnen ===== */
.iz-bronnen { margin:34px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.iz-bronnen h2 { font-size:20px; margin:0 0 10px; }
.iz-bronnen ol { margin:0; padding-left:22px; font-size:14px; line-height:1.6; color:var(--mist); }
.iz-bronnen li { margin:0 0 6px; }
.iz-bronnen li:target { background:var(--sage-100); border-radius:6px; }

/* ===== de auteur ===== */
.iz-auteur { display:flex; gap:18px; align-items:flex-start; margin:30px 0 0; padding:20px 22px; background:var(--hull); border:1px solid var(--line); border-radius:var(--radius-lg); }
.iz-auteur img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; background:var(--sage-100); }
.iz-auteur p { margin:0 0 6px; font-size:14.5px; line-height:1.6; color:var(--mist); }
.iz-auteur-naam { color:var(--foam) !important; font-weight:600; }
.iz-auteur-naam a { text-decoration:underline; text-underline-offset:2px; }
.iz-auteur-naam span { display:block; font-weight:400; color:var(--mist); font-size:13.5px; }
.iz-auteur-groot img { width:120px; height:120px; }
.iz-auteur-groot p { font-size:16px; }
.iz-auteur-groot a { color:var(--green-700); text-decoration:underline; text-underline-offset:2px; }

/* ===== kaarten: verder lezen, overzicht ===== */
.iz-verder { margin:34px 0 0; }
.iz-verder h2 { font-size:22px; margin:0 0 14px; }
.iz-lijst { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px; }
.iz-kaart { background:var(--hull); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.iz-kaart-meta { margin:0 0 6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist); }
.iz-kaart h2, .iz-kaart h3 { font-size:20px; margin:0 0 6px; line-height:1.25; }
.iz-kaart h2 a:hover, .iz-kaart h3 a:hover { text-decoration:underline; text-underline-offset:3px; }
.iz-kaart p { margin:0; font-size:14.5px; line-height:1.55; color:var(--mist); }
.iz-kaart .iz-kaart-meta { margin-bottom:6px; }
.iz-lijst-groot { grid-template-columns:repeat(2, 1fr); gap:16px; }
.iz-lijst-groot .iz-kaart { padding:20px 22px; }
.iz-lijst-groot .iz-kaart h2 { font-size:23px; }

/* ===== overzicht ===== */
.iz-hero { padding:6px 0 24px; }
.iz-hero-top { padding-top:40px; }
.iz-hero h1 { font-size:46px; margin:0 0 14px; }
.iz-hero .iz-kruimel { padding-bottom:18px; }
.iz-lead { font-size:18px; line-height:1.6; color:var(--mist); max-width:640px; margin:0 0 18px; }
.iz-hero-acties { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.iz-hero-acties .iz-engels { margin:0; }
.iz-rss { font-size:13px; font-weight:600; color:var(--green-700); text-decoration:underline; text-underline-offset:2px; }
.iz-filter { margin:4px 0 20px; padding:14px 16px; background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:var(--radius); }
.iz-filter-groep { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; }
.iz-filter-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--mist); min-width:56px; }
.iz-chip { font:inherit; font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--hull); color:var(--foam); cursor:pointer; }
.iz-chip span { color:var(--mist); font-size:12px; margin-left:2px; }
.iz-chip[aria-pressed="true"] { background:var(--green-900); border-color:var(--green-900); color:var(--hull); }
.iz-chip[aria-pressed="true"] span { color:var(--sage-300); }
.iz-filter-stand { margin:2px 0 0; font-size:13px; color:var(--mist); }
.iz-wis { font:inherit; font-size:13px; margin-left:10px; padding:0; border:0; background:none; color:var(--green-700); text-decoration:underline; cursor:pointer; }
.iz-leeg { font-size:15px; color:var(--mist); }
.iz-verwijs { display:flex; flex-wrap:wrap; gap:18px; margin:26px 0 0; font-size:14.5px; }
.iz-verwijs a { color:var(--green-700); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* ===== begrippen ===== */
.iz-letter { margin:0 0 22px; }
.iz-letter h2 { font-size:26px; margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.iz-letter dl { margin:0; }
.iz-letter dt { font-size:18px; font-weight:600; margin:12px 0 2px; }
.iz-letter dt a { color:var(--green-700); text-decoration:underline; text-underline-offset:2px; }
.iz-letter dd { margin:0; font-size:15px; line-height:1.55; color:var(--mist); }

/* ===== de zachte zin onderaan ===== */
.iz-plotta { margin:38px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.6; color:var(--mist); }
.iz-plotta a { color:var(--green-700); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

@media (max-width:760px) {
  .iz-lijst-groot { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .iz-kop h1 { font-size:32px; }
  .iz-hero h1 { font-size:36px; }
  .iz-tekst { font-size:16.5px; }
  .iz-tekst h2 { font-size:24px; }
  .iz-lead { font-size:16.5px; }
  .iz-auteur { flex-direction:column; }
  .iz-engels-venster { padding:20px 18px 16px; }
  /* De h1 staat er direct onder; op een telefoon is het laatste stuk van het pad dubbel. */
  .iz-kruimel li:last-child:not(:first-child) { display:none; }
}