/* =============== ZORNA: REALIZACJE (css/realizacje.css) ===============
   Tylko to, co jest specyficzne dla /realizacje/. Kolejnosc w <head>: baza.css,
   podstrony.css, ten arkusz. Paleta jak w bazie, zero nowych kolorow (wyjatek: ciemne tlo
   okna podgladu makiet, #0a0c0e, to samo co pod zrzutami w .case-shot).

   UKLAD  .rl-in (kolumna 1160 px, ta sama co .ph-in) | .rl-head (naglowek sekcji) |
          .case-list > article.case-card (ciemna karta realizacji: zrzut 16:10 z jednej,
          tekst z drugiej strony, parzyste karty odwrocone) | .zaufali (cichy wiersz nazw) |
          .makieta-grid > article.makieta-card (trzy ciemne karty: .makieta-podglad = okno z kadrami
          i zakladkami, .makieta-body = tekst, a przy dole .makieta-cta, przycisk do makiety w /demo/) |
          sekcja zamykajaca: tekst w .rl-in (60ch), a okno czatu .cta-czat z podstrony.css stoi
          w osobnym pasie .sec--tint.sec--s, tak samo jak na pozostalych podstronach
   PODGLAD MAKIETY (bez JS)  .makieta-podglad[role=radiogroup] zawiera input.mk-r.mk-r1..r4 (radia,
          ukryte wizualnie, dostepne z klawiatury), .makieta-okno > img.mk-kadr.mk-k1..k4 (.mk-kadr--tel
          = pionowy telefon) i .makieta-tabs > label.mk-t.mk-t1..t4. Kazda karta konczy sie
          przyciskiem .makieta-cta, wiec trzy przyciski leza na jednej linii przy dole kart.
   Telefon i tablet (do 1023 px): karta w dwoch kolumnach (podglad | tekst), do 767 px w jednej. */

.rl-in{max-width:1160px;margin:0 auto}
.rl-head{max-width:640px}
.rl-head .sec-lead{max-width:56ch}
.sec-lead code,.makieta-desc code{padding:.14em .4em;border-radius:6px;font:400 .86em var(--mono)}
.sec-lead code{background:rgba(5,6,7,.07);color:var(--ink)}

/* ---------- KARTA REALIZACJI ----------
   Pulpit: dwie karty w rzedzie, zrzut 16:10 nad tekstem (kazda karta ma ten sam zrzut i te same
   ramy, wiec wszystkie niosa te sama wage; rzad wyrownuje wysokosc, przycisk siedzi na dole karty).
   Tablet i telefon: jedna kolumna. */
.case-list{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:44px}
.case-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:18px;background:var(--ink);color:var(--lt);box-shadow:0 30px 60px -36px rgba(5,6,7,.6)}
.case-card :focus-visible,.makieta-card :focus-visible{outline-color:var(--lt)}
@media (min-width:900px){
  .case-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.case-shot{display:block;padding:14px 14px 0;color:inherit;text-decoration:none}
.case-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:14px;background:#0a0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
a.case-shot:focus-visible{outline:0}
a.case-shot:focus-visible img{outline:2px solid var(--lt);outline-offset:3px}

.case-body{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;padding:28px clamp(24px,2.6vw,34px) 32px}
.case-tag,.makieta-tag{display:flex;align-items:center;gap:9px;font:400 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.case-tag::before,.makieta-tag::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:rgba(255,255,255,.3)}
/* status "W produkcji": kontur i czerwona kropka jak przy nagrywaniu */
.case-status{display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:400 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lt)}
.case-status::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:var(--rec)}
/* karta bez linku (Denticus): chip statusu zjezdza na dol, wiec tag i tytul stoja na wysokosci sasiada (jak .case-list--auto w oferta.css) */
.case-card:not(:has(.case-link)) .case-status{order:9;margin-top:auto}
.case-name{font:300 clamp(26px,2.6vw,34px)/1.1 var(--font);letter-spacing:-.02em;text-wrap:balance;color:var(--lt)}
.case-desc{font:300 15px/1.7 var(--font);color:rgba(255,255,255,.74)}
.case-zakres{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.case-zakres li{padding:6px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font:300 12.5px/1.35 var(--font);color:var(--lt)}

/* Zmierzony ruch: liczba bez okresu pomiaru jest chwaleniem sie, nie dowodem,
   wiec .case-zrodlo jest czescia tego bloku, nie ozdoba. */
.case-liczby{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 36px;align-self:stretch;margin-top:2px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04)}
.case-liczba{display:flex;flex-direction:column;gap:8px}
.case-liczba-wartosc{font:200 clamp(32px,3vw,40px)/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--lt)}
.case-liczba-opis{font:400 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.case-zrodlo{flex-basis:100%;margin:0;font:300 12.5px/1.55 var(--font);color:var(--mut)}

.case-link{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:48px;margin-top:auto;padding:0 22px;border:1px solid rgba(238,240,242,.5);border-radius:999px;font:400 12.5px var(--mono);letter-spacing:.06em;text-decoration:none;color:var(--lt);transition:background .25s,color .25s}
.case-link:hover{background:var(--lt);color:var(--ink)}
.case-body>:has(+ .case-link){margin-bottom:6px}

/* ---------- ZAUFALI NAM: cichy wiersz nazw na jasnym tle ---------- */
.zaufali{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.zaufali-label{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-l)}
.zaufali-name{font:300 17px/1.4 var(--font);color:var(--mut-l)}

@media (max-width:1100px){.zaufali-label{flex-basis:100%}}

/* ---------- MAKIETY: trzy ciemne karty z oknem podgladu ----------
   Okno pokazuje kadry makiety z assets/makiety/. Przelacznik dziala bez JS: cztery radia .mk-r sa
   rodzenstwem .makieta-okno i .makieta-tabs, wiec :checked ~ wybiera kadr (.mk-k1..4) i zakladke
   (.mk-t1..4). Kadry sa absolutne (inset), bo procentowa wysokosc dziecka w pudelku z aspect-ratio
   bywa nierozwiazana. Niewybrany kadr ma display:none, wiec nie jest pobierany (loading=lazy
   pomija obrazy bez pudelka) ani czytany; przenikanie robi transition na display (allow-discrete)
   z @starting-style. Przegladarka bez allow-discrete odrzuci cala deklaracje transition i zmieni
   kadr bez przenikania. Przy prefers-reduced-motion przejscia wylacza globalnie baza.css. */
.makieta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.makieta-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:18px;background:var(--ink);color:var(--lt);box-shadow:0 30px 60px -36px rgba(5,6,7,.6)}
.makieta-podglad{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;margin:12px 12px 0}
.mk-r{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0;pointer-events:none}
.makieta-okno{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:#0a0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.mk-kadr{position:absolute;inset:0;display:none;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .35s var(--ease),display .35s allow-discrete}
.mk-kadr--tel{inset:auto;top:12px;left:50%;width:auto;height:calc(100% - 24px);aspect-ratio:780/1688;border-radius:12px;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 14px 28px -10px rgba(0,0,0,.7)}
.mk-r1:checked~.makieta-okno .mk-k1,.mk-r2:checked~.makieta-okno .mk-k2,.mk-r3:checked~.makieta-okno .mk-k3,.mk-r4:checked~.makieta-okno .mk-k4{display:block;opacity:1}
@starting-style{.mk-r1:checked~.makieta-okno .mk-k1,.mk-r2:checked~.makieta-okno .mk-k2,.mk-r3:checked~.makieta-okno .mk-k3,.mk-r4:checked~.makieta-okno .mk-k4{opacity:0}}
.makieta-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.7fr);gap:6px;margin-top:10px}
.mk-t{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px 0 calc(6px + .14em);border:1px solid rgba(255,255,255,.24);border-radius:999px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.74);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .25s,border-color .25s,color .25s}
@media (hover:hover){.mk-t:hover{border-color:rgba(255,255,255,.6);color:var(--lt)}}
@media (min-width:1024px) and (hover:hover){.mk-t{min-height:40px}}
.mk-r1:checked~.makieta-tabs .mk-t1,.mk-r2:checked~.makieta-tabs .mk-t2,.mk-r3:checked~.makieta-tabs .mk-t3,.mk-r4:checked~.makieta-tabs .mk-t4{border-color:var(--lt);background:var(--lt);color:var(--ink)}
.mk-r1:focus-visible~.makieta-tabs .mk-t1,.mk-r2:focus-visible~.makieta-tabs .mk-t2,.mk-r3:focus-visible~.makieta-tabs .mk-t3,.mk-r4:focus-visible~.makieta-tabs .mk-t4{outline:2px solid var(--lt);outline-offset:3px}
/* tryb wymuszonych kolorow: system nadpisuje tlo i kolor, wiec zaznaczona zakladka dostaje kolor wyroznienia */
@media (forced-colors:active){.mk-r1:checked~.makieta-tabs .mk-t1,.mk-r2:checked~.makieta-tabs .mk-t2,.mk-r3:checked~.makieta-tabs .mk-t3,.mk-r4:checked~.makieta-tabs .mk-t4{forced-color-adjust:none;border-color:Highlight;background:Highlight;color:HighlightText}}
.makieta-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:12px;padding:24px 26px 28px}
.makieta-tag{align-items:flex-start;letter-spacing:.1em}
.makieta-tag::before{margin-top:4px}
@media (min-width:1024px) and (max-width:1279px){.makieta-tag{min-height:2.8em}}
.makieta-name{font:300 22px/1.2 var(--font);letter-spacing:-.01em;text-wrap:balance;color:var(--lt)}
.makieta-desc{flex:1;font:300 14.5px/1.7 var(--font);color:rgba(255,255,255,.74)}
.makieta-desc code{background:rgba(255,255,255,.1);color:var(--lt)}
.makieta-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:6px;padding:0 22px;border-radius:999px;background:var(--lt);font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s}
@media (hover:hover){.makieta-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(238,240,242,.5)}}
.makieta-nota{max-width:74ch;margin-top:36px;font:300 14px/1.7 var(--font);color:var(--mut-l)}

/* ---------- ZAMKNIECIE ---------- */
.rl-in h2{text-wrap:balance}
.rl-p{max-width:60ch;margin-top:16px;font:300 17px/1.7 var(--font);color:var(--mut-l)}
.rl-in h2+.rl-p{margin-top:18px}
.rl-p a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rl-p a:hover{text-decoration-thickness:2px}

/* ---------- TABLET I TELEFON ---------- */
@media (max-width:1023px){
  .makieta-grid{grid-template-columns:minmax(0,1fr)}
  .makieta-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
  .makieta-podglad{margin:12px 0 12px 12px}
  .makieta-body{padding:24px 26px}
}
@media (max-width:899px){
  .case-shot{padding:12px 12px 0}
  .case-body{padding:26px 26px 30px}
}
@media (max-width:767px){
  .case-list{gap:20px;margin-top:36px}
  .case-card,.makieta-card{border-radius:18px}
  .case-body{gap:12px;padding:22px 20px 24px}
  .case-desc,.makieta-desc{font-size:15px}
  .case-link,.makieta-cta{align-self:stretch;margin-top:8px}
  .case-liczby{padding:16px;gap:12px 28px}
  .zaufali{gap:8px 22px;margin-top:40px;padding-top:24px}
  .zaufali-label{flex-basis:100%}
  .makieta-grid{gap:16px;margin-top:36px}
  .makieta-card{display:flex}
  .makieta-podglad{margin:12px 12px 0}
  .makieta-body{padding:22px 20px 24px}
  .makieta-nota{margin-top:28px;font-size:13.5px}
  .rl-p{font-size:16.5px}
}
@media (max-width:359px){
  .case-link{padding:0 12px;font-size:12px;letter-spacing:.02em}
  .case-body{padding-left:18px;padding-right:18px}
}