/* ===========================================================================
   ZS-BAND — de volle band
   ---------------------------------------------------------------------------
   Het herkenningsteken van zeroslack.nl: secties die van rand tot rand lopen,
   in carbon of acid, met de inhoud op de gewone spiegel (1180px) binnenin.
   Gemeten op de live site: `section.ac-sec.dark`, `section.cta`, `section.cta`
   en `section.tv-deadline` werken alle vier zo.

   Wordt gevuld door bandlaag.js. Geen enkel woord verandert — alleen wáár het
   blok hangt en welk vlak eronder ligt.
   ========================================================================= */

.zsband{
  width:100%;
  padding:clamp(48px,6.2vw,84px) 0;
  margin:0;
}
.zsband-in{
  max-width:1180px;margin:0 auto;
  padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px);
}

/* ---- de drie vlakken ---------------------------------------------------- */
.zsband.dark{background:var(--ink);color:var(--paper)}
.zsband.acid{background:var(--acid);color:var(--ink)}
.zsband.paper{background:var(--paper);color:var(--ink)}

/* Twee carbon banden achter elkaar krijgen een acid haarlijn als naad — zo
   doet zeroslack.nl het waar `tv-sec.dark` op `tv-sec.dark` volgt. */
.zsband.dark + .zsband.dark{box-shadow:inset 0 1px 0 rgba(198,244,50,.34)}

/* ---- inversie op carbon -------------------------------------------------- */
/* Volledig, niet per geval: alles wat inkt was wordt papier, alles wat een
   hairline was wordt een papieren hairline. Anders valt er ergens diep in de
   opsomming een regel weg in het zwart. */
.zsband.dark h1,.zsband.dark h2,.zsband.dark h3,.zsband.dark h4,
.zsband.dark b,.zsband.dark strong,.zsband.dark summary,
.zsband.dark th,.zsband.dark dt{color:var(--paper)}
.zsband.dark p,.zsband.dark li,.zsband.dark td,.zsband.dark dd,
.zsband.dark figcaption,.zsband.dark small{color:rgba(244,243,239,.74)}
.zsband.dark a{color:var(--acid)}
.zsband.dark a:hover{color:var(--paper)}
.zsband.dark hr,.zsband.dark table,.zsband.dark td,.zsband.dark th,
.zsband.dark ul,.zsband.dark ol,.zsband.dark li,
.zsband.dark details,.zsband.dark .kbsrc,.zsband.dark .kblist,
.zsband.dark .kbmis,.zsband.dark .kbfaq{border-color:rgba(244,243,239,.22)}
.zsband.dark li::before{color:var(--acid)}
.zsband.dark .k,.zsband.dark .kicker,.zsband.dark .eyebrow{color:var(--acid)}

/* Witte kaarten binnen een carbon band blijven wit — dat is het contrast dat
   zeroslack.nl ook gebruikt (`tv-sec` wit tussen twee carbon banden). Hun
   eigen inkt moet dan wél inkt blijven. */
.zsband.dark .tlcard,.zsband.dark .tlgrid>*{background:#fff;color:var(--ink)}
.zsband.dark .tlcard *,.zsband.dark .tlgrid>* *{color:inherit}
.zsband.dark .tlcard a,.zsband.dark .tlgrid>* a{color:var(--ink)}
.zsband.dark .tlcard b,.zsband.dark .tlcard strong,
.zsband.dark .tlgrid>* b,.zsband.dark .tlgrid>* strong{color:var(--ink)}
.zsband.dark .tlcard p,.zsband.dark .tlgrid>* p,
.zsband.dark .tlcard li,.zsband.dark .tlgrid>* li{color:var(--ink-60)}

/* ---- inversie op acid ---------------------------------------------------- */
.zsband.acid h1,.zsband.acid h2,.zsband.acid h3,.zsband.acid h4,
.zsband.acid p,.zsband.acid li,.zsband.acid b,.zsband.acid strong,
.zsband.acid .k,.zsband.acid .kicker{color:var(--ink)}
.zsband.acid a{color:var(--ink)}
.zsband.acid hr,.zsband.acid li,.zsband.acid ul,.zsband.acid ol{border-color:rgba(10,10,10,.22)}

/* ═══ HET ANTWOORDBLOK ALS BAND ═══════════════════════════════════════════ */
/* Was: een smal carbon kaartje van 62ch in de kolom. Wordt: de openingsband
   van het artikel. Het blok draagt zijn vlak niet meer zelf — de band doet dat. */
.zsband .kbanswer{
  background:transparent;padding:0;margin:0;max-width:none;border:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
}
.zsband .kbanswer .k{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acid);
  margin:0 0 18px;display:block;
}
/* Op een band spreekt Zero Slack in groot type — dit is de maat van
   `.ac-sec.dark p` op zeroslack.nl/academy. */
.zsband .kbanswer p{
  margin:0;color:var(--paper);max-width:30ch;
  font-family:var(--sans);font-weight:800;
  font-size:clamp(21px,2.5vw,30px);line-height:1.22;letter-spacing:-.022em;
}
.zsband .kbanswer a{color:var(--acid)}
.zsband .kbanswer b,.zsband .kbanswer strong{color:var(--paper)}

/* ═══ DE AFSLUITER ALS BAND ═══════════════════════════════════════════════ */
/* Exact `section.cta` van zeroslack.nl: carbon vlak, kop 41,6px Archivo 900,
   tekst op 60% papier, één acid knop. */
.zsband .kbcta{
  background:transparent;padding:0;margin:0;border:0;max-width:none;
}
.zsband .kbcta .k{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acid);margin-bottom:14px;
}
.zsband .kbcta h3{
  font-family:var(--sans);font-weight:900;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(1.9rem,3.6vw,2.6rem);margin:0 0 16px;max-width:18ch;color:var(--paper);
}
.zsband .kbcta p{
  margin:0 0 26px;color:rgba(244,243,239,.60);max-width:58ch;
  font-size:17px;line-height:1.55;font-weight:500;
}
.zsband .kbcta .fine{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(244,243,239,.62);margin:0;
}

/* ═══ DE VERVOLGSTAP VAN EEN TOOL ═════════════════════════════════════════ */
/* `.tlnext` was al acid; als volle band is het `section.tv-deadline`. */
.zsband .tlnext{
  background:transparent;padding:0;margin:0;border:0;max-width:none;
}
.zsband.acid .tlnext .k{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;
}

/* ═══ DE UITLEG VAN EEN TOOL ══════════════════════════════════════════════ */
.zsband .tlprose{margin:0;padding:0;max-width:none;border:0;background:transparent}
.zsband .tlprose>*:first-child{margin-top:0}
.zsband .tlprose>*:last-child{margin-bottom:0}

/* ---- mobiel -------------------------------------------------------------- */
@media (max-width:760px){
  .zsband{padding:clamp(34px,8vw,48px) 0}
  .zsband .kbanswer p{font-size:19px;max-width:none}
  .zsband .kbcta h3{font-size:1.6rem;max-width:none}
}