/* Blogbericht (/post/<naam>, src/pages/post/[slug].astro) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* hero: omslagfoto over de volle breedte, daaronder de titel */
.post-article{display:block}
.post-hero{padding:0;overflow:clip}
.post-banner{position:relative;margin:0;height:clamp(360px,66vh,780px);background:var(--ink2);overflow:hidden}
.post-banner img{display:block;width:100%;height:100%;object-fit:cover}
.post-banner::before{content:"";position:absolute;inset:0 0 auto;height:220px;background:linear-gradient(rgba(14,15,26,.78),rgba(14,15,26,0));z-index:1;pointer-events:none}
.post-banner::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(rgba(14,15,26,0),var(--ink));pointer-events:none}
.post-head{position:relative;padding:40px 0 96px}
.post-hero.no-img .post-head{padding-top:190px}
.post-head .wrap{position:relative;z-index:2;max-width:1120px}
.post-hero h1{font-size:clamp(34px,4.4vw,62px);line-height:1.08;margin-bottom:24px;max-width:980px}
.post-hero .lead{max-width:760px;color:rgba(255,255,255,.72)}
.post-meta{color:rgba(255,255,255,.6);flex-wrap:wrap;margin-bottom:22px}
.post-meta .cat{background:rgba(50,95,252,.25);color:#fff}
.post-meta span:not(.cat)::before{content:"·";margin-right:12px;opacity:.6}
.post-nf{margin-top:32px}

/* laden */
.post-skel{display:grid;gap:18px;max-width:900px;margin-top:8px}
.post-skel i{display:block;height:54px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06));background-size:200% 100%;animation:post-sh 1.4s linear infinite}
.post-skel i:nth-child(2){width:80%}
.post-skel i:nth-child(3){width:55%;height:22px;margin-top:10px}
@keyframes post-sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.post-skel i{animation:none}}

/* artikel */
.post-main{padding:88px 0 112px}
.post-main .wrap{max-width:1120px}
.post-layout{max-width:760px;margin:0 auto}

.post-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;margin-bottom:48px}
.post-toc .eyebrow{margin-bottom:12px}
.post-toc ol{margin:0;padding-left:20px;display:grid;gap:8px}
.post-toc a{color:var(--ink);font-size:16px;line-height:1.45;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
.post-toc a:hover{color:var(--spark);background-size:100% 1px}

.post-body{font-size:19px;line-height:1.75;color:#2a2c3b}
.post-body>*+*{margin-top:22px}
.post-body h2,.post-body h3,.post-body h4{color:var(--ink);scroll-margin-top:110px}
.post-body h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;margin:56px 0 0}
.post-body h3{font-size:clamp(21px,2vw,26px);line-height:1.25;margin:40px 0 0}
.post-body h4{font-size:20px;line-height:1.3;margin:32px 0 0}
.post-body h2+*,.post-body h3+*,.post-body h4+*{margin-top:14px}
.post-body>:first-child{margin-top:0}
.post-body a{color:var(--spark-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.post-body a:hover{color:var(--ink)}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body em{font-style:italic;color:inherit;font-family:inherit}
.post-body ul,.post-body ol{padding-left:26px;display:grid;gap:10px}
.post-body li::marker{color:var(--spark)}
.post-body li>ul,.post-body li>ol{margin-top:10px}
.post-body blockquote{border-left:3px solid var(--spark);padding:6px 0 6px 26px;font-size:21px;line-height:1.6;color:var(--ink)}
.post-body blockquote>*+*{margin-top:12px}
.post-body hr{border:0;height:1px;background:var(--line);margin:48px 0}
.post-body pre{background:var(--ink);color:#fff;border-radius:12px;padding:20px;overflow:auto;font-size:15px}
.post-table{overflow-x:auto}
.post-table table{border-collapse:collapse;width:100%;font-size:16px}
.post-table td{border:1px solid var(--line);padding:10px 14px;vertical-align:top}

.post-fig{margin:36px 0}
.post-fig img{display:block;width:100%;height:auto;border-radius:16px;background:#e9e6df}
.post-fig figcaption{margin-top:10px;font-size:15px;color:var(--grey);text-align:center}
.post-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:36px 0}
.post-gal .post-fig{margin:0}
.post-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.post-cols>div>*+*{margin-top:18px}

.post-video .yt,.post-video iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:0;background:#000}
.post-video .yt img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .6s var(--ease),opacity .3s}
.post-video .yt:hover img{transform:scale(1.03);opacity:.85}
.yt-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--spark);box-shadow:0 10px 30px rgba(50,95,252,.5);transition:transform .3s var(--ease)}
.yt-play::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.post-video .yt:hover .yt-play{transform:scale(1.08)}

.post-foot{margin-top:64px;padding-top:32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.post-upd{width:100%;font-size:15px;color:var(--grey)}
.post-share{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.post-share span{margin-right:6px}
.post-share a,.post-share button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.post-share a:hover,.post-share button:hover{background:var(--spark);border-color:var(--spark);color:#fff}
.post-share svg{width:18px;height:18px}
.post-foot .btn .arr{font-style:normal}

/* lees ook */
.post-related{padding:0 0 112px}
.post-related h2{font-size:clamp(30px,3.4vw,46px);margin-bottom:32px}

@media (max-width:767px){
  .post-banner{height:clamp(240px,48vh,420px)}
  .post-banner::before{height:140px}
  .post-head{padding:24px 0 64px}
  .post-hero.no-img .post-head{padding-top:130px}
  .post-main{padding-top:56px}
  .post-body{font-size:18px}
  .post-body h2{margin-top:44px}
  .post-toc{padding:22px 22px;margin-bottom:36px}
  .post-gal,.post-cols{grid-template-columns:1fr}
  .post-foot{flex-direction:column;align-items:flex-start}
  .post-main,.post-related{padding-bottom:80px}
}