/* Article body only. First-card typography and spacing come from blue-card.css. */
.article-page{padding-bottom:64px}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px 18px;color:#c9e0ea;font-size:12px;line-height:1.5}
.article-meta button{margin-left:auto}
.article-body.detail-side-card{height:auto!important;max-width:900px;margin:24px auto;padding:clamp(18px,3vw,32px)}
.article-cover{margin:0 0 24px}
.article-cover img{display:block;width:100%;max-height:560px;object-fit:cover;border-radius:14px}
.article-body figcaption{margin:8px 0;color:var(--muted);font-size:12px;line-height:1.5}
.article-intro{font-size:16px;line-height:1.75;font-weight:650;color:var(--ink);margin:0 0 24px}
.article-content{color:var(--ink);font-size:16px;line-height:1.8;overflow-wrap:anywhere}
.article-content p{margin:0 0 1.2em}
.article-content h2,.article-content h3{margin:1.6em 0 .6em;line-height:1.3;letter-spacing:-.02em;font-size:23px;font-weight:700}
.article-content h3{font-size:20px}
.article-content figure{margin:24px 0}
.article-content img,.article-content video,.article-content iframe{display:block;max-width:100%;height:auto;border-radius:12px}
.article-content img{cursor:zoom-in}
.article-content iframe{width:100%;aspect-ratio:16/9;border:0}
.article-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.article-content th,.article-content td{padding:8px 12px;text-align:left;border-bottom:1px solid #c6d7dd}
.article-content ul,.article-content ol{padding-left:24px;margin:0 0 1.2em}
.article-content blockquote{margin:24px 0;padding:12px 18px;border-left:3px solid #4c9cbd;background:rgba(255,255,255,.4)}
.article-content a{color:#206e92;text-decoration:underline;text-underline-offset:3px}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid #c6d7dd}
.article-related{margin:40px 0}
.article-related .news-page-grid{margin-top:20px}
.article-image-viewer{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:24px;background:#0b2339;color:#fff;border:0;overflow:auto}
.article-image-viewer::backdrop{background:rgba(5,20,31,.85)}
.article-image-viewer>button{position:sticky;top:0;display:block;margin:0 0 18px auto;z-index:1}
.article-image-viewer img{display:block;max-width:100%;max-height:calc(100dvh - 100px);object-fit:contain;margin:auto}
@media(max-width:600px){.article-body.detail-side-card{margin-top:18px;padding:18px!important}.article-content,.article-intro{font-size:15px}.article-meta{font-size:11px}.article-meta button{margin-left:0}.article-content h2{font-size:21px}}

.article-meta>[data-share-status]:empty{display:none}.article-meta>[data-share-status]:not(:empty){flex-basis:100%;text-align:right}
.article-meta [data-article-share]{margin-left:auto}
.article-body figcaption,.article-content p:has(img),.article-content p:has(>sub:only-child){text-align:center;font-size:12px;line-height:1.5;color:var(--muted)}
.article-body figcaption sub,.article-content p>sub:only-child{font-size:inherit;vertical-align:baseline}
@media(max-width:600px){.article-meta{padding-inline:6px}}
.article-meta{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:8px 10px;font-size:11px}
.article-meta>span:not([data-share-status]){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-meta [data-article-share]{grid-column:3;margin-left:0;justify-self:end;padding:8px 10px;font-size:11px;white-space:nowrap}
.article-meta>[data-share-status]:not(:empty){grid-column:1/-1}

.article-body figcaption,.article-content p:has(img),.article-content p:has(>sub:only-child){font-size:10px!important;line-height:1.45;text-align:center}
.article-body figcaption *{font-size:inherit!important;line-height:inherit!important}

/* De hoofdfoto sluit aan op de randen; de artikeltekst houdt zijn binnenruimte. */
.article-body.detail-side-card{--article-body-pad:24px;padding:var(--article-body-pad)!important;overflow:hidden}
.article-cover{margin-top:calc(-1 * var(--article-body-pad));margin-left:calc(-1 * var(--article-body-pad));margin-right:calc(-1 * var(--article-body-pad))}
.article-cover img{border-radius:0}
.article-cover figcaption{padding-inline:var(--article-body-pad)}
@media(max-width:850px){.article-body.detail-side-card{--article-body-pad:17px}}
@media(max-width:600px){.article-body.detail-side-card{--article-body-pad:18px}}