/* ============ Case Study (single + archive) ============ */
.page{padding-top:var(--nav-h)}

/* Back link */
.back{max-width:var(--max-width);margin:0 auto;padding:32px var(--gutter) 0}
.back a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-mute-2);letter-spacing:.04em}
.back a:hover{color:var(--text);opacity:1}

/* Hero */
.cs-hero{max-width:var(--max-width);margin:0 auto;padding:48px var(--gutter) 56px}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:36px}
.cs-tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:6px 12px;border:1px solid var(--hairline);border-radius:var(--radius-pill)}
/* N1: -40% size — clamp(48,7vw,112) × 0.6 = clamp(29,4.2vw,67). Letter-spacing lekko luźniejszy dla mniejszych rozmiarów. */
.cs-title{font-weight:500;font-size:clamp(29px,4.2vw,67px);line-height:1;letter-spacing:-.035em;margin:0 0 24px}
.cs-client{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);letter-spacing:.04em}

/* Cover */
.cs-cover{max-width:1480px;margin:0 auto;padding:0 var(--gutter)}
.cs-cover-frame{aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-2)}
.cs-cover-frame img{width:100%;height:100%;object-fit:cover}

/* Meta strip */
.cs-meta{max-width:var(--max-width);margin:40px auto 0;padding:24px var(--gutter) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--hairline)}
@media (max-width:720px){.cs-meta{grid-template-columns:1fr 1fr;gap:24px}}
.cs-meta-item .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute-2);margin-bottom:10px;font-weight:500}
.cs-meta-item .val{font-size:18px;font-weight:500;letter-spacing:-.01em}

/* Stats */
.cs-stats{max-width:var(--max-width);margin:clamp(32px,4vw,56px) auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:760px){.cs-stats{grid-template-columns:1fr 1fr}}
.cs-stat{background:var(--surface);border-radius:var(--radius-lg);padding:36px 28px;display:flex;flex-direction:column;gap:8px}
.cs-stat .num{font-weight:500;font-size:clamp(36px,4vw,56px);letter-spacing:-.03em;line-height:1}
.cs-stat .lbl{font-size:13px;color:var(--text-muted);line-height:1.3}

/* Hover-reveal section cards */
.cs-hover-section{max-width:1640px;margin:clamp(32px,4vw,56px) auto 0;padding:0 clamp(20px,3vw,56px)}
.cs-hover-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.cs-hover-grid{grid-template-columns:repeat(2,1fr)}}
.cs-hover-card{position:relative;overflow:hidden;border-radius:18px;background:#0c0c0c;aspect-ratio:5/4;cursor:pointer;isolation:isolate;display:block;text-decoration:none}
.cs-hover-card.span-2{grid-column:1/-1;aspect-ratio:16/7}
.cs-hover-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .4s var(--ease-out)}
.cs-hover-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,3vw,42px);background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.88) 100%);color:#fff;opacity:0;transition:opacity .35s var(--ease-out);z-index:1;pointer-events:none}
.cs-hover-card:hover img,.cs-hover-card:focus-visible img{transform:scale(1.04);filter:brightness(.5)}
.cs-hover-card:hover .cs-hover-overlay,.cs-hover-card:focus-visible .cs-hover-overlay{opacity:1}
.cs-hover-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-bottom:14px;text-transform:uppercase;display:inline-block}
.cs-hover-title{font-family:var(--font-mono);font-weight:500;font-size:clamp(22px,2.4vw,36px);line-height:1.15;letter-spacing:-.015em;margin:0 0 14px;max-width:18ch}
.cs-hover-text{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.86);margin:0;max-width:56ch}

/* Q1 + Q2: Mobile (<=760px) — overlay stale widoczny + przyciemnione + span-2 znormalizowane */
@media (max-width:760px){
  /* Q1: ciemne overlay + image przyciemnione (bo nie ma hovera) */
  .cs-hover-card img{filter:brightness(.5)}
  .cs-hover-overlay{opacity:1;padding:20px}
  /* Q2: span-2 ignorowane na mobile — wszystkie karty single, ten sam aspect ratio */
  .cs-hover-card.span-2{grid-column:auto;aspect-ratio:5/4}
}

/* Gallery */
.cs-gallery{max-width:1640px;margin:clamp(40px,5vw,70px) auto 0;padding:0 var(--gutter)}
.cs-gallery-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.cs-gallery-head .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute-2);font-weight:500}
.cs-gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:12px}
.cs-gallery-grid figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2)}
.cs-gallery-grid figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.cs-gallery-grid figure:hover img{transform:scale(1.04)}
.cs-gallery-grid .g-1{grid-column:span 4;grid-row:span 2}
.cs-gallery-grid .g-2,.cs-gallery-grid .g-3,.cs-gallery-grid .g-4,.cs-gallery-grid .g-5{grid-column:span 2;grid-row:span 2}
@media (max-width:900px){
  .cs-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .cs-gallery-grid figure{grid-column:span 1!important;grid-row:span 1!important}
}

/* Related */
.cs-related{max-width:var(--max-width);margin:clamp(48px,5.5vw,80px) auto 0;padding:0 var(--gutter) clamp(40px,5vw,70px);border-top:1px solid var(--hairline);padding-top:64px}
.cs-related-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:16px;flex-wrap:wrap}
.cs-related-head h2{font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;margin:0}
.cs-related-head a{font-family:var(--font-mono);font-size:13px;color:var(--text);border-bottom:1px solid var(--hairline-2);padding-bottom:1px}
.cs-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.cs-related-grid{grid-template-columns:1fr}}
.cs-rel-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1;background:var(--surface-2);cursor:pointer;transition:transform .45s var(--ease-out);display:block}
.cs-rel-card:hover{transform:translateY(-3px)}
.cs-rel-card .thumb{position:absolute;inset:0;background-size:cover;background-position:center}
/* V4: video w related card — wypełnia kafelek (analogicznie do home .card video) */
.cs-rel-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.cs-rel-card .ovl{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%);z-index:1}
.cs-rel-card .meta{position:absolute;left:18px;right:18px;bottom:18px;color:#fff;z-index:2}
.cs-rel-card .name{font-size:17px;font-weight:500;letter-spacing:-.01em}
.cs-rel-card .tag{font-size:13px;opacity:.72;margin-top:3px}

/* Use same vibe gradients as home work cards (loaded via home.css too if archive). */
.r-suntago{background:linear-gradient(135deg,#0F2027 0%,#203A43 50%,#2C5364 100%)}
.r-lipton{background:linear-gradient(135deg,#102818 0%,#1F4A2E 60%,#3F8A4F 100%)}
.r-snickers{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 60%,#0a3a5e 100%)}
.r-disney{background:linear-gradient(135deg,#1F1B2E 0%,#3B2960 60%,#6B4FB8 100%)}
.r-heineken{background:linear-gradient(135deg,#0a3318 0%,#1f6e2e 100%)}
.r-tmobile{background:linear-gradient(135deg,#2a0524 0%,#7a1762 50%,#e20074 100%)}
.r-doritos{background:linear-gradient(135deg,#2C1810 0%,#8B3A1E 50%,#D9583C 100%)}
.r-tymbark{background:linear-gradient(135deg,#9b4500 0%,#ff8c1a 100%)}
.r-wedel{background:linear-gradient(135deg,#3d2817 0%,#7a4a26 60%,#c08a5e 100%)}
.r-fourf{background:linear-gradient(135deg,#0a1a2e 0%,#1e3c5e 60%,#5a8bb8 100%)}
.r-sportano{background:linear-gradient(135deg,#dc2626 0%,#fb923c 100%)}
.r-cocacola{background:linear-gradient(135deg,#3d0606 0%,#a3110c 55%,#f40009 100%)}
.r-lotos{background:linear-gradient(135deg,#0c2a17 0%,#1d6a3a 55%,#f08a1c 100%)}
.r-totalizator{background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 45%,#f9c20a 100%)}

/* Card grid (used on archive) — same as home */
.work{padding:clamp(30px,4.5vw,60px) clamp(20px,3vw,56px) clamp(32px,5vw,60px);max-width:1640px;margin:0 auto}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap}
/* AD1 revert: archive work-title (stan z _29) — mono 500, clamp(36,4.5vw,56), letter-spacing -.02 */
.work-title{font-family:var(--font-mono);font-weight:500;font-size:clamp(36px,4.5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0}
.work-aside{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.work-aside a{color:var(--text);border-bottom:1px solid var(--hairline-2);padding-bottom:1px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{position:relative;border-radius:var(--radius-card);overflow:hidden;background:#111;aspect-ratio:.77;transition:transform .45s var(--ease-out);cursor:pointer;isolation:isolate;grid-column:span 1;display:block;text-decoration:none}
.card.span-2{grid-column:span 2;aspect-ratio:1.55}
.card:hover{transform:translateY(-3px) scale(1.005)}
.card .thumb{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease-out)}
.card:hover .thumb{transform:scale(1.04)}
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55) 100%);z-index:1;pointer-events:none}
.card-meta{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;color:#fff;z-index:2}
.card-logo{width:42px;height:42px;border-radius:10px;flex-shrink:0;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#fff;overflow:hidden}
.card-logo.has-img{background:#fff;border:0;padding:5px;backdrop-filter:none}
.card-logo img{width:100%;height:100%;object-fit:contain;display:block;max-width:none;max-height:none}
.card-name{font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.2;color:#fff}
.card-tag{font-size:13px;opacity:.72;margin-top:3px;line-height:1.25}
.card.is-static{cursor:default}
.card.is-static:hover{transform:none}
.card.is-static:hover .thumb{transform:none}

/* Cover frame: video fills the frame just like img */
.cs-cover-frame video{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff;padding:6px 10px;border-radius:var(--radius-pill);z-index:2}
.badge.live{background:rgba(157,255,94,.85);color:#0a0a0a}
.badge.live::before{content:"●";margin-right:5px}
.v-suntago{background:linear-gradient(135deg,#0F2027 0%,#203A43 50%,#2C5364 100%)}
.v-lipton{background:linear-gradient(135deg,#102818 0%,#1F4A2E 60%,#3F8A4F 100%)}
.v-snickers{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 60%,#0a3a5e 100%)}
.v-disney{background:linear-gradient(135deg,#1F1B2E 0%,#3B2960 60%,#6B4FB8 100%)}
.v-heineken{background:linear-gradient(135deg,#0a3318 0%,#1f6e2e 100%)}
.v-tmobile{background:linear-gradient(135deg,#2a0524 0%,#7a1762 50%,#e20074 100%)}
.v-doritos{background:linear-gradient(135deg,#2C1810 0%,#8B3A1E 50%,#D9583C 100%)}
.v-tymbark{background:linear-gradient(135deg,#9b4500 0%,#ff8c1a 100%)}
.v-wedel{background:linear-gradient(135deg,#3d2817 0%,#7a4a26 60%,#c08a5e 100%)}
.v-fourf{background:linear-gradient(135deg,#0a1a2e 0%,#1e3c5e 60%,#5a8bb8 100%)}
.v-sportano{background:linear-gradient(135deg,#dc2626 0%,#fb923c 100%)}
.v-cocacola{background:linear-gradient(135deg,#3d0606 0%,#a3110c 55%,#f40009 100%)}
.v-lotos{background:linear-gradient(135deg,#0c2a17 0%,#1d6a3a 55%,#f08a1c 100%)}
.v-totalizator{background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 45%,#f9c20a 100%)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.card.span-2{grid-column:span 2}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.card.span-2{grid-column:span 1;aspect-ratio:1}}