/* REDFORD V6 · taxi.css: case study /realizacje/taxi-kutno/ (sub/taxi, karta R9-B, korekta R10 t_781dd77a, 20.10.2026; R13-B t_41123147, 21.10.2026).
 * Ładowany PO wspólnych arkuszach i kopii wzorca (wzorzec-strony.css, wzorzec-strony-r2.css z podglądu podstrony Strony).
 * Tylko klasy tx-*, ts-*, zb-*, tb-* i lokalne nadpisania. Jeden krój (--f-text), bez kursywy, akcent tylko kolorem. */

/* ---------- przejścia sekcji (jak flow.css): nowe identyfikatory tej strony ---------- */
.tx-k{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:700 var(--fs-lbl)/1.2 var(--f-text);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:#6B6B66}
.tx-k::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- HERO wg wzoru (R10): ścieżka u góry; po lewej duży tytuł i mały opis, po prawej okno przeglądarki ze zdjęciem
 * projektu (kolumny 7 do 12 jak okno szkieletu wzorca), pod oknem dane projektu w stylu legendy wzorca. Górna krawędź
 * okna na ok. 40% wysokości ekranu, górna krawędź tytułu na tej samej wysokości. R13-B: pod opisem przycisk „Odwiedź stronę”
 * (.bp czerwona pigułka, efekt btnfx jak na stronie głównej); bez banera pod hero, więc dolny odstęp obejmuje zakładkę
 * następnej sekcji (--fl-r, jak .sp-hero wzorca). ---------- */
.tx-hero{padding:clamp(128px,15vh,168px) 0 calc(var(--fl-r) + clamp(72px,8vw,120px))}
.tx-hero .sp-hero-top{margin-bottom:0}
.tx-hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;
  margin-top:max(40px,calc(40vh - clamp(128px,15vh,168px) - 20px))}
.tx-hero-txt{grid-column:1/span 6;min-width:0}
/* tytuł: górna krawędź liter na wysokości górnej krawędzi okna (wysokość linii 1 = pole linii bez zapasu u góry, korekta w em) */
.tx-h1{max-width:none;margin:-.118em 0 0;font-size:clamp(80px,10.2vw,184px);line-height:.92;letter-spacing:-.05em}
.tx-desc{max-width:26em;margin:clamp(28px,2.8vw,44px) 0 0;font:400 clamp(16px,1.25vw,18px)/1.5 var(--f-text);color:#3A3A37}
.tx-cta{margin:clamp(28px,2.6vw,40px) 0 0}
.tx-win{grid-column:7/-1;min-width:0;margin:0}
.tx-win-f{overflow:hidden;border-radius:18px;background:var(--ink);will-change:clip-path}
.tx-win-bar{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 16px;box-shadow:inset 0 -1px 0 rgba(243,243,239,.08)}
.tx-win-bar i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(243,243,239,.22)}
.tx-win-bar span{position:absolute;left:50%;top:10px;width:26%;height:14px;border-radius:7px;background:rgba(243,243,239,.08);transform:translateX(-50%)}
.tx-win .ts-f{border-radius:0;background:#141414}
.tx-leg{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--gap);margin:18px 0 0;padding:0}
.tx-li{min-width:0;padding-top:12px;border-top:2px solid rgba(14,14,14,.12)}
.tx-li:first-child{border-top-color:var(--red)}
.tx-li dt{margin:0 0 4px;font:700 var(--fs-lbl)/1.3 var(--f-text);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:#6B6B66}
.tx-li dd{margin:0;font:700 var(--fs-sm)/1.35 var(--f-text);color:var(--ink);overflow-wrap:anywhere}
.tx-li dd a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* R25: wartość „Zakres” jako link do strony usługi: wygląd jak tekst, podkreślenie przy hover, widoczny fokus */
.tx-li dd a.tx-leg-a{text-decoration:none}
.tx-li dd a.tx-leg-a:hover{text-decoration:underline}
.tx-li dd a.tx-leg-a:focus-visible{text-decoration:underline;outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- SLOTY ZDJĘĆ: <figure class="ts" data-slot="NN" style="--ar:16/9"> ---------- */
.ts{margin:0;min-width:0}
.ts-f{position:relative;aspect-ratio:var(--ar,16/9);overflow:hidden;border-radius:20px;background:var(--tone)}
.ts-f img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ts--empty .ts-f{background:#ECECE7;box-shadow:inset 0 0 0 1px rgba(14,14,14,.06)}
.ts--empty .ts-f::before{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(14,14,14,.24);border-radius:12px;pointer-events:none}
.ts-e{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;color:#6B6B66}
.ts-plus{position:relative;width:44px;height:44px;margin-bottom:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(14,14,14,.24)}
.ts-plus::before,.ts-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:#4A4A46;transform:translate(-50%,-50%)}
.ts-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ts-n{font:700 var(--fs-sm)/1.2 var(--f-text);letter-spacing:.02em;color:#2A2A27}
.ts-ar{font:700 var(--fs-lbl)/1.2 var(--f-text);letter-spacing:var(--ls-lbl);color:#6B6B66;font-variant-numeric:tabular-nums}
.ts-h{max-width:18em;font:400 var(--fs-lbl)/1.4 var(--f-text);color:#7A7A75}

/* ---------- BLOK 04: zrzut całej strony w ramce 2:3, przesuwany pionowym suwakiem obok ramki (taxi.js).
 * Bez JS: natywne przewijanie ramki, suwak ukryty. Scroll strony nie rusza zrzutu. ---------- */
.tx-pan{display:flex;align-items:stretch;max-width:min(100%,562px);margin-inline:auto}
.tx-pan .ts--pan{flex:1 1 auto;min-width:0}
.ts--pan .ts-f{overflow:auto;overscroll-behavior:auto}
.ts--pan .ts-f img{height:auto;min-height:100%;object-fit:initial}
.tx-sl{display:none;position:relative;flex:none;width:22px;margin-left:20px;touch-action:none;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent}
.tx-pan.is-on .ts--pan .ts-f{overflow:hidden}
.tx-pan.is-on .ts--pan .ts-f img{will-change:transform}
.tx-pan.is-on .tx-sl{display:block}
.tx-sl-tr{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:1px;background:rgba(14,14,14,.18)}
.tx-sl-th{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--red);box-shadow:0 2px 8px rgba(200,23,29,.28);
  transform:translate3d(0,var(--ty,0px),0);transition:box-shadow .3s var(--e-out),scale .3s var(--e-out)}
.tx-sl:hover .tx-sl-th,.tx-sl.is-drag .tx-sl-th{scale:1.12}
.tx-sl:focus-visible .tx-sl-th{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}

/* ---------- ZAKRES: co wprowadziliśmy na stronę i dlaczego to działa ---------- */
.tx-zk{padding:clamp(96px,9vw,136px) 0 clamp(80px,8vw,120px)}
.tx-zk-head{display:block;margin-bottom:clamp(48px,5vw,80px)}
.tx-zk-head .sp-h2{max-width:14em}
.zb-list{margin:0;padding:0;list-style:none}
.zb{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:clamp(40px,4.4vw,64px) 0}
.zb-ln{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,14,14,.14);transform-origin:0 50%}
.zb-txt{position:relative;z-index:1;grid-column:1/span 5;grid-row:1;min-width:0}
.zb-media{position:relative;z-index:1;grid-column:7/-1;grid-row:1;min-width:0}
.zb--r .zb-txt{grid-column:8/-1}
.zb--r .zb-media{grid-column:1/span 6}
.zb-n{display:block;width:fit-content;margin-bottom:18px;background:var(--paper);box-shadow:0 0 0 6px var(--paper);font:700 14px/1 var(--f-text);letter-spacing:.08em;color:var(--red);font-variant-numeric:tabular-nums}
.zb-t{margin:0 0 clamp(24px,2.4vw,36px);font:700 var(--fs-h3)/1.08 var(--f-text);letter-spacing:-.02em}
.zb-p+.zb-p{margin-top:22px;padding-top:22px;border-top:1px solid rgba(14,14,14,.1)}
/* etykiety bloku o ton ciemniejsze niż #6B6B66, numer z podkładem papieru: kontrast >= 4,5:1 także nad kreską grafiki tła */
.zb-k{margin:0 0 8px;font:700 var(--fs-lbl)/1.2 var(--f-text);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:#5A5A55}
.zb-d{margin:0;max-width:30em;font-size:var(--fs-txt);line-height:1.5;color:#3A3A37}
.zb-why{font:700 clamp(18px,1.5vw,22px)/1.36 var(--f-text);letter-spacing:-.01em;color:var(--ink)}
/* tło bloku (R10): duża kreskowa grafika tematu, prawie przezroczysta, za tekstem i zdjęciem */
.zb-bg{position:absolute;z-index:0;top:12%;bottom:12%;left:0;right:0;display:flex;align-items:center;justify-content:flex-start;pointer-events:none;overflow:hidden}
.zb--r .zb-bg{justify-content:flex-end}
/* wysokość grafiki = 76% bloku (szerokość z proporcji); część pod zdjęciem jest zasłonięta (z-index) */
.zb-bg-svg{display:block;flex:none;width:auto;height:100%;max-width:none;overflow:visible}
.zb-bg-svg *{fill:none;stroke:var(--ink);stroke-opacity:.08;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ---------- GALERIA w zakresie (R13-B): zrzuty innych sekcji strony Taxi rozłożone luźno jak wycinki na stole.
 * Desktop: pole o wysokości --gh szerokości, kadry absolutnie (--x, --y, --w w %), obrót --r, warstwa --z; częściowe nachodzenie.
 * Ruch: wejście i lekki przesuw ze scrollem (taxi.js, data-speed), hover: kadr prostuje się i wychodzi na wierzch.
 * Telefon: dwie kolumny w przepływie, mniejsze obroty, bez absolutnych pozycji (brak przepełnienia). ---------- */
.tg{position:relative;padding:clamp(48px,5vw,80px) 0 clamp(8px,1vw,16px);border-top:1px solid rgba(14,14,14,.14)}
.tg-k{margin-bottom:clamp(28px,3vw,48px)}
.tg-list{position:relative;height:0;padding:0 0 var(--gh,62%);margin:0;list-style:none}
.tg-it{position:absolute;left:var(--x);top:var(--y);z-index:var(--z,1);width:var(--w);transform:rotate(var(--r,0deg));
  transition:transform .6s var(--e-out),z-index 0s .3s}
.tg-f{margin:0;overflow:hidden;border-radius:14px;background:var(--tone);box-shadow:0 1px 2px rgba(14,14,14,.06),0 18px 40px -18px rgba(14,14,14,.35),0 0 0 1px rgba(14,14,14,.06);
  transform:translate3d(0,calc(var(--py,0px) + var(--ey,0px)),0);will-change:transform}
.tg-it--p .tg-f{border-radius:18px}
.tg-f img{display:block;width:100%;height:auto}
@media (hover:hover) and (pointer:fine){
  .tg-it:hover{z-index:9;transform:rotate(0deg) scale(1.03);transition:transform .6s var(--e-out),z-index 0s}
}

/* „Projekt w skrócie” (R10; wygląd i ruch dawnego pasa „Jak wykonana jest strona”): ciemny pasek w obrębie zakresu */
.tb-wrap{margin-top:clamp(40px,4.4vw,64px);padding:clamp(36px,4vw,64px);border-radius:28px;background:var(--ink);color:var(--paper)}
.tb-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(32px,3.3vw,48px)}
.tb-h{grid-column:1/span 6;margin:0;font:700 var(--fs-h3)/1.08 var(--f-text);letter-spacing:-.02em}
.tb-lead{grid-column:8/-1;margin:0;max-width:22em;font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:rgba(243,243,239,.72)}
.tb-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.tb{display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2vw,28px);border-radius:20px;background:rgba(243,243,239,.04);box-shadow:inset 0 0 0 1px rgba(243,243,239,.14)}
.tb-ic{width:72px;height:74px;margin-bottom:28px}
.tb-svg{display:block;width:100%;height:100%;overflow:visible}
.tb-svg .d{fill:none;stroke:var(--paper);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tb-svg .c{stroke-opacity:.38}
.tb-svg .a{stroke:var(--red-hover)}
.tb-svg .o{fill:var(--ink)}
.tb-svg .f{fill:var(--red-hover)}
.tb-n{margin-bottom:10px;font:700 14px/1 var(--f-text);letter-spacing:.08em;color:rgba(243,243,239,.5);font-variant-numeric:tabular-nums}
.tb-t{margin:0 0 10px;font:700 clamp(20px,1.7vw,26px)/1.15 var(--f-text);letter-spacing:-.015em}
.tb-d{margin:0;font-size:var(--fs-sm);line-height:1.5;color:rgba(243,243,239,.7)}
.tb-d::first-letter{text-transform:uppercase}

/* ---------- POWIĄZANE REALIZACJE: 3 bez Taxi + link do wszystkich (R10: bez leadu) ---------- */
.tx-rz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tx-rz-grid .sp-rz-name{font-size:clamp(24px,2.2vw,32px)}
.tx-rz-all{display:flex;justify-content:center;margin-top:clamp(48px,5vw,72px)}
/* R13-B: przycisk z obrysem. Wcześniej na hover nakładały się trzy efekty: koło btnfx (czarne), własne wypełnienie :hover
 * (tło czarne w 0,3 s, napis jasny) i reguła btnfx „html .bp:hover” (tło czerwone, wygrywała specyficznością).
 * Teraz jedyną animacją jest koło btnfx: tło i napis gospodarza stoją, obwódka zostaje widoczna pod kołem. */
.tx-rz-all .bp{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(14,14,14,.24)}
html .tx-rz-all .bp:is(:hover,:focus-visible,:active){background:transparent;color:var(--ink)}
.tx-rz-all .bp>.bf-o{box-shadow:inherit}

/* ---------- poniżej desktopu ---------- */
@media (max-width:1023px){
  .tx-hero{padding:112px 0 64px}
  .tx-hero-row{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:32px}
  .tx-hero-txt,.tx-win{grid-column:1/-1}
  .tx-h1{margin-top:0;font-size:clamp(56px,19.6vw,128px)}
  .tx-desc{margin-top:20px;font-size:16px}
  .tx-win-f{border-radius:14px}
  .tx-win-bar{height:26px;padding:0 12px;gap:6px}
  .tx-win-bar i{width:7px;height:7px}
  .tx-win-bar span{top:7px;height:12px;border-radius:6px}
  .tx-leg{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:16px}
  .tx-li dt{font-size:12px}
  .tx-cta{margin-top:24px}
  .ts-f{border-radius:16px}
  .ts--empty .ts-f::before{inset:8px;border-radius:10px}
  .ts-e{padding:16px;gap:6px}
  .ts-plus{width:36px;height:36px;margin-bottom:4px}
  .tx-sl{margin-left:16px}
  .zb{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:40px 0}
  .zb-media{order:2}
  .zb-t{font-size:30px}
  .zb-bg,.zb--r .zb-bg{top:0;bottom:auto;height:70%;justify-content:center}
  .tb-wrap{padding:28px 20px;border-radius:24px}
  .tb-head{display:block}
  .tb-lead{margin-top:16px}
  .tb-list{grid-template-columns:minmax(0,1fr)}
  .tb{flex-direction:row;flex-wrap:wrap;column-gap:16px;padding:20px}
  .tb-ic{width:48px;height:50px;margin:0}
  .tb-n{align-self:center;margin:0}
  .tb-t{flex:1 0 100%;margin:16px 0 8px}
  .tx-rz-grid{grid-template-columns:minmax(0,1fr)}
  .tg{padding-top:40px}
  .tg-list{height:auto;padding:0 6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;align-items:start}
  .tg-it{position:relative;left:auto;top:auto;width:auto;transform:rotate(calc(var(--r,0deg) * .6))}
  .tg-it--w{grid-column:1/-1}
  .tg-it--w:nth-child(odd){margin-right:8%}
  .tg-it--w:nth-child(even){margin-left:8%}
  .tg-it--p:nth-child(3n+1){margin-top:24px}
  /* pojedynczy pionowy kadr (start strony): przesunięty w prawo i lekko nachodzi na kadr powyżej */
  .tg-it--p:nth-child(2){grid-column:1/-1;justify-self:end;width:52%;margin:-36px 6% 0 0}
  .tg-f,.tg-it--p .tg-f{border-radius:12px}
}

/* ---------- R14-B (t_a3ed31cc, 21.10.2026): hierarchia hero, galeria wg szkicu zamiast bloków 01 do 04, przycisk powiązanych ---------- */
/* hero: mniej pustego miejsca nad tytułem; opis czytelny (ciemny, większy); przycisk, potem dane projektu w lewej kolumnie */
.tx-hero{padding-top:clamp(120px,13vh,152px)}
.tx-hero-row{margin-top:clamp(56px,8vh,96px)}
.tx-desc{max-width:24em;font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:#26282B}
.tx-hero-end .tx-cta{margin:clamp(28px,2.6vw,40px) 0 0}
.tx-hero-end .tx-leg{max-width:34em;margin:clamp(36px,3.4vw,52px) 0 0}
.tx-li dt{color:#5A5A55}
.tx-li dd{font-size:16px}
/* galeria wg szkicu Rafała: pole o wysokości 300% szerokości (szkic 320x960), stałe pozycje, bez nachodzenia; kontener max 1160 px */
.tx-zk .tg{max-width:1160px;margin:0 auto;padding:0;border-top:0}
.tx-zk .tg-list{height:0;padding:0 0 var(--gh,300%)}
.tx-zk .tg-it{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;transform:rotate(var(--r,0deg))}
.tx-zk .tg-f{aspect-ratio:var(--ar);border-radius:16px}
.tx-zk .tg-f img{width:100%;height:100%;object-fit:cover;object-position:0 0}
/* powiązane: przycisk w nagłówku sekcji, po prawej */
.tx-rz-head{align-items:end}
.tx-rz-head .tx-rz-all{grid-column:8/-1;justify-self:end;margin:0}
@media (max-width:1023px){
  .tx-hero{padding-top:104px}
  .tx-hero-row{margin-top:28px}
  .tx-desc{font-size:17px}
  .tx-zk .tg-list{display:block;height:0;padding:0 0 var(--gh,300%)}
  .tx-zk .tg-it,.tx-zk .tg-it--w,.tx-zk .tg-it--p{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;justify-self:auto;grid-column:auto;transform:rotate(var(--r,0deg))}
  .tx-zk .tg-f{border-radius:10px}
  .tx-rz-head .tx-rz-all{margin-top:24px}
}

/* ---------- R15-B (t_3ce6eb77, 21.10.2026): dane projektu pod oknem, typografia wg strony głównej, mniejszy przycisk, nowa galeria ---------- */
/* typografia = strona główna (pomiar 1440 i 390, HANDOFF-R15B.md): h1 jak .hr-h1 (8,6vw, ls -.035em), opis jak .hr-lead,
 * tytuły sekcji jak .of-h/.et-h, duży tekst jak .onas-t, nagłówek problemu jak .ct_h, akapity jak akapity strony głównej (18 px/1.5) */
.tx-h1{font-size:clamp(64px,8.6vw,124px);letter-spacing:-.035em}
.tx-desc{max-width:21em;font:700 clamp(17px,1.6vw,23px)/1.38 var(--f-text);letter-spacing:-.01em;color:#26282B}
.tx-zk .sp-h2,#sp-realizacje .sp-h2{font:700 clamp(34px,3.6vw,56px)/1.14 var(--f-text);letter-spacing:-.02em}
#dla-kogo .sp-big{font-size:clamp(30px,3.6vw,52px);line-height:1.2}
.tb-h{font:700 clamp(34px,3.6vw,56px)/1.14 var(--f-text);letter-spacing:-.02em}
.tb-d{font-size:18px;line-height:1.5}
#problem .sp-pb-h{letter-spacing:-.025em}
#problem .sp-pb-p{font-size:clamp(17px,1.6vw,23px);line-height:1.38;letter-spacing:-.01em}
/* przycisk „Odwiedź stronę”: podstawowy .bp (48 px, 15 px, padding 24 px) zamiast .bp--lg (60 px, 17 px, 30 px) */
.tx-hero .tx-visit{height:48px;padding:0 24px;font-size:var(--fs-sm)}
/* dane projektu pod oknem ze zrzutem (wzór R10) */
.tx-win .tx-leg{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:20px 0 0}
/* galeria: pole --gh % szerokości, kadry w proporcjach pliku (bez przycinania), 15% do 55% szerokości, bez nachodzenia */
.tx-zk .tg-f{aspect-ratio:var(--ar)}
.tx-zk .tg-f img{object-fit:contain;object-position:50% 50%}
@media (hover:hover) and (pointer:fine){
  .tx-zk .tg-it:hover{z-index:9;transform:rotate(0deg) scale(1.03);transition:transform .6s var(--e-out),z-index 0s}
}
@media (max-width:1023px){
  .tx-h1{font-size:clamp(40px,12.3vw,64px)}
  .tx-desc{font-size:17px}
  .tx-zk .sp-h2,#sp-realizacje .sp-h2{font-size:clamp(30px,8vw,40px);line-height:1.18}
  #dla-kogo .sp-big{font-size:clamp(26px,7.4vw,36px)}
  .tb-h{font-size:30px;line-height:1.18}
  .tb-d{font-size:17px}
  #problem .sp-pb-h{font-size:clamp(44px,13vw,64px)}
  #problem .sp-pb-p{font-size:17px}
  .tx-win .tx-leg{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px 12px;margin-top:16px}
  /* telefon: jedna kolumna w przepływie, różne szerokości (--mw), na zmianę przy lewej i prawej, nierówne odstępy */
  .tx-zk .tg-list{display:block;height:auto;padding:0}
  .tx-zk .tg-it,.tx-zk .tg-it--w,.tx-zk .tg-it--p{position:relative;left:auto;top:auto;width:var(--mw);margin:32px 0 0;transform:rotate(calc(var(--r,0deg) * .6))}
  .tx-zk .tg-it:first-child{margin-top:0}
  .tx-zk .tg-it--r{margin-left:auto}
  .tx-zk .tg-it:nth-child(3n){margin-top:52px}
  .tx-zk .tg-it:nth-child(4n+2){margin-top:20px}
  .tx-zk .tg-it--l{margin-left:2%}
  .tx-zk .tg-it--r{margin-right:2%}
}
@media (max-width:420px){
  .tx-win .tx-leg{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- R16-B (t_65e85d66, 21.10.2026): galeria z większymi kadrami i większą ilością wolnej przestrzeni ----------
 * Desktop: pole do 1280 px (pozycje i szerokości w tools/build-taxi.py, tabela GAL). Telefon: większe odstępy pionowe (64 do 104 px). */
.tx-zk .tg{max-width:1280px}
@media (max-width:1023px){
  .tx-zk .tg-it,.tx-zk .tg-it--w,.tx-zk .tg-it--p{margin-top:72px}
  .tx-zk .tg-it:nth-child(3n){margin-top:104px}
  .tx-zk .tg-it:nth-child(4n+2){margin-top:64px}
  .tx-zk .tg-it:first-child{margin-top:0}
  .tx-zk .tg-it--l{margin-left:0}
  .tx-zk .tg-it--r{margin-left:auto;margin-right:0}
}