/* ============================================================
   SEZMOO — CASE STUDY (project subpage)
   Layout layer on top of styles.css (tokens + components reused)
   ============================================================ */

/* ---------- full-bleed helper ---------- */
.bleed { width: 100%; margin-inline: 0; }

/* ============== COVER ============== */
.cs-hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
}
.cs-hero__media { position: absolute; inset: 0; z-index: -2; }
.cs-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.74); }
.cs-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(0.12 0.004 60 / .55) 0%, transparent 26%, transparent 40%, oklch(0.12 0.004 60 / .82) 88%, var(--bg) 100%);
}
.cs-hero__media::before { display: none; }
.cs-hero__media::before-disabled { /* scan sweep removed */
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; opacity: .14;
  background: linear-gradient(180deg, transparent 38%, var(--rec) 50%, transparent 62%);
  animation: csSweep 7s var(--ease-io) infinite;
}
@keyframes csSweep { 0%,100%{ transform: translateY(-46%);} 50%{ transform: translateY(46%);} }
@media (prefers-reduced-motion: reduce){ .cs-hero__media::before{ animation: none; } }

.cs-hero__hud {
  position: absolute; top: clamp(86px, 12vh, 116px); right: var(--shell-pad); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--fg-dim);
}
.cs-hero__hud .rec { color: var(--rec); display: inline-flex; align-items: center; gap: 7px; }
.cs-hero__hud .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec-glow); animation: csBlink 1.4s steps(2) infinite; }
@keyframes csBlink { 50%{ opacity: .25; } }
.cs-hero__frame { position: absolute; inset: clamp(14px,2vw,26px); z-index: 2; pointer-events: none; border: 1px solid oklch(0.96 0.006 80 / .12); }
.cs-hero__frame span { position: absolute; width: 18px; height: 18px; border: 2px solid oklch(0.96 0.006 80 / .55); }
.cs-hero__frame span:nth-child(1){ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.cs-hero__frame span:nth-child(2){ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.cs-hero__frame span:nth-child(3){ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.cs-hero__frame span:nth-child(4){ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.cs-hero__hud, .cs-hero__frame { display: none !important; }

.cs-hero__inner { position: relative; z-index: 3; padding-block: clamp(40px, 7vh, 96px); width: 100%; }
.cs-hero__back {
  display: flex; width: fit-content; align-items: center; gap: 9px; margin-bottom: clamp(22px,4vh,40px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
}
.cs-hero__back:hover { color: var(--rec); }
.cs-hero__cat { margin-bottom: 22px; }
.cs-title {
  font-weight: 800; font-stretch: 118%; font-size: clamp(54px, 10.5vw, 168px);
  line-height: .86; letter-spacing: -.03em; text-wrap: balance;
}
.cs-title .accent { color: var(--rec); }
.cs-hero__sub {
  margin-top: clamp(20px,3vh,30px); color: var(--fg-dim);
  font-size: clamp(17px,1.7vw,25px); line-height: 1.4; max-width: 40ch; text-wrap: pretty; hyphens: none;
}
.cs-hero__sub b { color: var(--fg); font-weight: 700; }
.cs-scroll {
  position: absolute; bottom: clamp(18px,3vh,30px); right: var(--shell-pad); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; color: var(--fg-faint);
}
.cs-scroll i { width: 1px; height: 40px; background: linear-gradient(var(--rec), transparent); animation: csScroll 1.9s var(--ease-io) infinite; transform-origin: top; }
@keyframes csScroll { 0%{ transform: scaleY(0); opacity:0; } 40%{ opacity:1; } 100%{ transform: scaleY(1); opacity:0; } }

/* ============== META STRIP ============== */
.cs-meta { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cs-meta__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.cs-meta__cell { padding: clamp(24px,3.4vh,40px) clamp(14px,1.6vw,26px); border-left: 1px solid var(--line-soft); }
.cs-meta__cell:first-child { border-left: 0; padding-left: 0; }
.cs-meta__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rec); }
.cs-meta__v { margin-top: 12px; font-size: clamp(15px,1.2vw,18px); color: var(--fg); line-height: 1.4; }
.cs-meta__v small { display: block; color: var(--fg-faint); font-size: 13px; margin-top: 4px; }
@media (max-width: 880px){ .cs-meta__grid{ grid-template-columns: repeat(2, 1fr); }
  .cs-meta__cell{ border-left: 0; border-top: 1px solid var(--line-soft); padding-inline: 0; }
  .cs-meta__cell:nth-child(2n){ padding-left: clamp(16px,4vw,26px); border-left: 1px solid var(--line-soft); }
  .cs-meta__cell:nth-child(1), .cs-meta__cell:nth-child(2){ border-top: 0; } }
@media (max-width: 520px){ .cs-meta__grid{ grid-template-columns: 1fr; }
  .cs-meta__cell:nth-child(2n){ padding-left: 0; border-left: 0; }
  .cs-meta__cell:nth-child(2){ border-top: 1px solid var(--line-soft); } }

/* ============== SECTION FRAME ============== */
.cs-sec { padding-block: clamp(60px, 11vh, 150px); }
.cs-sec__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em; color: var(--rec); }
.cs-sec__title {
  font-weight: 800; font-stretch: 112%; font-size: clamp(30px, 4.6vw, 70px);
  line-height: .98; letter-spacing: -.02em; margin-top: 18px; text-wrap: balance; max-width: 20ch;
}
.cs-sec__title .accent { color: var(--rec); }

/* ---- intro / challenge ---- */
.cs-intro__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,5vw,90px); align-items: start; }
.cs-lead { font-weight: 600; font-stretch: 104%; font-size: clamp(22px,2.5vw,38px); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.cs-lead .accent { color: var(--rec); }
.cs-body { color: var(--fg-dim); font-size: clamp(16px,1.2vw,19px); line-height: 1.72; text-wrap: pretty; }
.cs-body p + p { margin-top: 20px; }
.cs-body strong { color: var(--fg); font-weight: 700; }
@media (max-width: 860px){ .cs-intro__grid{ grid-template-columns: 1fr; gap: clamp(26px,5vh,40px); } }

/* ---- process ---- */
.cs-steps { margin-top: clamp(34px,5vh,60px); border-top: 1px solid var(--line-soft); }
.cs-step {
  display: grid; grid-template-columns: clamp(72px,8vw,120px) minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(16px,3vw,52px); align-items: baseline;
  padding: clamp(22px,3.2vh,38px) 0; border-bottom: 1px solid var(--line-soft);
}
.cs-step__no { font-family: var(--font-mono); font-size: clamp(13px,1.1vw,15px); color: var(--rec); letter-spacing: .06em; }
.cs-step__title { font-weight: 800; font-stretch: 108%; font-size: clamp(20px,2.1vw,30px); letter-spacing: -.01em; }
.cs-step__desc { color: var(--fg-dim); font-size: clamp(14.5px,1.05vw,17px); line-height: 1.6; text-wrap: pretty; }
.cs-step:hover .cs-step__title { color: var(--rec); transition: color .3s var(--ease); }
@media (max-width: 760px){ .cs-step{ grid-template-columns: 54px 1fr; }
  .cs-step__desc{ grid-column: 2; margin-top: 10px; } }

/* ============== GALLERY ============== */
.cs-gallery { display: flex; flex-direction: column; gap: clamp(10px,1.4vw,20px); }
.cs-row { display: grid; gap: clamp(10px,1.4vw,20px); }
.cs-row--split { grid-template-columns: 1fr 1fr; }
.cs-shot { position: relative; overflow: hidden; }
.cs-shot .frame-media { position: absolute; inset: 0; }
.cs-shot__media { position: relative; }
.cs-shot--wide { aspect-ratio: 21 / 9; }
.cs-shot--tall { aspect-ratio: 4 / 5; }
.cs-shot--full { aspect-ratio: 16 / 9; }
.cs-shot img {
  position: absolute; inset: -7% 0; width: 100%; height: 114%; object-fit: cover;
  transform: translateY(var(--py, 0)); filter: saturate(.94) brightness(.86);
  transition: filter .6s var(--ease);
}
.cs-shot:hover img { filter: saturate(1) brightness(1); }
.cs-shot__tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg); padding: 6px 11px; background: oklch(0.12 0.004 60 / .55);
  border: 1px solid oklch(0.96 0.006 80 / .16); border-radius: 3px; backdrop-filter: blur(3px);
}
.cs-shot__tc {
  position: absolute; right: 16px; top: 14px; z-index: 3;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--rec);
  display: inline-flex; align-items: center; gap: 6px;
}
.cs-shot__tc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 8px var(--rec-glow); }
@media (max-width: 720px){ .cs-row--split{ grid-template-columns: 1fr; } .cs-shot--wide{ aspect-ratio: 16/10; } }

/* ===== Ad creatives: show WHOLE, native ratio, no crop/zoom/darkening ===== */
.cs-shot--ad { background: #0d0d0b; }
.cs-shot--ad img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transform: none !important; filter: none !important;
}
.cs-shot--ad:hover img { filter: none !important; transform: none !important; }
.cs-ratio-feed  { aspect-ratio: 1200 / 628; }
.cs-ratio-sq    { aspect-ratio: 1 / 1; }
.cs-ratio-45    { aspect-ratio: 4 / 5; }
.cs-ratio-story { aspect-ratio: 9 / 16; }

/* ===== Ad mockups (reusable for Meta / Google Ads case studies) ===== */
.ad-grid { display: grid; gap: clamp(20px,3vw,40px); }
.ad-grid--2 { grid-template-columns: 1fr 1fr; }
.ad-grid--phones { grid-template-columns: repeat(2, minmax(0,300px)); justify-content: center; }
.ad-cap { display:block; text-align:center; margin-top:12px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }

/* phone (Stories / Reels 9:16) */
.ad-phone { width:100%; max-width:300px; margin:0 auto; background:#0b0b0c;
  border:1px solid oklch(0.62 0 0 / .35); border-radius:38px; padding:11px;
  box-shadow:0 34px 80px rgba(0,0,0,.55); }
.ad-phone__screen { position:relative; border-radius:28px; overflow:hidden; aspect-ratio:9/16; background:#000; }
.ad-phone__screen > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ad-phone__ui { position:absolute; inset:0; display:flex; flex-direction:column; padding:14px; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 68%, rgba(0,0,0,.35)); }
.ad-phone__top { display:flex; gap:4px; }
.ad-phone__top i { flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.35); }
.ad-phone__top i:first-child { background:#fff; }
.ad-phone__hdr { display:flex; align-items:center; gap:9px; margin-top:12px; }
.ad-phone__av { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#c9a84a,#7a5a12); color:#0e0e0c; font-family:var(--font-mono); font-size:10px; font-weight:700;
  border:1.5px solid rgba(255,255,255,.65); }
.ad-phone__name { color:#fff; font-size:12px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.ad-phone__spon { display:block; color:rgba(255,255,255,.8); font-size:9px; letter-spacing:.04em; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.ad-phone__cta { margin-top:auto; align-self:stretch; text-align:center; padding:11px 18px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.42);
  border-radius:30px; color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em; }

/* interactive Stories player */
.ad-story__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ad-story__bars i { position:relative; overflow:hidden; background:rgba(255,255,255,.35); }
.ad-story__bars i:first-child { background:rgba(255,255,255,.35); }
.ad-story__bars b { position:absolute; inset:0; width:0; background:#fff; }
.ad-story__zone { position:absolute; top:0; bottom:0; width:40%; z-index:6; border:0; padding:0;
  background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ad-story__prev { left:0; } .ad-story__next { right:0; }

/* social post card (Feed 1200×628 / 1:1 / 4:5) */
.ad-post { width:100%; max-width:520px; margin:0 auto; background:var(--bg-2);
  border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; box-shadow:0 22px 55px rgba(0,0,0,.4); }
.ad-post--feed { max-width:640px; }
.ad-post__head { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.ad-post__av { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#c9a84a,#7a5a12); color:#0e0e0c; font-family:var(--font-mono); font-size:12px; font-weight:700; }
.ad-post__id { display:flex; flex-direction:column; line-height:1.3; }
.ad-post__name { font-size:14px; font-weight:600; color:var(--fg); }
.ad-post__spon { font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; color:var(--fg-faint); }
.ad-post__more { margin-left:auto; color:var(--fg-faint); letter-spacing:2px; font-size:16px; }
.ad-post__media { background:#0d0d0b; font-size:0; }
.ad-post__media img { width:100%; height:auto; display:block; }
.ad-post__bar { display:flex; align-items:center; gap:16px; padding:11px 14px; color:var(--fg-faint); }
.ad-post__bar svg { width:20px; height:20px; }
.ad-post__cta { margin-left:auto; padding:8px 16px; background:var(--rec); color:var(--on-accent);
  border-radius:6px; font-size:12px; font-weight:700; letter-spacing:.02em; }
@media (max-width:720px){ .ad-grid--2, .ad-grid--phones { grid-template-columns:1fr; } }

/* ============== FILM PLAYER (facade) ============== */
.cs-film__frame {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line-soft);
  background: var(--bg-2); cursor: pointer;
}
.cs-film__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.6); transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.cs-film__frame:hover img { filter: saturate(1) brightness(.74); transform: scale(1.03); }
.cs-film__frame::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: none; opacity:0; }
/* stripes removed from case-study images */
.cs-shot__media.frame-media::after { display: none; }
.cs-film__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
}
.cs-film__btn {
  width: clamp(74px, 8vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background: var(--rec); display: grid; place-items: center;
  box-shadow: 0 0 0 0 var(--rec-glow); transition: transform .4s var(--ease), box-shadow .5s var(--ease);
}
.cs-film__frame:hover .cs-film__btn { transform: scale(1.08); box-shadow: 0 0 0 14px oklch(1 0.18 95 / .12); }
.cs-film__btn::after { content: ""; width: 0; height: 0; margin-left: 6px;
  border-left: clamp(20px,2vw,28px) solid var(--on-accent);
  border-top: clamp(13px,1.3vw,18px) solid transparent; border-bottom: clamp(13px,1.3vw,18px) solid transparent; }
.cs-film__meta {
  position: absolute; left: 18px; bottom: 16px; z-index: 3; display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fg-dim);
}
.cs-film__meta .rec { color: var(--rec); }
.cs-film__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: oklch(1 0 0 / .12); }
.cs-film__bar i { display: block; height: 100%; width: 34%; background: var(--rec); box-shadow: 0 0 12px var(--rec-glow); }
.cs-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }

/* ============== QUOTE ============== */
.cs-quote { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cs-quote__inner { max-width: clamp(340px, 66vw, 1080px); margin-inline: auto; text-align: center; }
.cs-quote blockquote {
  font-weight: 700; font-stretch: 106%; font-size: clamp(22px,2.7vw,36px);
  line-height: 1.12; letter-spacing: -.02em; text-wrap: balance;
}
.cs-quote blockquote .mark { color: var(--rec); }
.cs-quote__by { margin-top: clamp(22px,3vh,34px); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--fg-faint); text-align: center; }
.cs-quote__by b { color: var(--fg); font-weight: 400; }

/* ============== NEXT PROJECT ============== */
.cs-next { position: relative; display: block; overflow: hidden; min-height: clamp(320px,46vw,560px); }
.cs-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(.55) brightness(.34) blur(9px); transition: transform 1.4s var(--ease), filter .6s var(--ease); }
.cs-next:hover img { transform: scale(1.16); filter: saturate(.7) brightness(.42) blur(8px); }
.cs-next::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 50% 40%, oklch(0.14 0.006 70 / .35), oklch(0.11 0.004 60 / .72)); }
.cs-next__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(50px,8vh,90px); }
.cs-next__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--rec); }
.cs-next__title { font-weight: 800; font-stretch: 116%; font-size: clamp(40px,6.5vw,108px); line-height: .9; letter-spacing: -.03em; margin-top: 16px; }
.cs-next__title .arrow { display: inline-block; transition: transform .4s var(--ease); }
.cs-next:hover .cs-next__title .arrow { transform: translateX(14px); }
.cs-next__cat { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: var(--fg-dim); }

/* reduced motion: settle parallax/scan */
@media (prefers-reduced-motion: reduce){ .cs-shot img{ transform: none !important; } }

/* ===== Cover z mockupem urządzenia (np. Soho Form) ===== */
.cs-hero--device .cs-hero__media{background:radial-gradient(60% 70% at 74% 48%,#2a3a3c 0%,#121414 72%)}
.cs-hero--device .cs-hero__media::after{background:linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
.cs-hero--device .cs-hero__media img{position:absolute;right:0;left:auto;top:50%;transform:translateY(-50%);width:min(50%,1100px);height:auto;object-fit:contain;filter:none}
.cs-hero--device .cs-hero__inner>*{max-width:46%}
@media(max-width:1100px){
 .cs-hero--device .cs-hero__media img{top:clamp(84px,12vh,120px);right:50%;transform:translateX(50%);width:min(92%,720px)}
 .cs-hero--device .cs-hero__inner{padding-top:calc(min(92vw,720px)*.62 + clamp(84px,12vh,120px))}
 .cs-hero--device .cs-hero__inner>*{max-width:100%}
}