/* Kaartendepot, opmaak van de kennisartikelen (waarde, kennis, kennis/...). Hoort naast style.css; alles wat alleen op artikelpagina's voorkomt staat hier. */

/* Kop van het artikel, in dezelfde maat als de paginakop elders, maar in de leeskolom */
.artikel-kop{padding:200px 0 48px}
.artikel-kop .kolom,.artikel,.kennislijst{width:min(68ch,calc(100% - 16vw));margin:0 auto;font-size:17px}
.artikel-kop .label{display:block;margin-bottom:22px}
.artikel-kop h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(38px,4.8vw,66px);line-height:1.04;color:#151412}
.artikel-kop .intro{margin-top:26px;font-size:18px;line-height:1.7;color:rgba(26,25,22,.75)}
.artikel-kop .meta{margin-top:28px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;line-height:2;color:rgba(26,25,22,.6)}

/* Leeskolom: maximaal 68 tekens breed, Inter 17 px, koppen in Cormorant */
.artikel{padding:0 0 120px;font-size:17px;line-height:1.75;color:rgba(26,25,22,.85)}
.artikel h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(30px,3vw,42px);line-height:1.12;color:#151412;margin:72px 0 22px;padding-top:28px;border-top:1px solid rgba(26,25,22,.18);scroll-margin-top:110px}
.artikel h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(23px,2.1vw,28px);line-height:1.2;color:#151412;margin:40px 0 12px;scroll-margin-top:110px}
.inhoud + h2,.tussen + h2,.checklist + h2,.treden + h2,.faq + h2{border-top:0;padding-top:0;margin-top:52px}
.artikel p{margin:0 0 20px}
.artikel a:not(.btn){border-bottom:1px solid rgba(26,25,22,.35)}
.artikel a:not(.btn):hover{border-bottom-color:#151412}
.artikel ul,.artikel ol{margin:0 0 24px;padding-left:1.4em}
.artikel li{margin:8px 0;padding-left:.2em}
.artikel strong{font-weight:500;color:#151412}
.artikel .klein{font-size:14.5px;line-height:1.7;color:rgba(26,25,22,.62)}

/* Inhoudsopgave bovenaan, ankerlinks */
.inhoud{margin:36px 0 0;padding:28px 0;border-top:1px solid rgba(26,25,22,.18);border-bottom:1px solid rgba(26,25,22,.18)}
.inhoud .label{display:block;margin-bottom:14px}
.inhoud ol{list-style:none;padding:0;margin:0;columns:2;column-gap:40px}
.inhoud li{margin:0;padding:6px 0;break-inside:avoid;font-size:16px;line-height:1.5}
.inhoud a{border-bottom:0!important;color:#151412}
.inhoud a:hover{color:#7a7368}
.inhoud .nr{display:inline-block;width:2.2em;font-size:12px;letter-spacing:.2em;color:#7a7368}

/* Afbeeldingen met bijschrift in kleine kapitalen */
.artikel figure{margin:36px 0 40px}
.artikel figure img{display:block;width:100%;height:auto;background:#ebe7de}
.artikel figcaption{margin-top:12px;font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:15.5px;line-height:1.6;color:rgba(26,25,22,.65)}

/* Tabellen met dunne lijnen, geen vlakken */
.tabel-wrap{margin:32px 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:560px}
.tabel caption{text-align:left;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:23px;line-height:1.2;color:#151412;padding-bottom:16px;caption-side:top}
.tabel th{font-weight:400;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,25,22,.6);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid rgba(26,25,22,.35);vertical-align:bottom}
.tabel td{padding:12px 16px 12px 0;border-bottom:1px solid rgba(26,25,22,.14);vertical-align:top;color:rgba(26,25,22,.85)}
.tabel td:first-child{color:#151412;font-weight:400}
.tabel th.r,.tabel td.r{text-align:right;white-space:nowrap}
.tabel th:last-child,.tabel td:last-child{padding-right:0}
.tabel-noot{margin:0 0 40px;font-size:14px;line-height:1.7;color:rgba(26,25,22,.62)}

/* Conditietreden */
.treden{list-style:none;margin:0 0 32px;padding:0}
.treden li{margin:0;padding:18px 0;border-top:1px solid rgba(26,25,22,.14);display:grid;grid-template-columns:150px 1fr;gap:20px}
.treden li:last-child{border-bottom:1px solid rgba(26,25,22,.14)}
.treden b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:23px;line-height:1.2;color:#151412}
.treden span{display:block;font-size:16px;line-height:1.7}

/* Genummerde checklist met dunne lijnen */
.checklist{list-style:none;padding:0;margin:0 0 32px;counter-reset:stap}
.checklist li{counter-increment:stap;position:relative;margin:0;padding:18px 0 18px 56px;border-top:1px solid rgba(26,25,22,.14)}
.checklist li:last-child{border-bottom:1px solid rgba(26,25,22,.14)}
.checklist li::before{content:counter(stap,decimal-leading-zero);position:absolute;left:0;top:21px;font-size:12px;letter-spacing:.3em;color:#7a7368}

/* Korte verwijzing naar het formulier, halverwege het artikel */
.tussen{margin:48px 0;padding:32px 0;border-top:1px solid rgba(26,25,22,.18);border-bottom:1px solid rgba(26,25,22,.18)}
.tussen p{margin:0 0 22px;color:#151412}

/* Veelgestelde vragen onderaan */
.faq{margin:0}
.faq .vraag{padding:26px 0;border-top:1px solid rgba(26,25,22,.14)}
.faq .vraag:last-child{border-bottom:1px solid rgba(26,25,22,.14)}
.faq h3{margin:0 0 10px;font-size:clamp(22px,2vw,26px)}
.faq p{margin:0;font-size:16px}

/* Meer lezen */
.meer{margin:64px 0 0}
.meer .label{display:block;margin-bottom:10px}
.meer a{display:block;padding:18px 0;border-top:1px solid rgba(26,25,22,.16);border-bottom:0!important;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(22px,2vw,27px);line-height:1.25;color:#151412}
.meer a:last-child{border-bottom:1px solid rgba(26,25,22,.16)!important}
.meer a small{display:block;font-family:"Inter",system-ui,sans-serif;font-weight:300;font-size:14.5px;line-height:1.6;color:rgba(26,25,22,.65);margin-top:4px}
.meer a:hover{color:#7a7368}

/* Overzichtspagina Kennis */
.kennislijst{padding:0 0 140px}
.kennislijst article{padding:36px 0;border-top:1px solid rgba(26,25,22,.18)}
.kennislijst article:last-child{border-bottom:1px solid rgba(26,25,22,.18)}
.kennislijst .datum{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,25,22,.55)}
.kennislijst h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(28px,2.8vw,40px);line-height:1.12;color:#151412;margin:12px 0 12px}
.kennislijst p{font-size:17px;line-height:1.7;color:rgba(26,25,22,.75);margin:0 0 16px}
.kennislijst .sub{margin-left:0}

@media(max-width:820px){
  .artikel-kop{padding:140px 0 36px}
  .artikel-kop .kolom,.artikel,.kennislijst{width:calc(100% - 48px)}
  .artikel{padding-bottom:90px}
  .artikel h2{margin-top:56px}
  .inhoud ol{columns:1}
  .treden li{grid-template-columns:1fr;gap:6px}
  .tabel-wrap{overflow:visible;margin-top:24px}
  .tabel{min-width:0;font-size:15px;border-top:1px solid rgba(26,25,22,.35)}
  .tabel caption{font-size:21px;padding-bottom:12px}
  .tabel thead{display:none}
  .tabel tbody{display:block}
  .tabel tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:16px 0;border-bottom:1px solid rgba(26,25,22,.14)}
  .tabel td,.tabel td.r{display:block;padding:0;border:0;text-align:left;white-space:normal}
  .tabel td:first-child{grid-column:1/-1;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:21px;line-height:1.2}
  .tabel td.breed{grid-column:1/-1}
  .tabel td[data-kop]::before{content:attr(data-kop);display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,25,22,.55);margin-bottom:3px}
  .checklist li{padding-left:44px}
  .kennislijst{padding-bottom:100px}
}