/* Blog: overzicht en artikelen. Bouwt voort op stijl.css (huisstijl) en statisch.css. */

/* kopband met link terug naar het overzicht */
.kopband .lab a{color:inherit;transition:color .2s}
.kopband .lab a:hover{color:var(--oranje)}
.kopband .lab .sep{color:var(--oranje);margin:0 .2em}
.kopband h1 em{font-style:italic;color:var(--oranje)}
.kopband.artikel-kop h1{max-width:24ch}
.kopband.artikel-kop h1.lang{font-size:clamp(1.7rem,3.4vw,2.7rem);max-width:30ch}
.kopband .meta{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin-top:1.6rem;font-size:.86rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C7CBE0}
.kopband .meta span{display:inline-flex;align-items:center;gap:.9rem;white-space:nowrap}
.kopband .meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--oranje);flex:none}
.kopband .meta time{white-space:nowrap}
.kopband.artikel-kop{padding-bottom:6.5rem}

/* uitgelicht beeld, uit de kopband omhoog getrokken, in het huisstijlkader */
.artikel-sec{padding-top:0}
.blog-beeld{max-width:920px;margin:-4.2rem auto 0;position:relative;z-index:2}
.blog-beeld>img{width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:var(--r);
  display:block;background:var(--vlak)}
.blog-beeld.staand>img{max-height:520px}
.blog-beeld.kader::before{border-color:var(--rand)}
@media(max-width:760px){.blog-beeld{margin-top:-3rem}.blog-beeld>img{max-height:380px}}

/* het artikel zelf: rustige leesbreedte */
.artikel{max-width:72ch;margin:3.6rem auto 0;font-size:1.08rem;line-height:1.72}
.artikel>p,.artikel>ul,.artikel>ol{margin-top:1.25rem}
.artikel>p:first-child{margin-top:0}
.artikel h2{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;letter-spacing:-.03em;
  line-height:1.1;font-size:clamp(1.55rem,2.6vw,2.05rem);margin:3rem 0 .9rem;padding-bottom:.06em;text-wrap:balance}
.artikel h2::before{content:"/ ";color:var(--oranje);font-weight:900}
.artikel h3{font-family:Figtree,sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:-.01em;
  line-height:1.3;margin:2.2rem 0 .6rem;color:var(--tekst)}
.artikel h2+h3{margin-top:1.4rem}
.artikel p+p{margin-top:1.1rem}
.artikel strong{font-weight:700;color:var(--tekst)}
.artikel a{color:var(--oranje-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(242,86,35,.4);transition:text-decoration-color .2s,color .2s}
.artikel a:hover{color:var(--oranje);text-decoration-color:var(--oranje)}
.artikel ul,.artikel ol{padding-left:1.35rem}
.artikel li{margin-top:.55rem;padding-left:.25rem}
.artikel li::marker{color:var(--oranje);font-weight:700}
.artikel ul li::marker{content:"— "}
.artikel blockquote{margin:2.2rem 0;padding-left:1.4rem;border-left:3px solid var(--oranje);
  font-family:Archivo,Arial,sans-serif;font-style:italic;font-weight:700;font-size:1.3rem;line-height:1.35;letter-spacing:-.02em}
.artikel figure{margin:2.4rem 0}
.artikel figure.beeld img{width:100%;height:auto;border-radius:var(--r)}
.artikel figure.video video{width:100%;height:auto;border-radius:var(--r);background:var(--donker);display:block}
.artikel figure.video.staand video{max-width:400px;margin:0 auto}
.artikel figcaption{font-size:.88rem;color:var(--tekst-zacht);margin-top:.6rem}

/* samenvatting bovenaan */
.artikel .kort{background:var(--vlak);border-radius:var(--r);padding:1.5rem 1.7rem 1.6rem;margin:0 0 2.4rem;
  position:relative;font-size:1rem}
.artikel .kort::before{content:"";position:absolute;left:0;top:1.3rem;bottom:1.3rem;width:3px;background:var(--oranje);
  border-radius:0 2px 2px 0}
.artikel .kort-lab{display:block;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.artikel .kort-lab i{font-style:italic;font-weight:900;color:var(--oranje);margin-right:.15em}
.artikel .kort ul{margin:.8rem 0 0;padding-left:1.2rem}
.artikel .kort li{margin-top:.45rem;line-height:1.55}

.artikel-slot{max-width:72ch;margin:3.4rem auto 0;display:flex;gap:.9rem;flex-wrap:wrap;
  padding-top:2.2rem;border-top:1px solid var(--rand)}

/* filters op het overzicht */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:0;padding-top:2.6rem}
.filter{font:inherit;font-size:.9rem;font-weight:600;padding:.55rem 1rem .55rem 1.05rem;border-radius:999px;
  border:1px solid var(--rand);background:transparent;color:var(--tekst);cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;transition:background .2s,border-color .2s,color .2s}
.filter i{font-style:normal;font-size:.76rem;font-weight:700;color:var(--tekst-zacht);
  background:var(--vlak);border-radius:999px;padding:.1rem .5rem;transition:inherit}
.filter:hover{border-color:var(--tekst)}
.filter.aan{background:var(--tekst);border-color:var(--tekst);color:var(--grond)}
.filter.aan i{background:var(--oranje);color:#fff}
.filter:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
.leeg{margin-top:2rem;color:var(--tekst-zacht)}

/* kaartenraster */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.6rem;margin-top:2.4rem}
.bloggrid.drie{margin-top:2.4rem}
.kaart{display:flex;flex-direction:column;border-radius:var(--r);min-width:0;color:inherit}
.kaart[hidden]{display:none}
.kaart-beeld{display:block;overflow:hidden;border-radius:var(--r);background:var(--vlak);position:relative;isolation:isolate}
.kaart-beeld img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.kaart:hover .kaart-beeld img{transform:scale(1.04)}
.kaart-beeld::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(20,24,43,.08);pointer-events:none}
.kaart-tekst{display:flex;flex-direction:column;padding:1.2rem .2rem 0}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst-zacht);font-weight:600}
.meta b{color:var(--oranje);font-weight:800}
.kaart-kop{display:block;margin-top:.7rem;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;
  letter-spacing:-.03em;line-height:1.1;font-size:1.32rem;padding-bottom:.06em;text-wrap:balance;
  transition:color .2s}
.kaart:hover .kaart-kop{color:var(--oranje)}
.kaart-uit{display:block;margin-top:.7rem;font-size:.95rem;line-height:1.6;color:var(--tekst-zacht)}
.lees{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.9rem;font-weight:700;color:var(--tekst)}
.lees i{font-style:normal;color:var(--oranje);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.kaart:hover .lees i{transform:translateX(5px)}

/* het nieuwste artikel over de volle breedte: beeld links, tekst rechts */
.kaart.groot{grid-column:1/-1;flex-direction:row;align-items:center;gap:2.6rem;background:var(--vlak);
  padding:1.2rem}
.kaart.groot .kaart-beeld{flex:1 1 55%;border-radius:6px}
.kaart.groot .kaart-beeld img{aspect-ratio:16/10}
.kaart.groot .kaart-tekst{flex:1 1 45%;padding:.6rem 1.4rem .6rem 0}
.kaart.groot .kaart-kop{font-size:clamp(1.6rem,2.6vw,2.3rem);margin-top:1rem}
.kaart.groot .kaart-uit{font-size:1.02rem;margin-top:1rem}
@media(max-width:1000px){.bloggrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.kaart.groot{flex-direction:column;align-items:stretch;gap:0;padding:.9rem}
  .kaart.groot .kaart-tekst{padding:1.2rem .4rem .6rem}}
@media(max-width:600px){.bloggrid{grid-template-columns:1fr;gap:2.4rem}}

/* onthulling: kaarten in een rij komen na elkaar op */
.js-anim .bloggrid .kaart.rv{transition-delay:calc(var(--i,0) * 60ms)}
.js-anim .bloggrid .kaart.rv.zicht{transition-delay:0s}