/* ADP v2 - PODSTRONA: lista case studies (case-studies/index.html)
   Tylko komponenty, których nie ma w adp-v2.css. Tokeny i efekty bazowe biorą się z adp-v2.css.
   1. .cs-zoom   - nakładki na efekt 03 (intro na starcie, cień pod tytułem, stan końcowy dla fx-static)
   2. .cs-grid   - siatka 6 realizacji: karta FEATURED (tilt, 10) na 2 rzędy + 5 kart otwieranych z pionowej szczeliny (.rv-open)
   3. .cs-more   - linia zamykająca listę */

/* ---------- 1. ZOOM HERO ---------- */
.cs-zoom__intro{position:absolute;left:0;right:0;top:calc(var(--navh) + clamp(20px,4vh,44px));z-index:3;color:#fff;pointer-events:none}
.cs-zoom__intro .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.cs-zoom__intro .crumbs{pointer-events:auto}
.cs-zoom__intro p{font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em;line-height:1.25;max-width:22ch;text-align:right;color:rgba(255,255,255,.92)}
.cs-zoom__shade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,0) 30%,rgba(5,5,5,.15) 50%,rgba(5,5,5,.86) 100%)}
.cs-zoom .fx-zoom__title .lead{color:rgba(255,255,255,.84);max-width:46ch}
.cs-zoom .fx-zoom__title .hero__ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:6px}
.cs-zoom .fx-zoom__title .link{color:#fff;border-color:rgba(255,255,255,.4)}
@media(max-width:860px){
  .cs-zoom__intro p{text-align:left;max-width:none;font-size:16px;padding:10px 12px;background:rgba(10,10,10,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
}
/* stan końcowy (reduced-motion, ?static=1, brak JS): kadr centralny na pełnym ekranie, reszta kolażu poza kadrem */
.fx-static .cs-zoom .fx-zoom__el:not(:first-child),.fx-static .cs-zoom__intro,.no-js .cs-zoom__intro{display:none}
.fx-static .cs-zoom .fx-zoom__el:first-child .fx-zoom__box{width:100vw;height:100%}
.fx-static .cs-zoom__shade{opacity:1}

/* ---------- 2. SIATKA REALIZACJI ---------- */
.cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,1.8vw,26px)}
.cs-card{position:relative;display:flex;flex-direction:column;gap:16px;grid-column:span 4;color:inherit}
.cs-card--feat{grid-column:span 8;grid-row:span 2}
.cs-card__ph{position:relative;overflow:hidden;background:var(--ink-3);aspect-ratio:4/5}
.cs-card--wide .cs-card__ph{aspect-ratio:4/3}
.cs-card--feat .cs-card__ph{aspect-ratio:auto;flex:1;min-height:420px;overflow:visible;background:none}
.cs-card__ph img{width:100%;height:100%;object-fit:cover}
.cs-card:not(.cs-card--feat) .cs-card__ph img{transition:transform 1.1s var(--ease),filter .6s var(--ease)}
/* stalowa rama: na hover hairline wchodzi do środka kadru, jak profil wokół szyby */
.cs-card:not(.cs-card--feat) .cs-card__ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.75);opacity:0;transform:scale(1.04);transition:opacity var(--t-mid) var(--ease),transform .6s var(--ease);pointer-events:none}
.cs-card:hover .cs-card__ph::after,.cs-card:focus-visible .cs-card__ph::after{opacity:1;transform:none}
.cs-card:hover .cs-card__ph img,.cs-card:focus-visible .cs-card__ph img{transform:scale(1.04)}
.cs-card__meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line-2)}
.cs-card__no{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--text-3)}
.cs-card__meta .h3{font-size:clamp(20px,1.7vw,24px)}
.cs-card__meta p{grid-column:2/-1;font-size:14.5px;color:var(--text-2);line-height:1.45}
.cs-card__loc{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.cs-card__go{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);grid-column:2/-1;margin-top:4px}
.cs-card__go .btn__arrow{width:16px;transition:transform var(--t-mid) var(--ease)}
.cs-card:hover .cs-card__go,.cs-card:focus-visible .cs-card__go{color:var(--text)}
.cs-card:hover .cs-card__go .btn__arrow,.cs-card:focus-visible .cs-card__go .btn__arrow{transform:translateX(5px)}
.cs-card:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
/* karta FEATURED: tilt z silnika (10), pływająca etykieta niesie nazwę i zakres */
.cs-card--feat .fx-tilt{height:100%;min-height:420px}
.cs-card--feat .fx-tilt__float span{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cs-card--feat .fx-tilt__float b{font-size:clamp(24px,2.4vw,36px)}
.cs-card--feat .fx-tilt__float i{font-style:normal;font-size:14.5px;color:rgba(255,255,255,.8);line-height:1.45}
@media(max-width:960px){
  .cs-card,.cs-card--feat{grid-column:span 6}
  .cs-card--feat{grid-column:1/-1;grid-row:auto}
  .cs-card--feat .cs-card__ph{flex:none;aspect-ratio:4/3;min-height:0}
  .cs-card--feat .fx-tilt{min-height:0}
  .cs-card--wide .cs-card__ph{aspect-ratio:4/5}
}
@media(max-width:620px){
  .cs-grid{grid-template-columns:1fr;gap:40px}
  .cs-card,.cs-card--feat{grid-column:1/-1}
  .cs-card--feat .cs-card__ph{aspect-ratio:4/5}
  .cs-card__ph,.cs-card--wide .cs-card__ph{aspect-ratio:4/3}
}

/* ---------- 3. LINIA ZAMYKAJĄCA ---------- */
.cs-more{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--line)}
.cs-more p{color:var(--text-2);font-size:15px}
.cs-more p b{color:var(--text);font-weight:600}

/* ---------- reduced motion / zrzuty ---------- */
.fx-static .cs-card__ph img,.fx-static .cs-card__ph::after{transition:none}