/* ============================================
   3HTS · Casepagina's (15-10-2026)
   Filmische casepagina per discipline: beeldvullende kop met foto, uitgelichte
   projecten met eigen foto, en een donker raster met projectkaarten.
   Gebruikt op de zes casepagina's (NL en EN) en voor de telling op de tegels
   van cases.html. Inhoud komt uit js/referenties-data.js via js/cases-weergave.js.
   ============================================ */
:root{
  --cx-nacht:#0b0f14;
  --cx-nacht-2:#10161d;
  --cx-kaart:#151c25;
  --cx-kaart-2:#1a2330;
  --cx-lijn:rgba(255,255,255,.09);
  --cx-tekst:#eef0f3;
  --cx-tekst-2:rgba(238,240,243,.68);
  --cx-oranje:var(--orange,#E8641A);
}

/* ---------- Kop ----------
   Donker, alleen terugknop, titel en aantallen. Geen foto in de kop
   (15-10-2026, op verzoek van Jeffrey). */
.cx-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--hts-menu-hoogte,81px) + 56px) var(--pad-x,30px) clamp(48px,6vw,84px);
  background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%);color:var(--cx-tekst);
}
.cx-hero-inner{position:relative;width:100%;max-width:1240px;margin:0 auto}
.cx-hero-tekst{display:grid;gap:22px;min-width:0}
.cx-terug{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono,monospace);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72)!important;text-decoration:none;
  padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:99px;
  transition:border-color .25s,color .25s;
}
.cx-terug:hover,.cx-terug:focus-visible{color:#fff!important;border-color:var(--cx-oranje)}
.cx-hero h1{
  margin:0;font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;
  font-size:clamp(44px,5.6vw,92px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;
  color:#fff;text-wrap:balance;
}
.cx-hero h1 em{font-family:var(--f-italic,'Instrument Serif',serif);font-style:italic;font-weight:400;
  color:var(--cx-oranje);text-transform:none;letter-spacing:0}
.cx-feiten{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:4px}
.cx-feiten[hidden]{display:none!important}
.cx-feit{display:grid;gap:2px}
.cx-feit b{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(34px,3.6vw,52px);
  line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.cx-feit span{font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cx-tekst-2)}

/* ---------- Projecten ---------- */
.cx-projecten{background:var(--cx-nacht);color:var(--cx-tekst);padding:clamp(56px,7vw,100px) var(--pad-x,30px) clamp(64px,8vw,120px);position:relative}
.cx-projecten::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 85% 0%,rgba(232,100,26,.10),transparent 70%),
             radial-gradient(50% 35% at 0% 100%,rgba(232,100,26,.06),transparent 70%)}
.cx-projecten-inner{position:relative;max-width:1240px;margin:0 auto;display:grid;gap:clamp(18px,2vw,26px)}
.cx-projecten .ref-melding{margin:0}
.cx-leeg{margin:0;font-size:17px;color:var(--cx-tekst-2)}

/* Uitgelicht: project met eigen foto */
.cx-uitgelicht{
  position:relative;overflow:hidden;isolation:isolate;min-height:clamp(380px,46vw,560px);
  display:flex;align-items:flex-end;background:var(--cx-nacht-2);
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
}
.cx-uitgelicht-foto{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  transform:scale(1.02);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.cx-uitgelicht:hover .cx-uitgelicht-foto{transform:scale(1.08)}
.cx-uitgelicht::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(11,15,20,.96) 0%,rgba(11,15,20,.55) 42%,rgba(11,15,20,0) 72%)}
.cx-uitgelicht::after{content:"";position:absolute;top:0;right:0;width:34px;height:34px;z-index:1;
  background:linear-gradient(225deg,var(--cx-oranje) 50%,transparent 50%)}
.cx-uitgelicht-inhoud{display:grid;gap:14px;padding:clamp(24px,4vw,48px);max-width:820px}
.cx-uitgelicht-titel{margin:0;font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;
  font-size:clamp(40px,6vw,84px);line-height:.88;letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-wrap:balance;overflow-wrap:break-word}
.cx-uitgelicht-tekst{margin:0;font-size:clamp(15px,1.25vw,17.5px);line-height:1.65;color:rgba(238,240,243,.86);max-width:64ch}

/* Raster met projectkaarten */
.cx-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(12px,1.4vw,18px)}
.cx-raster--titels{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.cx-kaart{
  position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;
  padding:clamp(22px,2.2vw,30px);
  background:linear-gradient(180deg,var(--cx-kaart-2) 0%,var(--cx-kaart) 100%);
  border:1px solid var(--cx-lijn);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s;
}
.cx-kaart::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--cx-oranje);transform:scaleX(.18);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cx-kaart::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(80% 60% at 0% 0%,rgba(232,100,26,.16),transparent 70%)}
.cx-kaart:hover{transform:translateY(-6px);border-color:rgba(232,100,26,.45)}
.cx-kaart:hover::before{transform:scaleX(1)}
.cx-kaart:hover::after{opacity:1}
.cx-titel{margin:0;font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;
  font-size:clamp(26px,2.4vw,34px);line-height:.95;letter-spacing:.005em;text-transform:uppercase;color:#fff;overflow-wrap:break-word}
.cx-kaart--titel{justify-content:space-between;min-height:150px}
.cx-kaart--titel .cx-titel{font-size:clamp(22px,1.7vw,26px)}
.cx-kaart--titel .cx-streep{width:42px;height:4px;background:var(--cx-oranje);transform:skewX(-30deg)}
.cx-tekst{margin:0;font-size:15px;line-height:1.65;color:var(--cx-tekst-2)}

/* Chips voor locatie en rol */
.cx-chips{display:flex;flex-wrap:wrap;gap:8px}
.cx-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  font-family:var(--f-mono,monospace);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cx-tekst);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);max-width:100%}
.cx-chip svg{width:13px;height:13px;flex:none;stroke:var(--cx-oranje);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-chip--plek{background:rgba(232,100,26,.14);border-color:rgba(232,100,26,.45)}
.cx-uitgelicht .cx-chip{background:rgba(11,15,20,.55);backdrop-filter:blur(6px)}

/* Inkomen bij scrollen. Zonder script of zonder ondersteuning staat alles gewoon in beeld. */
.cx-wacht{opacity:0;transform:translateY(26px)}
.cx-in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

/* ---------- Telling op de tegels van cases.html ---------- */
.case-tegels .svc-card{position:relative}
.cx-telling{position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:baseline;gap:8px;
  padding:7px 13px;border-radius:99px;background:rgba(11,15,20,.6);border:1px solid rgba(232,100,26,.55);
  backdrop-filter:blur(6px);color:#fff;font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.cx-telling b{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-size:20px;letter-spacing:0;color:var(--cx-oranje);font-weight:800}

@media (max-width:700px){
  .cx-uitgelicht{min-height:440px}
  .cx-uitgelicht::before{background:linear-gradient(0deg,rgba(11,15,20,.98) 0%,rgba(11,15,20,.7) 55%,rgba(11,15,20,.1) 85%)}
}
@media (prefers-reduced-motion:reduce){
  .cx-wacht{opacity:1;transform:none}
  .cx-kaart,.cx-uitgelicht-foto{transition:none}
}

/* Alleen voor schermlezers */
.cx-chip .sr-only,.cx-projecten .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Projectkaart met kleine foto bovenin (fotoKlein), 15-10-2026 */
.cx-kaart--foto{padding-top:0}
.cx-kaart-foto{margin:0 calc(-1 * clamp(22px,2.2vw,30px)) 4px;aspect-ratio:16/10;overflow:hidden;background:var(--cx-nacht-2)}
.cx-kaart-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.cx-kaart--foto:hover .cx-kaart-foto img{transform:scale(1.04)}
.cx-tekst + .cx-tekst,.cx-uitgelicht-tekst + .cx-uitgelicht-tekst{margin-top:-4px}

/* Disclaimer onder de omschrijving, 15-10-2026. Bij projectondersteuning
   verplicht. Staat onderaan de kaart, zodat ze in een rij op een lijn staan. */
.cx-disclaimer{display:flex;gap:10px;align-items:flex-start;margin:auto 0 0;padding-top:14px;border-top:1px solid var(--cx-lijn);
  font-size:13.5px;line-height:1.5;font-style:italic;color:rgba(238,240,243,.8)}
.cx-disclaimer::before{content:"";flex:none;width:14px;height:2px;margin-top:.72em;background:var(--cx-oranje)}
.cx-uitgelicht .cx-disclaimer{margin-top:2px;font-size:clamp(13.5px,1vw,15px);max-width:64ch;border-top-color:rgba(255,255,255,.18)}
/* Kaart zonder omschrijving rekt niet mee met een hoge buurkaart (geen leeg vlak). */
.cx-kaart--kort{align-self:start}
/* Vaste afstand tussen uitgelichte projecten en de rasters (15-10-2026). */
#refBlokken{display:grid;gap:clamp(12px,1.4vw,18px)}
/* Kaarten zonder omschrijving houden de gewone kaartbreedte. */
.cx-raster--kort{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
/* Mozaiek met fotoprojecten (15-10-2026): 6 kolommen, breed en klein wisselen. */
.cx-mozaiek{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.cx-span-6{grid-column:span 6}
.cx-span-4{grid-column:span 4}
.cx-span-3{grid-column:span 3}
.cx-span-2{grid-column:span 2}
.cx-uitgelicht.cx-span-4{min-height:clamp(380px,40vw,540px)}
.cx-uitgelicht.cx-span-4 .cx-uitgelicht-titel{font-size:clamp(36px,4.4vw,64px)}
.cx-uitgelicht.cx-span-4 .cx-uitgelicht-inhoud{padding:clamp(22px,3vw,36px)}
.cx-kaart--liggend{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding:0;gap:0}
.cx-kaart--liggend .cx-kaart-foto{margin:0;aspect-ratio:auto;min-height:100%}
.cx-kaart-tekst{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,30px)}
@media (max-width:860px){
  .cx-mozaiek{grid-template-columns:minmax(0,1fr)}
  .cx-mozaiek > *{grid-column:auto}
  .cx-kaart--liggend{grid-template-columns:minmax(0,1fr)}
  .cx-kaart--liggend .cx-kaart-foto{aspect-ratio:16/10}
}
.cx-uitgelicht.cx-span-3{min-height:clamp(380px,36vw,500px)}
.cx-uitgelicht.cx-span-3 .cx-uitgelicht-titel{font-size:clamp(32px,3.4vw,52px)}
.cx-uitgelicht.cx-span-3 .cx-uitgelicht-inhoud{padding:clamp(20px,2.6vw,32px)}