/* article.css: blog article layout. */
/* CloudLabs · artikel.css · de blog en de losse artikelen
   ==========================================================================
   Hangt onder huisstijl/pagina.css. Elke kleur komt uit de tokens daar.
   Laadvolgorde: pagina.css -> artikel.css

   De bladspiegel is dezelfde als op de praktijkvoorbeelden: een kantlijn van
   280px naast een tekstkolom van 820px, samen 1160px binnen --max. Het verschil
   is wat er in die kantlijn staat. Bij een praktijkvoorbeeld is dat een
   sectienummer; hier is het de inhoudsopgave, die meeloopt tijdens het lezen.
   Deze artikelen zijn 2000 tot 3000 woorden met genummerde hoofdstukken, en dan
   is meelopen nuttig in plaats van decoratief. */

:root{--kopbalk:80px}
.artikelpagina{max-width:var(--max);margin:0 auto}

/* ---- kop ---------------------------------------------------------------- */
.kruimelpad{margin-left:var(--inspring);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
            color:var(--faint);margin:0 0 30px}
.kruimelpad a{color:var(--faint);text-decoration:none}
.kruimelpad a:hover{color:var(--accent)}

/* De kop staat in dezelfde kolom als de tekst eronder: gelijke
   linkerlijn en gelijke rechterrand, zodat er geen tweede
   bladspiegel ontstaat naast die van het artikel zelf. */
.artikelkop{margin:0 0 44px var(--inspring);max-width:var(--kolom)}
.artikelkop h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,52px);
               line-height:1.06;letter-spacing:-.022em;margin:0 0 24px;text-wrap:balance}
.artikelkop .lede{font-family:var(--serif);font-size:21px;line-height:1.55;color:var(--dim);
                  margin:0 0 16px;max-width:none;text-wrap:pretty}
.artikelkop .lede:last-of-type{margin-bottom:0}
.artikelmeta{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
             color:var(--faint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
             padding:14px 0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.artikelmeta b{font-weight:400;color:var(--dim)}
.artikelmeta i{font-style:normal;color:var(--rule)}

/* ---- het raster: inhoudsopgave links, tekst rechts ---------------------- */
.artikelbody{display:grid;grid-template-columns:var(--kantlijn) minmax(0,1fr);
             gap:0 var(--kantgat);align-items:start}

/* De navigatiebalk is position:sticky en 80px hoog (58px onder 800px breed).
   De inhoudsopgave moet daar dus onder blijven, anders schuift de bovenste
   regel eronder weg. --kopbalk houdt die twee waarden op één plek.
   max-height plus overflow: een artikel met twaalf hoofdstukken is langer dan
   een laag scherm, en dan moet de lijst zelf kunnen scrollen. */
.toc{position:sticky;top:calc(var(--kopbalk) + 24px);
     max-height:calc(100vh - var(--kopbalk) - 48px);overflow-y:auto;
     border-top:2px solid var(--ink);padding-top:18px}
.toc-title{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
           color:var(--faint);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin:0;border-bottom:1px solid var(--rule)}
.toc li:last-child{border-bottom:0}
.toc a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:9px 0;
       font-size:13.5px;line-height:1.4;color:var(--dim);text-decoration:none}
.toc a:before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;
              color:var(--faint);padding-top:2px}
.toc a:hover{color:var(--accent)}
.toc a:hover:before{color:var(--accent)}

.tekst{max-width:var(--kolom)}

/* ---- lopende tekst ------------------------------------------------------ */
.tekst h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;
          letter-spacing:-.012em;margin:52px 0 18px;scroll-margin-top:calc(var(--kopbalk) + 20px)}
.tekst h2:first-child{margin-top:0}
.tekst h3{font-size:18px;font-weight:600;margin:34px 0 10px}
.tekst p{font-family:var(--serif);font-size:18px;line-height:1.72;color:var(--dim);margin:0 0 20px}
.tekst ul,.tekst ol{margin:0 0 20px;padding-left:24px}
.tekst li{font-family:var(--serif);font-size:18px;line-height:1.68;color:var(--dim);margin:9px 0}
.tekst a{color:var(--accent)}
.tekst strong{color:var(--ink);font-weight:600}
.tekst em{font-style:italic}

/* Mono betekent machinewaarde: commando's, padnamen, tellers en versies. */
.tekst code{font-family:var(--mono);font-size:.84em;background:var(--sunk);
            border:1px solid var(--rule);border-radius:3px;padding:1.5px 5px;color:var(--ink)}
.tekst pre{font-family:var(--mono);font-size:13px;line-height:1.7;background:var(--band-diep);
           color:var(--band-ink);border-radius:4px;padding:20px 22px;margin:0 0 22px;
           overflow-x:auto;-webkit-overflow-scrolling:touch}
.tekst pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* HET CODEBLOK IN DE DONKERE STAND. De vulling hierboven is --band-diep,
   #0B0F1A, en dat is precies de grond waar de donkere pagina zelf op staat.
   Het blok verdween daardoor: de tekst bleef staan, de vorm eromheen niet.
   Nagemeten op /blog/csv-ownership-imbalance/: pagina en blok gaven allebei
   rgb(11,15,26).

   Hij krijgt daarom dezelfde behandeling als de losse code hierboven, --sunk
   met een rand in --rule, zodat het weer een blok is. Alleen in het donker;
   in de lichte stand blijft de donkere vulling zoals hij was. De tokens komen
   uit het donkere blok van huisstijl/pagina.css. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tekst pre{
    background:var(--sunk);color:var(--ink);border:1px solid var(--rule);
  }
}
:root[data-theme="dark"] .tekst pre{
  background:var(--sunk);color:var(--ink);border:1px solid var(--rule);
}

.tekst table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.tekst thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
                color:var(--faint);text-align:left;font-weight:400;
                border-bottom:1px solid var(--ink);padding:0 14px 10px 0}
.tekst tbody td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;
                color:var(--dim);vertical-align:top;line-height:1.55}
.tekst tbody td+td{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}
.tekst tbody tr:last-child td{border-bottom:1px solid var(--rule)}

/* Een uitgelichte alinea. Geen gekleurd kader met een pictogram: een streep in
   de kantlijn en een groter corps zeggen hetzelfde en verouderen niet. */
.callout{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:0 0 24px}
.callout p{font-size:19px;line-height:1.6;color:var(--ink);margin:0 0 12px}
.callout p:last-child{margin:0}

.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:26px}
.checklist li:before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;
                     border:1px solid var(--accent)}

.chart-figure{margin:0 0 26px}
.chart-figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:4px}
.chart-figure figcaption{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--faint);margin-top:10px}

/* risicolabels, waarden uit Styles.json */
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
       padding:3px 7px;border-radius:3px;color:var(--chip-ink);background:var(--faint)}
.b-high{background:var(--high)} .b-med{background:var(--med)} .b-low{background:var(--low)}
.b-none{background:var(--geen)} .b-res{background:var(--opgelost)}

/* ---- de tussenoproep ---------------------------------------------------- */
.mid-cta{background:var(--sunk);border:1px solid var(--rule);border-radius:4px;
         padding:26px 28px;margin:36px 0}
.mid-cta p{font-size:17px;line-height:1.65;margin:0 0 16px}
.mid-cta p:last-child{margin:0}

/* ---- vragen ------------------------------------------------------------- */
.faq-block{margin:0}
.faq-q{font-size:17px;font-weight:600;margin:0 0 10px;border-top:1px solid var(--rule);padding-top:24px}
.faq-block>p{margin:0 0 24px}

/* ---- gerelateerd -------------------------------------------------------- */
.related{border-top:1px solid var(--rule);margin-top:52px;padding-top:30px}
.related h3{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
            color:var(--faint);font-weight:400;margin:0 0 18px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related li{margin:0}
.related a{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:4px;
           padding:20px 22px;text-decoration:none;color:inherit;font-family:var(--serif);
           font-size:18px;line-height:1.3;transition:border-color .2s}
.related a:hover{border-color:var(--accent)}

/* ==========================================================================
   De blogindex */
.artikellijst{border-top:1px solid var(--rule)}
.artikelrij{display:grid;grid-template-columns:var(--kantlijn) minmax(0,1fr);gap:0 var(--kantgat);
            border-bottom:1px solid var(--rule);padding:32px 0;text-decoration:none;color:inherit;
            transition:background .15s}
.artikelrij:hover{background:var(--sunk)}
.artikelrij .rij-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
                      text-transform:uppercase;color:var(--faint);line-height:1.9;padding-top:5px}
.artikelrij .rij-meta b{display:block;font-weight:400;color:var(--accent)}
.artikelrij h2{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.2;
               margin:0 0 10px;max-width:26ch;letter-spacing:-.01em}
.artikelrij:hover h2{color:var(--accent)}
.artikelrij p{font-size:16px;line-height:1.6;color:var(--dim);margin:0;max-width:70ch}

@media(max-width:800px){
  :root{--kopbalk:58px}
}
@media(max-width:1040px){
  .tekst h2{font-size:28px}
}
@media(max-width:820px){
  /* minmax(0,1fr) en niet 1fr. Een kolom van 1fr is minstens zo breed als de
     breedste inhoud die er niet in kan breken, en dat is hier een codeblok:
     op time-drift is dat er een van 1019px. Die trok de kolom open, en dus de
     hele pagina, tot een telefoon van 390 horizontaal scrolde. Met de 0 erin
     mag de kolom smaller worden dan zijn inhoud en scrolt het codeblok zelf,
     wat het met overflow-x:auto hierboven al kon. */
  .artikelbody,.artikelrij{grid-template-columns:minmax(0,1fr);gap:0}
  .kruimelpad,.artikelkop{margin-left:0;max-width:none}
  .toc{position:static;margin-bottom:38px}
  .artikelrij .rij-meta{padding-top:0;margin-bottom:10px;line-height:1.6}
  .artikelrij .rij-meta b{display:inline;margin-right:10px}
  .related ul{grid-template-columns:1fr}
  .artikelkop .lede{font-size:18px}
  .tekst h2{font-size:25px}
  .tekst p,.tekst li{font-size:16.5px}
  .artikelrij h2{font-size:23px;max-width:none}

  /* Een tabel krimpt niet onder de som van zijn kolommen. Nu de kolom eromheen
     wel mag krimpen moet de tabel dus zelf kunnen schuiven, anders steekt hij
     alsnog buiten de pagina. display:block maakt van de tabel een schuifvak;
     de rijen erin blijven een tabel. */
  .tekst table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tekst thead th{white-space:nowrap}
}