/* ============================================================
   ONLY FAST CARS — ekran wyboru lokalizacji (/)
   Jedna decyzja na całym ekranie: z którego miasta odbierasz auto.
   Dlatego strona nie przewija się na desktopie i nie ma tu nawigacji,
   wyszukiwarki ani oferty — wszystko to czeka za wyborem miasta.
   ============================================================ */

.wyb-body {
  min-height: 100svh;
  overflow-x: hidden;
  /* Jedna para krzywych na cały ekran. Wbudowane ease-* są za miękkie: ruch
     rusza leniwo dokładnie w chwili, w której patrzy się na niego najuważniej.
     „wy" startuje ostro i wyhamowuje (wejścia, najechania), „wwy" przyspiesza
     i zwalnia (rzeczy jadące przez ekran, czyli wlot w miasto). */
  --wy: cubic-bezier(.23, 1, .32, 1);
  --wwy: cubic-bezier(.77, 0, .175, 1);
  /* Czyste ciemne tło z dwiema poświatami: czerwona łuna po prawej podbija
     stronę mapy, jaśniejsza u góry po lewej podświetla tytuł i listę miast.
     Samo tło zostaje bez zdjęcia — jedyny kadr na ekranie leży w kolumnie mapy
     (.wyb-auto), po stronie tekstu nic nie konkuruje z nazwami miast. */
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(227, 34, 39, .08), transparent 60%),
    radial-gradient(90% 70% at 20% 0%, rgba(255, 255, 255, .05), transparent 55%),
    var(--bg0);
}

.wyb {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Bez tego kolumna 'auto' liczy się od min-content dzieci: nagłówek z dwiema
     pigułkami 'nowrap' ma około 440 px minimum, więc przeglądarka rozciągała
     układ telefonu do tej szerokości i cała strona wystawała poza ekran.
     Wtedy nie odpalało się już nawet zapytanie o wąski ekran (okno raportowało
     460 px zamiast 390) i poprawki niżej były martwe. */
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: 26px clamp(20px, 5vw, 64px) 22px;
  /* Wejście całości; wyjście robi klasa is-leaving przy kliknięciu w miasto.
     Ta animacja jest tylko siatką bezpieczeństwa — zdejmuje białą klatkę
     między wczytaniem arkusza a pierwszym rysowaniem. Właściwe wejście
     rozpisane jest niżej na kolejne elementy, żeby ekran budował się od
     nadtytułu w dół, a nie mrugał całością naraz. */
  opacity: 0;
  animation: wybWejscie .28s var(--wy) forwards;
  transition: opacity .32s ease, transform .32s ease;
}

/* ---------- wejście po kolei ----------
   Kolejność czytania: czym jesteśmy → co masz zrobić → skąd wybierasz →
   czym jeździmy. Odstępy krótkie (55 ms na wiersz), bo kaskada ma prowadzić
   wzrok, a nie kazać na siebie czekać; całość domyka się przed sekundą,
   razem z konturem mapy. Wiersze miast liczą się ze zmiennej --i wpisanej
   w HTML, nie z :nth-child — po schowaniu miasta w panelu start.js numeruje
   je od nowa i kaskada nie robi dziury. */
.wyb-kicker, .wyb-title, .wyb-lead, .wyb-lista li {
  animation: wybWchodzi .52s var(--wy) calc(var(--z, 0s) + var(--i, 0) * .055s) both;
}
.wyb-kicker { --z: .04s; }
.wyb-title  { --z: .10s; }
.wyb-lead   { --z: .18s; }
.wyb-lista li { --z: .26s; }

@keyframes wybWchodzi {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
/* Wyjście prowadzi osobna sekwencja (patrz „wlot w miasto" niżej), więc sama
   powłoka nie gaśnie — inaczej przykryłaby cały ruch jednym przenikaniem. */

@keyframes wybWejscie {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- góra ---------- */
.wyb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Nagłówek to sam znak firmowy: pigułki nawigacji zeszły z tego ekranu
   (decyzja z 31.08.2026), bo jedyną decyzją ma być wybór miasta. */

/* ---------- środek ---------- */
.wyb-main {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.05fr);
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
}
.wyb-copy { max-width: 560px; }
.wyb-title { font-size: clamp(1.85rem, 4.6vw, 3.3rem); }
.wyb-lead { margin: 16px 0 0; max-width: 44ch; }

/* ---------- lista miast ----------
   Pięć nazw oddzielonych włoskowymi kreskami. Numer i województwo są
   drobne i przygaszone: prowadzą wzrok, ale nie konkurują z nazwą, która
   jest tu jedyną rzeczą do kliknięcia. */
.wyb-lista {
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.wyb-lista li { border-bottom: 1px solid var(--line); }
.wyb-lista a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  /* wysokość wiersza skaluje się z wysokością okna, nie szerokością: kafelki
     mają być duże, ale pięć wierszy z nagłówkiem musi zmieścić się nad
     stopką także na niskim laptopie */
  padding: clamp(16px, 3.4vh, 34px) 4px;
  position: relative;
  z-index: 0;
  transition: transform .14s var(--wy);
}
/* Wciśnięcie wiersza. Ruch minimalny — chodzi o to, żeby palec i kursor
   dostały odpowiedź od razu, zanim przeglądarka zdąży zacząć przejście
   na stronę miasta, a nie o efekt. */
.wyb-lista a:active { transform: scale(.994); }

/* Wskazany wiersz odsuwa się od krawędzi. Wcześniej robiło to padding-left,
   czyli właściwość przeliczająca układ przy każdej klatce; przesunięcie samych
   napisów daje ten sam obraz (województwo i strzałka i tak stoją przy prawej),
   ale idzie przez kompozytor. */
.wyb-nr, .wyb-nazwa { transition: transform .38s var(--wy), color .3s; }
.wyb-lista a:hover .wyb-nr,
.wyb-lista a:hover .wyb-nazwa,
.wyb-lista a:focus-visible .wyb-nr,
.wyb-lista a:focus-visible .wyb-nazwa,
.wyb-lista li.is-on .wyb-nr,
.wyb-lista li.is-on .wyb-nazwa { transform: translateX(14px); }

/* Czerwona kreska wybiegająca spod wskazanego wiersza. Jedyny mocny akcent
   koloru w liście; mówi „to jest zaznaczone" wyraźniej niż samo rozjaśnienie
   napisu, a przy podświetleniu z mapy pokazuje, który wiersz odpowiada
   znacznikowi, na który patrzysz. */
.wyb-lista a::after {
  content: "";
  position: absolute;
  /* przy samej dolnej krawędzi, nie pod nią: wiersz z kadrem miasta ma
     overflow: hidden i kreska spod spodu zostałaby obcięta */
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--red), rgba(227, 34, 39, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--wy);
}
.wyb-lista a:hover::after,
.wyb-lista a:focus-visible::after,
.wyb-lista li.is-on a::after { transform: none; }

/* ---------- kadr miasta pod wskazanym wierszem ----------
   Zdjęcie (zmienna --foto z HTML) leży pod treścią jako pseudoelement
   z ujemnym z-index; na nim przyciemnienie od lewej pod tekst — nazwa miasta
   ma zostać najjaśniejszym punktem wiersza. Wszystko
   tylko dla urządzeń z kursorem: telefon nie ma najechania, więc nie ma też
   po co pobierać czterech kadrów. */
@media (hover: hover) and (pointer: fine) {
  .wyb-lista a { overflow: hidden; }
  .wyb-lista a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* --kadr: który pas zdjęcia widać w niskim wierszu; domyślnie okolice
       górnej trzeciej (sylwetki kamienic), panorama Kłodzka schodzi niżej,
       bo u góry ma jasne niebo */
    background:
      linear-gradient(90deg, rgba(8, 8, 10, .86), rgba(8, 8, 10, .52) 44%, rgba(8, 8, 10, .42) 72%, rgba(8, 8, 10, .62)),
      var(--foto) center var(--kadr, 38%) / cover no-repeat;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .45s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
  }
  .wyb-lista a:hover::before,
  .wyb-lista a:focus-visible::before,
  .wyb-lista li.is-on a::before { opacity: 1; transform: none; }
}
.wyb-nr {
  font-size: .7rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .32);
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.wyb-lista a:hover .wyb-nr,
.wyb-lista li.is-on .wyb-nr { color: var(--red); }
.wyb-nazwa {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.1;
  color: rgba(245, 245, 244, .9);
  transition: color .3s;
}
.wyb-lista a:hover .wyb-nazwa,
.wyb-lista li.is-on .wyb-nazwa { color: var(--ink); }
/* ---------- główna lokalizacja w liście ----------
   Wrocław to nie jest po prostu pierwsza pozycja: tam stoi flota, a pozostała
   czwórka to punkty odbioru. Dlatego jego wiersz wyłamuje się z rytmu na trzy
   sposoby naraz — nazwa jest o jeden stopień większa i pełnej jasności, numer
   świeci czerwienią bez najeżdżania, a przy nazwie stoi plakietka. Sam rozmiar
   napisu robi tu najwięcej: w liście pięciu wersalików większy pierwszy wyraz
   czyta się jako „ten jest główny" jeszcze zanim ktoś dojdzie do plakietki. */
.wyb-lista li[data-glowna] .wyb-nazwa {
  font-size: clamp(1.72rem, 3.6vw, 2.9rem);
  color: var(--ink);
}
.wyb-lista li[data-glowna] .wyb-nr { color: var(--red); }

.wyb-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: .7em;
  transform: translateY(-.14em);
  font-family: var(--font-body);
  font-style: normal;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  padding: 5px 10px 4px;
  border: 1px solid rgba(227, 34, 39, .5);
  border-radius: 999px;
  background: rgba(227, 34, 39, .14);
  color: #ff9ea1;
  white-space: nowrap;
}

.wyb-woj {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.wyb-go {
  color: var(--ink);
  font-size: 1.05rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.wyb-lista a:hover .wyb-go,
.wyb-lista a:focus-visible .wyb-go,
.wyb-lista li.is-on .wyb-go { opacity: 1; transform: none; }

/* ---------- mapa ---------- */
.wyb-mapa { display: flex; justify-content: center; }
.wyb-mapa-box {
  /* tempo kreślenia konturu — jedno pokrętło na całą animację wejścia */
  --rys: 1.15s;
  /* ta sama krzywa co w pierwszej wersji rysowania: powolny start, równe
     tempo w środku, miękkie domknięcie. Skrócony jest sam czas, nie charakter */
  --rys-krzywa: cubic-bezier(.33, .1, .2, 1);
  --rys-zwloka: .05s;
  position: relative;
  width: 100%;
  /* Budżet wysokości (72svh — żeby przy niskim oknie mapa nie wypychała stopki
     poza ekran) wchodzi tu przez szerokość, nie przez max-height. Pudełko musi
     trzymać proporcje konturu: SVG i tak dopasowałby rysunek do niższego
     pudełka, ale znaczniki liczą się z procentów szerokości pudełka i przy
     złamanych proporcjach lądują obok mapy zamiast na miastach. */
  max-width: min(672px, calc(72svh * (1000 / 947.1)));
  aspect-ratio: 1000 / 947.1;
  /* punkt, w który „wlatuje" kadr przy wyborze miasta; podstawia go start.js
     z pozycji klikniętego znacznika */
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform .8s cubic-bezier(.5, 0, .25, 1);
}
/* Poświata pod konturem: sam rysunek jest włoskowy i na czarnym tle wisiał
   w próżni. Rozmyta plama daje mu podłoże, nie dokładając ani jednej kreski. */
.wyb-mapa-box::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .08), rgba(227, 34, 39, .05) 55%, transparent 78%);
  filter: blur(26px);
  pointer-events: none;
}
/* ---------- auto pod mapą ----------
   Nocny kadr czerwonego RS-a w kombi: poza samym autem zdjęcie jest niemal czarne, więc na
   ciemnym tle zostaje z niego czerwona sylwetka i nic nie trzeba przyciemniać.
   Maska wygasza je promieniście, żeby nigdzie nie kończyło się krawędzią
   prostokąta, a rozmycie trzyma je w tle: kontur jest kreską włoskową i musi
   zostać jedyną ostrą rzeczą w tej kolumnie. Zdjęcie leży w prawym dolnym
   rogu, nad Podkarpaciem, czyli tam, gdzie mapa nie ma ani jednego znacznika.
   Bez z-index — kontur i znaczniki są pozycjonowane i stoją dalej w kodzie,
   więc rysują się nad nim. */
.wyb-auto {
  position: absolute;
  /* Prawa krawędź prawie równo z ramką mapy. Kusi, żeby wypuścić kadr dalej
     w prawo, ale element jest pozycjonowany bezwzględnie i każdy piksel poza
     oknem rozciąga szerokość dokumentu; overflow-x: hidden go wtedy zasłania,
     a scrollWidth i tak rośnie. Reszta wartości ustawia auto pod prawym dolnym
     rogiem mapy: poza konturem i poza znacznikiem Krakowa. */
  right: -2%;
  bottom: -14%;
  width: 84%;
  aspect-ratio: 1080 / 608;
  background: url("/assets/img/flota-rs5-noc-1080.webp") center / cover no-repeat;
  filter: blur(1.4px);
  /* Elipsa z promieniami dobranymi tak, żeby wygaszenie zdążyło zejść do zera
     WEWNĄTRZ pudełka. Przy „closest-side" i przy promieniach większych niż
     pudełko maska urywa się na jego krawędzi: na ciemnym tle tego nie widać,
     bo zdjęcie samo jest tam czarne, ale w jasnym motywie zostawał wyraźny
     szary prostokąt przyklejony do mapy. */
  -webkit-mask-image: radial-gradient(ellipse 48% 50% at 54% 48%, #000 24%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 50% at 54% 48%, #000 24%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(16px, 12px, 0) scale(1.05);
  /* przejście, nie klatki kluczowe: klasę wpina start.js po wczytaniu pliku,
     więc moment startu nie jest znany z góry */
  transition: opacity .9s var(--wy), transform 1.5s var(--wy);
}
.wyb-auto.jest { opacity: .62; transform: none; }

/* display: block, bo inline'owy SVG stoi na linii bazowej i szczelina liniowa
   pod nim dopycha pudełko ponad proporcje konturu (aspect-ratio to tylko
   preferencja) — znaczniki w dolnej części mapy zjeżdżały wtedy pod rysunek */
.wyb-svg { display: block; position: relative; width: 100%; height: 100%; overflow: visible; }
.wyb-kontur {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(255, 255, 255, .42);
  /* stała grubość niezależnie od skali rysunku — inaczej kreska gęstnieje
     razem z mapą i traci włoskowy charakter */
  vector-effect: non-scaling-stroke;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
/* Kontur rysuje się sam, gdy start.js zna długość ścieżki. Bez skryptu klasy
   nie ma i mapa po prostu stoi narysowana.

   Czas dobrany tak, żeby ruch było widać, ale żeby nie trzeba było go
   przeczekać: wejście całego ekranu zamyka się poniżej sekundy. Krzywa startuje
   ostro i wyhamowuje — dzięki temu kreska od razu obiega gros konturu, a wolniej
   domyka ostatni odcinek, zamiast sunąć równym, wlokącym się tempem. */
.wyb-kontur.rysuj {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: wybRysuj var(--rys) var(--rys-krzywa) var(--rys-zwloka) forwards;
}
@keyframes wybRysuj { to { stroke-dashoffset: 0; } }

.wyb-piny { position: absolute; inset: 0; }
.wyb-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 9px;
  /* Wyściółka robi z 9-pikselowej kropki pole trafienia wysokie na jakieś
     40 px. Pion wyrównuje się sam (translateY(-50%) liczy się od wyższego
     pudełka), poziom trzeba cofnąć o tyle, ile dołożyła wyściółka — stąd
     -16 zamiast dawnego -6. */
  padding: 13px 10px;
  transform: translate(-16px, -50%);
  white-space: nowrap;
  opacity: 0;
  /* znaczniki dochodzą, gdy kontur jest już w większości obrysowany, i domykają
     wejście tuż po nim */
  animation: wybPin .55s ease forwards;
  animation-delay: calc(.72s + var(--o, 0) * .07s);
}
.wyb-pin--lewo { flex-direction: row-reverse; transform: translate(calc(-100% + 16px), -50%); }
@keyframes wybPin { to { opacity: 1; } }

.wyb-pin-dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  flex: none;
  transition: background-color .3s, box-shadow .3s, transform .3s;
}
/* pierścień rysowany pseudoelementem, nie drugim znacznikiem: rozchodzi się
   przy najechaniu i nie zabiera miejsca w układzie */
.wyb-pin-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  opacity: .45;
  transform: scale(.82);
  transition: opacity .35s, transform .35s, border-color .35s;
}
.wyb-pin-nazwa {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  /* Podpisy leżą nad kadrem auta i nad konturem, więc nie mają jednego,
     przewidywalnego tła; miękki cień trzyma je czytelnymi także wtedy, gdy
     wypadną na czerwony błotnik. */
  text-shadow: 0 1px 9px rgba(6, 6, 8, .9);
  transition: color .3s;
}
.wyb-pin:hover .wyb-pin-dot,
.wyb-pin.is-on .wyb-pin-dot {
  background: var(--red);
  box-shadow: 0 0 18px rgba(227, 34, 39, .5);
  transform: scale(1.15);
}
.wyb-pin:hover .wyb-pin-dot::after,
.wyb-pin.is-on .wyb-pin-dot::after { opacity: 1; transform: scale(1); border-color: rgba(227, 34, 39, .55); }
.wyb-pin:hover .wyb-pin-nazwa,
.wyb-pin.is-on .wyb-pin-nazwa { color: var(--ink); }

/* ---------- główna lokalizacja na mapie ----------
   Ten sam podział co w liście: Wrocław to siedziba, reszta to punkty odbioru.
   Znacznik jest czerwony i o połowę większy od pozostałych, ma na stałe własny
   pierścień, jaśniejszy podpis i drugą linijkę, która mówi wprost, co ta
   czerwień znaczy. Po narysowaniu konturu odchodzą od niego jeszcze dwa
   pierścienie i na tym koniec — pulsowanie bez końca to ruch, który po chwili
   tylko przeszkadza w czytaniu listy. */
.wyb-pin[data-glowna] .wyb-pin-dot {
  width: 13px; height: 13px;
  background: var(--red);
  box-shadow: 0 0 22px rgba(227, 34, 39, .6);
}
/* pierścień, który zwykłe znaczniki pokazują dopiero po najechaniu, ten ma
   od początku; ::after jest już zajęty przez ten wspólny, więc idzie ::before */
.wyb-pin[data-glowna] .wyb-pin-dot::after {
  inset: -8px;
  opacity: 1;
  /* ta sama wartość, którą stawia najechanie — inaczej reguła pisana niżej
     zabijałaby powiększenie pierścienia pod kursorem */
  transform: scale(1);
  border-color: rgba(227, 34, 39, .55);
}
.wyb-pin[data-glowna] .wyb-pin-nazwa {
  color: var(--ink);
  font-size: .8rem;
}
.wyb-pin-tag {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .14em;
  color: #ff9ea1;
}
.wyb-pin[data-glowna] .wyb-pin-dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(227, 34, 39, .75);
  border-radius: 50%;
  animation: wybPuls 1.5s var(--wy) 1.35s 2 both;
  pointer-events: none;
}
@keyframes wybPuls {
  from { transform: scale(.7); opacity: .85; }
  to { transform: scale(var(--puls, 2.6)); opacity: 0; }
}

/* ---------- dół ---------- */
.wyb-stopka {
  /* nad kadrem auta: to element pozycjonowany, więc bez własnej warstwy
     rysowałby się na wierzchu, nad zwykłym tekstem stopki */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: .76rem;
  color: rgba(162, 166, 172, .8);
}
.wyb-stopka p { margin: 0; }
/* pigułka języka i motywu otwiera wiersz, odnośniki trzymają się prawej */
.wyb-stopka nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
/* Profile stoją tu w mniejszym kwadracie niż w stopkach podstron: ten ekran
   z założenia nie ma się przewijać na monitorze, a pełne 40 px podnosiłoby
   cały pas o kilkanaście pikseli. Na telefonie wracają do 40 px, bo tam
   liczy się cel dotyku (patrz zapytanie o wąski ekran niżej). */
.wyb-stopka .social { gap: 8px; }
.social--start .social-btn { width: 34px; height: 34px; border-radius: 10px; }
.social--start .social-btn .social-ico { width: 17px; height: 17px; }
.prefs-dock--wstopce { position: static; padding: 3px; }
.wyb-stopka a { transition: color .25s; }
.wyb-stopka a:hover { color: var(--ink); }

/* ---------- niskie okno na desktopie ----------
   Duże kafelki liczone z wysokości okna i tak nie zmieszczą pięciu wierszy
   z nagłówkiem w niskim oknie — schodzą więc o stopień, razem z nagłówkiem
   i odstępami. Warunek na szerokość, żeby nie dotykać układu telefonu.

   Próg stoi na 980 px, nie na 820: zmaksymalizowane okno na monitorze 1080p
   ma około 935 px widocznej wysokości i przy poprzedniej wartości nic się nie
   włączało — stopka z prawami i pigułką języka wychodziła poza ekran, a strona,
   która z założenia się nie przewija, dostawała pasek przewijania. */
@media (max-height: 980px) and (min-width: 901px) {
  .wyb { gap: 16px; }
  .wyb-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
  .wyb-kicker { margin-bottom: 12px; }
  .wyb-lead { margin-top: 10px; }
  .wyb-lista { margin-top: 18px; }
  .wyb-lista a { padding: clamp(14px, 2.6vh, 22px) 4px; }
  .wyb-nazwa { font-size: clamp(1.35rem, 2.6vw, 2rem); }
  /* przewaga głównej lokalizacji zostaje ta sama, tylko w mniejszej skali */
  .wyb-lista li[data-glowna] .wyb-nazwa { font-size: clamp(1.6rem, 3.1vw, 2.4rem); }
}
/* jeszcze niżej (okno o wysokości laptopa 13") schodzą także drobiazgi */
@media (max-height: 800px) and (min-width: 901px) {
  .wyb { gap: 12px; padding-top: 18px; padding-bottom: 16px; }
  .wyb-kicker { margin-bottom: 9px; font-size: .64rem; }
  .wyb-lista { margin-top: 14px; }
  .wyb-lista a { padding: clamp(12px, 2.1vh, 18px) 4px; }
}

/* ---------- wąskie ekrany ----------
   Mapa idzie pod nagłówek, a lista na sam dół: na telefonie to ona jest
   właściwym sterowaniem, więc ma być pod kciukiem. */
@media (max-width: 900px) {
  .wyb { gap: 20px; }
  .wyb-main {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
  }
  .wyb-copy { display: contents; }
  .wyb-kicker { order: 0; margin-bottom: 10px; }
  .wyb-title, .wyb-lead { order: 1; }
  .wyb-mapa { order: 2; margin: 4px 0 2px; }
  .wyb-lista { order: 3; margin-top: 6px; }
  /* jak w regule bazowej: pułap wysokości siedzi w szerokości, żeby proporcje
     konturu zostały i znaczniki nie odkleiły się od mapy */
  .wyb-mapa-box { max-width: min(300px, calc(34svh * (1000 / 947.1))); }
  .wyb-lead { margin-top: 12px; }
  .wyb-lista a { grid-template-columns: auto 1fr auto; padding: 17px 4px; }
  .wyb-woj { display: none; }
  .wyb-pin-nazwa { font-size: .62rem; letter-spacing: .12em; }
  /* na małej mapie zdjęcie auta byłoby plamą wielkości Małopolski */
  .wyb-auto { display: none; }
}

/* Na telefonie nagłówek to jedna linia ze znakiem firmowym — pigułek
   nawigacji na tym ekranie już nie ma, więc góra nie rośnie o dwa piętra
   i mapa z listą dostają z powrotem swoją wysokość. */
@media (max-width: 560px) {
  .wyb { padding: 16px 18px 14px; gap: 14px; }
  .wyb-top .logo { font-size: 15px; }
  .wyb-stopka {
    justify-content: center;
    gap: 10px 18px;
    text-align: center;
    padding-top: 12px;
    font-size: .72rem;
  }
  .wyb-stopka nav { margin-left: 0; justify-content: center; gap: 0 18px; }
  .wyb-stopka nav a { display: inline-flex; align-items: center; min-height: 40px; }
  /* pełny cel dotyku, ten sam co w stopkach podstron */
  .social--start .social-btn { width: 40px; height: 40px; border-radius: 12px; }
  .social--start .social-btn .social-ico { width: 19px; height: 19px; }
  /* Po zdjęciu pigułek z nagłówka mapa odzyskuje część wysokości (16 → 24svh);
     lista miast, czyli właściwe sterowanie, nadal mieści się w całości nad
     zgięciem kciuka. Budżet wchodzi przez szerokość (patrz reguła bazowa),
     żeby znaczniki siedziały na mapie. */
  .wyb-mapa-box { max-width: calc(24svh * (1000 / 947.1)); }
  /* Przy takiej mapie pięć podpisów nachodzi na siebie i na sąsiednie kropki;
     napis „WROCŁAW" siadał wprost na znaczniku Kłodzka. Zostają same kropki:
     kontur z pięcioma punktami czyta się od razu, a nazwy stoją wielkimi
     literami w liście tuż pod spodem. Czerwona kropka nadal wyróżnia
     główną lokalizację. */
  .wyb-pin-nazwa { display: none; }
  /* Na mapie wysokiej na 110 px Wrocław i Kłodzko dzieli jakieś 13 px, więc
     stały pierścień głównej lokalizacji brałby sąsiedni znacznik do środka.
     Zostaje sama czerwona kropka, odrobinę większa od pozostałych; puls przy
     wejściu i tak pokazuje, gdzie patrzeć. */
  .wyb-pin[data-glowna] .wyb-pin-dot { width: 11px; height: 11px; }
  .wyb-pin[data-glowna] .wyb-pin-dot::after { opacity: 0; }
  /* z tego samego powodu krótszy zasięg pulsu: przy 2,6× fala obejmowała
     Kłodzko i przez trzy sekundy wyglądało to, jakby były zaznaczone dwa miasta */
  .wyb-pin[data-glowna] { --puls: 1.9; }
  .wyb-lead { margin-top: 8px; font-size: .92rem; }
  .wyb-lista { margin-top: 0; }
  .wyb-lista a { padding: 13px 4px; }
  .wyb-kicker { margin-bottom: 6px; font-size: .62rem; letter-spacing: .2em; }
  /* Plakietka „Główna" przy Wrocławiu zostaje także na telefonie (życzenie
     z 31.08.2026) — podpisy na mapie są tu schowane, więc bez niej głównej
     siedziby nie oznacza nic poza kolorem kropki. Schodzi tylko o stopień,
     żeby nie przerastała nazwy miasta w ciasnym wierszu. */
  .wyb-tag { font-size: .58rem; letter-spacing: .12em; padding: 4px 8px 3px; margin-left: .55em; }
}

/* ---------- wlot w wybrane miasto ----------
   Po kliknięciu kadr najeżdża na wybrany znacznik, reszta ekranu schodzi
   z drogi, a od znacznika rozchodzi się pierścień. Na końcu wchodzi ciemna
   zasłona, więc następna strona zaczyna się z tej samej czerni zamiast
   mrugnąć bielą. */
.wyb.is-leaving .wyb-mapa-box { transform: scale(1.5); }
.wyb.is-leaving .wyb-copy {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .34s ease, transform .55s var(--wwy);
}
/* Kolumna z tekstem ma na wąskim ekranie display: contents, więc nie da się
   jej ruszyć jako całości — schodzą wtedy same jej dzieci. Zdjęcie animacji
   wejścia jest konieczne: wartość z animation-fill-mode: both bije zwykłą
   deklarację i elementy zostałyby widoczne w miejscu. */
@media (max-width: 900px) {
  .wyb.is-leaving .wyb-kicker,
  .wyb.is-leaving .wyb-title,
  .wyb.is-leaving .wyb-lead,
  .wyb.is-leaving .wyb-lista {
    animation: none;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .34s ease, transform .55s var(--wwy);
  }
}
.wyb.is-leaving .wyb-top,
.wyb.is-leaving .wyb-stopka { opacity: 0; transition: opacity .3s ease; }
/* Nietrafione znaczniki znikają od razu; wybrany zostaje i jedzie razem
   z kadrem. Zdjęcie animacji wejścia jest tu konieczne: wartość z animacji
   z fill: forwards bije zwykłą deklarację i znaczniki zostałyby widoczne. */
.wyb.is-leaving .wyb-pin { animation: none; opacity: 0; transition: opacity .22s ease; }
.wyb.is-leaving .wyb-pin.is-cel { opacity: 1; transition: none; }
.wyb.is-leaving .wyb-pin.is-cel .wyb-pin-dot { background: var(--red); box-shadow: 0 0 34px rgba(227, 34, 39, .8); }
.wyb.is-leaving .wyb-kontur { stroke: rgba(255, 255, 255, .5); transition: stroke .5s ease; }

.wyb-zaslona {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--bg0);
  opacity: 0;
  pointer-events: none;
}
/* razem 660 ms, czyli dokładnie tyle, ile CZAS_WYJSCIA w start.js: zasłona
   ma być pełna w chwili, w której przeglądarka rusza po nową stronę */
.wyb.is-leaving .wyb-zaslona { opacity: 1; transition: opacity .4s ease .26s; }

/* Pierścień rozchodzący się od klikniętego znacznika. Rośnie na szerokości
   i wysokości, a nie przez scale(): skalowanie pogrubiłoby razem z nim obwódkę
   i zamiast włoskowej fali zostałaby czerwona łuna. Element jest jeden, leży
   poza układem strony (fixed), więc animowanie rozmiaru nic tu nie przelicza. */
.wyb-fala {
  position: fixed;
  left: 0; top: 0;
  z-index: 30;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(227, 34, 39, .9);
  box-shadow: 0 0 34px rgba(227, 34, 39, .5);
  pointer-events: none;
  transform: translate(var(--fx), var(--fy));
}
.wyb-fala.leci {
  width: var(--fw);
  height: var(--fw);
  margin: calc(var(--fw) / -2) 0 0 calc(var(--fw) / -2);
  opacity: 0;
  transition:
    width .78s cubic-bezier(.3, 0, .15, 1),
    height .78s cubic-bezier(.3, 0, .15, 1),
    margin .78s cubic-bezier(.3, 0, .15, 1),
    opacity .78s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .wyb { animation: none; opacity: 1; }
  .wyb-kontur.rysuj { animation: none; stroke-dasharray: none; }
  .wyb-pin { animation: none; opacity: 1; }
  .wyb-mapa-box, .wyb.is-leaving .wyb-mapa-box { transition: none; transform: none; }
  .wyb.is-leaving .wyb-zaslona { transition: opacity .2s ease; }
  /* Kaskada wejścia znika w całości: to ruch po ekranie, czyli dokładnie to,
     czego to ustawienie ma nie robić. Zostaje sam kolor i przezroczystość. */
  .wyb-kicker, .wyb-title, .wyb-lead, .wyb-lista li { animation: none; }
  .wyb-pin[data-glowna] .wyb-pin-dot::before { animation: none; opacity: 0; }
  .wyb-auto { transition: opacity .3s ease; transform: none; }
  .wyb-nr, .wyb-nazwa,
  .wyb-lista a:hover .wyb-nr, .wyb-lista a:hover .wyb-nazwa,
  .wyb-lista a:focus-visible .wyb-nr, .wyb-lista a:focus-visible .wyb-nazwa,
  .wyb-lista li.is-on .wyb-nr, .wyb-lista li.is-on .wyb-nazwa { transform: none; }
  .wyb-lista a:active { transform: none; }
}

/* ---------- motyw jasny ----------
   To samo czyste tło z poświatami, tylko w jasnych barwach; kontur i
   znaczniki ciemnieją, kadry miast pod wierszami zostają (to zdjęcia,
   mają własne przyciemnienie). */
html[data-motyw="jasny"] .wyb-body {
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(227, 34, 39, .05), transparent 60%),
    radial-gradient(90% 70% at 20% 0%, rgba(23, 24, 27, .05), transparent 55%),
    var(--bg0);
}
html[data-motyw="jasny"] .wyb-kontur { fill: rgba(23, 24, 27, .04); stroke: rgba(23, 24, 27, .45); }
html[data-motyw="jasny"] .wyb-mapa-box::before {
  background: radial-gradient(closest-side, rgba(23, 24, 27, .07), rgba(227, 34, 39, .05) 55%, transparent 78%);
}
html[data-motyw="jasny"] .wyb-pin-dot { background: rgba(23, 24, 27, .78); }
html[data-motyw="jasny"] .wyb-pin-dot::after { border-color: rgba(23, 24, 27, .3); }
html[data-motyw="jasny"] .wyb-pin-nazwa { color: var(--dim); text-shadow: 0 1px 9px rgba(245, 244, 242, .9); }
html[data-motyw="jasny"] .wyb-pin:hover .wyb-pin-nazwa,
html[data-motyw="jasny"] .wyb-pin.is-on .wyb-pin-nazwa { color: var(--ink); }
html[data-motyw="jasny"] .wyb-nazwa { color: rgba(23, 24, 27, .88); }
html[data-motyw="jasny"] .wyb-lista a:hover .wyb-nazwa,
html[data-motyw="jasny"] .wyb-lista li.is-on .wyb-nazwa { color: var(--ink); }
html[data-motyw="jasny"] .wyb-nr { color: rgba(23, 24, 27, .35); }
html[data-motyw="jasny"] .wyb-go { color: var(--ink); }
html[data-motyw="jasny"] .wyb-zaslona { background: var(--bg0); }
/* Kadr auta zostaje w motywie ciemnym. Jest to zdjęcie zrobione nocą: żyje
   z tego, że jego czerń zlewa się z tłem strony i widać samą czerwoną sylwetkę.
   Na kremowym tle ta sama czerń robi się szarą plamą, a wyciszona do cienia nie
   przypomina już auta, tylko brud pod mapą. Jasny motyw jest tu wariantem
   „na papierze": kontur ma zostać rysunkiem kreskowym, a komunikat o tym, czym
   jest firma, niosą nadtytuł i pasek marek. */
html[data-motyw="jasny"] .wyb-auto { display: none; }
html[data-motyw="jasny"] .wyb-tag { color: #b3151a; border-color: rgba(227, 34, 39, .38); background: rgba(227, 34, 39, .09); }
/* nazwa głównej lokalizacji musi zostać najciemniejsza w liście; wpis niżej
   ustawia wszystkim pozostałym .88, a ta reguła ma tę samą wagę co on */
html[data-motyw="jasny"] .wyb-lista li[data-glowna] .wyb-nazwa { color: var(--ink); }
html[data-motyw="jasny"] .wyb-pin-tag { color: #b3151a; }
html[data-motyw="jasny"] .wyb-pin[data-glowna] .wyb-pin-nazwa { color: var(--ink); }
/* na kadrze miasta pod wskazanym wierszem plakietka też musi zostać jasna */
@media (hover: hover) and (pointer: fine) {
  html[data-motyw="jasny"] .wyb-lista a:hover .wyb-tag,
  html[data-motyw="jasny"] .wyb-lista li.is-on .wyb-tag { color: #ff9ea1; border-color: rgba(227, 34, 39, .5); }
}
/* na kadrze miasta pod wskazanym wierszem tekst musi zostać jasny —
   zdjęcie ma własne ciemne przyciemnienie */
@media (hover: hover) and (pointer: fine) {
  html[data-motyw="jasny"] .wyb-lista a:hover .wyb-nazwa,
  html[data-motyw="jasny"] .wyb-lista a:focus-visible .wyb-nazwa,
  html[data-motyw="jasny"] .wyb-lista li.is-on .wyb-nazwa { color: #fff; }
  html[data-motyw="jasny"] .wyb-lista a:hover .wyb-woj,
  html[data-motyw="jasny"] .wyb-lista li.is-on .wyb-woj { color: rgba(255, 255, 255, .8); }
  html[data-motyw="jasny"] .wyb-lista a:hover .wyb-nr,
  html[data-motyw="jasny"] .wyb-lista li.is-on .wyb-nr { color: var(--red); }
  html[data-motyw="jasny"] .wyb-lista a:hover .wyb-go,
  html[data-motyw="jasny"] .wyb-lista li.is-on .wyb-go { color: #fff; }
}

/* ---------- telefon w poziomie ----------
   Układ jednokolumnowy (mapa nad listą) jest dobry dla pionu, bo tam wysokości
   jest pod dostatkiem. Obrócony telefon ma jej około 390 px i przy tym samym
   układzie lista miast — czyli jedyne sterowanie na tym ekranie — schodziła
   w całości pod krawędź; klient widział nagłówek i kontur Polski, a wybór
   musiał wymacać przewijaniem.

   Przy takiej wysokości wraca więc podział na dwie kolumny: tekst z listą po
   lewej, mapa po prawej. Warunek na szerokość odsiewa wąskie okna desktopowe,
   w których dwie kolumny znowu by się nie zmieściły. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
  .wyb { gap: 10px; padding: 10px clamp(18px, 3vw, 40px) 8px; }
  .wyb-main {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    align-content: center;
    gap: 28px;
  }
  /* z powrotem własny blok; przy display: contents tytuł, wstęp i lista były
     osobnymi komórkami siatki i rozjeżdżały się na dwie kolumny */
  .wyb-copy { display: block; }
  .wyb-title { font-size: 1.45rem; }
  .wyb-lead { margin-top: 6px; font-size: .8rem; }
  .wyb-mapa { order: 0; margin: 0; }
  .wyb-mapa-box { max-width: min(230px, calc(62svh * (1000 / 947.1))); }
  .wyb-auto { display: none; }
  /* nadtytuł ściśnięty do jednej linii tekstu: przy 390 px wysokości
     interlinia z reszty serwisu zjada tu połowę wiersza listy */
  .wyb-kicker { margin-bottom: 4px; font-size: .6rem; letter-spacing: .18em; line-height: 1; }
  /* plakietka zostaje (oznaczenie głównej siedziby), tylko mniejsza —
     wiersze mają tu 8 px wyściółki i pełnowymiarowa by je rozpychała */
  .wyb-tag { font-size: .54rem; letter-spacing: .1em; padding: 3px 7px 2px; margin-left: .5em; }
  .wyb-lista { margin-top: 8px; }
  .wyb-lista a { padding: 8px 4px; }
  .wyb-nazwa { font-size: 1.1rem; }
  .wyb-lista li[data-glowna] .wyb-nazwa { font-size: 1.25rem; }
  .wyb-pin-tag { display: none; }
  .wyb-stopka { padding-top: 8px; font-size: .68rem; }
  .wyb-stopka nav a { min-height: 30px; }
  .prefs-dock--wstopce .pref-btn { height: 32px; min-width: 32px; }
}