/* ==========================================================================
   Websem.studio — case.css (case-pagina's, eerste: Lara Penhoat)
   Bron: Figma "Portfolio LARA" 777:779 (desktop 1920) / 794:842 (mobiel 390)
   Basis (fonts, tokens, header, footer, knoppen, shine, services-carrousel) komt uit style.css.
   ========================================================================== */

.cs-h2{ font-size:36px; font-weight:500; line-height:1; letter-spacing:-.04em; }

/* ---------- Video-blokken (poster direct zichtbaar, video fade-in zodra hij speelt) ---------- */
.cs-film{ position:relative; overflow:hidden; background:#000; height:320px; }
.cs-film--head{ margin-top:101px; } /* mobiel: 41 marquee + 60 */
.cs-film__poster, .cs-film__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-film__video{ opacity:0; transition:opacity .6s var(--ease-out); }
.cs-film.is-playing .cs-film__video{ opacity:1; }

/* ---------- Intro ---------- */
.cs-intro{
  max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto;
  padding:36px var(--gutter); display:flex; flex-direction:column; gap:24px;
}
.cs-intro__left{ display:flex; flex-direction:column; gap:20px; }
.cs-intro__title{ font-size:clamp(2.75rem, 2.074rem + 2.778vw, 4rem); font-weight:700; line-height:1; letter-spacing:-.04em; } /* 44 → 64 */
.cs-intro__left p{ font-size:15px; line-height:1.6; color:var(--c-dim); max-width:727px; }
.cs-intro__btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Kenmerken ---------- */
.cs-kenmerken{ max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto; padding:56px 0 0; }
.cs-kenmerken .cs-h2{ padding:0 var(--gutter); }
.cs-kenmerken__carousel{ margin:20px 0 0; }
.cs-kenmerken .svc-carousel__track{ gap:12px; padding-right:12px; }
.cs-kenmerken .svc-card{ width:169px; height:169px; gap:21px; }

/* ---------- Ons verhaal ---------- */
.cs-story{ max-width:calc(637px + 2 * var(--gutter)); margin:0 auto; padding:56px var(--gutter); }
.cs-story__title{ font-size:clamp(2.75rem, 2.074rem + 2.778vw, 4rem); font-weight:500; line-height:1; letter-spacing:-.04em; margin-bottom:20px; }
.cs-story p{ font-size:15px; line-height:1.6; color:var(--c-dim); }
.cs-story p + p{ margin-top:1.6em; } /* lege regel tussen alinea's, zoals Figma */

/* ---------- Bekijk meer ---------- */
.cs-more{ max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto; padding:56px var(--gutter) 72px; display:flex; flex-direction:column; gap:28px; }
.cs-more__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.cs-more__head .cs-more__btn{ display:none; }
.cs-more__btn--mobile{ align-self:center; }
.cs-more__grid{ display:flex; flex-direction:column; gap:40px; }

.mini-case{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.mini-case__media{ position:relative; display:block; aspect-ratio:668 / 376; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.09); background:#050505; }
/* Poster = eerste beeld; de video (zelfde als op portfolio.html) speelt af zodra de kaart in beeld is en fade erover */
.mini-case__poster, .mini-case__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.mini-case__video{ opacity:0; transition:opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.mini-case__media.is-playing .mini-case__video{ opacity:1; }
/* Status-label rechtsboven: Binnenkort live / Concept / Redesign */
.mini-case__chip{
  position:absolute; z-index:2; top:14px; right:14px;
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-pill);
  background:rgba(0,0,0,.55); font-size:13px; font-weight:500; line-height:1; color:#fff; white-space:nowrap;
}
.mini-case__chip--soon{ padding-left:12px; }
.mini-case__chip img{ width:21px; height:21px; margin:-7px; animation:chip-pulse 2.4s ease-in-out infinite; }
@keyframes chip-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){ .mini-case__chip img{ animation:none; } }
.mini-case__info{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mini-case__client{ display:flex; align-items:center; gap:20px; min-width:0; }
.mini-case__logo{
  flex:none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:5px;
  background:#f6f1ea; font-family:var(--font-accent); font-style:italic; font-weight:300; font-size:26px; color:#40332b;
}
.mini-case__logo--img{ overflow:hidden; background:none; }
.mini-case__logo--img img{ width:100%; height:100%; object-fit:cover; }
.mini-case__logo--stla{ background:#0f1a33; font-family:inherit; font-style:italic; font-weight:800; font-size:13px; letter-spacing:-.02em; color:#fff; }
.mini-case__logo--mla{ background:#D5EB3E; font-family:inherit; font-weight:900; font-size:13px; letter-spacing:-.02em; color:#111; }
.mini-case__logo--jadmin{ background:#302BA9; font-family:inherit; font-style:italic; font-weight:900; font-size:16px; color:#D8FC44; }
.mini-case__client > span:last-child{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mini-case__client strong{ font-size:20px; font-weight:500; line-height:1.1; letter-spacing:-.03em; }
.mini-case__client small{ font-size:15px; color:var(--c-dim); white-space:nowrap; }
.mini-case__tags{ display:none; gap:8px; }
.mini-case__tags span{ padding:7px 12px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.16); font-size:13px; font-weight:500; line-height:1; color:var(--c-strong); white-space:nowrap; }
@media (hover:hover){
  .mini-case:hover .mini-case__poster, .mini-case:hover .mini-case__video{ transform:scale(1.02); }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px){
  .cs-film{ height:auto; aspect-ratio:1920 / 900; }
  .cs-film--shots .cs-film__poster, .cs-film--shots .cs-film__video{ object-position:50% 0; } /* Figma: beeld 1080 hoog, bovenkant zichtbaar */
  .cs-intro__left p, .cs-story p{ font-size:20px; }
  .cs-more__head .cs-more__btn{ display:inline-flex; }
  .cs-more__btn--mobile{ display:none; }
  .cs-more__grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  .mini-case{ gap:28px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px){
  .cs-film--head{ margin-top:133px; } /* 53 marquee + 80 */
  .cs-intro{ padding:96px var(--gutter) 64px; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
  .cs-intro__left{ gap:28px; }
  .cs-intro__btns{ padding-bottom:10px; flex:none; }

  .cs-kenmerken{ padding:96px var(--gutter) 0; }
  .cs-kenmerken .cs-h2{ padding:0; }
  .cs-kenmerken__carousel{ overflow:visible; }
  .cs-kenmerken .svc-carousel__track{ animation:none; transform:none; width:auto; gap:20px; padding:0; }
  .cs-kenmerken .svc-card{ width:auto; height:auto; flex:1 1 0; aspect-ratio:1; }
  .cs-kenmerken .svc-card[aria-hidden="true"]{ display:none; }

  .cs-story{ padding:96px var(--gutter) 64px; }
  .cs-story__title{ margin-bottom:28px; }

  .cs-more{ padding:96px var(--gutter) 120px; gap:40px; }
  .mini-case__tags{ display:flex; }
}