/*! MKM Labs frontend 2026-10-04 - case study template (realizacje/<slug>/). Needs mkm-fe.20261004.css.
 * Markup contract: scratchpad/fe-partials/CASE-TEMPLATE.md. Class names are fixed (prefix case-).
 * Hero reuses the shared .fe-hero / .fe-fact; everything else is case-*.
 */

/* ---------- Page ---------- */
.case-page{display:block;position:relative;background:#0a0c10;color:#fff}
.case-page a{text-underline-offset:3px}

/* ---------- Hero ---------- */
.case-hero .fe-hero__inner{align-items:flex-end}
.case-hero .fe-hero__main{gap:24px}
.case-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(18,22,31,.6);color:#c3c8d3;font-size:13px;font-weight:600;transition:transform 140ms var(--fe-ease-out),background-color 150ms ease,color 150ms ease}
.case-back:hover{background:rgba(255,255,255,.08);color:#fff}
.case-back:active{transform:scale(.96)}
.case-eyebrow{display:block}
.case-h1{font-size:clamp(38px,5.6vw,96px);line-height:.96;letter-spacing:-0.05em;overflow-wrap:break-word}
.case-lede{max-width:720px}
.case-lede a,.case-sec p a,.case-sec li a{color:#99baff;text-decoration:underline;text-decoration-thickness:1px}
.case-lede a:hover,.case-sec p a:hover,.case-sec li a:hover{color:#fff}
.case-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.case-badge{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e5e8ee;font-size:14px;font-weight:600}
.case-badge--nda{letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:#99baff;border-color:rgba(153,186,255,.3)}
.case-facts .fe-fact{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 22px}
.case-facts .fe-fact__v{font-size:clamp(17px,1.5vw,22px);line-height:1.25;letter-spacing:-0.02em;overflow-wrap:anywhere}

/* ---------- Sections ---------- */
.case-sec{padding:0 var(--fe-pad-x) clamp(64px,8vw,120px)}
.case-sec h2{margin:14px 0 22px;font-size:clamp(32px,4.2vw,64px);font-weight:600;line-height:1;letter-spacing:-0.045em;text-wrap:balance;overflow-wrap:break-word}
.case-sec h3{font-weight:600;letter-spacing:-0.03em}
.case-sec p{color:#c3c8d3;font-size:17px;line-height:1.65;text-wrap:pretty}
.case-sec p+p{margin-top:16px}
.case-sec .case-eyebrow{margin:0}
.case-sec-head{display:flex;flex-direction:column;gap:0;margin-bottom:clamp(24px,3vw,40px)}
.case-sec-head h2{margin-bottom:0}

/* ---------- Packshot / screenshots ---------- */
.case-packshot{padding-bottom:clamp(48px,6vw,88px)}
.case-shot{position:relative;margin:0;border-radius:var(--fe-r-card-lg);overflow:hidden;background:#07101d;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,20,92,.35)}
.case-shot img{display:block;width:100%;height:auto}
.case-packshot .case-shot{max-width:1240px;margin:0 auto}
.case-js .case-shot img{cursor:zoom-in}

/* ---------- Story (context + metrics) ---------- */
.case-story__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}
.case-story__main{display:flex;flex-direction:column}
.case-story__main p{font-size:clamp(17px,1.35vw,19px)}
.case-metrics{display:flex;flex-direction:column;gap:10px;position:sticky;top:104px}
.case-metric{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);border-radius:26px;background:#12161f;border:1px solid rgba(255,255,255,.07)}
.case-metric strong{font-size:clamp(30px,3.6vw,56px);font-weight:600;line-height:1;letter-spacing:-0.045em;color:#fff;overflow-wrap:anywhere}
.case-metric span{color:#aeb4c2;font-size:14px}
.case-metric:first-child{background:linear-gradient(160deg,#002bb5,#0057FF);border-color:rgba(153,186,255,.3)}
.case-metric:first-child span{color:#e6eeff}

/* ---------- Two-column cards (problem / solution, scope / stack) ---------- */
.case-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.case-card{display:flex;flex-direction:column;min-width:0;padding:clamp(26px,3.4vw,48px);border-radius:var(--fe-r-card-lg);background:#12161f;border:1px solid rgba(255,255,255,.07)}
.case-card h2{font-size:clamp(28px,3vw,44px);margin:12px 0 18px}
.case-split .case-card:nth-child(2){background:linear-gradient(160deg,#002bb5,#0057FF);border-color:rgba(153,186,255,.3)}
.case-split .case-card:nth-child(2) .case-eyebrow{color:#e6eeff}
.case-split .case-card:nth-child(2) p{color:#fff}
.case-split .case-card:nth-child(2) p a{color:#fff}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tags span{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:#161b26;border:1px solid rgba(255,255,255,.09);color:#e5e8ee;font-size:14px;font-weight:600;line-height:1.3}

/* ---------- Feature tour (Funkcja 01..05, 05 = AI layer) ---------- */
.case-tour__lead{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.case-tour__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.case-feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.4vw,52px);align-items:center;padding:clamp(22px,3vw,40px);border-radius:var(--fe-r-card-lg);background:#12161f;border:1px solid rgba(255,255,255,.07);min-width:0}
.case-feat:nth-child(even) .case-feat__shot{order:-1}
.case-feat__meta{display:flex;flex-direction:column;gap:14px;min-width:0}
.case-feat__meta .case-eyebrow{display:inline-flex;align-self:flex-start;padding:6px 12px;border-radius:999px;background:rgba(0,87,255,.16);border:1px solid rgba(102,153,255,.28);font-size:12px;color:#99baff}
.case-feat__meta h3{font-size:clamp(24px,2.5vw,38px);line-height:1.05;text-wrap:balance;overflow-wrap:break-word}
.case-feat__meta p{font-size:16px;line-height:1.65}
.case-feat__shot{margin:0;border-radius:22px;aspect-ratio:1440/900}
.case-feat__shot img{width:100%;height:100%;object-fit:cover}
.case-feat--text{grid-column:auto;grid-template-columns:minmax(0,1fr);align-items:start;gap:0}
.case-feat--text:nth-child(odd):nth-last-child(2){grid-column:1/-1}
.case-feat--ai{grid-column:1/-1;grid-template-columns:minmax(0,1fr);gap:0;background:linear-gradient(160deg,#002bb5,#0057FF 62%,#3378ff);border-color:rgba(153,186,255,.3);box-shadow:var(--fe-shadow-blue)}
.case-feat--ai .case-feat__meta{max-width:900px}
.case-feat--ai .case-eyebrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.case-feat--ai h3,.case-feat--ai p{color:#fff}
.case-feat--ai p{color:#e6eeff}
.case-feat--ai p a{color:#fff}
.case-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.case-chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:13px;font-weight:600;line-height:1.3}
.case-note{margin:24px 0 0;color:#aeb4c2;font-size:15px;line-height:1.6}
.case-note strong{color:#fff}

/* ---------- Results (rows) ---------- */
.case-rows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.case-rows li{display:grid;grid-template-columns:minmax(72px,132px) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.08)}
.case-rows li>span{color:#6699ff;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.case-rows li>span[aria-hidden="true"]{color:#4dff9f;font-size:18px;letter-spacing:0}
.case-rows li p{color:#e5e8ee;font-size:clamp(17px,1.6vw,22px);line-height:1.5;letter-spacing:-0.01em}
.case-rows+.case-note{margin-top:24px}
.case-results .case-shot{margin-bottom:clamp(24px,3vw,40px)}

/* ---------- Related case studies ---------- */
.case-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.case-rel{display:flex;flex-direction:column;gap:6px;min-width:0;padding:clamp(22px,2.4vw,30px);border-radius:28px;background:#12161f;border:1px solid rgba(255,255,255,.07);color:#fff;transition:border-color 200ms ease,background-color 200ms ease,transform 140ms var(--fe-ease-out)}
.case-rel:hover{color:#fff;border-color:rgba(153,186,255,.3);background:#161b26}
.case-rel:active{transform:scale(.98)}
.case-rel strong,.case-rel h3{font-size:clamp(19px,1.7vw,24px);font-weight:600;line-height:1.15;letter-spacing:-0.03em;text-wrap:balance}
.case-rel span{color:#8a92a3;font-size:13px;font-weight:600}
.case-rel p{color:#aeb4c2;font-size:15px;line-height:1.55}
.case-rel>div{display:flex;flex-direction:column;gap:8px}
.case-rel>div>span{order:-1;color:#6699ff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.case-rel img{display:block;width:calc(100% + 2*clamp(22px,2.4vw,30px) - 20px);margin:calc(-1*clamp(22px,2.4vw,30px) + 10px) calc(-1*clamp(22px,2.4vw,30px) + 10px) 14px;max-width:none;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:20px;background:#07101d}

/* ---------- CTA band (footer partial) ---------- */
.case-cta .fe-cta__lede a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.case-cta .fe-btns{justify-content:center}

/* ---------- Lightbox ---------- */
.case-lb{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:92vh;overflow:visible}
.case-lb::backdrop{background:rgba(5,9,20,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.case-lb img{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.case-lb__x{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(5,9,20,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.case-lb__x:hover{background:rgba(255,255,255,.16)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .case-story__grid{grid-template-columns:minmax(0,1fr)}
  .case-metrics{position:static;flex-direction:row;flex-wrap:wrap}
  .case-metric{flex:1 1 150px}
  .case-feat{grid-template-columns:minmax(0,1fr)}
  .case-feat:nth-child(even) .case-feat__shot{order:0}
  .case-feat__shot{order:2}
}
@media (max-width:760px){
  .case-two{grid-template-columns:minmax(0,1fr)}
  .case-tour__list{grid-template-columns:minmax(0,1fr)}
  .case-feat--text,.case-feat--text:nth-child(odd):nth-last-child(2){grid-column:1/-1}
  .case-rows li{grid-template-columns:minmax(56px,84px) minmax(0,1fr)}
  .case-sec p{font-size:16px}
  .case-badge{height:38px}
}
@media (max-width:420px){
  .case-h1{font-size:clamp(34px,10.5vw,44px)}
  .case-metric{flex:1 1 100%}
  .case-rows li{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .case-back,.case-rel{transition:none}
}