/* sc-content.css — gedeelde stijl voor nieuws-artikelen en praktijkvoorbeeld-detailpagina's.
   Night-pass 2026-07-10. Scoped op .scx zodat het de bestaande huisstijl niet raakt.
   Gebruikt de bestaande design-tokens met fallbacks; verbergt nooit content (geen reveal-afhankelijkheid). */

.scx{background:var(--paper,#faf9f6);color:var(--ink,#0d0d0d)}
.scx .scx-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.scx .scx-prose{max-width:760px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* ---------- Hero (petrol-balk met boog, zelfde taal als /casestudies en /contact) ---------- */
.scx .scx-hero{position:relative;color:#fff;background:linear-gradient(180deg,var(--petrol,#0b405f) 0%,var(--petrol-deep,#072f47) 100%);padding:clamp(44px,6vw,72px) 0 clamp(88px,10vw,120px)}
.scx .scx-hero .scx-eyebrow{margin:0 0 16px;font-family:var(--mono,'IBM Plex Mono',monospace);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow,#e8c320)}
.scx .scx-hero h1{margin:0;font-family:var(--display,'Fraunces',Georgia,serif);font-optical-sizing:auto;font-weight:560;font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.015em;color:#fff;max-width:20ch}
.scx .scx-hero .scx-dek{margin:18px 0 0;max-width:60ch;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.86)}
.scx .scx-meta{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.scx .scx-meta li{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px}

/* byline voor artikelen */
.scx .scx-byline{display:flex;align-items:center;gap:13px;margin:26px 0 0}
.scx .scx-byline .scx-av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--yellow,#e8c320);color:var(--petrol-deep,#072f47);display:flex;align-items:center;justify-content:center;font-family:var(--display,'Fraunces',serif);font-weight:600;font-size:1.05rem}
.scx .scx-byline .scx-nm{font-family:var(--sans,'Archivo',sans-serif);font-weight:600;font-size:.98rem;color:#fff}
.scx .scx-byline .scx-ro{display:block;margin-top:2px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.72)}

/* ---------- Body ---------- */
.scx .scx-body{padding:clamp(40px,6vw,72px) 0}
.scx .scx-body > .scx-prose > *{margin-top:0}
.scx .scx-lead{font-family:var(--sans,'Archivo',sans-serif);font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:rgba(13,13,13,.86);margin:0 0 26px}
.scx .scx-body h2{font-family:var(--display,'Fraunces',serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:var(--petrol-deep,#072f47);margin:40px 0 14px;letter-spacing:-.01em;scroll-margin-top:90px}
.scx .scx-body h3{font-family:var(--sans,'Archivo',sans-serif);font-weight:700;font-size:1.06rem;color:var(--ink,#0d0d0d);margin:26px 0 8px}
.scx .scx-body p{font-size:16.5px;line-height:1.72;color:rgba(13,13,13,.82);margin:0 0 16px}
.scx .scx-body ul,.scx .scx-body ol{margin:0 0 18px;padding-left:1.25em}
.scx .scx-body li{font-size:16.5px;line-height:1.65;color:rgba(13,13,13,.82);margin:0 0 8px}
.scx .scx-body a{color:var(--petrol,#0b405f);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.scx .scx-body a:hover{color:var(--petrol-deep,#072f47)}
.scx .scx-body strong{font-weight:700;color:var(--petrol-deep,#072f47)}

/* uitgelicht kader (own-practice-transparantie / juridische disclaimer) */
.scx .scx-note{background:rgba(11,64,95,.05);border:1px solid rgba(11,64,95,.14);border-left:4px solid var(--yellow,#e8c320);border-radius:10px;padding:clamp(16px,2.4vw,22px);margin:0 0 30px}
.scx .scx-note p{margin:0;font-size:15px;line-height:1.6;color:rgba(13,13,13,.8)}
.scx .scx-note p + p{margin-top:10px}
.scx .scx-note b{color:var(--petrol-deep,#072f47)}

/* In het kort */
.scx .scx-tldr{background:#fffefb;border:1px solid rgba(13,13,13,.12);border-left:4px solid var(--yellow,#e8c320);border-radius:10px;padding:clamp(18px,2.6vw,24px);margin:0 0 30px}
.scx .scx-tldr .scx-tl{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol,#0b405f);margin:0 0 12px}
.scx .scx-tldr ul{margin:0;padding-left:1.15em}
.scx .scx-tldr li{margin:0 0 7px}

/* afbeelding */
.scx figure.scx-figure{margin:26px 0}
.scx figure.scx-figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid rgba(13,13,13,.12)}
.scx figure.scx-figure figcaption{margin-top:10px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.7rem;letter-spacing:.04em;color:#5a7178}

/* twee-koloms feitenblok (proces / grenzen) */
.scx .scx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);margin:0 0 22px}
.scx .scx-card{background:#fffefb;border:1px solid rgba(13,13,13,.12);border-radius:12px;padding:clamp(18px,2.4vw,24px)}
.scx .scx-card h3{margin:0 0 10px;color:var(--petrol-deep,#072f47)}
.scx .scx-card ul{margin:0;padding-left:1.15em}
.scx .scx-card p:last-child,.scx .scx-card li:last-child{margin-bottom:0}
@media(max-width:680px){.scx .scx-grid2{grid-template-columns:1fr}}

/* Bronnen-blok */
.scx .scx-sources{background:#fffefb;border:1px solid rgba(13,13,13,.12);border-radius:12px;padding:clamp(18px,2.6vw,24px);margin:36px 0 0}
.scx .scx-sources h2{margin:0 0 6px;font-size:clamp(19px,2vw,23px)}
.scx .scx-sources .scx-access{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.68rem;letter-spacing:.04em;color:#5a7178;margin:0 0 14px}
.scx .scx-sources ol{margin:0;padding-left:1.25em}
.scx .scx-sources li{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:rgba(13,13,13,.8)}
.scx .scx-sources a{word-break:break-word}

/* CTA-band */
.scx .scx-cta{background:linear-gradient(180deg,var(--petrol,#0b405f) 0%,var(--petrol-deep,#072f47) 100%);color:#fff;margin-top:clamp(48px,7vw,80px)}
.scx .scx-cta .scx-cta-inner{max-width:820px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(20px,4vw,40px);text-align:center}
.scx .scx-cta h2{font-family:var(--display,'Fraunces',serif);font-weight:500;font-size:clamp(24px,3vw,36px);line-height:1.14;color:#fff;margin:0 0 14px}
.scx .scx-cta p{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.85);margin:0 auto 26px;max-width:56ch}
.scx .scx-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* knoppen */
.scx .scx-btn{display:inline-block;background:var(--yellow,#e8c320);color:var(--petrol-deep,#072f47);font-family:var(--sans,'Archivo',sans-serif);font-weight:600;font-size:.96rem;text-decoration:none;padding:14px 24px;border-radius:8px;border:1px solid var(--yellow,#e8c320);transition:background .18s,transform .18s}
.scx .scx-btn:hover{background:#cda812;transform:translateY(-1px)}
.scx .scx-btn--ghost{display:inline-block;background:transparent;color:#fff;font-family:var(--sans,'Archivo',sans-serif);font-weight:600;font-size:.96rem;text-decoration:none;padding:14px 24px;border-radius:8px;border:1px solid rgba(255,255,255,.5);transition:border-color .18s,background .18s}
.scx .scx-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* terug-link */
.scx .scx-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans,'Archivo',sans-serif);font-weight:600;font-size:.92rem;color:var(--petrol-deep,#072f47);text-decoration:none;margin:34px 0 0}
.scx .scx-back::before{content:"\2190";color:#b8890f}
.scx .scx-back:hover{text-decoration:underline;text-decoration-color:var(--yellow,#e8c320);text-decoration-thickness:2px;text-underline-offset:3px}

/* focus states */
.scx a:focus-visible,.scx .scx-btn:focus-visible,.scx .scx-btn--ghost:focus-visible{outline:3px solid var(--yellow,#e8c320);outline-offset:3px;border-radius:6px}
.scx .scx-cta a:focus-visible{outline-color:#fff}

@media(max-width:760px){
  .scx .scx-hero{padding-bottom:clamp(64px,12vw,88px)}
}