/* ============================================================
   DEEL 3C — TOOLKAARTEN (de opmaak van variant c)
   ------------------------------------------------------------
   Gedeeld door deel-3c-toolkaarten.html (met regelpaneel) en
   index.html (de site). Bouwt voort op toolkaarten-basis.css: het
   vlak, de kop en de klap staan daar; hier staat alles wat
   variant c eraan toevoegt — de toolkaart met tekst eronder,
   de rode standen, de uitklapbare uitleg en de foto-helft.
   Alle getallen komen uit toolkaarten-params.js (sleutel c).
   ============================================================ */

/* ============================================================
   KLEURTOKENS VAN DE UITLEG
   Eén set namen, vijf standen. Zo hoeft er nergens een losse
   kleur in de tekening of de tekst te staan.
   ============================================================ */
:root{
  /* WELK rood — uit de huisstijl, niet uit trionn.
     signaalrood staat in DESIGN.md en is afgeleid van het logo (#E6084F). */
  --rood-merk:#D71B4E;
  --rood-logo:#E6084F;
  --rood-oranje:#FF501E;
  --rood-bordeaux:#8B1A1A;
  --rood-nu:var(--rood-merk);

  --tp-vlak:var(--donker);
  --tp-tekst:var(--licht);
  --tp-zacht:var(--grijs);
  --tp-rand:rgba(216,216,216,.18);
  --tp-inkt:#D8D8D8;
  --tp-flauw:rgba(216,216,216,.3);
  --tp-accent:#FF501E;
  --tp-arcering:rgba(255,80,30,.5);
  /* het beeldvlak van een kaart */
  --kaart-vlak:linear-gradient(160deg,#dcdcda 0%,#c9c7c4 55%,#b9b6b2 100%);
  --kaart-kicker:#4a4a4a;
  --kaart-chip:#8d8a86;
  --kaart-chiprand:#aaa7a2;
}
/* --- welke rode toon (rood.toon) --- */
body[data-toon="0"]{--rood-nu:var(--rood-merk)}
body[data-toon="1"]{--rood-nu:var(--rood-logo)}
body[data-toon="2"]{--rood-nu:var(--rood-oranje)}
body[data-toon="3"]{--rood-nu:var(--rood-bordeaux)}
/* de bordeaux is donker: daar hoort lichte tekst bij, niet de donkere */
body[data-toon="3"][data-rood="1"], body[data-toon="3"][data-rood="4"]{
  --tp-tekst:#F3E7E4;
  --tp-zacht:rgba(243,231,228,.62);
  --tp-rand:rgba(243,231,228,.24);
  --tp-inkt:#F3E7E4;
  --tp-flauw:rgba(243,231,228,.3);
  --tp-accent:#FFFFFF;
  --tp-arcering:rgba(255,255,255,.55);
}
body[data-toon="3"] .toolkaart[data-tool="cadvitool"],
body[data-toon="3"] .toolkaart[data-tool="streetsmart"]{--kaart-kicker:#F3E7E4}

/* --- rood in de uitleg (stand 1 en 4) --- */
body[data-rood="1"], body[data-rood="4"]{
  --tp-vlak:var(--rood-nu);
  --tp-tekst:#1B0703;
  --tp-zacht:rgba(27,7,3,.66);
  --tp-rand:rgba(27,7,3,.28);
  --tp-inkt:#1B0703;
  --tp-flauw:rgba(27,7,3,.35);
  --tp-accent:#FFFFFF;
  --tp-arcering:rgba(255,255,255,.7);
}
/* --- rood in een kaart (stand 2, 3 en 4) --- */
body[data-rood="2"] .toolkaart[data-tool="cadvitool"],
body[data-rood="4"] .toolkaart[data-tool="cadvitool"],
body[data-rood="3"] .toolkaart[data-tool="streetsmart"]{
  --kaart-vlak:linear-gradient(160deg,
                color-mix(in oklch, var(--rood-nu) 84%, #FFFFFF) 0%,
                var(--rood-nu) 55%,
                color-mix(in oklch, var(--rood-nu) 82%, #000000) 100%);
  --kaart-kicker:#43140A;
  --kaart-chip:rgba(27,7,3,.6);
  --kaart-chiprand:rgba(27,7,3,.35);
}

/* ============================================================
   DE RIJ — raster in plaats van flex, zodat één kaart de volle
   breedte kan pakken door de andere kolom naar 0fr te knijpen
   ============================================================ */
.kaartenrij{
  display:grid;
  grid-template-columns:var(--kol1,1fr) var(--kol2,1fr);
  gap:var(--k-tussen,1.5rem);
  align-items:start;
  max-width:calc(2 * var(--k-breedte,40rem) + var(--k-tussen,1.5rem));
  margin-inline:auto;
}

/* ============================================================
   DE TOOLKAART — beeldvlak met de naam erin, tekst eronder
   (zelfde opbouw als de kaarten in deel-1-werkvlakken)
   ============================================================ */
.klapkaart.toolkaart{
  max-width:none;width:100%;min-width:0;
  height:var(--k-hoogte,30.5rem);
  border-radius:0;overflow:visible;background:none;
  color:var(--lijn-d);
  display:flex;flex-direction:column;
  cursor:pointer;
}
.klapkaart.toolkaart:focus-visible{outline:2px solid var(--rood);outline-offset:8px}

.tk-beeld{
  position:relative;flex:1;min-height:0;
  overflow:hidden;border-radius:.5rem;
  background:var(--kaart-vlak);
}
/* lichte verdonkering onderin, zodat de witte naam blijft staan */
.tk-beeld::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);
}
.tk-beeld .kicker2{
  position:absolute;top:1.4rem;left:1.6rem;z-index:3;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--kaart-kicker);line-height:var(--lh-mono-blok);
}
.tk-beeld .leeg{
  position:absolute;top:1.4rem;right:1.4rem;z-index:3;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--kaart-chip);border:1px dashed var(--kaart-chiprand);
  padding:.4rem .7rem;border-radius:2px;
}
/* bottom .12em (was -.14em): de naam stond afgesneden onder de rand (Leon, 8 sep) */
.tk-beeld .reusnaam{
  position:absolute;left:.45rem;bottom:.12em;z-index:4;
  font-family:var(--disp);font-weight:500;font-size:var(--fs-h1);
  letter-spacing:var(--ls-display);line-height:var(--lh-display);
  color:#fff;white-space:nowrap;
}
/* de aanwijzing dat er iets te openen valt */
.tk-open{
  position:absolute;right:1.4rem;bottom:1.5rem;z-index:4;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:var(--fs-knop-mono);letter-spacing:var(--ls-knop-mono);
  text-transform:lowercase;color:#fff;
  opacity:.75;transition:opacity var(--dur-kort) var(--ease-soft);
}
.toolkaart:hover .tk-open{opacity:1}
.toolkaart[aria-expanded="true"] .tk-open{opacity:0;pointer-events:none}
.tk-open svg{width:12px;height:12px}

.tk-onder{flex:0 0 auto;margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}
.tk-onder h3,.tk-onder .rij p,.tk-onder .tk-knop{will-change:transform,opacity}
.tk-onder h3{color:var(--zwart)}
.tk-onder .rij{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.tk-onder .rij p{max-width:var(--maat-tekstkolom);color:#6d6d6d}
/* het knoplabel is het vastgezette trionn-model: .cs + het veeglijntje.
   Opmaak en tempo staan in typografie.css, de opbouw onderaan dit bestand. */
/* .ws-knop.tk-knop: in index.html komt de eigen .ws-knop-regel (licht, 12rem) ná dit
   bestand en zou anders winnen — vandaar de dubbele klasse */
.ws-knop.tk-knop,.tk-knop{color:var(--lijn-d);width:10.5rem;flex:0 0 auto}
.tk-knop .knoplijn{color:rgba(67,67,67,.55)}

/* ============================================================
   DE VRIJE HELFT — alleen de foto, verder niets
   Eén kant tekst, één kant beeld: dat houdt de uitgeklapte kaart rustig.
   ============================================================ */
.tk-extra{
  position:absolute;top:0;bottom:0;width:52%;z-index:3;
  overflow:hidden;visibility:hidden;
}
.tk-extra[data-kant="rechts"]{right:0}
.tk-extra[data-kant="links"] {left:0}
.tk-extra .tk-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.tk-extra .tk-foto-leeg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#c9c7c4 0 14px,#c3c1be 14px 28px);
}
.tk-extra .tk-foto-leeg span{
  position:relative;z-index:2;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:#7d7a76;border:1px dashed #a3a09b;
  padding:.45rem .8rem;border-radius:2px;background:rgba(255,255,255,.35);
}
/* alleen onderin een zoom, zodat de naam van de kaart blijft staan */
.tk-extra::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,12,0) 55%,rgba(12,12,12,.45) 100%);
}

/* ============================================================
   DE UITLEG — schuift de vrijgekomen helft binnen
   ============================================================ */
.toolpaneel{
  position:absolute;top:0;bottom:0;width:48%;z-index:5;
  background:var(--tp-vlak);color:var(--tp-tekst);
  padding:clamp(1.4rem,2.1vw,2.2rem);
  display:flex;flex-direction:column;gap:.85rem;
  visibility:hidden;
  /* geen transition op background: het paneel staat bij het laden op
     visibility:hidden, en een overgang die daar begint blijft in Chrome
     op de beginkleur hangen — dan blijft het rood onzichtbaar. */
}
.toolpaneel[data-kant="rechts"]{right:0;border-left:1px solid var(--tp-rand)}
.toolpaneel[data-kant="links"] {left:0; border-right:1px solid var(--tp-rand)}
.toolpaneel .tp-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.toolpaneel .tp-naam{
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:lowercase;color:var(--tp-zacht);line-height:var(--lh-mono-blok);
}
.tk-sluit{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:var(--fs-knop-mono);letter-spacing:var(--ls-knop-mono);
  text-transform:lowercase;color:var(--tp-tekst);
  border:1px solid var(--tp-rand);border-radius:99px;padding:.35rem .8rem;
  transition:background var(--dur-tik) ease,border-color var(--dur-tik) ease;
}
.tk-sluit:hover{background:rgba(127,127,127,.18);border-color:var(--tp-tekst)}
.toolpaneel .tp-titel{font-family:var(--disp);font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:var(--lh-h3)}
.toolpaneel .tp-tekst{font-size:var(--fs-klein);line-height:var(--lh-klein);max-width:var(--maat-tekstkolom)}
.toolpaneel .tp-lijst{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:.4rem}
.toolpaneel .tp-lijst li{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);
  text-transform:lowercase;color:var(--tp-zacht);
  border-top:1px solid var(--tp-rand);padding-top:.4rem;
}
.toolpaneel .tp-noot{font-size:var(--fs-klein);line-height:var(--lh-klein);color:var(--tp-zacht);max-width:var(--maat-tekstkolom)}
.toolpaneel .tp-chip{
  display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:var(--fs-mono-xs);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--tp-zacht);
  border:1px dashed var(--tp-rand);padding:.35rem .6rem;border-radius:2px;
}

/* --- de tekst in de uitleg komt regel voor regel op ----------
   Rustig en op volgorde: kopje, titel, alinea, dan de opsomming. */
.toolpaneel .tp-kop,.toolpaneel .tp-titel,.toolpaneel .tp-tekst,
.toolpaneel .tp-noot,.toolpaneel .tp-lijst li{opacity:0;transform:translateY(10px)}
.toolpaneel.actief .tp-kop,.toolpaneel.actief .tp-titel,.toolpaneel.actief .tp-tekst,
.toolpaneel.actief .tp-noot,.toolpaneel.actief .tp-lijst li{
  animation:opkomen var(--dur-lang) var(--ease-soft) forwards;
}
.toolpaneel.actief .tp-titel  {animation-delay:.10s}
.toolpaneel.actief .tp-tekst  {animation-delay:.20s}
.toolpaneel.actief .tp-noot   {animation-delay:.20s}
.toolpaneel.actief .tp-lijst li:nth-child(1){animation-delay:.34s}
.toolpaneel.actief .tp-lijst li:nth-child(2){animation-delay:.42s}
.toolpaneel.actief .tp-lijst li:nth-child(3){animation-delay:.50s}
.toolpaneel.actief .tp-lijst li:nth-child(4){animation-delay:.58s}
@keyframes opkomen{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .toolpaneel .tp-kop,.toolpaneel .tp-titel,.toolpaneel .tp-tekst,
  .toolpaneel .tp-noot,.toolpaneel .tp-lijst li{opacity:1;transform:none;animation:none}
}

/* ============================================================
   ROODKIEZER IN HET REGELPANEEL — alleen voor deze studie
   ============================================================ */
#roodrij,#toonrij,#drijfrij{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
#roodrij button,#toonrij button,#drijfrij button{
  border:1px solid rgba(216,216,216,.25);border-radius:99px;
  padding:.3rem .6rem;font-size:.55rem;letter-spacing:.04em;text-transform:lowercase;
  transition:background .3s,border-color .3s;
}
#roodrij button:hover,#toonrij button:hover,#drijfrij button:hover{background:rgba(216,216,216,.12)}
#roodrij button[aria-pressed="true"],#toonrij button[aria-pressed="true"],#drijfrij button[aria-pressed="true"]{
  background:var(--rood-nu);border-color:var(--rood-nu);color:#FFF3F0}

/* ============================================================
   SMALLE SCHERMEN — kaarten onder elkaar, geen groeiende kolom
   ============================================================ */
@media(max-width:900px){
  .kaartenrij{grid-template-columns:1fr!important;gap:clamp(2rem,5vw,3rem)!important}
  .klapkaart.toolkaart{height:auto}
  .tk-beeld{aspect-ratio:670/460;flex:0 0 auto}
  .tk-extra{position:relative;inset:auto;width:100%;height:14rem;visibility:visible;
    transform:none!important;opacity:1!important;margin-top:1.2rem;border-radius:.5rem}
  .toolpaneel{position:relative;inset:auto;width:100%;visibility:visible;
    transform:none!important;opacity:1!important;margin-top:1.2rem;border-radius:.5rem;border:0}
  .tk-sluit{display:none}
  .tk-open{display:none}
}