/* ==========================================================================
   Websem.studio — pakket.css (pakket-infopagina's, eerste: Pakket Website)
   Bron: Figma "Pakket website info page" 944:1045 (desktop 1920). Mobiel = responsive kopie.
   Basis (fonts, tokens, header, footer, knoppen, FAQ, price-card) komt uit style.css,
   projectkaarten (.mini-case) uit case.css.
   ========================================================================== */

/* ---------- Intro: tekst links + sticky kaart rechts (Figma 944:1101) ---------- */
.pk-intro{
  max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto;
  padding:141px var(--gutter) 56px; /* mobiel: 101 header + 40 */
  display:flex; flex-direction:column; gap:48px;
}
.pk-main{ display:flex; flex-direction:column; gap:40px; min-width:0; }

/* Header-video als achtergrond van sectie 1 (volle breedte, vult de hele sectie) */
.pk-intro--video{ position:relative; isolation:isolate; }
.pk-bg{
  position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  z-index:-1; overflow:clip; pointer-events:none; background:#000;
}
@media (max-width: 1439px){ /* sectie is hier al schermbreed: geen 100vw (telt de scrollbalk mee → pagina te breed) */
  .pk-bg{ left:0; right:0; width:auto; transform:none; }
}
/* video = 1 scherm hoog en plakt mee zolang je in sectie 1 scrolt (anders zoomt hij ×2,5 in op een donker hoekje) */
.pk-bg__video{ position:sticky; top:0; width:100%; height:100vh; height:100lvh; object-fit:cover; object-position:center top; display:block; }
.pk-bg::after{ /* leesbaarheid + zachte overgang naar zwart onderaan, richting de projecten */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, #000 100%);
}
/* zwarte laag alleen achter het tekstframe; de zijkanten blijven 0% zodat de video daar gewoon zichtbaar is.
   Zachte randen (mask), zodat je geen harde rand van de laag ziet. */
.pk-intro--video .pk-main{ position:relative; }
.pk-intro--video .pk-main::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-40px; bottom:-40px;
  left:calc(-1 * var(--gutter)); right:calc(-1 * var(--gutter)); /* mobiel: nooit breder dan het scherm (anders schuift de pagina en valt het menu weg) */
  background:rgba(0,0,0,.8);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%), linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%), linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-composite:intersect;
}
.pk-back{ align-self:flex-start; }
.pk-text{ display:flex; flex-direction:column; gap:40px; }
.pk-head{ display:flex; flex-direction:column; gap:20px; }
.pk-h1{ font-size:clamp(2.5rem, 1.9rem + 2.4vw, 4rem); font-weight:500; line-height:1; letter-spacing:-.04em; }
.pk-text p, .pk-steps li{ font-size:1rem; line-height:1.6; color:var(--c-dim); }
.pk-text .hl{ color:#eee; }
.pk-text a{ color:#eee; }
.pk-block{ display:flex; flex-direction:column; gap:10px; }
.pk-h3{ font-size:1.125rem; font-weight:500; line-height:1.6; color:#fff; }

/* stappen: genummerde regels in dezelfde tekststijl */
.pk-steps{ counter-reset:stap; display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
.pk-steps li{ counter-increment:stap; position:relative; padding:10px 0 10px 40px; border-top:1px solid rgba(255,255,255,.1); }
.pk-steps li:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.pk-steps li::before{
  content:counter(stap, decimal-leading-zero); position:absolute; left:0; top:10px;
  color:#eee; font-weight:500; font-variant-numeric:tabular-nums;
}

/* Kaart "Wat is inbegrepen" — zelfde stijl als de prijskaarten, maar zonder klik/hover-lift */
.pk-card{ cursor:auto; -webkit-user-select:auto; user-select:auto; min-height:0; height:auto; } /* prijskaarten hebben een vaste min-hoogte, deze kaart niet */
@media (hover: hover){ .pk-card:hover{ transform:none; } }
.pk-card .price-card__inner{ padding:28px 24px; justify-content:flex-start; }
.pk-card__title{ font-size:22px; font-weight:500; line-height:.9; letter-spacing:-.045em; }
.pk-card .price-card__footer{ flex-direction:column; align-items:stretch; gap:14px; }
.pk-card .price-card__footer .btn{ justify-content:center; }
.pk-card__wa{ align-self:center; font-size:15px; color:var(--c-muted); }
.pk-card__wa a{ color:#fff; }

/* ---------- Projecten met dit pakket: doorlopende, sleepbare carrousel (Figma 944:1163) ---------- */
.pk-cases{ padding:56px 0 72px; display:flex; flex-direction:column; gap:28px; overflow:hidden; }
.pk-cases__head{ width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }
.pk-h2{ font-size:clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight:500; line-height:1; letter-spacing:-.04em; }
.pk-reel{ position:relative; overflow:hidden; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.pk-reel.is-dragging{ cursor:grabbing; }
.pk-reel__track{ display:flex; gap:20px; width:max-content; will-change:transform; }
.pk-reel .mini-case{ flex:none; width:min(84vw, 668px); }
.pk-reel img, .pk-reel video{ -webkit-user-drag:none; pointer-events:none; }

/* ---------- FAQ (stijl uit style.css) + link naar alle vragen ---------- */
.pk-faq{ padding-top:24px; }

/* ---------- Tablet ---------- */
@media (min-width: 768px){
  .pk-text p, .pk-steps li{ font-size:1.125rem; }
  .pk-h3{ font-size:1.25rem; }
  .pk-reel__track{ gap:40px; }
  .pk-card .price-card__inner{ padding:40px; }
}

/* ---------- Desktop: 2 kolommen, kaart plakt mee tot het einde van de tekst ---------- */
@media (min-width: 1024px){
  .pk-intro{
    padding:200px var(--gutter) 64px;
    display:grid; grid-template-columns:minmax(0, 850px) minmax(320px, 446px); justify-content:space-between; gap:80px;
  }
  .pk-main{ gap:48px; }
  .pk-text{ gap:48px; }
  .pk-head{ gap:24px; }
  .pk-aside{ padding-top:83px; } /* kaart lijnt uit met de titel */
  .pk-intro--video .pk-main::before{ left:-56px; right:-56px; } /* desktop: laag iets ruimer dan het tekstframe */
  .pk-card{ position:sticky; top:110px; }
  .pk-cases{ padding:96px 0 120px; gap:40px; }
  .mini-case__tags{ display:flex; }
}