/* Strona kancelarii: własny arkusz (po styl.css). Dwie sceny w ruchu:
   1) realizacje - zrzuty stron kancelarii w oknach przeglądarki; silnik Film przewija zrzut w dół i z powrotem, gdy okno
      wejdzie w kadr (klasy .sk-w-dol i .sk-w-gore; stan końcowy = góra strony, jak w HTML);
   2) przewodnik - cały przepływ jako jeden film w kadrze .pw-uklad (opis w komentarzu części). */

/* ---------- realizacje: działająca strona szeroko, trzy propozycje pod nią ---------- */
.realizacje .sk-siatka{grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(36px, 4vw, 56px) clamp(20px, 2.4vw, 36px)}
.realizacje .sk:nth-child(n){margin-top:0}
.realizacje .sk:first-child{grid-column:1 / -1}
.realizacje .sk:first-child .sk-ekran{aspect-ratio:21 / 9}
.realizacje .sk:not(:first-child) .sk-ekran{aspect-ratio:4 / 3}
.realizacje .sk:not(:first-child) .sk-opis b{font-size:22px}
.realizacje .sk:not(:first-child) .sk-opis span{font-size:15px}

/* ruch zrzutu: w dół do treści strony i z powrotem na górę; film tylko przełącza klasy */
.sk-okno.film-gra .sk-ekran img[data-t]{transition:transform 2.4s cubic-bezier(.45,.05,.35,1)}
.sk-ekran img.sk-w-dol{transform:translateY(calc((100cqh - 100%) * .3))}
.sk-ekran img.sk-w-dol.sk-w-gore{transform:none}
.sk-okno.film-gra .sk-ekran img.sk-w-dol.sk-w-gore{transition-duration:1.6s}
/* wjazd okna i film nie ścigają się: przewijanie zaczyna się, gdy okno już stoi (data-start w części) */
/* najechanie dalej przewija całą stronę (reguła ze styl.css przegrałaby z klasami filmu) */
.sk-okno:is(:hover, :focus-visible) .sk-ekran img[data-t]{transform:translateY(calc(100cqh - 100%));transition:transform 11s cubic-bezier(.45,.05,.35,1)}
@media (hover:none){
  .sk-okno:hover .sk-ekran img[data-t]{transform:none}
}

@media (max-width:900px){
  .realizacje .sk-siatka{grid-template-columns:minmax(0,1fr)}
  .realizacje .sk:first-child .sk-ekran, .realizacje .sk:not(:first-child) .sk-ekran{aspect-ratio:16 / 10}
}

/* ---------- widoczność: dwie kolumny (wyszukiwanie | klient), lista na liniach włosowych ---------- */
.widocznosc{padding:0 0 var(--sek)}
.wd-kolumny{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(32px, 5vw, 80px);margin-top:clamp(40px, 5vw, 72px)}
.wd-kol h3{font:400 15px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--popiel);padding-bottom:16px;border-bottom:1px solid var(--grafit)}
.wd-lista{list-style:none;margin:0;padding:0}
.wd-lista li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px;padding:24px 0;border-bottom:1px solid var(--linia-ciemna)}
.wd-lista svg{width:24px;height:24px;margin-top:3px;fill:none;stroke:var(--zielen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wd-lista b{display:block;font:400 22px/1.3 var(--serif);color:var(--grafit)}
.wd-lista span{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:var(--popiel)}
@media (max-width:900px){
  .wd-kolumny{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .wd-lista li{grid-template-columns:24px minmax(0,1fr);gap:14px}
  .wd-lista b{font-size:20px}
}

/* ---------- droga zgłoszenia: trzy kroki na jednej osi; nad każdym mała karta z tym, co w tym kroku widać (formularz na
   stronie, e-mail klienta, zakładka w programie). Wiersze kroków trzymają wspólną wysokość przez subgrid. ---------- */
.wd-droga-nad{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:16px 24px;align-items:end;margin-top:clamp(64px, 7vw, 112px)}
.wd-droga-nad h3{grid-column:1 / span 7;margin:0;font:400 clamp(28px, 2.7vw, 42px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--grafit)}
.wd-droga-nad p{grid-column:9 / span 4;margin:0;font-size:18px;line-height:1.5;color:var(--popiel)}
.wd-droga{list-style:none;margin:clamp(32px, 4vw, 56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));grid-template-rows:repeat(4, auto);column-gap:clamp(24px, 3vw, 48px)}
.wd-droga > li{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
.wd-kr-karta{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--linia-ciemna);border-radius:12px;background:var(--panel)}
.wd-kr-karta p{margin:0;font:400 14px/1.4 var(--sans);color:var(--grafit)}
.wd-kr-karta svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wd-kr-karta .wd-kk-et{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--popiel)}
.wd-kk-licz{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--zielen);color:#fff;font:600 12px/1 var(--sans);letter-spacing:0}
.wd-kr-karta .wd-kk-t{font-weight:600;font-size:15px}
.wd-kk-w{display:flex;align-items:center;gap:8px;min-width:0}
.wd-kk-w span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-kk-w i{margin-left:auto;flex:none;font:400 12px/1.4 var(--mono);color:var(--popiel)}
.wd-kr-karta .wd-kk-stan{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--linia);font-weight:500;color:var(--zielen)}
.wd-kr-nr{display:flex;align-items:center;gap:14px;margin:28px 0 0;font:500 14px/1 var(--mono);color:var(--zielen)}
.wd-kr-nr::after{content:"";flex:1;height:1px;background:var(--linia-ciemna)}
.wd-droga > li > b{display:block;margin-top:16px;font:400 22px/1.3 var(--serif);color:var(--grafit)}
.wd-droga > li > span{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:var(--popiel)}
@media (max-width:900px){
  .wd-droga-nad h3, .wd-droga-nad p{grid-column:1 / -1}
  .wd-droga{grid-template-columns:minmax(0,1fr);row-gap:0}
  .wd-droga > li + li{margin-top:48px}
}

/* ---------- przewodnik jako film ---------- */
/* widać jeden krok: każdy krok z .akt, po którym stoi późniejszy z .akt, znika. W HTML wszystkie kroki mają .akt,
   więc bez skryptu i przy ograniczonym ruchu widać ostatni (wysłana prośba); film zdejmuje .akt i nadaje go taktami. */
.pw-uklad.pw-film .pw-ekran[data-e]:not(.akt), .pw-uklad.pw-film .pw-ekran.akt:has(~ .pw-ekran.akt){opacity:0;visibility:hidden;transform:translateX(-18px)}
.pw-uklad.pw-film .pw-ekran.akt:not(:has(~ .pw-ekran.akt)){opacity:1;visibility:visible;transform:none}
/* w filmie stary krok gaśnie szybko, nowy wchodzi chwilę po nim: w żadnej klatce dwa kroki nie stoją na sobie */
.pw-uklad.pw-film.film-gra .pw-ekran[data-e]:not(.akt), .pw-uklad.pw-film.film-gra .pw-ekran.akt:has(~ .pw-ekran.akt){transition:opacity .1s, transform .15s, visibility 0s .1s}
.pw-uklad.pw-film.film-gra .pw-ekran.akt:not(:has(~ .pw-ekran.akt)){transition:opacity .25s .06s, transform .4s .06s cubic-bezier(.2,1,.2,1), visibility 0s}

/* wybór klienta zostaje zaznaczony po kliknięciu (f-klik zostaje na elemencie do następnego odtworzenia) */
.pw-film [data-klik].f-klik:not(.pw-wyslij){background:var(--kz)!important;color:var(--panel)!important;border-color:var(--kz)!important}
.pw-film .pw-wybor li.f-klik b, .pw-film .pw-wybor li.f-klik span, .pw-film .pw-wybor li.f-klik i{color:var(--panel)}
.pw-film .pw-btn-tel.f-klik:not(.pw-wyslij){background:var(--zl)!important;color:var(--grafit)!important;border-color:var(--zl)!important}

/* Biuro: licznik 2 → 3, kalendarz ustępuje szczegółom prośby */
.pw-ile-przed.schowany{display:none}
.film-gra .pw-ile-po:not(.jest){display:none}
.pw-uklad.pw-film .pw-kal{opacity:1;visibility:visible;transition:opacity .35s}
.pw-uklad.pw-film .pw-kal.zniknal{opacity:0;visibility:hidden;transition:opacity .3s, visibility 0s .3s}
.pw-film .pw-nowy.blysk{animation:pw-blysk 1.4s ease-out}

@media (prefers-reduced-motion: reduce){
  .sk-okno .sk-ekran img[data-t]{transition:none}
  .sk-okno:is(:hover, :focus-visible) .sk-ekran img[data-t]{transform:none}
}