/* =============== ZORNA: DOKUMENTY, 404 I /en/ (css/dokument.css) ===============
   Dodatki ponad css/podstrony.css dla czterech stron: regulamin, polityka prywatnosci,
   404 i angielska strona glowna (en/). Kolejnosc w <head>: baza.css, podstrony.css,
   dokument.css. Zero nowych kolorow, zero ruchu (animacje tylko z baza.js i karty naglowka).

   DOKUMENTY PRAWNE (regulamin, polityka)
   Naglowek (.ph--solo .ph-text), spis, tekst, data i przyciski na dole biegna jednym lewym
   brzegiem (kolumna 720 px, jak .proza).
   .spis--dok      spis tresci w <details open> (na telefonie zwija go krotki skrypt inline po rozpoznaniu
                   szerokosci < 768 px; bez JS zostaje rozwiniety). Pulpit: dwie kolumny numerowane
                   kolumnami (1 do 8 po lewej, reszta po prawej), bez przycisku zwijania; telefon: jedna kolumna
   .spis--par      numery spisu jako "§1, §2..." (regulamin)
   .spis--lp       numery spisu jako "1., 2...." (polityka)
   .dok-data       zamykajaca linia z data obowiazywania, mono, pod kreska
   .dok-wroc       na koncu dokumentu: dwa przyciski .btn-line (wroc na glowna, kontakt) przy brzegu tekstu;
                   na telefonie pelnej szerokosci, jeden pod drugim

   404
   .err-num        wielka cyfra "404" (dekoracja, aria-hidden); .ph-text--err = pulpit: cyfra po lewej,
                   eyebrow, h1, zdanie i przycisk po prawej

   /en/
   .sec-in--w      szeroka kolumna sekcji (1160 px = .hd-in i .ft-in, ta sama krawedz co naglowek i stopka)
   .uslugi         wiersze uslug: numer mono, nazwa (h3), opis; kreski, bez ramek
   .en-kontakt     kolumna okna czatu (jak .cta-czat na pozostalych stronach): naglowek sekcji i link "Wersja polska"
                   w jednym wierszu nad oknem, okno jest ostatnim blokiem przed stopka
   .btn-mail       przycisk z adresem e-mail: bez wersalikow (adres zostaje malymi literami)
   .faq-a code     chip kodu w odpowiedzi FAQ

   POMOCNICZE (dla kazdej z czterech stron)
   .proza--l   kolumna tekstu 720 px dosunieta do lewej krawedzi .sec-in (jeden lewy brzeg w sekcjach /en/);
               od 1024 px w .sec-in--w: naglowek po lewej, tekst po prawej (jak wiersze .uslugi)
   Naglowki h2 w .sec-in, .en-kontakt i .proza--l maja skale z baza.css (".sec h2": 42 px pulpit, 30 px telefon),
   jak /realizacje/, /wycena/ i /asystent/. Proza dokumentow (.proza h2 z podstrony.css) zostaje 34/26 px. */

/* ---------- WSPOLNE ---------- */
.proza sup{font-size:.7em;line-height:0}
.proza>.eyebrow+h2{margin-top:0}
.proza--l{margin-left:0}
.sec-lead,.cta-msg p,.ph-lead{text-wrap:pretty}
.proza>.ph-btns{margin-top:28px}
.sec-in h2,.en-kontakt h2,.proza--l>h2{font:300 clamp(28px,4vw,42px)/1.15 var(--font);letter-spacing:-.02em;text-wrap:balance}
@media (max-width:767px){.sec-in h2,.en-kontakt h2,.proza--l>h2{font-size:30px;line-height:1.1}}

/* ---------- DOKUMENTY PRAWNE ---------- */
.proza>.spis:first-child{margin-top:0}
.ph--solo .ph-text:not(.ph-text--err){width:100%;max-width:720px;margin-inline:auto}
/* spis: kolumny numerowane z gory na dol (8 wierszy: 1 do 8 po lewej, reszta po prawej); wiersze wspolne,
   wiec kreski obu kolumn leza na jednej wysokosci. Pierwszy wiersz kazdej kolumny bez kreski u gory */
.spis--dok ol{display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,auto);column-gap:40px}
.spis--dok li:nth-child(9){border-top:0}
.spis--dok li{display:flex}
.spis--dok li>a{flex:1;min-width:0}
.spis--dok summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:-8px 0 -2px;cursor:pointer;list-style:none}
.spis--dok summary::-webkit-details-marker{display:none}
.spis--dok summary::after{content:'+';font:200 24px/1 var(--font);color:var(--ink)}
.spis--dok details[open]>summary::after{transform:rotate(45deg)}
.spis--par a::before{content:'§' counter(s)}
.spis--lp a::before{content:counter(s) '.'}
/* pulpit: spis jest zawsze rozwiniety, bez znaczka "+" (skrypt inline pilnuje tego tez z klawiatury) */
@media (min-width:768px){
  .spis--dok summary{pointer-events:none;cursor:default}
  .spis--dok summary::after{content:none}
}
@media (max-width:767px){
  .spis--dok ol{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .spis--dok li:nth-child(9){border-top:1px solid var(--line)}
}
/* 320 do 359 px: linia z data pod h1 ("Ostatnia aktualizacja: 29 wrzesnia 2026") ma 309 px, kolumna 280 px, wiec wolno jej zawinac */
@media (max-width:359px){.ph--solo .meta>*{white-space:normal;text-wrap:balance}}
.proza>.dok-data{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--line);font:400 12px/1.8 var(--mono);letter-spacing:.06em;color:var(--mut-l)}
/* koniec dokumentu: dwa przyciski przy lewym brzegu tekstu (kolumna 720 px), nizsze pasmo */
.dok-wroc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 36px;font:400 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.dok-wroc a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.dok-wroc a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.dok-wroc .btn-line{min-height:50px}
.dok-wroc .btn-line:hover{text-decoration:none}
.sec>.dok-wroc{max-width:720px;margin-inline:auto;justify-content:flex-start;gap:12px}
.sec:has(>.dok-wroc){padding-block:clamp(40px,5vw,56px)}
@media (max-width:767px){
  .dok-wroc{flex-direction:column;gap:0}
  .sec>.dok-wroc{align-items:stretch;gap:12px}
  .sec:has(>.dok-wroc){padding-block:40px}
}

/* ---------- 404 ---------- */
.err-num{margin:14px 0 20px -.04em;font:200 clamp(120px,24vw,248px)/.82 var(--font);letter-spacing:-.06em;color:var(--ink)}
@media (max-width:767px){.err-num{font-size:clamp(112px,36vw,152px)}}
.ph-text--err{max-width:none}
/* pulpit: cyfra po lewej, reszta po prawej; pasmo nizsze, lista linkow widoczna bez przewijania */
@media (min-width:1024px){
  .ph-text--err{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(48px,7vw,104px);align-content:center}
  .ph-text--err>*{grid-column:2}
  .ph-text--err>.err-num{grid-column:1;grid-row:1/span 4;align-self:center;margin:0 0 0 -.04em}
}
/* lista linkow na pelnej szerokosci: tytul po lewej, opis po prawej, strzalka na koncu wiersza */
@media (min-width:1024px){
  .sec-in--w .lista-linkow a{grid-template-columns:minmax(0,5fr) minmax(0,7fr) 28px;column-gap:clamp(24px,4vw,56px)}
  .sec-in--w .ll-t{grid-column:1;grid-row:1}
  .sec-in--w .ll-d{grid-column:2;grid-row:1;margin-top:0}
  .sec-in--w .ll-a{grid-column:3;grid-row:1}
}

/* ---------- /en/ ---------- */
.btn-mail{text-transform:none;letter-spacing:.04em}
.faq-a code{padding:.14em .4em;border-radius:6px;background:rgba(5,6,7,.06);font:400 .86em var(--mono);color:var(--ink)}
.uslugi{margin:36px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.uslugi li{display:grid;grid-template-columns:44px minmax(0,.85fr) minmax(0,1.15fr);gap:6px 28px;align-items:baseline;padding:28px 0;border-top:1px solid var(--line)}
.us-n{font:400 11px/1.4 var(--mono);letter-spacing:.14em;color:var(--mut-l)}
.uslugi h3{margin:0;font:300 clamp(20px,2.2vw,24px)/1.3 var(--font);letter-spacing:-.01em;text-wrap:balance}
.uslugi p{margin:0;font:300 15.5px/1.7 var(--font);color:var(--mut-l)}
@media (max-width:767px){
  .uslugi{margin-top:28px}
  .uslugi li{grid-template-columns:36px minmax(0,1fr);gap:8px 12px;padding:22px 0}
  .us-n{grid-row:1/span 2}
  .uslugi h3,.uslugi p{grid-column:2}
}
.card-sep+.big{margin-top:10px}
.sec-in .sec-lead a{color:var(--ink);text-underline-offset:3px}

/* szeroka kolumna: ta sama krawedz co naglowek i stopka (1240 minus 2 x 40 px) */
.sec-in--w{max-width:1160px}
.sec-in--w .uslugi{margin-top:40px}
.sec-in--w .uslugi li{grid-template-columns:64px minmax(0,1fr) minmax(0,1.2fr);gap:6px 40px;padding:32px 0}
.sec-in--w .uslugi p{max-width:62ch;font-size:16px}
@media (max-width:767px){
  .sec-in--w .uslugi{margin-top:28px}
  .sec-in--w .uslugi li{grid-template-columns:36px minmax(0,1fr);gap:8px 12px;padding:22px 0}
  .sec-in--w .uslugi p{font-size:15.5px}
}
/* proces: cztery karty na cala szerokosc; kolumny 4 / 2 / 1 daje .kroki--4 z podstrony.css (nigdy 3 + 1) */
.sec-in--w .kroki{gap:20px;margin-top:40px}
.sec-in--w .krok h3{padding:22px 18px 0;font-size:20px;text-wrap:balance}
.sec-in--w .krok p{padding:10px 18px 24px;font-size:15px}
@media (min-width:1024px){.sec-in--w .krok h3{min-height:calc(2.6em + 22px)}}
@media (max-width:559px){.sec-in--w .kroki{gap:16px;margin-top:32px}}
.sec-in--w>.proza--l>h2+*{margin-top:18px}
/* sekcje tekstowe od 1024 px: naglowek po lewej, tresc po prawej, w tych samych kolumnach co wiersze uslug
   (numer 64 px, nazwa 1fr, opis 1,2fr), wiec opis uslug i tekst sekcji zaczynaja sie na jednej pionowej linii */
@media (min-width:1024px){
  .sec-in--w>.proza--l{max-width:none;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.2fr);column-gap:40px;align-items:start}
  .sec-in--w>.proza--l>.eyebrow{grid-column:1/-1}
  .sec-in--w>.proza--l>h2{grid-column:1/3;grid-row:2/span 6}
  .sec-in--w>.proza--l>:not(.eyebrow,h2){grid-column:3}
  .sec-in--w>.proza--l>h2+*{margin-top:0}
  #en-faq>.sec-in--w{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.2fr);column-gap:40px;align-items:start}
  #en-faq>.sec-in--w>.rv:first-child{grid-column:1/3}
  #en-faq>.sec-in--w>.faq-list{grid-column:3}
  #en-faq .faq-list{margin-top:0}
}

/* kontakt: kolumna okna czatu jak na pozostalych stronach; naglowek i link do wersji polskiej w jednym wierszu */
.en-kontakt{max-width:720px;margin:0 auto}
@media (max-width:1023px){.en-kontakt{margin-inline:0}}
.en-kontakt>.rv:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end;margin-bottom:28px}
.en-kontakt>.rv:first-child>.eyebrow,.en-kontakt>.rv:first-child>h2{grid-column:1}
.en-kontakt .dok-wroc{grid-column:2;grid-row:1/span 2;justify-content:flex-end;margin:0}
@media (max-width:767px){
  .en-kontakt>.rv:first-child{grid-template-columns:minmax(0,1fr)}
  .en-kontakt .dok-wroc{grid-column:1;grid-row:auto;align-items:flex-start;justify-content:flex-start;margin-top:6px}
}