/* YoCodex blog (licht). Laadt na shell.css en site.css. */
.blog{padding-bottom:72px}
.b-kruim{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:28px 0 0;font-size:14px}
.b-kruim a{color:var(--ycx-zacht);text-decoration:none}
.b-kruim a:hover{color:var(--ycx-inkt)}
.b-taal{font:500 12px/1 var(--ycx-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ycx-lijn2);border-radius:999px;padding:7px 12px}

.b-kop{padding-top:8px;padding-bottom:12px}
.b-kop h1{margin-top:28px}
.b-kop .kicker{margin-top:40px}

.b-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px;padding-top:40px}
.b-kaart{display:flex;flex-direction:column;background:var(--ycx-vlak);border:1px solid var(--ycx-lijn);border-radius:14px;overflow:hidden;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.b-kaart:hover{border-color:var(--ycx-lijn2);box-shadow:var(--ycx-schaduw);transform:translateY(-2px)}
.b-kaart-img{background:var(--ycx-vlak2);border-bottom:1px solid var(--ycx-lijn);height:220px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:20px}
.b-kaart-img img{width:150px;height:auto;border-radius:7px;box-shadow:0 8px 24px rgba(21,21,26,.18);transform:rotate(-4deg)}
.b-kaart-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.b-kaart-body .kicker{margin:0 0 10px;font-size:11px}
.b-kaart h2{margin:0 0 10px;font:800 23px/1.15 var(--ycx-kop);letter-spacing:-.015em;color:var(--ycx-inkt)}
.b-kaart p:not(.kicker){margin:0;color:var(--ycx-zacht);font-size:15px}
.b-lees{margin-top:18px;font-weight:600;color:var(--ycx-accent);font-size:15px}

.b-art{max-width:760px}
.b-art .kicker{margin:40px 0 14px}
.b-art h1{font-size:clamp(32px,5.4vw,52px);line-height:1.08;letter-spacing:-.025em}
.b-meta{margin:18px 0 0;font-size:14px;color:var(--ycx-zacht)}
.b-disc{margin:14px 0 0;padding:10px 14px;background:var(--ycx-vlak2);border:1px solid var(--ycx-lijn);border-radius:var(--ycx-r);font-size:13px;color:var(--ycx-zacht)}
.b-tekst{margin-top:28px;font-size:17px;line-height:1.7}
.b-tekst .b-lead{font-size:19px;color:var(--ycx-tekst);margin:0 0 8px}
.b-tekst h2{margin:44px 0 12px;font:800 27px/1.15 var(--ycx-kop);letter-spacing:-.015em;color:var(--ycx-inkt)}
.b-tekst p{margin:0 0 16px}
.b-tekst ul{margin:0 0 18px;padding-left:20px}
.b-tekst li{margin:0 0 10px}
.b-tekst a:not(.ycx-btn){color:var(--ycx-accent)}

.b-cta{margin:26px 0;padding:20px 22px;background:var(--ycx-vlak);border:1px solid var(--ycx-lijn);border-radius:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.b-cta .ycx-btn{min-height:46px;padding:0 22px}
.b-cta p{margin:0;flex:1 1 240px;font-size:13px;color:var(--ycx-zacht);line-height:1.5}

.bk{margin:24px 0;text-align:center}
.bk img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:12px;box-shadow:0 10px 30px rgba(21,21,26,.18);background:var(--ycx-vlak2)}
.bk.groot img{max-width:380px}
.bk figcaption{margin-top:12px;font-size:14px;color:var(--ycx-zacht);display:flex;flex-direction:column;gap:2px}
.bk figcaption b{color:var(--ycx-inkt)}
.b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;margin:10px 0 18px}
.b-grid .bk{margin:12px 0}
.b-grid .bk figcaption{font-size:13px}

.b-faq{margin-top:48px;border-top:1px solid var(--ycx-lijn);padding-top:8px}
.b-faq details{border-bottom:1px solid var(--ycx-lijn);padding:14px 0}
.b-faq summary{cursor:pointer;font-weight:600;color:var(--ycx-inkt);list-style-position:outside}
.b-faq details p{margin:10px 0 0;color:var(--ycx-zacht)}
.voet a{color:inherit}

@media (max-width:560px){
  .b-tekst{font-size:16px}
  .b-tekst .b-lead{font-size:17px}
  .b-grid{gap:4px 12px}
  .b-kaart-img{height:190px}
  .b-kaart-img img{width:128px}
}
.b-grader{margin:44px 0 0;padding:24px 22px;background:#15151A;color:#F6F4EF;border-radius:16px}
.b-grader .kicker{margin:0 0 10px!important;color:#F4E3A6}
.b-grader h2{margin:0 0 10px;font:800 26px/1.15 var(--ycx-kop);letter-spacing:-.015em;color:#fff}
.b-grader p{margin:0 0 18px;color:#D9D6CE;font-size:16px;line-height:1.6}
.b-grader .ycx-btn{background:#D23B24;border-color:#D23B24;color:#fff;min-height:46px;padding:0 22px}