/* ============================================================================
 * KARKONOSZE — wspólna warstwa wizualna
 * ----------------------------------------------------------------------------
 * Wszystko, co powtarza się między podstronami: tokeny, nawigacja, stopka,
 * karty, pigułki, elementy redakcyjne.
 *
 * Część rozwiązań przeniesiona świadomie z plantea.app (opisane przy każdym):
 * watermark, nadkreślnik z kreską, podkreślenie nawigacji, rombowe punktory,
 * spis treści, pionowe linie siatki, rodzina pigułek, FAQ na <details>,
 * tabele almanachowe, ramki boczne. Tam działają na jasnym papierze — tutaj
 * przełożone na ciemne tło, więc wartości kontrastu są inne, nie skopiowane.
 * ==========================================================================*/

/* --- 1. TOKENY ---------------------------------------------------------- */
:root {
  /* Paleta świadomie w hex — czytelna przy szybkim skanowaniu pliku. */
  --czarny:      #08090b;
  --czern-mieka: #101216;   /* tła sekcji wyróżnionych */
  --mech:        #3f4a3e;   /* zieleń kafli tekstowych */
  --kamien:      #4a4640;   /* ciepły kamień */
  --szron:       #cfd8d6;   /* chłodny jasny akcent */
  --musztarda:   #d8a13a;   /* jedyny mocny akcent */
  --tekst:       #f2f0ec;

  --przygaszony: rgb(242 240 236 / .62);

  /* Korekcja barwna kadrów — JEDNA na cały serwis.
     Materiał pochodzi od różnych autorów, z różnych aparatów i pór dnia; bez
     wspólnego filtra siatka kart wygląda jak przypadkowa zbieranina. Do 19.08
     było SIEDEM deklaracji `filter`, z czego pięć różniło się drugą cyfrą po
     kropce — czyli niczym, poza tym, że rozjeżdżały się przy każdej poprawce.
     ⚠️ Nowy kadr NIE dostaje własnego filtra. Zmiana wartości tutaj zmienia
     wygląd całego serwisu i to jest zamierzone. */
  --kadr: saturate(.5) contrast(1.04) brightness(.78);
  /* Kadr pod TEKSTEM musi zejść znacznie niżej — inaczej z napisu robi się
     papka. To jedyny świadomy wyjątek od tokenu wyżej. */
  --kadr-pod-tekstem: saturate(.42) contrast(1.04) brightness(.34);
  --slaby:       rgb(242 240 236 / .42);
  --wlos:        rgb(242 240 236 / .16);   /* jedna zmienna na wszystkie linie */

  --ease:        cubic-bezier(.22, 1, .36, 1);
  --korytarz:    300px;
  --hero-wys:    100svh;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }   /* clip, nie hidden — hidden zabiłoby position:sticky */
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--czarny); color: var(--tekst);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Zaznaczenie i obrys focusa w kolorach marki. */
::selection { background: rgb(216 161 58 / .3); }
:focus-visible { outline: 2px solid var(--musztarda); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: #fff; color: #000; padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* --- 2. UKŁAD ----------------------------------------------------------- */
.kontener { max-width: 1360px; margin: 0 auto; padding: 0 42px; }
section { position: relative; }

/* WATERMARK — gigantyczne słowo-duch w tle sekcji (za plantea.app).
   Na ciemnym tle 4% zamiast 7%, bo jasny tekst na czerni „świeci" mocniej. */
.watermark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--serif); font-weight: 500; line-height: .8;
  text-transform: lowercase; white-space: nowrap;
  color: rgb(242 240 236 / .04);
  font-size: clamp(5rem, 16vw, 15rem);
}
.watermark--prawo { right: -.4rem; }
.watermark--lewo  { left: -.4rem; }

/* Pionowe linie siatki — „papier milimetrowy" pod sekcją (za plantea.app). */
.linie-pionowe { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.linie-pionowe span {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgb(242 240 236 / .05);
}

/* --- 3. TYPOGRAFIA ------------------------------------------------------ */
.nadkreslnik {
  display: flex; align-items: center; gap: 15px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--przygaszony); margin: 0 0 16px;
}
.nadkreslnik::before {
  content: ""; width: 56px; height: 1.5px; background: currentColor; flex: none;
}
.nadkreslnik--srodek { justify-content: center; }
.nadkreslnik--srodek::after {
  content: ""; width: 56px; height: 1.5px; background: currentColor; flex: none;
}
.nadkreslnik--prawo { justify-content: flex-end; flex-direction: row-reverse; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; overflow-wrap: anywhere; min-width: 0; }
.tytul-duzy   { font-size: clamp(40px, 5.4vw, 78px); line-height: 1.03; letter-spacing: -.01em; margin: 0; }
.tytul-sekcji { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; margin: 0; }

/* Krótka kreska NAD nagłówkiem — sygnatura z plantea.app. */
.tytul-sekcji--kreska::before {
  content: ""; display: block; width: 56px; height: 2px;
  margin-bottom: 16px; background: var(--musztarda);
}

.lead { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.7; color: rgb(242 240 236 / .88); }
.przygaszony { color: var(--przygaszony); }

/* --- 4. NAWIGACJA ------------------------------------------------------- */
.nawigacja {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 24px 34px; border-bottom: 1px solid var(--wlos);
}
.nawigacja--na-zdjeciu { position: absolute; inset: 0 0 auto; border-bottom-color: rgb(255 255 255 / .16); }
.marka { font-family: var(--serif); font-size: 20px; white-space: nowrap; text-decoration: none; }
.menu { display: flex; gap: 20px; margin-left: 20px; }

/* Podkreślenie dorysowujące się od lewej; stan aktywny wygląda jak hover
   (za plantea.app) — dzięki temu nie potrzeba osobnego koloru na aktywną kartę. */
.menu a {
  position: relative; text-decoration: none; color: rgb(242 240 236 / .82);
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  padding-bottom: 5px; white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.menu a:hover { color: #fff; }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: #fff; }

.pogoda-pasek {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgb(242 240 236 / .8); white-space: nowrap; text-decoration: none;
}
.pogoda-pasek:hover { color: #fff; }
.pogoda-pasek svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pogoda-pasek b { color: #fff; font-weight: 600; }
/* Rozwijane kategorie poradnika. Bez JavaScriptu: `:focus-within` obsługuje
   klawiaturę, `:hover` mysz. Osobny przycisk rozwijający dokładałby drugi
   element do i tak ciasnego paska, a sama pozycja „Poradnik" ma pozostać
   odnośnikiem — hub działu jest stroną, nie tylko zbiorem kategorii. */
.menu__grupa { position: relative; display: flex; }
.menu__grupa > a { display: inline-flex; align-items: center; gap: 6px; }
.menu__znak { width: 11px; height: 11px; fill: currentColor; opacity: .6; }
.menu__lista {
  position: absolute; left: -14px; top: calc(100% + 10px); z-index: 40;
  min-width: 186px; padding: 8px 0;
  background: var(--tlo-glebokie, #14171a); border: 1px solid var(--wlos);
  box-shadow: 0 18px 46px rgb(0 0 0 / .42);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* ⚠️ `visibility` przełącza się SKOKOWO, a w skróconym zapisie przeskok
     wypada w połowie czasu trwania. Lista stawała się więc widoczna dopiero
     po ~90 ms od najechania — dla oka nieodczuwalnie, ale dla testu i dla
     czytnika ekranu to stan „jeszcze schowana". Pokazujemy natychmiast,
     chowamy z opóźnieniem równym wygaszaniu. */
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              visibility 0s linear .18s;
}
.menu__grupa:hover .menu__lista,
.menu__grupa:focus-within .menu__lista {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
}
.menu__lista a {
  display: block; padding: 9px 18px; letter-spacing: .12em; text-transform: none;
  font-size: 12px; color: rgb(242 240 236 / .78);
}
.menu__lista a::after { content: none; }
.menu__lista a:hover { color: #fff; background: rgb(255 255 255 / .05); }

.drugorzedne { display: flex; gap: 16px; }
.drugorzedne a {
  text-decoration: none; color: rgb(242 240 236 / .8);
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  /* ⚠️ Bez tego „O nas" łamie się na „O" i „NAS", gdy w wierszu zabraknie
     miejsca. Nawigacja ma `flex-wrap` i przechodzi do drugiego rzędu, ale
     pasek pływający go nie ma — tam odnośnik po prostu pękał w środku. */
  white-space: nowrap;
}
.drugorzedne a:hover { color: #fff; }

/* Rozwijany wybór punktu pogodowego.

   Powstał z trzech powodów naraz: odczyt w pasku był wpalony przy budowie,
   pasek nawigacji nie mieścił się w jednej linii (przez „· wiatr 42 km/h”),
   a serwis mierzy siedem punktów, pokazując jeden i bez możliwości zmiany.
   Wiatr zszedł do listy — tam jest miejsce, w pasku go nie było. */
.pogoda-wybor { position: relative; margin-left: auto; }
.pogoda-wybor .pogoda-pasek {
  margin-left: 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; padding: 4px 0;
}
.pogoda-wybor__znak { width: 12px; height: 12px; fill: currentColor; stroke: none; opacity: .55; }
.pogoda-pasek[aria-expanded="true"] .pogoda-wybor__znak { transform: rotate(180deg); }

.pogoda-lista {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 40;
  min-width: 268px; padding: 14px 0 6px;
  background: var(--tlo-glebokie, #14171a); border: 1px solid var(--wlos);
  box-shadow: 0 18px 46px rgb(0 0 0 / .42);
}
.pogoda-lista[hidden] { display: none; }
.pogoda-lista__etykieta {
  margin: 0 18px 8px; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slaby);
}
.pogoda-lista ul { list-style: none; margin: 0; padding: 0; }
.pogoda-lista button {
  width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  align-items: baseline; padding: 9px 18px; background: none; border: 0;
  cursor: pointer; font-family: inherit; text-align: left; color: inherit;
}
.pogoda-lista button:hover { background: rgb(255 255 255 / .05); }
.pogoda-lista button[data-wybrany] { background: rgb(255 255 255 / .08); }
.pw__nazwa { font-size: 13px; }
.pw__wys { font-size: 11px; color: var(--slaby); font-variant-numeric: tabular-nums; }
.pw__temp { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.pogoda-lista__pelna {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 11px 18px; border-top: 1px solid var(--wlos);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: rgb(242 240 236 / .8);
}
.pogoda-lista__pelna:hover { color: #fff; }
.pogoda-lista__pelna svg { width: 15px; height: 15px; fill: currentColor; }

/* Pasek faset na listingu noclegów.

   ⚠️ <a> i <button> wyglądają tu IDENTYCZNIE i tak ma być: różnica jest
   w sygnale dla wyszukiwarki (cel indeksowalny albo nie), nie w tym, co
   widzi użytkownik. Gdyby różniły się wizualnie, redaktor zacząłby wybierać
   znacznik pod wygląd, a nie pod stan kombinacji. */
.fasety { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-bottom: 30px; }
.fasety__grupa { min-width: 0; }
.fasety__etykieta {
  margin: 0 0 9px; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slaby);
}
.fasety .pigulka { font-family: inherit; }
.fasety button.pigulka { cursor: pointer; }
.fasety .pigulka[aria-pressed="true"] { background: rgb(255 255 255 / .1); color: #fff; }

@media (max-width: 640px) {
  .fasety { gap: 14px 22px; }
}

/* Okruszki — separator to środkowa kropka, nie ukośnik (za plantea.app). */
.okruszki {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slaby); margin: 0 0 26px; padding: 0; list-style: none;
}
.okruszki li + li::before { content: "·"; margin-right: 10px; color: var(--slaby); }
.okruszki a { text-decoration: none; }
.okruszki a:hover { color: var(--tekst); }
.okruszki li[aria-current] { color: var(--przygaszony); }

/* --- 5. PIGUŁKI I GUZIKI ------------------------------------------------ */
/* Jeden kształt w wielu rolach (za plantea.app): filtr, paginacja, znacznik. */
.pigulka {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--wlos); background: transparent; color: var(--przygaszony);
  font: inherit; font-size: 12px; letter-spacing: .06em; text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.pigulka:hover { border-color: var(--musztarda); color: var(--tekst); }
.pigulka[aria-pressed="true"], .pigulka--aktywna {
  border-color: var(--musztarda); background: rgb(216 161 58 / .12); color: var(--musztarda);
}

.guzik {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 15px 30px; background: transparent;
  border: 1px solid rgb(242 240 236 / .55); color: var(--tekst); text-decoration: none;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.guzik:hover { background: rgb(242 240 236 / .13); border-color: var(--tekst); }
.guzik svg { width: 14px; height: 14px; fill: currentColor; }
.guzik--pelny { background: var(--musztarda); border-color: var(--musztarda); color: #14161a; }
.guzik--pelny:hover { background: #e9b455; border-color: #e9b455; }

.wiecej {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--przygaszony); white-space: nowrap; padding-bottom: 4px;
  border-bottom: 1px solid var(--wlos); transition: color .25s var(--ease), border-color .25s var(--ease);
}
.wiecej:hover { color: var(--tekst); border-bottom-color: var(--tekst); }
/* CTA rośnie odstępem, nie przesunięciem całej strzałki (za plantea.app). */
.wiecej svg { width: 14px; height: 14px; fill: currentColor; transition: transform .2s var(--ease); }
.wiecej:hover svg { transform: translateX(3px); }

/* Odnośnik „zobacz wszystkie" pod siatką kart — jedyne wejście na listing
   noclegów miasta, odkąd zniknął przekrój „Po miejscowościach". */
.wiecej-pod-siatka { margin: 26px 0 0; }

/* --- 6. KARTY ----------------------------------------------------------- */
.siatka { display: grid; gap: 18px; }
.siatka--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.siatka--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.karta {
  position: relative; display: block; text-decoration: none; color: inherit;
  overflow: hidden; background: var(--czern-mieka); border-radius: 3px;
}
.karta__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.karta__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  /* Ta sama korekcja barwna co w hero — spójność materiału z różnych źródeł. */
  filter: var(--kadr);
  transition: transform .35s var(--ease);
  will-change: transform;
}
.karta:hover .karta__media img { transform: scale(1.04); }
.karta__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(8 9 11 / .9) 0%, rgb(8 9 11 / .06) 62%);
}
.karta__znacznik { font-variant-numeric: tabular-nums;
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px);
  background: rgb(8 9 11 / .5); border: 1px solid rgb(242 240 236 / .22);
  font-size: 10.5px; letter-spacing: .1em; color: var(--tekst);
}
.karta__tresc { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.karta__nad { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(242 240 236 / .72); margin: 0 0 5px; }
.karta__tresc h3 { font-size: 23px; margin: 0; line-height: 1.14; }
.karta__meta { font-size: 12px; color: rgb(242 240 236 / .64); margin: 7px 0 0; }

/* Karta w układzie pionowym, z treścią POD zdjęciem (listingi). */
.karta--pod .karta__media { aspect-ratio: 3 / 2; }
.karta--pod .karta__media::after { background: linear-gradient(to top, rgb(8 9 11 / .45), transparent 55%); }
.karta--pod .karta__tresc { position: static; padding: 16px 18px 20px; }
.karta--pod .karta__tresc h3 { font-size: 21px; }

/* Parametry wiodące na kafelku — to, pod co użytkownik skanuje TEN typ.
 * Restauracja pokazuje godziny i ceny, szlak czas i przewyższenie. Wspólny jest
 * szkielet kafelka, nie zawartość: jeden zestaw dla obu odpowiadałby na pytanie
 * tylko jednego z nich.
 * Wartości w serifie i tabular-nums, żeby kolumny liczb w siatce się zgrały. */
.karta__wiodace {
  list-style: none; margin: 13px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--wlos);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.karta__wiodace li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.karta__wiodace span {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slaby);
}
.karta__wiodace strong {
  font-family: var(--serif); font-weight: 400; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--tekst);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 7. ELEMENTY REDAKCYJNE (za plantea.app, przełożone na ciemne tło) --- */
.tresc-artykulu { max-width: 46rem; min-width: 0; }
.tresc-artykulu p { font-size: 16.5px; line-height: 1.8; color: rgb(242 240 236 / .84); }
.tresc-artykulu h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 44px 0 14px; }
.tresc-artykulu h2::before {
  content: ""; display: block; width: 56px; height: 2px;
  margin-bottom: 14px; background: var(--musztarda);
}

/* Inicjał. */
.dropcap::first-letter {
  font-family: var(--serif); font-weight: 500; font-size: 3.6em; line-height: .66;
  float: left; color: var(--musztarda); margin: .05em .12em -.04em 0;
}
/* Zakreślacz — kolor startuje dopiero od 58% wysokości linii, jak marker. */
.zakreslacz { background: linear-gradient(transparent 58%, rgb(216 161 58 / .35) 0); padding: 0 .05em; }

/* Rombowe punktory zamiast kropek. */
.lista-rombowa { list-style: none; padding: 0; margin: 18px 0; }
.lista-rombowa li { position: relative; padding-left: 1.5em; margin-bottom: 10px; line-height: 1.7; }
.lista-rombowa li::before {
  content: ""; position: absolute; left: .15em; top: .62em;
  width: .5em; height: .5em; border: 1.4px solid var(--musztarda); transform: rotate(45deg);
}

/* Lista odnośników pod tekstem poradnika. Kotwica niesie PEŁNY tytuł celu —
   odnośnik ma się przedstawiać, a nie mówić „zobacz tutaj”. */
.lista-odnosnikow { list-style: none; padding: 0; margin: 4px 0 0; }
.lista-odnosnikow li { border-top: 1px solid var(--wlos); }
.lista-odnosnikow li:last-child { border-bottom: 1px solid var(--wlos); }
.lista-odnosnikow a {
  display: block; padding: 15px 2px; text-decoration: none;
  font-family: var(--serif); font-size: 19px; color: var(--szron);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.lista-odnosnikow a::before { content: "→"; margin-right: 12px; color: var(--musztarda); }
.lista-odnosnikow a:hover { color: #fff; padding-left: 6px; }

/* Ramki boczne — rola rozróżniana KOLOREM krawędzi, nie ikoną. */
.rada, .uwaga {
  border-left: 2px solid var(--musztarda); padding: 14px 18px; margin: 26px 0;
  font-size: 15px; line-height: 1.75;
}
.rada { border-left-color: var(--szron); background: rgb(242 240 236 / .04); }
.uwaga { border-left-color: var(--musztarda); }
.marginalia {
  border-top: 2px solid var(--musztarda); padding-top: 12px; margin: 26px 0;
  font-size: 13.5px; color: var(--przygaszony);
}
.kreska-gasnaca { height: 1px; border: 0; background: linear-gradient(90deg, var(--musztarda), transparent); margin: 34px 0; }

/* Podpis pod zdjęciem — wersaliki z trackingiem. */
.podpis-foto {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slaby); margin: 10px 0 0;
}

/* Spis treści „01 — tytuł — →" (za plantea.app). */
.spis { margin: 0; padding: 0; list-style: none; }
.spis a {
  display: flex; align-items: center; gap: 16px; padding: 15px 0;
  border-bottom: 1px solid var(--wlos); text-decoration: none;
}
.spis li:first-child a { border-top: 1px solid var(--wlos); }
.spis__nr { font-family: var(--serif); color: var(--musztarda); font-size: 14px; min-width: 2ch; }
.spis__tt { flex: 1; font-size: 15px; }
.spis a:hover .spis__tt { color: var(--musztarda); }
.spis__st { color: var(--slaby); transition: transform .2s var(--ease); }
.spis a:hover .spis__st { transform: translateX(4px); }

/* Tabela almanachowa — tylko linie poziome. */
/* min-width:0 jest tu konieczne: element siatki ma domyślnie min-width:auto,
   więc tabela z min-width:32rem rozpychałaby kolumnę zamiast się przewijać. */
.tabela-wrap { overflow-x: auto; margin: 26px 0; min-width: 0; }
.tabela { font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 14.5px; }
.tabela thead th {
  text-align: left; padding: 10px 14px 10px 0;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--musztarda); border-bottom: 2px solid var(--musztarda); font-weight: 500;
}
.tabela tbody td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--wlos); vertical-align: top; color: rgb(242 240 236 / .84); }
.tabela tbody tr:hover { background: rgb(242 240 236 / .03); }

/* FAQ bez JS — natywny <details> z musztardowym +/−. */
.faq { border: 1px solid var(--wlos); border-radius: 4px; padding: 16px 18px; margin-bottom: 10px; background: rgb(242 240 236 / .02); }
.faq[open] { background: rgb(242 240 236 / .05); }
.faq summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--musztarda); margin-right: 10px; }
.faq[open] summary::before { content: "−"; }
.faq p { margin: 12px 0 0; font-size: 15px; line-height: 1.75; color: var(--przygaszony); }

/* --- 8. STOPKA — oświadczenie, nie cztery kolumny linków ---------------- */
/* Układ „marka + 4 kolumny + pasek copyright" jest najbardziej rozpoznawalnym
   odciskiem palca generatora. Zamiast niego: jedno duże zdanie, pod nim zwarty
   pasek odnośników w rzędzie, na końcu metryczka. */
.stopka {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--wlos); margin-top: 20px; padding: 84px 0 30px;
}
.stopka__oswiadczenie {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 58px); line-height: 1.06;
  letter-spacing: -.01em; margin: 0 0 10px; max-width: 20ch;
  overflow-wrap: anywhere;
}
.stopka__pod {
  position: relative; z-index: 1;
  font-size: 15px; line-height: 1.7; color: var(--przygaszony);
  max-width: 46ch; margin: 0 0 46px;
}
/* Odnośniki w rzędach po kategorii — bez pionowych kolumn. */
.stopka__rzedy { position: relative; z-index: 1; display: grid; gap: 2px; }
.stopka__rzad {
  display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: baseline;
  padding: 15px 0; border-top: 1px solid var(--wlos);
}
.stopka__rzad h4 {
  margin: 0; font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--slaby);
}
.stopka__linki { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.stopka__linki a {
  text-decoration: none; font-size: 14.5px; color: rgb(242 240 236 / .8);
  position: relative; padding-bottom: 2px;
}
.stopka__linki a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.stopka__linki a:hover { color: var(--tekst); }
.stopka__linki a:hover::after { transform: scaleX(1); }
.stopka__dol {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--wlos);
  font-size: 12px; color: var(--slaby);
}

/* --- 9. MOBILE ---------------------------------------------------------- */
/* Próg pośredni: przy ~1280 px pasek łamał się i „O nas” z „Kontaktem”
   spadały do drugiego wiersza. Zacieśniamy odstępy i tracking, zamiast
   zawijać — menu ma osiem pozycji i wszystkie są potrzebne. */
@media (max-width: 1400px) {
  .nawigacja { gap: 16px; padding: 22px 24px; }
  .menu { gap: 15px; margin-left: 10px; }
  .menu a { letter-spacing: .10em; }
  .drugorzedne { gap: 13px; }
  .drugorzedne a { letter-spacing: .10em; }
}
@media (max-width: 1180px) {
  .menu { display: none; }
}
@media (max-width: 860px) {
  .kontener { padding: 0 20px; }
  .nawigacja { padding: 16px 20px; gap: 12px; }
  .drugorzedne { display: none; }
  .stopka__rzad { grid-template-columns: 1fr; gap: 10px; }
  .watermark { font-size: clamp(4rem, 22vw, 8rem); }
}
@media (max-width: 640px) {
  /* Pasek pogody ma nowrap i przy 320 px rozpychał dokument do 424 px.
     Zostaje sam odczyt ze szczytu — wiatr schodzi na podstronę Pogoda. */
  .pogoda-pasek .wiatr { display: none; }
  .pogoda-pasek { font-size: 10px; letter-spacing: .04em; }
}
@media (max-width: 520px) {

}

/* --- 10. SZCZYT PODSTRONY I LISTING -------------------------------------- */
/* Nagłówek stron innych niż główna. Do 19.08 zajmował 425 px, czyli na oknie
   1440×642 CAŁY pierwszy ekran — listing nie pokazywał ani jednej karty, choć
   po to istnieje. Karta obiektu zostaje plakatem (`hero-strony` ze zdjęciem),
   ta sekcja jest nagłówkiem i ma się tak zachowywać. */
.szczyt { position: relative; overflow: hidden; padding: 34px 0 30px; border-bottom: 1px solid var(--wlos); }
.szczyt__tresc { position: relative; z-index: 1; }
.szczyt .okruszki { margin-bottom: 24px; }
.szczyt .tytul-duzy { font-size: clamp(30px, 3.6vw, 50px); margin-bottom: 26px; }
.szczyt .lead { max-width: 56ch; margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; }
/* Kreska przejęta po nadtytule, który zniknął 19.08 („5 miejsc z biletem lub
   bez"). Ten sam wymiar i ta sama rola — ozdobnik rozdzielający, nie ornament
   dla ozdoby: oddziela tytuł od zdania, które go tłumaczy. */
.szczyt .lead::before {
  content: ""; display: block; width: 56px; height: 1.5px;
  margin-bottom: 22px; background: var(--przygaszony);
}
/* Znak wodny schodzi z 230 px do ~115: był wyższy od tytułu i to on wymuszał
   wysokość całej sekcji. */
.szczyt .watermark { font-size: clamp(3rem, 8vw, 7.5rem); }

.listing { padding: 44px 0 80px; }
.filtry { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }

/* Podział listingu na grupy. Chipy to SKOKI po stronie (href="#karpacz"),
   nie filtr — dlatego własny kontener, a nie `.filtry`, w którym od 19.08
   nie może stać ani jedna pigułka. */
.miasta { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
/* Outro listingu miejskiego — trzecia bramka promocji, więc tekst, nie ozdoba. */
.listing__outro {
  max-width: 62ch; margin: 44px 0 0; padding-top: 26px;
  border-top: 1px solid var(--wlos); color: var(--przygaszony);
}
.grupa { margin-bottom: 54px; scroll-margin-top: 90px; }
.grupa:last-child { margin-bottom: 0; }
.grupa__glowa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--wlos);
}
.grupa__glowa h2 { margin: 0; display: flex; align-items: baseline; gap: 12px; }
/* Nazwa miejsca w nagłówku grupy jest odnośnikiem do tego miejsca. Podkreślenie
   dopiero na hover: w nagłówku tej wielkości stała linia czyta się jak błąd
   składu, a nie jak zaproszenie. */
.grupa__glowa h2 a { text-decoration: none; }
.grupa__glowa h2 a:hover { color: var(--musztarda); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px; }
.grupa__ile {
  font-size: 12px; letter-spacing: .14em; color: var(--slaby);
  font-weight: 400; font-variant-numeric: tabular-nums;
}
.grupa__wiecej {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em; color: var(--przygaszony);
  text-decoration: none; white-space: nowrap;
}
.grupa__wiecej:hover { color: var(--musztarda); }
.grupa__wiecej svg { width: 15px; height: 15px; fill: currentColor; }

@media (max-width: 640px) {
  .miasta { gap: 7px; margin-bottom: 28px; }
  .grupa { margin-bottom: 40px; }
  .grupa__wiecej { margin-left: 0; }
}

/* --- 10b. KONTAKT: FORMULARZ ---------------------------------------------- */
/* Pola dziedziczą krój i barwy z serwisu - domyślny wygląd pól formularza
   przychodzi z systemu i w ciemnym układzie wygląda jak wklejka z innej strony. */
.kontakt-uklad { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 54px; align-items: start; }
.formularz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.pole { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pole--pelny { grid-column: 1 / -1; }
.pole label {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slaby);
}
.pole input, .pole select, .pole textarea {
  font: inherit; font-size: 15px; color: var(--tekst);
  background: var(--czarny); border: 1px solid var(--wlos); border-radius: 2px;
  padding: 12px 14px; width: 100%; min-width: 0;
}
.pole textarea { resize: vertical; line-height: 1.55; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--slaby); }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: 2px solid var(--musztarda); outline-offset: 1px; border-color: transparent;
}
.formularz .guzik { grid-column: 1 / -1; justify-self: start; }
/* Pasek boczny ma jedną kolumnę: adres e-mail w szeryfowej 25 px nie mieści się
   w połówce tej szerokości i był ucięty. Sam adres schodzi do rozmiaru tekstu,
   bo to napis do przeczytania i skopiowania, nie liczba do porównania. */
.kontakt-bok .fakty { grid-template-columns: 1fr; margin-bottom: 26px; }
.kontakt-bok .fakt dd { font-family: var(--sans); font-size: 16px; word-break: break-word; }

@media (max-width: 900px) {
  .kontakt-uklad { grid-template-columns: 1fr; gap: 38px; }
  .formularz { grid-template-columns: 1fr; }
}

/* --- 11. ARTYKUŁ Z BOCZNYM SPISEM ---------------------------------------- */
.artykul { padding: 46px 0 84px; }
.artykul__uklad { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 58px; align-items: start; }
.artykul__bok { position: sticky; top: 26px; }
@media (max-width: 900px) {
  .artykul__uklad { grid-template-columns: 1fr; gap: 30px; }
  .artykul__bok { position: static; }
}

/* --- 12. KARTA MIEJSCOWOŚCI --------------------------------------------- */
.hero-strony { position: relative; height: 64svh; min-height: 420px; overflow: hidden; }
.hero-strony img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  filter: var(--kadr);
}
.hero-strony::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(8 9 11 / .6) 0%, rgb(8 9 11 / .15) 34%, rgb(8 9 11 / .82) 88%, var(--czarny) 100%);
}
.hero-strony__tresc { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; }
.hero-strony .tytul-duzy { margin: 0; }

/* Pasek faktów — twarde liczby zaraz pod nagłówkiem, zanim pójdzie proza. */
.fakty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--wlos); border: 1px solid var(--wlos); margin: 34px 0 0;
}
.fakt { background: var(--czarny); padding: 18px 20px; }
.fakt dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slaby); margin: 0 0 6px; }
.fakt dd { margin: 0; font-family: var(--serif); font-size: 25px; font-variant-numeric: tabular-nums; }
.fakt dd small { font-size: 13px; color: var(--przygaszony); font-family: var(--sans); }
/* Fakt właściwy jednej pozycji („Rekord wiatru", „Piw z browaru") — poza
 * kontraktem typu, więc nieporównywalny i celowo cichszy od rdzenia. */
.fakt--wlasny dd { font-size: 21px; color: var(--przygaszony); }

.kolumny-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 34px; }
.kolumna h3 { font-size: 21px; margin: 0 0 10px; }
.kolumna p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--przygaszony); }
.kolumna__nr { font-family: var(--serif); color: var(--musztarda); font-size: 13px; letter-spacing: .2em; display: block; margin-bottom: 10px; }

/* Lista szlaków — wiersze z hairline'ami, jak spis treści magazynu. */
.trasy { list-style: none; margin: 0; padding: 0; }
.trasy li { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--wlos); }
.trasy li:first-child { border-top: 1px solid var(--wlos); }
.trasy .nazwa { font-family: var(--serif); font-size: 19px; }
.trasy .czas, .trasy .dyst { font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: .1em; color: var(--przygaszony); white-space: nowrap; }
.trasy .czas { color: var(--musztarda); }

/* Rytm pionowy: trzy wysokości sekcji zamiast jednej. Jednakowy padding
   wszędzie to jeden z pewniejszych sygnałów, że układ generowała maszyna. */
.sekcja { padding: 58px 0; }
.sekcja--ciasna { padding: 38px 0; }
.sekcja--luzna  { padding: 96px 0; }
.sekcja--kreska { border-top: 1px solid var(--wlos); }
.sekcja__naglowek { margin-bottom: 30px; }

/* --- 13. ARTYKUŁ -------------------------------------------------------- */
.meta-artykulu {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12px; letter-spacing: .08em; color: var(--slaby); margin: 18px 0 0;
}
.meta-artykulu span + span::before { content: "·"; margin-right: 10px; }
.cytat-wyrozniony {
  margin: 34px 0; padding: 0 0 0 26px; border-left: 2px solid var(--musztarda);
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.45;
  color: var(--tekst);
}
.figura { margin: 34px 0; }
.figura img { border: 1px solid var(--wlos); border-radius: 3px; filter: var(--kadr); }
.autor {
  display: flex; gap: 18px; align-items: flex-start;
  border-top: 2px solid var(--musztarda); padding-top: 18px; margin-top: 44px;
}
.autor__inicjal {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--mech);
  font-family: var(--serif); font-size: 22px;
}
.autor h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 17px; font-weight: 400; }
.autor p { margin: 0; font-size: 13.5px; color: var(--przygaszony); line-height: 1.7; }

@media (max-width: 700px) {
  .trasy li { grid-template-columns: 1fr; gap: 5px; }
  .hero-strony { height: 52svh; }
}

/* --- 14. IKONY ----------------------------------------------------------- */
/* Jeden zestaw na cały serwis: 28 autorskich ikon karkonoskich ze sprite'a
   (assets/icons/karkonoskie-sprite.svg). Mieszanie bibliotek to jeden
   z pewniejszych sygnałów, że interfejs składano z przypadkowych części. */
.ic { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none;
      vertical-align: -.18em; }
.ic--duza { width: 30px; height: 30px; stroke-width: 1.5; }

/* Wiersz z ikoną — używany w faktach, udogodnieniach, legendach. */
.z-ikona { display: inline-flex; align-items: center; gap: 9px; }

/* Lista udogodnień: ikona + etykieta, w siatce.
   Kolumna ma 260 px, nie 170: przy węższej sześć kolumn mieści się w kontenerze,
   a dłuższe etykiety łamią się na dwie linie i rząd przestaje być czytelny. */
.udogodnienia { list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.udogodnienia li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--przygaszony); }
.udogodnienia .ic { color: var(--musztarda); width: 19px; height: 19px; }

/* Legenda trudności — kolor niesie znaczenie, ikona je powtarza. */
.trudnosc { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .08em; }
.trudnosc .ic { width: 15px; height: 15px; }
.trudnosc--latwy   { color: #8fbf7f; }
.trudnosc--sredni  { color: var(--musztarda); }
.trudnosc--trudny  { color: #d98A5f; }
.trudnosc--bardzo  { color: #cf6a5a; }

/* --- WARUNKI WEJŚCIA ----------------------------------------------------- */
/* Cztery pytania, które w PAA padają niezależnie od typu obiektu: pies, dziecko,
 * zima, bilet KPN. Świadomie LŻEJSZY rysunek niż blok faktów obok — fakty niosą
 * liczby w dużym serifie, więc gdyby warunki też były kaflami, dwa bloki
 * biłyby się o to samo spojrzenie. Tutaj: pasek z włosowymi przegrodami.
 *
 * Stan niesie SŁOWO i ikona, nie sam kolor — inaczej informacja ginie
 * przy daltonizmie i w druku. */
.warunki {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--wlos); border-radius: 2px;
}
.warunek {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-items: start; padding: 14px 16px;
  border-left: 1px solid var(--wlos);
}
.warunek:first-child { border-left: 0; }
.warunek .ic { width: 17px; height: 17px; grid-row: 1 / 3; margin-top: 2px; }
.warunek__co {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slaby);
}
.warunek__stan { font-weight: 500; font-size: 14px; letter-spacing: .01em; }
.warunek__opis {
  grid-column: 2; font-size: 11.5px; line-height: 1.45; color: var(--przygaszony);
}
.warunek--tak        { color: #8fbf7f; }
.warunek--warunkowo  { color: var(--musztarda); }
.warunek--nie        { color: #cf6a5a; }
.warunek--nd         { color: var(--slaby); }
/* Kolor stanu dotyczy ikony i słowa; opis zostaje neutralny, żeby pasek nie
 * zamienił się w cztery kolorowe akapity. */
.warunek__co, .warunek__opis { color: var(--przygaszony); }
.warunek--nd .warunek__stan { font-weight: 400; }

@media (max-width: 900px) {
  .warunki { grid-template-columns: repeat(2, 1fr); }
  .warunek:nth-child(3) { border-left: 0; }
  .warunek:nth-child(n+3) { border-top: 1px solid var(--wlos); }
}
@media (max-width: 520px) {
  .warunki { grid-template-columns: 1fr; }
  .warunek { border-left: 0; }
  .warunek + .warunek { border-top: 1px solid var(--wlos); }
}

/* --- 15. DZIENNIK -------------------------------------------------------- */
/* Wpis wiodący dostaje pełną szerokość i duże zdjęcie, reszta idzie wierszami.
   Jednakowa siatka kafli dla wszystkich wpisów spłaszcza hierarchię redakcyjną. */
.wiodacy { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; margin-bottom: 14px; }
.wiodacy__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.wiodacy__media img { width: 100%; height: 100%; object-fit: cover;
  filter: var(--kadr); transition: transform .4s var(--ease); }
.wiodacy:hover .wiodacy__media img { transform: scale(1.03); }
.wiodacy h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.06; margin: 12px 0 14px; }
.wiodacy p { color: var(--przygaszony); font-size: 15.5px; line-height: 1.75; margin: 0 0 20px; }

.wpisy { list-style: none; margin: 0; padding: 0; }
.wpis {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 26px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--wlos); text-decoration: none;
}
.wpis:last-child { border-bottom: 1px solid var(--wlos); }
.wpis__mini { aspect-ratio: 4 / 3; overflow: hidden; }
.wpis__mini img { width: 100%; height: 100%; object-fit: cover;
  filter: var(--kadr); transition: transform .35s var(--ease); }
.wpis:hover .wpis__mini img { transform: scale(1.05); }
.wpis h3 { font-size: 21px; margin: 0 0 5px; line-height: 1.2; }
.wpis p { margin: 0; font-size: 13.5px; color: var(--przygaszony); }
.wpis__data { font-size: 12px; color: var(--slaby); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpis:hover h3 { color: var(--musztarda); }

/* --- 16. SEZONY — dwanaście wierszy z paskiem --------------------------- */
.sezony { list-style: none; margin: 0; padding: 0; }
.miesiac {
  /* Dwa wiersze: nazwa–pasek–temperatura, a pod paskiem opis. Bez jawnego
     przypisania opis lądował w 108-pikselowej kolumnie nazwy i rozciągał wiersz. */
  display: grid; grid-template-columns: 108px minmax(0, 1fr) 92px;
  column-gap: 20px; row-gap: 5px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--wlos);
}
.miesiac__nazwa { grid-column: 1; grid-row: 1; }
.miesiac__pasek { grid-column: 2; grid-row: 1; }
.miesiac__wart  { grid-column: 3; grid-row: 1; }
.miesiac__opis  { grid-column: 2 / 4; grid-row: 2; }
.miesiac__nazwa { font-family: var(--serif); font-size: 18px; }
.miesiac__pasek { height: 7px; background: rgb(242 240 236 / .08); position: relative; }
.miesiac__pasek i { position: absolute; left: 0; top: 0; height: 7px; background: var(--musztarda); }
.miesiac__opis { font-size: 13px; color: var(--przygaszony); }
.miesiac__wart { font-size: 13px; color: var(--przygaszony); text-align: right; font-variant-numeric: tabular-nums; }

/* --- 17. SŁOWNIK -------------------------------------------------------- */
.slownik { margin: 0; }
.slownik div { padding: 20px 0; border-top: 1px solid var(--wlos); display: grid;
  grid-template-columns: 220px 1fr; gap: 26px; }
.slownik dt { font-family: var(--serif); font-size: 21px; margin: 0; }
.slownik dt small { display: block; font-family: var(--sans); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slaby); margin-top: 5px; }
.slownik dd { margin: 0; font-size: 14.5px; line-height: 1.78; color: var(--przygaszony); }
.litery { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }

/* --- 18. LISTA KONTROLNA ------------------------------------------------ */
.kontrolna { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kontrolna li { display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--wlos); }
.kontrolna .znak { color: var(--musztarda); font-size: 13px; }
.kontrolna .co { font-size: 15px; }
.kontrolna .kiedy { font-size: 12px; color: var(--slaby); letter-spacing: .06em; white-space: nowrap; }
.kontrolna .czemu { grid-column: 2 / -1; font-size: 13px; color: var(--przygaszony); margin-top: 4px; }

@media (max-width: 780px) {
  .wiodacy { grid-template-columns: 1fr; gap: 20px; }
  .wpis { grid-template-columns: 88px 1fr; gap: 16px; }
  .wpis__data { grid-column: 2; }
  .slownik div { grid-template-columns: 1fr; gap: 8px; }
  /* Na wąskim ekranie trzy kolumny się nie mieszczą: nazwa i temperatura
     w jednym wierszu, pasek i opis pod spodem na pełną szerokość.
     Bez jawnego przypisania temperatura lądowała na pasku. */
  .miesiac { grid-template-columns: 1fr auto; }
  .miesiac__nazwa { grid-column: 1; grid-row: 1; }
  .miesiac__wart  { grid-column: 2; grid-row: 1; text-align: right; }
  .miesiac__pasek { grid-column: 1 / -1; grid-row: 2; }
  .miesiac__opis  { grid-column: 1 / -1; grid-row: 3; }
}


/* --- 19. NAWIGACJA MOBILNA ---------------------------------------------- */
/* Poniżej 1180 px menu poziome się nie mieści. Zamiast znikać bez śladu,
   chowa się pod przyciskiem — inaczej z telefonu nie da się nigdzie przejść. */
.burger {
  display: none; margin-left: auto; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--wlos); border-radius: 999px;
  cursor: pointer; color: var(--tekst);
  align-items: center; justify-content: center; gap: 0;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: currentColor; position: relative;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease);
}
.burger span::before { top: -5px; }
.burger span::after  { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.szuflada {
  display: none; position: absolute; inset: 100% 0 auto; z-index: 30;
  background: var(--czern-mieka); border-bottom: 1px solid var(--wlos);
  padding: 10px 20px 22px;
}
.szuflada[data-otwarta] { display: block; }
.szuflada a {
  display: block; padding: 13px 0; text-decoration: none;
  border-bottom: 1px solid var(--wlos);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.szuflada a:last-child { border-bottom: 0; }
.szuflada .szuflada__pod {
  padding-left: 34px; font-size: 11.5px; color: var(--przygaszony);
  text-transform: none; letter-spacing: .08em;
}

@media (max-width: 1180px) {
  .burger { display: inline-flex; }
  .nawigacja { position: relative; }
  .pogoda-pasek { margin-left: 0; }
}

/* --- 20. PASEK PŁYWAJĄCY ------------------------------------------------- */
/* Wjeżdża dopiero po zjechaniu poza pierwszy ekran. Nawigacja u góry strony
   już tam jest — dublowanie jej od razu odbiera miejsce i nic nie daje.
   Tło jest nieprzezroczyste z rozmyciem, bo pasek przechodzi nad zdjęciami
   i nad tabelami; sama przezroczystość robiłaby z tekstu papkę. */
.pasek-plywajacy {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transform: translateY(-100%); transition: transform .24s cubic-bezier(.16, .84, .28, 1);
  background: rgb(8 9 11 / .93); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--wlos);
}
.pasek-plywajacy[data-widoczny] { transform: translateY(0); }
.pasek-plywajacy__tresc {
  display: flex; align-items: center; gap: 18px;
  max-width: 1400px; margin: 0 auto; padding: 11px 28px;
}
.pasek-plywajacy .marka { font-size: 15px; white-space: nowrap; }
.pasek-plywajacy .menu { gap: 16px; margin-left: 12px; }
.pasek-plywajacy .drugorzedne { gap: 14px; }
/* ⚠️ Pasek niesie DOKŁADNIE te same pozycje co nawigacja i z tego samego
   budowniczego (`pozycje_menu`). Do 19.08 miał własny, krótszy zestaw: menu
   bez „O nas" i „Kontaktu" oraz odczyt pogody jako zwykły odnośnik zamiast
   rozwijanego wyboru punktu. Po zjechaniu w dół serwis tracił dwie pozycje
   nawigacji i możliwość zmiany punktu pomiaru. */
.pasek-plywajacy .pogoda-wybor { margin-left: auto; }
/* Lista kategorii rozwija się w dół z paska przyklejonego do górnej krawędzi —
   musi być nad treścią strony, a pasek ma z-index 60. */
.pasek-plywajacy .menu__lista { z-index: 70; }

/* Poniżej 1180 px poziome menu i tak się nie mieści — pasek zostaje przy marce
   i odczycie, czyli przy dwóch rzeczach, po które sięga się w trakcie czytania. */
@media (max-width: 1360px) {
  .pasek-plywajacy .drugorzedne { display: none; }
}
@media (max-width: 1180px) {
  .pasek-plywajacy .menu { display: none; }
  .pasek-plywajacy__tresc { justify-content: space-between; padding: 10px 20px; }
}

/* Ruch tego paska nic nie wnosi poza płynnością — przy wyłączonych animacjach
   ma się po prostu pojawić. */
@media (prefers-reduced-motion: reduce) {
  .pasek-plywajacy { transition: none; }
}

/* --- 21. PRZEKRÓJ PO MIEJSCOWOŚCIACH ------------------------------------- */
/* Wdrożenie wniosku z danych wyszukiwań: miejscowość jest mocniejszym punktem
   wejścia niż nazwa pasma („karpacz noclegi" 27 100/mies. wobec „karkonosze
   noclegi" 1 000). Dlatego listing kategorii dostaje nad siatką przekrój po
   miejscowościach — z licznikiem, żeby nie obiecywał pustych stron. */
.przekroj { margin: 0 0 30px; }
.przekroj__etykieta {
  margin: 0 0 12px; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slaby);
}
.przekroj .pigulka { text-decoration: none; }
.pigulka__ile {
  font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--slaby); margin-left: 2px;
}
.pigulka--aktywna .pigulka__ile { color: rgb(8 9 11 / .55); }

/* Nazwa szlaku w wierszu jest odnośnikiem — wcześniej te listy wyglądały
   jak linki, nie będąc nimi. */
.trasy a.nazwa { text-decoration: none; }
.trasy a.nazwa:hover { text-decoration: underline; text-underline-offset: 4px; }
.fakt dd a { text-decoration: none; border-bottom: 1px solid var(--musztarda); }
.fakt dd a:hover { color: var(--musztarda); }

/* --- 22. MAPA PASMA ------------------------------------------------------ */
/* Rysowana w SVG z współrzędnych OpenStreetMap. Bez kafli z serwera, bez
   biblioteki — pasmo jest małe, a interakcja sprowadza się do „kliknij punkt".
   Biblioteka mapowa dołożyłaby setki kilobajtów i drugi zestaw ikon. */
.mapa-obszar { overflow-x: auto; }
.mapa { width: 100%; min-width: 700px; height: auto; display: block; }

.mapa__siatka line { stroke: rgb(242 240 236 / .05); stroke-width: 1; }

/* Grzbiet: jedna linia, która organizuje cały rysunek. Musi być wyraźniejsza
   niż siatka, ale słabsza niż punkty — inaczej przejmuje uwagę. */
/* Obrysy parków narodowych. Wypełnienie ledwo widoczne, kreska cieńsza
   od grzbietu — mają dać tłu kształt, a nie konkurować z punktami. */
.mapa__park { fill: rgb(122 158 126 / .07); stroke: rgb(122 158 126 / .38); stroke-width: 1.1; }
.mapa__park--cz { fill: rgb(242 240 236 / .035); stroke: rgb(242 240 236 / .17); stroke-dasharray: 5 4; }

.mapa__grzbiet {
  fill: none; stroke: var(--musztarda); stroke-opacity: .5;
  stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.mapa__opis-grzbietu {
  fill: var(--slaby); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}

.mapa__kreska { fill: none; stroke: rgb(242 240 236 / .22); stroke-width: 1; }
.mapa__punkt { stroke: var(--czarny); stroke-width: 1.5; }
.mapa__punkt--miejscowosc { fill: var(--tekst); }
.mapa__punkt--szczyt      { fill: var(--musztarda); }
.mapa__punkt--schronisko  { fill: #8fbf7f; }
.mapa__punkt--wodospad    { fill: #7fa8bf; }
.mapa__punkt--przelecz    { fill: none; stroke: var(--przygaszony); stroke-width: 1.6; }

.mapa__nazwa { fill: var(--przygaszony); font-size: 12.5px; font-family: var(--sans); }
.mapa__wys { fill: var(--slaby); font-size: 11px; font-variant-numeric: tabular-nums; }

.mapa__grupa { cursor: pointer; }
.mapa__grupa--bez-strony { cursor: default; }
.mapa__grupa:hover .mapa__nazwa { fill: #fff; }
.mapa__grupa:hover .mapa__kreska { stroke: var(--musztarda); }
.mapa__grupa:hover .mapa__punkt { stroke: var(--musztarda); }
.mapa__grupa:focus-visible { outline: 2px solid var(--musztarda); outline-offset: 2px; }

.mapa-legenda {
  display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 22px;
  font-size: 12px; color: var(--przygaszony);
}
.mapa-legenda__poz { display: inline-flex; align-items: center; gap: 8px; }
.mapa-legenda i {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1px solid transparent;
}
.mapa-legenda .mapa__punkt--miejscowosc { background: var(--tekst); }
.mapa-legenda .mapa__punkt--szczyt      { background: var(--musztarda); }
.mapa-legenda .mapa__punkt--schronisko  { background: #8fbf7f; }
.mapa-legenda .mapa__punkt--wodospad    { background: #7fa8bf; }
.mapa-legenda .mapa__punkt--przelecz    { background: none; border-color: var(--przygaszony); }

/* --- 23. WPIS BLOGOWY ---------------------------------------------------- */
/* Inny typ niż artykuł: krótszy, datowany, odpowiada na jedno pytanie.
   Dlatego zaczyna się od pytania i odpowiedzi, nie od wstępu — kto trafia tu
   z wyszukiwarki, chce odpowiedzi w pierwszym ekranie, nie po trzech akapitach. */
.hero-strony--wpis { height: 46svh; min-height: 320px; }
.wpis__pytanie {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--musztarda); margin: 0 0 14px;
}
.wpis__odpowiedz {
  margin: 0 0 30px; padding-left: 22px; border-left: 2px solid var(--musztarda);
}
/* Wnioski to lista dwukolumnowa — trzecia kolumna wiersza tras zostaje pusta. */
.trasy--wnioski li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.trasy--wnioski .czas { color: var(--przygaszony); white-space: normal; letter-spacing: 0; font-size: 14.5px; }
@media (max-width: 700px) {
  .trasy--wnioski li { grid-template-columns: 1fr; }
}