/* Gedeelde bouwstenen voor "Wat erin zit": tekstblok per hoofdstuk (.wez-*) en beeldcomposities.
   Varianten zetten het beeld in een .wez-podium (container), zodat de compositie zelf kiest
   tussen de brede en de smalle vorm. */

.wez-podium{container-type:inline-size;width:100%}
.wez-smal-alleen{display:none}
@container (max-width:480px){
  .wez-breed-alleen{display:none}
  .wez-smal-alleen{display:flex}
  .wez-comp.wez-smal-alleen{display:block}
}

/* tekstblok */
.wez-nr{font:700 14px/1 var(--getypt);color:var(--koper-donker);letter-spacing:.04em}
.wez-titel{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.wez-tekst{color:var(--lei);font-size:17px;line-height:1.65;max-width:52ch}
.wez-meta{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;padding-top:16px;border-top:1px solid var(--lijn);max-width:52ch}
.wez-meta div{display:grid;gap:5px}
.wez-meta dt{font:600 11px/1 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--lei)}
.wez-meta dd{margin:0;font-size:15px;font-weight:500;color:var(--inkt);line-height:1.4}

/* composities */
.wez-comp{position:relative;width:100%}
.wez-comp-site{padding-bottom:6%}
.wez-comp-site .wez-groot{width:88%}
.wez-comp-site .wez-klein{position:absolute;right:0;bottom:0;width:24%;filter:drop-shadow(0 30px 40px rgba(20,35,61,.18))}
.wez-comp-vind{padding-bottom:14%}
.wez-comp-vind .wez-groot{width:86%}
.wez-comp-vind .wez-klein{position:absolute;right:0;bottom:0;width:52%}
.wez-comp-over{padding-bottom:4%}
.wez-comp-over .wez-groot{width:66%}
.wez-comp-over .wez-klein{position:absolute;right:0;top:14%;width:50%}
.wez-comp-nb{max-width:640px;margin-inline:auto}
.wez-comp-kw{max-width:700px;margin-inline:auto}
@container (max-width:480px){
  .wez-comp-site .wez-groot,.wez-comp-vind .wez-groot,.wez-comp-over .wez-groot{width:100%}
  .wez-comp-site .wez-klein{position:relative;width:62%;margin:-18% 0 0 auto}
  .wez-comp-vind .wez-klein{position:relative;width:100%;margin-top:16px}
  .wez-comp-over .wez-klein{position:relative;width:100%;top:auto;margin-top:16px}
  .wez-comp-site,.wez-comp-vind,.wez-comp-over{padding-bottom:0}
}

/* veegrij voor smalle schermen */
.wez-swipe{gap:18px;flex-direction:column;padding:6px 0 0} /* onder elkaar, geen eigen scroll (2026-09-30) */
.wez-swipe::-webkit-scrollbar{display:none}
.wez-swipe > div{flex:none;width:100%}
.wez-swipe > div.breed{width:100%}

/* smalle campagne (ontwerpbreedte 620) */
.vdk.vdk-smal{width:620px;grid-template-columns:1fr;gap:34px}
.vdk-smal .vdk-tijdlijn{margin-top:0}
.vdk-smal .vdk-artikel img{height:240px}

/* wisselbalk tussen de varianten (intern, alleen op /varianten/) */
.varbalk{display:flex;justify-content:center;gap:2px;padding:6px var(--rand);background:#0E1628;font:500 12.5px/1 var(--tekst);overflow-x:auto;scrollbar-width:none}
.varbalk a{color:#9FB0CC;text-decoration:none;padding:8px 12px;border-radius:7px;white-space:nowrap}
.varbalk a:hover{color:#fff;background:rgba(255,255,255,.08)}
.varbalk a[aria-current]{background:#F6F6F3;color:#13223F}
.varbalk a:first-child{color:#E0A873}
@media (max-width:700px){.varbalk{justify-content:flex-start}}

/* wie het doet */
.wez-door{display:inline-flex;align-items:center;gap:10px;justify-self:start;font:600 13px/1.3 var(--tekst);color:var(--inkt);background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:7px 14px 7px 8px}
.wez-door i{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#E8A876 0 18%,#B4692F 50%,#7A3F17 100%)}