/* ==========================================================================
   Websem.studio — portfolio.css (pagina Portfolio)
   Bron: Figma 502:4 (desktop 1920) / 542:139 (mobiel 390)
   Basis (fonts, tokens, header, footer, knoppen, shine, video) komt uit style.css.
   ========================================================================== */

/* ---------- Intro ---------- */
.pf-intro{
  max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto;
  padding:142px var(--gutter) 36px; /* mobiel: 106 header + 36 */
  display:flex; flex-direction:column; gap:20px;
}
.pf-intro__left{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.pf-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  font-size:12px; font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.85); white-space:nowrap;
}
.pf-badge img{ width:21px; height:21px; margin:-7px; } /* stip 7px + gloed eromheen */
.pf-intro__title{
  font-size:clamp(3.25rem, 2.167rem + 4.444vw, 7.5rem); /* 52 → 120 */
  font-weight:500; line-height:.96; letter-spacing:-.045em;
}
.pf-intro__title .accent{ font-weight:300; letter-spacing:-.01em; font-variation-settings:"SOFT" 0, "WONK" 1; }
.pf-intro__right{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.pf-intro__right p{ font-size:15px; line-height:1.5; letter-spacing:-.01em; color:rgba(255,255,255,.6); max-width:440px; }
.pf-intro__btns{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Cases ---------- */
.case__media{ position:relative; display:block; overflow:hidden; background:#050505; }
.case__poster, .case__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.case__video{ opacity:0; transition:opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.case__media.is-playing .case__video{ opacity:1; }
.case__chip{
  position:absolute; z-index:2; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--radius-pill);
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:12px; font-weight:500; letter-spacing:-.01em; line-height:normal; color:#fff; white-space:nowrap;
}
.case__chip--status{ left:auto; right:14px; } /* status: Binnenkort live / Concept / Redesign */
.case__chip--soon{ padding-left:11px; }
.case__chip--soon img{ animation:chip-pulse 2.4s ease-in-out infinite; }
@keyframes chip-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){ .case__chip--soon img{ animation:none; } }
.case__chip img{ width:21px; height:21px; margin:-7px; }

.case__client{ display:flex; align-items:center; gap:14px; min-width:0; }
.case__logo{
  flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden;
  width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
}
.case__logo img{ width:100%; height:100%; object-fit:cover; }
.case__logo--lp{ background:#f6f1ea; border-color:transparent; font-family:var(--font-accent); font-style:italic; font-weight:300; font-size:18px; color:#40332b; }
.case__logo--dark{ background:#363636; }
.case__logo--stla{ background:#0f1a33; border-color:transparent; font-style:italic; font-weight:800; font-size:14px; letter-spacing:-.02em; color:#fff; }
.case__logo--mla{ background:#D5EB3E; border-color:transparent; font-weight:900; font-size:14px; letter-spacing:-.02em; color:#111; }
.case__logo--jadmin{ background:#302BA9; border-color:transparent; font-style:italic; font-weight:900; font-size:18px; color:#D8FC44; }
.case__client > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.case__title{ font-size:19px; font-weight:500; line-height:1.2; letter-spacing:-.02em; }
.case__meta{ font-size:13px; letter-spacing:-.01em; color:rgba(255,255,255,.6); white-space:nowrap; }
.case__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.case__tags li{
  padding:6px 11px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.22);
  font-size:12px; letter-spacing:-.01em; color:rgba(255,255,255,.85); white-space:nowrap;
}
.case__actions{ display:flex; gap:8px; }
/* Knoppen (mobiel + desktop): wit "Bekijk meer" eerst, daarna de donkere glazen "Live"-knop */
.case__more{ order:-1; }
.case__live{ background:rgba(0,0,0,.45); border-color:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ---------- Mobiel: reel (zoals "Meest geliked" bij Lara, Figma 542:355) ----------
   De sectie is bewust 220px hoger dan het kaartvenster: zolang je door die extra ruimte scrollt,
   blijft het venster vast onder de header staan (sticky). Dan pas mag de feed zelf scrollen (js → is-locked),
   elke swipe snapt precies 1 kaart door en na de laatste kaart gaat de pagina verder. */
@media (max-width: 767px){
  .pf-intro__btns .btn--secondary{ background:transparent; border-color:rgba(255,255,255,.2); } /* Figma mobiel: transparante knop */
  .pf-badge{ gap:8px; }
  .pf-badge img{ order:-1; } /* Figma mobiel: stip vóór de tekst */
  .pf-cases{
    --reel-top:106px; /* hoogte mobiele header: topbalk 41 + nav 65 (topbalk blijft zichtbaar zolang de reel in beeld is, js 1) */
    --reel-h:calc(100dvh - var(--reel-top) - 10px); /* Figma: schermhoogte − header, 10px marge */
    height:calc(var(--reel-h) + 220px);
    margin-bottom:80px; /* Figma: spacer 80 */
  }
  .pf-reel{ position:sticky; top:var(--reel-top); height:var(--reel-h); }
  .pf-reel__feed{
    height:100%; display:flex; flex-direction:column; gap:10px;
    overflow-y:hidden; scroll-snap-type:y mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .pf-reel__feed.is-locked{ overflow-y:auto; }
  .pf-reel__feed::-webkit-scrollbar{ display:none; }
  .case{
    position:relative; flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always;
    border-radius:20px; overflow:hidden;
    border:1px solid rgba(255,255,255,.32);
  }
  .case__media{ position:absolute; inset:0; }
  .case__info{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; flex-direction:column; gap:16px; padding:120px 20px 20px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.92) 100%);
    pointer-events:none;
  }
  .case__info a{ pointer-events:auto; }
  .case__more{ flex:1 1 auto; }
  .case__actions .btn{ font-size:14px; padding:13px 18px; }
}

/* ---------- Tablet / desktop: lijst onder elkaar, info onder het beeld ---------- */
@media (min-width: 768px){
  .pf-intro{ padding-top:180px; }
  .pf-badge{ padding:9px 16px; background:transparent; border-color:rgba(255,255,255,.16); font-size:13px; line-height:1; color:#fff; }
  .pf-intro__right p{ font-size:18px; line-height:1.6; color:var(--c-dim); }
  .pf-intro__btns{ gap:12px; }

  .pf-cases{
    max-width:calc(var(--container) + 2 * var(--gutter)); margin:0 auto;
    padding:0 var(--gutter) 200px; display:flex; flex-direction:column; gap:120px;
  }
  .pf-reel, .pf-reel__feed{ display:contents; } /* reel-wrappers doen op desktop niets */
  .case{ display:flex; flex-direction:column; gap:28px; }
  .case__media{ aspect-ratio:1376 / 774; border-radius:16px; border:1px solid rgba(255,255,255,.09); }
  .case__chip{ top:23px; left:23px; padding:8px 14px; background:rgba(0,0,0,.55); border:0; -webkit-backdrop-filter:none; backdrop-filter:none; font-size:13px; line-height:1; gap:8px; }
  .case__chip--status{ left:auto; right:23px; }
  .case__chip--soon{ padding-left:12px; }

  .case__info{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; }
  .case__client{ gap:20px; }
  .case__logo{ width:64px; height:64px; border-radius:14px; border:0; }
  .case__logo--lp{ font-size:26px; }
  .case__logo--stla{ font-size:20px; }
  .case__logo--mla{ font-size:20px; }
  .case__logo--jadmin{ font-size:26px; }
  .case__client > div{ gap:6px; }
  .case__title{ font-size:clamp(1.5rem, 1rem + 1vw, 2rem); line-height:1.1; letter-spacing:-.03em; white-space:nowrap; }
  .case__meta{ font-size:15px; color:var(--c-dim); }
  .case__tags{ gap:8px; }
  .case__tags li{ padding:7px 12px; border-color:rgba(255,255,255,.16); font-size:13px; font-weight:500; line-height:1; color:var(--c-strong); }
  .case__actions{ gap:12px; }
  .case__more{ min-width:200px; } /* breder dan normaal, maar smaller dan de volle breedte op mobiel */

  /* hover: beeld zoomt zacht in (rand-shine komt uit style.css) */
  @media (hover:hover){
    .case__media:hover .case__poster, .case__media:hover .case__video{ transform:scale(1.02); }
  }
}
@media (min-width: 1024px){
  .pf-intro{ padding-top:274px; padding-bottom:64px; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; } /* 178 header + 96 */
  .pf-intro__left{ gap:28px; }
  .pf-intro__title{ white-space:nowrap; }
  .pf-intro__right{ gap:28px; padding-bottom:10px; flex:0 1 440px; }
}