/* Cases: wit, de hele case in één scherm. Links tekst en logo's (die naar de site van de klant
   gaan), rechts twee staande telefoonfilms in de stijl van De Slowfeeder Specialist
   (bron: video/cases/telefoon.html, 10 s, naadloos herhalend, zonder geluid). */

.pagina-cases .case-hero::before,.pagina-cases .case-hero::after{display:none;}
.pagina-cases .case-hero{background:#fff;color:var(--tekst);padding:calc(60px + 12px + clamp(16px,3vh,36px)) 0 clamp(24px,4vh,48px);}
.pagina-cases .case-hero h1{color:var(--navy);font-size:clamp(28px,2.6vw,40px);line-height:1.05;max-width:none;}
.pagina-cases .case-hero .eyebrow{color:#5e7244;}
.pagina-cases .case-lead{margin-top:12px;font-size:16.5px;max-width:52ch;color:var(--tekst-zacht,#4B5A72);}
.pagina-cases .case-raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:center;}

.pagina-cases .case-logos{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.pagina-cases .case-logo{display:grid;place-items:center;width:168px;height:64px;padding:12px 18px;border-radius:16px;transition:translate var(--t-snel),box-shadow var(--t-snel);}
.pagina-cases .case-logo:hover{translate:0 -2px;box-shadow:0 16px 34px -18px rgba(0,0,0,.35);}
.pagina-cases .case-logo:focus-visible{outline:3px solid #5e7244;outline-offset:3px;}
.pagina-cases .case-logo--wit{background:#fff;border:1px solid var(--grijs);}
.pagina-cases .case-logo--groen{background:#5e7244;}
.pagina-cases .case-logo img{display:block;width:100%;height:auto;max-height:42px;object-fit:contain;}

.pagina-cases .case-punten{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;counter-reset:p;}
.pagina-cases .case-punten li{position:relative;padding-left:44px;font-size:15.5px;line-height:1.5;color:var(--tekst-zacht,#4B5A72);counter-increment:p;}
.pagina-cases .case-punten li::before{content:counter(p);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#eef3e6;color:#5e7244;font:700 14px/1 var(--f-display);}
.pagina-cases .case-punten b{display:block;color:var(--navy);font-size:16.5px;}

/* twee staande films; hoogte volgt het scherm zodat alles zonder scrollen past */
.pagina-cases .case-films{--h:min(calc(100vh - 140px),620px);display:flex;gap:18px;}
.pagina-cases .case-films video{transition:opacity .5s ease,filter .5s ease,scale .5s ease;display:block;height:var(--h);width:auto;aspect-ratio:1/2;object-fit:cover;background:#fff;}

/* de films spelen om de beurt; de film die wacht staat zachter op de achtergrond */
.pagina-cases [data-na-elkaar].actief video:not(.speelt){opacity:.45;filter:grayscale(.5);scale:.96;}

@media (max-width:1000px){
  .pagina-cases .case-raster{grid-template-columns:minmax(0,1fr);}
  .pagina-cases .case-films{--h:auto;justify-content:center;}
  .pagina-cases .case-films video{width:calc(50% - 9px);max-width:320px;height:auto;}
}
@media (max-width:640px){
  .pagina-cases .case-logo{flex:1;width:auto;height:64px;}
  .pagina-cases .case-films{gap:12px;}
  .pagina-cases .case-films video{width:calc(50% - 6px);border-radius:20px;}
}

/* navigatie op wit: donkere, dichte balk zodat de links leesbaar blijven */
.pagina-cases .nav__in{background:rgba(7,20,42,.92);}

/* resultaat zoals de klant het ervoer: eerst 20+ uur per week, nu 75% minder (compact, één regel) */
.pagina-cases .case-resultaat{display:flex;align-items:center;gap:8px;margin-top:16px;}
.pagina-cases .case-resultaat__pijl{color:#5e7244;font-weight:700;font-size:18px;}
.pagina-cases .case-resultaat p{display:flex;align-items:baseline;gap:6px;padding:10px 13px;border-radius:12px;background:#f3f4f6;white-space:nowrap;}
.pagina-cases .case-resultaat b{font:800 20px/1 var(--f-display);color:var(--navy);}
.pagina-cases .case-resultaat span{font-size:13px;color:var(--tekst-zacht,#4B5A72);}
.pagina-cases .case-resultaat p.case-resultaat__nu{background:#5e7244;}
.pagina-cases .case-resultaat__nu b{color:#fff;}
.pagina-cases .case-resultaat__nu span{color:rgba(255,255,255,.88);}
.pagina-cases .case-punten{margin-top:18px;}
/* lage schermen (bv. 1280×720): iets compacter zodat de hele case zonder scrollen past */
@media (min-width:1001px) and (max-height:800px){
  .pagina-cases .case-hero h1{font-size:clamp(26px,2.3vw,34px);}
  .pagina-cases .case-logos{margin-top:14px;}
  .pagina-cases .case-logo{height:54px;}
  .pagina-cases .case-punten{gap:10px;margin-top:14px;}
  .pagina-cases .case-punten li{font-size:14.5px;line-height:1.45;}
}
@media (max-width:640px){
  .pagina-cases .case-resultaat{gap:6px;flex-wrap:wrap;}
  .pagina-cases .case-resultaat p{padding:8px 10px;gap:5px;}
  .pagina-cases .case-resultaat b{font-size:17px;}
  .pagina-cases .case-resultaat span{font-size:12px;}
  .pagina-cases .case-resultaat__pijl{font-size:15px;}
}