/* =============================================================================
   kajakipodwarszawa.pl — system wizualny „Kartografia rzeczna"
   -----------------------------------------------------------------------------
   Postawa estetyczna: Tactile Warmth × Editorial. Ciepły papier mapy, atramentowa
   typografia szeryfowa, rzeczna morska i gliniany akcent. Zamiast miękkich,
   rozmytych cieni — twarde przesunięcia w atramencie (druk, nie „karta AI").

   Kontrast: każda para tekst/tło policzona wg WCAG 2.1.
     tekst  #2B3B45 na papierze  → 10,5:1
     tekst-2 #4E5F68 na papierze →  6,0:1
     rzeka  #0B5E70 na papierze  →  6,7:1   biały na rzece      → 7,4:1
     ochra  #AD3D0D             →  biały na ochrze             → 6,3:1
     złoto  #8A5B00 na tle złota →  5,0:1
     papier na nocy #0E2430      → 14,7:1
   Obramowania kontrolek (--linia-mocna) ≥ 3:1 względem tła.
   ============================================================================ */

/* ---------- tokeny --------------------------------------------------------- */
/* ---------- fonty (z własnego serwera) -------------------------------------
   Te same pliki, które podawało Google Fonts (Fraunces, Plus Jakarta Sans, Space Mono,
   także osie zmienne), przycięte do potrzebnych znaków: latin = podstawowa łacina, Latin-1
   i interpunkcja; latin-ext = Latin Extended-A (polskie i europejskie litery). Z Google
   arkusz blokował pierwsze wyrenderowanie o ~0,8 s na telefonie (osobne połączenie) i ważył
   295 KB fontów — tutaj 224 KB tym samym połączeniem co strona. Skrót w nazwie pliku = rok
   w cache (.htaccess). Wersja 8-bitowa nadal korzysta z Google Fonts. */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap;
    src: url("/assets/fonty/fraunces-italic-latin-ext.d80f9fa8.woff2") format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap;
    src: url("/assets/fonty/fraunces-italic-latin.e3efdc98.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap;
    src: url("/assets/fonty/fraunces-normal-latin-ext.c581a36a.woff2") format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap;
    src: url("/assets/fonty/fraunces-normal-latin.5f540694.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("/assets/fonty/plus-jakarta-sans-normal-latin-ext.a7589e34.woff2") format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("/assets/fonty/plus-jakarta-sans-normal-latin.2952287b.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonty/space-mono-normal-400-latin-ext.9af0e383.woff2") format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonty/space-mono-normal-400-latin.89c71452.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/assets/fonty/space-mono-normal-700-latin-ext.48c1ae13.woff2") format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/assets/fonty/space-mono-normal-700-latin.75f73135.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD; }

:root {
    /* powierzchnie: papier mapy */
    --papier:      #F7F4EC;
    --papier-2:    #EFEAE0;
    --karta:       #FFFFFF;
    --noc:         #0E2430;
    --noc-2:       #16323F;

    /* atrament i tekst */
    --atrament:    #10222E;
    --tekst:       #2B3B45;
    --tekst-2:     #4E5F68;
    --na-nocy:     #F7F4EC;
    --na-nocy-2:   #AFC5CE;

    /* akcenty (RGB w krotce — pozwala na dynamiczną alfę) */
    --rzeka-rgb:   11 94 112;
    --rzeka:       rgb(var(--rzeka-rgb));
    --rzeka-tlo:   #E3EEF0;
    --ochra-rgb:   173 61 13;
    --ochra:       rgb(var(--ochra-rgb));
    --ochra-tlo:   #FBEDE4;
    --zielen:      #2F6B44;
    --zielen-tlo:  #E6EFE8;
    --zloto:       #8A5B00;
    --zloto-tlo:   #F7EBD2;

    /* tekst na jednolitym akcencie — osobne tokeny, bo w ciemnym motywie
       akcenty jaśnieją i biały napis by na nich zniknął */
    --pelny-tlo:   #10222E;   /* przycisk główny, toast */
    --na-pelnym:   #F7F4EC;   /* 14,8:1 */
    --na-ochrze:   #FFFFFF;   /*  6,1:1 */
    --na-rzece:    #FFFFFF;   /*  7,4:1 */

    --naglowek-tlo: rgba(247, 244, 236, .93);
    --tor-przewijania: rgba(255, 255, 255, .6);

    /* linie */
    --linia:       #DFD8C9;
    --linia-mocna: #8B8371;   /* kontrolki — 3,4:1 na papierze */

    /* cienie: twarde przesunięcia w atramencie (druk / papier) */
    --cien:        5px 5px 0 rgba(16, 34, 46, .06);
    --cien-uniesc: 9px 9px 0 rgba(16, 34, 46, .10);
    --cien-plyw:   0 18px 40px rgba(16, 34, 46, .18);

    /* jednolita skala promieni */
    --r-1: 3px;
    --r-2: 8px;
    --r-3: 14px;
    --r-pill: 999px;

    /* krzywe ruchu */
    --ease-spring: cubic-bezier(.16, 1, .3, 1);
    --ease-smooth: cubic-bezier(.4, 0, .2, 1);

    /* pismo */
    --display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --pismo:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:    "Space Mono", ui-monospace, Menlo, monospace;

    /* faktura poziomicowa — motyw mapy, nie dekoracja bez powodu */
    --poziomice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cg fill='none' stroke='%2310222E' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M-20 32C40 4 88 62 148 33S248 6 300 40'/%3E%3Cpath d='M-20 62C40 34 88 92 148 63S248 36 300 70'/%3E%3Cpath d='M-20 92C40 64 88 122 148 93S248 66 300 100'/%3E%3Cpath d='M-20 122C40 94 88 152 148 123S248 96 300 130'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------- motyw ciemny ----------------------------------------------------
   Ta sama „Kartografia rzeczna", tyle że nocna: granatowy atrament staje się
   podłożem, papier — pismem. Akcenty rozjaśnione, bo morska zieleń i glina
   z motywu jasnego byłyby na granacie nieczytelne.

   Kontrasty policzone wg WCAG 2.1 (wszystkie pary ≥ 4,5:1, obramowania ≥ 3:1):
     tekst  #DEE6E8 na podłożu #0E2430 → 12,6:1   tekst-2 → 7,9:1
     rzeka  #6CC4D8 na podłożu         →  8,0:1   na karcie → 6,9:1
     ochra  #F0854E na podłożu         →  6,2:1   ciemny napis na ochrze → 6,9:1
     obramowania #6F8B98               →  4,4:1
   Reguły są zdublowane: raz dla wyboru systemowego (media), raz dla wyboru
   ręcznego (data-motyw) — inaczej przełącznik nie mógłby nadpisać systemu.
   ------------------------------------------------------------------------- */
:root[data-motyw="ciemny"],
:root:not([data-motyw="jasny"]):not([data-motyw="ciemny"]) {
    color-scheme: light;
}

/* wybór systemowy (domyślny) */
@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) {
        color-scheme: dark;
    /* powierzchnie: nocna mapa */
    --papier:      #0E2430;
    --papier-2:    #16323F;
    --karta:       #17303D;
    --noc:         #081720;
    --noc-2:       #0E2430;

    /* pismo */
    --atrament:    #E9EEEF;
    --tekst:       #DEE6E8;
    --tekst-2:     #A6BAC3;
    --na-nocy:     #F7F4EC;
    --na-nocy-2:   #AFC5CE;

    /* akcenty rozjaśnione pod granat */
    --rzeka-rgb:   108 196 216;
    --rzeka-tlo:   #123845;
    --ochra-rgb:   240 133 78;
    --ochra-tlo:   #3B1C0D;
    --zielen:      #7FC796;
    --zielen-tlo:  #16301E;
    --zloto:       #E2B65E;
    --zloto-tlo:   #33280C;

    /* na jednolitym akcencie napis robi się ciemny — odwrotnie niż w dzień */
    --pelny-tlo:   #E9EEEF;
    --na-pelnym:   #0E2430;
    --na-ochrze:   #2A1206;
    --na-rzece:    #06222B;

    --naglowek-tlo: rgba(14, 36, 48, .93);
    --tor-przewijania: rgba(0, 0, 0, .35);

    --linia:       #2B4553;
    --linia-mocna: #6F8B98;

    /* twarde cienie w atramencie znikają na granacie — w nocy liczy się czerń */
    --cien:        5px 5px 0 rgba(0, 0, 0, .28);
    --cien-uniesc: 9px 9px 0 rgba(0, 0, 0, .38);
    --cien-plyw:   0 18px 40px rgba(0, 0, 0, .55);

    /* poziomice rysowane światłem, nie atramentem */
    --poziomice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M-20 32C40 4 88 62 148 33S248 6 300 40'/%3E%3Cpath d='M-20 62C40 34 88 92 148 63S248 36 300 70'/%3E%3Cpath d='M-20 92C40 64 88 122 148 93S248 66 300 100'/%3E%3Cpath d='M-20 122C40 94 88 152 148 123S248 96 300 130'/%3E%3C/g%3E%3C/svg%3E");
    }
}

/* wybór ręczny — musi wygrać z systemem, więc stoi po medii */
:root[data-motyw="ciemny"] {
    color-scheme: dark;
    /* powierzchnie: nocna mapa */
    --papier:      #0E2430;
    --papier-2:    #16323F;
    --karta:       #17303D;
    --noc:         #081720;
    --noc-2:       #0E2430;

    /* pismo */
    --atrament:    #E9EEEF;
    --tekst:       #DEE6E8;
    --tekst-2:     #A6BAC3;
    --na-nocy:     #F7F4EC;
    --na-nocy-2:   #AFC5CE;

    /* akcenty rozjaśnione pod granat */
    --rzeka-rgb:   108 196 216;
    --rzeka-tlo:   #123845;
    --ochra-rgb:   240 133 78;
    --ochra-tlo:   #3B1C0D;
    --zielen:      #7FC796;
    --zielen-tlo:  #16301E;
    --zloto:       #E2B65E;
    --zloto-tlo:   #33280C;

    /* na jednolitym akcencie napis robi się ciemny — odwrotnie niż w dzień */
    --pelny-tlo:   #E9EEEF;
    --na-pelnym:   #0E2430;
    --na-ochrze:   #2A1206;
    --na-rzece:    #06222B;

    --naglowek-tlo: rgba(14, 36, 48, .93);
    --tor-przewijania: rgba(0, 0, 0, .35);

    --linia:       #2B4553;
    --linia-mocna: #6F8B98;

    /* twarde cienie w atramencie znikają na granacie — w nocy liczy się czerń */
    --cien:        5px 5px 0 rgba(0, 0, 0, .28);
    --cien-uniesc: 9px 9px 0 rgba(0, 0, 0, .38);
    --cien-plyw:   0 18px 40px rgba(0, 0, 0, .55);

    /* poziomice rysowane światłem, nie atramentem */
    --poziomice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M-20 32C40 4 88 62 148 33S248 6 300 40'/%3E%3Cpath d='M-20 62C40 34 88 92 148 63S248 36 300 70'/%3E%3Cpath d='M-20 92C40 64 88 122 148 93S248 66 300 100'/%3E%3Cpath d='M-20 122C40 94 88 152 148 123S248 96 300 130'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--pismo);
    background: var(--papier);
    color: var(--tekst);
    line-height: 1.62;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--rzeka); text-underline-offset: 3px; }

:focus-visible {
    outline: 2.5px solid var(--ochra);
    outline-offset: 3px;
    border-radius: var(--r-1);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.szer { max-width: 1240px; margin: 0 auto; padding: 0 26px; }

/* etykieta techniczna — mono, wersaliki, rozstrzelona (język map i przyrządów) */
.etykieta {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tekst-2);
}

/* ---------- nagłówek ------------------------------------------------------- */
.naglowek {
    position: sticky; top: 0; z-index: 60;
    background: var(--naglowek-tlo);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linia);
}
.naglowek-wnetrze { display: flex; align-items: center; gap: 22px; height: 72px; }

/* --- logo: kajakarz na fali (animowany SVG) --- */
.logo {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; color: var(--atrament); white-space: nowrap;
}
.logo-znak { display: block; width: 50px; height: 40px; flex: 0 0 auto; overflow: hidden; }
.logo-znak svg { display: block; width: 100%; height: 100%; }
.logo-tekst {
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.02em;
    line-height: 1;
}
.logo-tekst b { color: var(--rzeka); font-style: italic; font-weight: 600; }

.lz-lodz  { transform-box: fill-box; transform-origin: 50% 90%; animation: kolysanie 3.8s var(--ease-smooth) infinite; }
/* fala jest szersza niż kadr i przesuwa się o dokładnie jeden okres (18) — pętla bez szwu */
.lz-fale path { animation: nurt 3.4s linear infinite; }
.lz-fale path:nth-child(2) { animation-duration: 5.2s; }
.lz-wioslo { transform-box: fill-box; transform-origin: 50% 50%; }
.logo:hover .lz-wioslo, .logo:focus-visible .lz-wioslo { animation: wioslowanie .85s var(--ease-spring); }
.logo:hover .lz-lodz { animation-duration: 1.6s; }

@keyframes kolysanie {
    0%, 100% { transform: translateY(0)      rotate(-2.6deg); }
    50%      { transform: translateY(-1.6px) rotate(2.6deg); }
}
@keyframes nurt        { to { transform: translateX(18px); } }
@keyframes wioslowanie { 45% { transform: rotate(32deg); } }

.menu { display: flex; gap: 2px; margin-left: 10px; }
.menu a {
    padding: 8px 13px; border-radius: var(--r-2);
    color: var(--tekst); text-decoration: none;
    font-size: 14.5px; font-weight: 600;
    transition: background .18s var(--ease-smooth), color .18s var(--ease-smooth);
}
.menu a:hover { background: var(--rzeka-tlo); color: var(--rzeka); }

.naglowek-akcje { margin-left: auto; display: flex; align-items: center; gap: 11px; }

/* dzwonek powiadomień */
.dzwonek {
    position: relative;
    width: 44px; height: 44px; border-radius: var(--r-2);
    border: 1.5px solid var(--linia-mocna); background: var(--karta);
    display: grid; place-items: center; cursor: pointer;
    transition: box-shadow .18s var(--ease-smooth), transform .18s var(--ease-spring);
}
.dzwonek:hover { box-shadow: var(--cien); transform: translate(-1px, -1px); }
.dzwonek:active { transform: scale(.96); }
.dzwonek .kropka {
    position: absolute; top: 7px; right: 8px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ochra); border: 2px solid var(--karta);
    display: none;
}
.dzwonek.aktywny .kropka { display: block; }

/* Transform na dzwonku tworzy blok zawierający dla position:fixed — a panel
   powiadomień na telefonie (≤680 px) jest właśnie fixed i leży WEWNĄTRZ tego
   przycisku. Efekt: przy najechaniu kursorem panel zwijał się do 47 px, czyli
   do rozmiarów samego dzwonka. Kursor po kliknięciu zostaje na przycisku, więc
   trafiało to praktycznie każde otwarcie. Przy otwartym panelu gasimy więc
   ruch — specyficzność :has() wygrywa z :hover niezależnie od kolejności. */
.dzwonek:has(.powiadomienia-panel.otwarty),
.dzwonek:has(.powiadomienia-panel.otwarty):hover,
.dzwonek:has(.powiadomienia-panel.otwarty):active { transform: none; }

/* Wbudowane kontrolki MapLibre mają własne, jasne style — na nocnej mapie
   świeciły jak białe naklejki. Przemalowujemy je tokenami, żeby zoom
   i atrybucja należały do tej samej mapy co reszta. */
:root[data-motyw="ciemny"] .maplibregl-ctrl-group,
:root[data-motyw="ciemny"] .maplibregl-ctrl-attrib {
    background: var(--karta); color: var(--tekst);
}
:root[data-motyw="ciemny"] .maplibregl-ctrl-group button + button { border-top-color: var(--linia); }
:root[data-motyw="ciemny"] .maplibregl-ctrl-attrib a { color: var(--rzeka); }
:root[data-motyw="ciemny"] .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }

@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) .maplibregl-ctrl-group,
    :root:not([data-motyw="jasny"]) .maplibregl-ctrl-attrib {
        background: var(--karta); color: var(--tekst);
    }
    :root:not([data-motyw="jasny"]) .maplibregl-ctrl-group button + button { border-top-color: var(--linia); }
    :root:not([data-motyw="jasny"]) .maplibregl-ctrl-attrib a { color: var(--rzeka); }
    :root:not([data-motyw="jasny"]) .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
}

/* przełącznik motywu — lista rozwijana. Trigger pokazuje stan bieżący, więc
   nie trzeba trzymać w nagłówku trzech przycisków naraz; na telefonie znika
   sama etykieta i zostaje ikona.
   UWAGA: hover NIE rusza transformem. Transform tworzy blok zawierający dla
   pozycjonowanych potomków — dokładnie na tym wyłożył się panel powiadomień
   w dzwonku. Uniesienie robimy samym cieniem. */
.motyw { position: relative; }
.motyw-przycisk {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 11px;
    border: 1.5px solid var(--linia-mocna); border-radius: var(--r-2);
    background: var(--karta); color: var(--tekst);
    font-family: var(--pismo); font-size: 14px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: box-shadow .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
}
.motyw-przycisk:hover { box-shadow: var(--cien); border-color: var(--atrament); }
.motyw-przycisk svg { display: block; flex: 0 0 auto; }
.motyw-strzalka { width: 11px; height: 11px; opacity: .6; transition: transform .18s var(--ease-smooth); }
.motyw-przycisk[aria-expanded="true"] .motyw-strzalka { transform: rotate(180deg); }

.motyw-lista {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 208px; padding: 6px; margin: 0; list-style: none;
    background: var(--karta); border: 1.5px solid var(--atrament);
    border-radius: var(--r-3); box-shadow: var(--cien-plyw);
    display: none; z-index: 70;
}
.motyw-lista.otwarta { display: block; }
.motyw-lista li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: var(--r-2);
    font-size: 14px; font-weight: 600; color: var(--tekst); cursor: pointer;
}
.motyw-lista li:hover { background: var(--rzeka-tlo); color: var(--rzeka); }
.motyw-lista li[aria-selected="true"] { background: var(--rzeka); color: var(--na-rzece); }
.motyw-lista li .ptaszek { margin-left: auto; opacity: 0; }
.motyw-lista li[aria-selected="true"] .ptaszek { opacity: 1; }

/* „8-bitowy" — przejście do wersji serwisu w pixel arcie (/8bit/), a nie motyw kolorów,
   stąd kreska nad pozycją. Press Start 2P ma 8 pikseli na em: przy 12 px piksel fontu
   to 1,5 px CSS, czyli równe 3 piksele ekranu telefonu. Ikona pada jest rysowana
   pikselami 2×2 — crispEdges nie pozwala ich rozmyć. */
.motyw-lista li.motyw-8bit { position: relative; margin-top: 7px; }
.motyw-lista li.motyw-8bit::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: -4px;
    border-top: 1.5px solid var(--linia);
}
.motyw-8bit-etykieta {
    font-family: "Press Start 2P", ui-monospace, monospace;
    font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0;
}

@media (max-width: 680px) {
    .motyw-przycisk { height: 40px; padding: 0 9px; gap: 6px; }
    .motyw-etykieta { display: none; }
}

/* ---------- przyciski ------------------------------------------------------ */
.przycisk {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 19px; border-radius: var(--r-2); border: 1.5px solid transparent;
    font-family: var(--pismo); font-weight: 700; font-size: 14.5px; line-height: 1.2;
    cursor: pointer; text-decoration: none;
    transition: transform .16s var(--ease-spring), box-shadow .16s var(--ease-smooth),
                background .16s var(--ease-smooth);
}
.przycisk:hover  { transform: translate(-1.5px, -1.5px); box-shadow: 4px 4px 0 rgba(16, 34, 46, .16); }
.przycisk:active { transform: scale(.975); box-shadow: none; }

.przycisk-glowny { background: var(--pelny-tlo); color: var(--na-pelnym); }
.przycisk-akcent { background: var(--ochra);    color: var(--na-ochrze); }
.przycisk-cichy  { background: var(--rzeka-tlo); color: var(--rzeka); border-color: transparent; }
.przycisk-obrys  { background: transparent; color: var(--atrament); border-color: var(--linia-mocna); }
/* wariant na ciemnym tle — bez niego obrys ginie w granacie */
.na-ciemnym .przycisk-obrys,
.przycisk-obrys-jasny {
    color: var(--na-nocy); border-color: rgba(247, 244, 236, .5); background: transparent;
}
.na-ciemnym .przycisk-obrys:hover, .przycisk-obrys-jasny:hover {
    background: rgba(247, 244, 236, .12); box-shadow: 4px 4px 0 rgba(0, 0, 0, .22);
}

/* ---------- panel powiadomień ---------------------------------------------- */
.powiadomienia-panel {
    position: absolute; top: 60px; right: 0;
    width: min(410px, calc(100vw - 32px));
    max-height: calc(100vh - 96px); overflow-y: auto;
    background: var(--karta); border: 1.5px solid var(--atrament);
    border-radius: var(--r-3); box-shadow: var(--cien-plyw);
    padding: 22px; display: none; text-align: left; cursor: default;
    z-index: 70;
}
/* Na wąskich ekranach panel kotwiczony do dzwonka wychodziłby poza lewą
   krawędź — na telefonie przypinamy go do okna, nie do przycisku. */
@media (max-width: 680px) {
    .powiadomienia-panel {
        position: fixed; top: 70px; left: 12px; right: 12px; width: auto;
        max-height: calc(100vh - 86px);
    }
}
.powiadomienia-panel.otwarty { display: block; animation: wjazd .28s var(--ease-spring); }
@keyframes wjazd { from { opacity: 0; transform: translateY(-8px); } }
.powiadomienia-gora { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.powiadomienia-gora > div { flex: 1; min-width: 0; }
.powiadomienia-panel h3 {
    font-family: var(--display); font-weight: 700; font-size: 19px;
    color: var(--atrament); margin-bottom: 4px; letter-spacing: -.01em;
}
.powiadomienia-panel .pod { font-size: 13px; color: var(--tekst-2); }
.zamknij-panel {
    flex: 0 0 auto; width: 34px; height: 34px;
    border-radius: var(--r-2); border: 1.5px solid var(--linia-mocna);
    background: var(--papier); color: var(--tekst);
    font-size: 15px; line-height: 1; cursor: pointer;
    transition: background .14s var(--ease-smooth), border-color .14s, color .14s;
}
.zamknij-panel:hover { background: var(--ochra-tlo); border-color: var(--ochra); color: var(--ochra); }
.zamknij-panel:active { transform: scale(.94); }

.pref-grupa { margin-bottom: 14px; }
.pref-grupa > span {
    display: block; margin-bottom: 8px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--tekst-2);
}
.pref-chipy { display: flex; flex-wrap: wrap; gap: 7px; }

/* Lista wszystkich wypożyczalni jest za długa na zawijanie — przewija się
   poziomo, z cieniem przy prawej krawędzi jako sygnałem, że jest dalszy ciąg. */
.pref-chipy.poziomo {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 2px 0 10px; scroll-snap-type: x proximity;
}
/* Maskę zaciemniającą prawą krawędź nakładamy dopiero wtedy, gdy lista naprawdę
   się nie mieści — przy dwóch chipach wygaszałaby widoczną treść bez powodu. */
.pref-chipy.poziomo.przewijalne {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.pref-chipy.poziomo .chip { flex: 0 0 auto; scroll-snap-align: start; }
.pref-chipy.poziomo::-webkit-scrollbar { height: 6px; }
.pref-chipy.poziomo::-webkit-scrollbar-track { background: var(--papier-2); border-radius: var(--r-pill); }
.pref-chipy.poziomo::-webkit-scrollbar-thumb { background: var(--linia-mocna); border-radius: var(--r-pill); }
.pref-chipy.poziomo::-webkit-scrollbar-thumb:hover { background: var(--rzeka); }

/* przycisk dzwonka w katalogu firm — pełna szerokość pod akcją główną */
.kafelek .stopka { flex-wrap: wrap; }
.przycisk-dzwonek { flex: 1 0 100%; }

.chip {
    padding: 6px 13px; border-radius: var(--r-pill);
    font-family: var(--pismo); font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--linia-mocna); background: var(--karta); color: var(--tekst);
    cursor: pointer;
    transition: transform .14s var(--ease-spring), border-color .14s, color .14s, background .14s;
}
.chip:hover  { border-color: var(--rzeka); color: var(--rzeka); transform: translateY(-1px); }
.chip:active { transform: scale(.96); }
.chip.wybrany { background: var(--rzeka); border-color: var(--rzeka); color: var(--na-rzece); }
.chip small { font-family: var(--mono); font-size: 11px; opacity: .8; }

/* Wyszukiwarka miejscowości — 34 pozycje nie mieszczą się jako chipy,
   więc w panelu zostają trzy najpopularniejsze, a resztę dokłada się tu. */
.pref-szukaj { position: relative; margin-top: 9px; }
.pref-szukaj input {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--linia-mocna); border-radius: var(--r-2);
    font-family: var(--pismo); font-size: 13.5px;
    background: var(--karta); color: var(--tekst);
}
.pref-szukaj input::placeholder { color: var(--tekst-2); }

.pref-podpowiedzi {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 5;
    background: var(--karta); border: 1.5px solid var(--atrament);
    border-radius: var(--r-2); box-shadow: var(--cien-plyw);
    overflow: hidden;
}
.pref-podpowiedzi.otwarte { display: block; }
.pref-podpowiedz {
    display: block; width: 100%; text-align: left;
    padding: 9px 13px; border: 0; border-bottom: 1px solid var(--linia-soft, var(--linia));
    background: none; cursor: pointer; font-family: var(--pismo);
}
.pref-podpowiedz:last-child { border-bottom: 0; }
.pref-podpowiedz:hover, .pref-podpowiedz:focus-visible { background: var(--rzeka-tlo); }
.pref-podpowiedz b { display: block; font-size: 13.5px; font-weight: 700; color: var(--atrament); }
.pref-podpowiedz span { font-family: var(--mono); font-size: 10.5px; color: var(--tekst-2); }
.pref-brak { padding: 11px 13px; font-size: 13px; color: var(--tekst-2); }

.pref-pusto {
    font-size: 13px; color: var(--tekst-2); line-height: 1.5;
    background: var(--papier); border: 1px dashed var(--linia-mocna);
    border-radius: var(--r-2); padding: 12px 14px;
}

.powiadomienia-stopka {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--linia);
    position: sticky; bottom: -22px; background: var(--karta);
    padding-bottom: 2px;
}
.powiadomienia-status { font-size: 12.5px; font-weight: 700; }

/* ---------- hero ----------------------------------------------------------- */
.hero {
    padding: 56px 0 34px;
    background-image: var(--poziomice);
    background-repeat: repeat;
    border-bottom: 1px solid var(--linia);
}
.hero-siatka { display: grid; grid-template-columns: 1.28fr .72fr; gap: 48px; align-items: center; }

.hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.03; color: var(--atrament);
    letter-spacing: -.028em; margin-bottom: 18px;
}
.hero h1 em { font-style: italic; color: var(--rzeka); }
/* Nagłówek strony głównej na komputerze: zawsze 4 wyważone linie. Fonty Google dociągają się po
   pierwszym wyrenderowaniu, a czcionka zastępcza łamała ten tekst na 3 albo 4 linie — sekcja mapy
   skakała wtedy o 60 px (CLS 0,16 w PageSpeed). Szerokość w ch rośnie i maleje razem z czcionką,
   więc każda łamie tekst podobnie; 4lh trzyma wysokość, gdyby wąska zastępcza zmieściła się w 3. */
@media (min-width: 1001px) {
    .hero h1.tytul-glowny { max-width: 17ch; text-wrap: balance; min-height: 4lh; }
}
.hero p.zajawka { font-size: 17px; color: var(--tekst-2); max-width: 580px; margin-bottom: 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* liczby: duże szeryfowe cyfry + mono podpisy, rozdzielone włoskiem */
.hero-liczby { display: flex; gap: 0; margin-top: 32px; border-top: 1px solid var(--linia); }
.hero-liczby div { padding: 16px 26px 0 0; margin-right: 26px; border-right: 1px solid var(--linia); }
.hero-liczby div:last-child { border-right: 0; margin-right: 0; }
.hero-liczby div b {
    display: block; font-family: var(--display); font-weight: 700;
    font-size: 32px; line-height: 1.1; color: var(--atrament); letter-spacing: -.02em;
}
.hero-liczby div span {
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--tekst-2);
}

/* ---------- pogoda: „przyrząd pokładowy" ----------------------------------- */
.pogoda-karta {
    background: var(--karta);
    border: 1.5px solid var(--atrament);
    border-radius: var(--r-3);
    box-shadow: var(--cien);
    padding: 22px;
}
.pogoda-karta h2 {
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--tekst-2);
    margin-bottom: 3px;
}
.pogoda-karta .pod { font-size: 12.5px; color: var(--tekst-2); margin-bottom: 16px; }
.pogoda-teraz {
    display: flex; align-items: center; gap: 15px;
    padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--linia);
}
.pogoda-teraz .ikona { font-size: 46px; line-height: 1; flex: 0 0 auto; }
.pogoda-teraz-tresc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pogoda-dzis {
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--rzeka);
}
.pogoda-teraz .temp {
    font-family: var(--display); font-weight: 700; font-size: 44px;
    line-height: .95; color: var(--atrament); letter-spacing: -.03em;
}
.pogoda-teraz .opis { font-size: 13px; color: var(--tekst-2); line-height: 1.45; }
.pogoda-naglowek-dni { margin-bottom: 8px; }
.pogoda-dni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linia); }
.pogoda-dzien { background: var(--karta); padding: 10px 6px; text-align: center; }
.pogoda-dzien .d {
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    color: var(--tekst-2); text-transform: uppercase; letter-spacing: .08em;
}
.pogoda-dzien .i { font-size: 22px; margin: 3px 0; }
.pogoda-dzien .t { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--atrament); }
.pogoda-splyw {
    margin-top: 15px; padding: 10px 13px; border-radius: var(--r-2);
    font-size: 13px; font-weight: 700;
}
.pogoda-splyw.ok  { background: var(--zielen-tlo); color: var(--zielen); }
.pogoda-splyw.meh { background: var(--zloto-tlo);  color: var(--zloto); }

/* ---------- sekcje: numer + szeryf + kreska do końca ----------------------- */
.sekcja { padding: 44px 0; }
.sekcja-naglowek { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sekcja-naglowek h2 {
    font-family: var(--display); font-weight: 700; font-size: 30px;
    color: var(--atrament); letter-spacing: -.025em; line-height: 1.15;
}
.sekcja-naglowek .pod { color: var(--tekst-2); font-size: 14.5px; }
.sekcja-naglowek::after {
    content: ""; flex: 1 1 60px; height: 1px;
    background: var(--linia); align-self: center; min-width: 30px;
}

/* ---------- mapa ----------------------------------------------------------- */
.mapa-oprawa {
    position: relative;
    border: 1.5px solid var(--atrament); border-radius: var(--r-3);
    overflow: hidden; box-shadow: var(--cien);
    background: var(--papier-2);
}
#mapa { width: 100%; height: 660px; }
/* Osadzona „Twoja przestrzeń" na wizytówce firmy — ta sama ramka (.mapa-oprawa)
   i ta sama wysokość co mapa, którą zastąpiła. */
.przestrzen-ramka { display: block; width: 100%; height: 660px; border: 0; background: var(--papier-2); }
/* Osadzenie może zostać zablokowane nagłówkiem serwera firmy (X-Frame-Options
   albo CSP frame-ancestors) — wtedy w ramce jest pusto, bez żadnego komunikatu.
   Ten link jest jedynym wyjściem, jakie zostaje odwiedzającemu. */
.przestrzen-zapas { margin-top: 10px; font-size: 13px; color: var(--tekst-2); }
/* Film YouTube: 16:9 zamiast wysokości mapy; plansza ma te same proporcje, więc kliknięcie nie przesuwa strony. */
.przestrzen-ramka.wideo, .wideo-zaslona { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.wideo-zaslona {
    display: grid; place-items: center; align-content: center; gap: 16px;
    width: 100%; border: 0; padding: 20px; cursor: pointer;
    background: var(--noc); color: var(--na-nocy); font: inherit;
}
.wideo-przycisk {
    display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
    background: var(--ochra); color: var(--na-ochrze);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    transition: transform .18s var(--ease-spring);
}
.wideo-przycisk svg { margin-left: 4px; }   /* trójkąt optycznie na środku koła */
.wideo-zaslona:hover .wideo-przycisk { transform: scale(1.08); }
.wideo-zaslona:focus-visible { outline: 3px solid var(--ochra); outline-offset: -3px; }
.wideo-napis { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.2; text-align: center; }
.wideo-napis small {
    display: block; margin-top: 6px;
    font-family: var(--pismo); font-size: 13px; font-weight: 500; color: var(--na-nocy-2);
}
/* Przy 14 rzekach zawijanie robiło z paska filtrów trzy rzędy zasłaniające
   pół mapy — chipy jadą więc w jednej linii z przewijaniem poziomym. */
.mapa-filtry {
    position: absolute; top: 15px; left: 15px; right: 66px; z-index: 5;
    display: flex; flex-wrap: nowrap; gap: 7px;
    overflow-x: auto; overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.mapa-filtry .chip { flex: 0 0 auto; }
.mapa-filtry::-webkit-scrollbar { height: 5px; }
.mapa-filtry::-webkit-scrollbar-track { background: var(--tor-przewijania); border-radius: var(--r-pill); }
.mapa-filtry::-webkit-scrollbar-thumb { background: var(--linia-mocna); border-radius: var(--r-pill); }
/* Chipy filtra leżą na kafelkach mapy, nie na tle strony, więc mają STAŁE kolory
   niezależne od motywu: białe tło + atrament (16,7:1), hover ciemny turkus (7,4:1).
   Zmienne motywu dawałyby w trybie ciemnym jasny tekst na białym — nieczytelne. */
.mapa-filtry .chip { box-shadow: 2px 2px 0 rgba(16, 34, 46, .14); background: rgba(255, 255, 255, .96); color: #10222E; border-color: #8B8371; }
.mapa-filtry .chip:hover { color: #0B5E70; border-color: #0B5E70; }
/* stan wybrany musi przebić tło powyżej — inaczej biały tekst ląduje na białym */
.mapa-filtry .chip.wybrany { background: var(--rzeka); border-color: var(--rzeka); color: var(--na-rzece); }
.mapa-info {
    position: absolute; left: 15px; bottom: 28px; z-index: 5;
    background: var(--karta); border: 1.5px solid var(--atrament);
    border-radius: var(--r-2); padding: 8px 14px;
    font-family: var(--mono); font-size: 12px; color: var(--tekst);
    box-shadow: 3px 3px 0 rgba(16, 34, 46, .12);
}
.mapa-info b { font-family: var(--display); font-size: 16px; color: var(--atrament); }
.mapa-info:empty { display: none; }
/* Zasłona do czasu wczytania MapLibre (app.js → planujMape). Przycisk jest dla klawiatury
   i czytników ekranu — zwykle mapa rusza sama przy pierwszym ruchu na stronie. */
.mapa-start {
    position: absolute; inset: 0; z-index: 4;
    display: grid; place-items: center;
    background: var(--papier-2); color: var(--tekst-2);
    font-family: var(--mono); font-size: 13px;
}
.mapa-blad {
    position: absolute; inset: 0; display: none; place-items: center;
    background: var(--rzeka-tlo); z-index: 4; text-align: center; padding: 26px;
    color: var(--atrament); font-weight: 600;
}

/* pinezka (element DOM — NIE nadawać jej position: MapLibre pozycjonuje transformacją) */
.pin { border: 0; background: none; cursor: pointer; }
.pin .kropla {
    position: relative;   /* kotwica dla aureoli partnera — UWAGA: nie nadawać
                             position samemu .pin, MapLibre pozycjonuje go transformacją */
    width: 34px; height: 34px; border-radius: 50% 50% 50% 3px;
    transform: rotate(-45deg);
    background: var(--rzeka); border: 2.5px solid var(--papier); color: #FFFFFF;
    box-shadow: 0 3px 9px rgba(16, 34, 46, .38);
    display: grid; place-items: center;
    transition: transform .18s var(--ease-spring);
}
.pin .kropla svg { transform: rotate(45deg); }
.pin:hover .kropla, .pin.aktywny .kropla { transform: rotate(-45deg) scale(1.2); }
.pin:focus-visible .kropla { outline: 2.5px solid var(--ochra); outline-offset: 2px; }
/* --kolor-pinezki i --na-pinezce ustawia app.js, gdy partner wybrał w panelu własny kolor. */
.pin.premium .kropla { background: var(--kolor-pinezki, var(--ochra)); color: var(--na-pinezce, #FFFFFF); }
/* z-index bez position — marker ma już position: absolute z CSS MapLibre.
   Partner nad sąsiadami, żeby ich krople nie zasłaniały jego podpisu; kliknięta najwyżej. */
.pin.premium { z-index: 2; }
.pin.aktywny { z-index: 3; }

/* Pinezka partnera pulsuje delikatną aureolą. Animujemy pseudoelement, a nie
   samą kroplę: kropla ma własny transform (rotate -45°, przy hoverze dodatkowo
   scale) i animacja by go nadpisała. Aureola dziedziczy kształt kropli, więc
   rozchodzi się tą samą sylwetką, a pointer-events: none nie odbiera kliknięć.
   Wyciszenie ruchu załatwia globalna reguła prefers-reduced-motion na końcu
   pliku — przy „ogranicz ruch" aureola zatrzymuje się po pierwszym cyklu. */
.pin.premium .kropla::after {
    content: ""; position: absolute; inset: -5px;
    border-radius: inherit; border: 2px solid var(--kolor-pinezki, var(--ochra));
    pointer-events: none;
    animation: puls-partnera 2.6s var(--ease-smooth) infinite;
}
@keyframes puls-partnera {
    0%       { transform: scale(.82); opacity: .5; }
    65%, 100% { transform: scale(1.4); opacity: 0; }
}
/* Przy „ogranicz ruch" globalna reguła na końcu pliku tylko zatrzymuje
   animację — aureola zastygłaby wtedy w stanie bazowym, czyli pełnym,
   nieprzezroczystym obrysie. Dajemy więc świadomy wariant statyczny:
   partner nadal się wyróżnia, tylko bez ruchu. */
@media (prefers-reduced-motion: reduce) {
    .pin.premium .kropla::after {
        animation: none !important;
        transform: scale(1.14); opacity: .45;
    }
}
.pin .podpis {
    position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
    background: var(--karta); border: 1.5px solid var(--atrament);
    padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap;
    font-size: 11.5px; font-weight: 700; color: var(--atrament);
    box-shadow: 2px 2px 0 rgba(16, 34, 46, .16);
    display: none; pointer-events: none;
}
.pin.z-podpisem .podpis, .pin.aktywny .podpis { display: block; }

/* dymek pinezki */
.dymek {
    position: absolute; z-index: 30;
    width: min(340px, calc(100vw - 40px));
    background: var(--karta); border: 1.5px solid var(--atrament);
    border-radius: var(--r-3); box-shadow: var(--cien-plyw); padding: 20px;
    animation: wjazd .3s var(--ease-spring);
}
.dymek .odznaka-rzeka {
    display: inline-block; padding: 3px 11px; border-radius: var(--r-pill);
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: .05em; margin-bottom: 10px;
}
.dymek h3 {
    font-family: var(--display); font-weight: 700; font-size: 21px;
    color: var(--atrament); margin-bottom: 3px; letter-spacing: -.02em; line-height: 1.15;
}
.dymek .gdzie { font-size: 13px; color: var(--tekst-2); margin-bottom: 11px; }
.dymek .opis { font-size: 13.5px; margin-bottom: 14px; }
.dymek .kontakt {
    display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px;
    padding: 11px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia);
    font-size: 14px;
}
.dymek .kontakt a { text-decoration: none; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.dymek .kontakt a:hover { text-decoration: underline; }
.dymek .akcje { display: flex; gap: 9px; }
.dymek .akcje .przycisk { flex: 1; padding: 10px 12px; font-size: 13.5px; }
.dymek-nota {
    margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--linia);
    font-size: 12.5px; color: var(--tekst-2); line-height: 1.5;
}
.dymek-nota a { font-weight: 700; text-decoration: none; }
.dymek-nota a:hover { text-decoration: underline; }
.dymek .zamknij {
    position: absolute; top: 11px; right: 11px; width: 30px; height: 30px;
    border-radius: var(--r-2); border: 1.5px solid var(--linia-mocna);
    background: var(--papier); color: var(--tekst); font-size: 15px; cursor: pointer;
}
.dymek .zamknij:hover { background: var(--ochra-tlo); border-color: var(--ochra); color: var(--ochra); }

/* ---------- karty firm: „notatka terenowa" --------------------------------- */
.polecane-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kafelek {
    position: relative; background: var(--karta);
    border: 1.5px solid var(--atrament); border-left-width: 5px;
    border-radius: var(--r-3);
    padding: 24px 22px; box-shadow: var(--cien);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-smooth);
    animation: fadeSlideUp .55s var(--ease-spring) backwards;
    animation-delay: calc(var(--index, 0) * 80ms);
}
.kafelek:hover { transform: translate(-3px, -3px); box-shadow: var(--cien-uniesc); }
.kafelek .gwiazdka {
    position: absolute; top: 18px; right: 18px;
    background: var(--zloto-tlo); color: var(--zloto);
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    padding: 4px 10px; border-radius: var(--r-pill);
    text-transform: uppercase; letter-spacing: .08em;
}
.kafelek h3 {
    font-family: var(--display); font-weight: 700; font-size: 21px;
    color: var(--atrament); padding-right: 96px; line-height: 1.15; letter-spacing: -.02em;
}
.kafelek .gdzie { font-size: 13px; color: var(--tekst-2); display: flex; gap: 6px; align-items: center; }
.kafelek .opis { font-size: 14px; flex: 1; }
/* znaczniki atutów — używane i w kafelku, i samodzielnie na wizytówce firmy */
.cechy { display: flex; flex-wrap: wrap; gap: 7px; }
.cechy span {
    background: var(--rzeka-tlo); color: var(--rzeka);
    font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill);
}
.kafelek .stopka {
    display: flex; gap: 9px; margin-top: 8px;
    padding-top: 14px; border-top: 1px solid var(--linia);
}
.kafelek .stopka .przycisk { flex: 1; padding: 10px; font-size: 13.5px; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- galeria firmy: trzy kwadraty w oprawie kafelka ----------------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.galeria-kafel {
    margin: 0; overflow: hidden;
    aspect-ratio: 1 / 1;                     /* kwadrat niezależnie od proporcji pliku */
    background: var(--papier-2);
    border: 1.5px solid var(--atrament); border-left-width: 5px;
    border-radius: var(--r-3); box-shadow: var(--cien);
    transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-smooth);
    animation: fadeSlideUp .55s var(--ease-spring) backwards;
    animation-delay: calc(var(--index, 0) * 80ms);
}
.galeria-kafel:hover { transform: translate(-3px, -3px); box-shadow: var(--cien-uniesc); }
.galeria-kafel img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease-smooth);
}
.galeria-kafel:hover img { transform: scale(1.045); }


@media (max-width: 760px) {
    .galeria { grid-template-columns: 1fr 1fr; gap: 14px; }
    .galeria-kafel:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* ---------- katalogi rzek i miejscowości ----------------------------------- */
.katalog-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.katalog-karta {
    background: var(--karta); border: 1.5px solid var(--linia);
    border-radius: var(--r-2); padding: 17px 19px; text-decoration: none; display: block;
    transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-smooth),
                border-color .18s var(--ease-smooth);
}
.katalog-karta:hover {
    transform: translate(-2px, -2px); box-shadow: var(--cien); border-color: var(--atrament);
}
.katalog-karta b {
    display: block; font-family: var(--display); font-weight: 700;
    color: var(--atrament); font-size: 18px; letter-spacing: -.02em; margin-bottom: 3px;
}
.katalog-karta span { font-size: 13px; color: var(--tekst-2); }
.katalog-karta .licznik { font-family: var(--mono); font-size: 12px; color: var(--rzeka); font-weight: 700; }

/* ---------- pas dla firm --------------------------------------------------- */
.pas-b2b {
    background: var(--noc);
    background-image: var(--poziomice);
    border-radius: var(--r-3); padding: 44px;
    color: var(--na-nocy);
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; align-items: center;
}
.pas-b2b h2 {
    font-family: var(--display); font-weight: 700; font-size: 32px;
    letter-spacing: -.025em; margin-bottom: 12px; line-height: 1.1;
}
.pas-b2b p { color: var(--na-nocy-2); font-size: 15.5px; margin-bottom: 6px; }
.pas-b2b ul { list-style: none; display: grid; gap: 9px; margin-top: 16px; }
/* „kajakipodwarszawa.pl/rzeka/twoja-nazwa" to jeden nieprzerywalny wyraz —
   na wąskim telefonie (320 px) rozpychał całą stronę, zamiast się złamać. */
.pas-b2b li { display: flex; gap: 11px; font-size: 14.5px; align-items: start; overflow-wrap: anywhere; }
.pas-b2b li::before { content: "✓"; color: #7ED4A6; font-weight: 800; }
.pas-b2b .cta { display: flex; flex-direction: column; gap: 11px; align-items: stretch; }
.pas-b2b .cta .przycisk { padding: 14px; font-size: 15px; }
.pas-b2b .cta small { text-align: center; color: var(--na-nocy-2); font-size: 12.5px; }

/* Notka w karcie logowania: „mam już pinezkę, nie mam konta".
   Wyróżniona ochrą, bo to jedyna ścieżka dla właściciela, który widzi swoją
   firmę na mapie, ale nie ma się jak zalogować — musi rzucać się w oczy
   bardziej niż linki nad nią. */
.auth-nota {
    margin-top: 18px; padding: 15px 17px;
    background: var(--ochra-tlo);
    border: 1.5px solid rgb(var(--ochra-rgb) / .32);
    border-left: 4px solid var(--ochra);
    border-radius: var(--r-3);
}
.auth-nota-etykieta {
    display: block; margin-bottom: 6px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ochra);
}
.auth-nota p { font-size: 13.5px; line-height: 1.55; color: var(--tekst); }
.auth-nota a {
    display: inline-block; margin-top: 8px;
    font-family: var(--mono); font-size: 13.5px; font-weight: 700;
    color: var(--ochra); text-decoration: none;
    border-bottom: 1.5px solid rgb(var(--ochra-rgb) / .4);
}
.auth-nota a:hover { border-bottom-color: var(--ochra); }

/* Dwa pytania właściciela firmy — pod ciemnym pasem, na papierze */
.b2b-pytania {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
    margin-top: 18px; padding: 18px 22px;
    background: var(--karta); border: 1.5px solid var(--linia);
    border-radius: var(--r-3);
}
.b2b-pytania p { font-size: 14.5px; color: var(--tekst-2); }
.b2b-pytania a { font-weight: 700; color: var(--rzeka); text-decoration: none; white-space: nowrap; }
.b2b-pytania a:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .b2b-pytania { grid-template-columns: 1fr; }
    .b2b-pytania a { white-space: normal; }
}

/* ---------- treść redakcyjna ------------------------------------------------ */
.tresc { max-width: 720px; }
.tresc h2 {
    font-family: var(--display); font-weight: 700; font-size: 28px;
    color: var(--atrament); letter-spacing: -.025em; margin: 26px 0 10px;
}
.tresc h3 {
    font-family: var(--display); font-weight: 600; font-size: 20px;
    color: var(--atrament); margin: 24px 0 8px;
}
.tresc p { margin-bottom: 12px; font-size: 16px; }
.tresc ul { margin: 0 0 12px 20px; font-size: 16px; }
.tresc a { font-weight: 600; }

/* ---------- baner PWA ------------------------------------------------------- */
.baner-pwa {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
    max-width: 540px; margin: 0 auto;
    background: var(--noc); color: var(--na-nocy);
    border: 1.5px solid var(--atrament); border-radius: var(--r-3);
    padding: 17px 19px; box-shadow: var(--cien-plyw);
    display: none; gap: 15px; align-items: center;
}
.baner-pwa.widoczny { display: flex; animation: fadeSlideUp .45s var(--ease-spring); }
.baner-pwa .tekst { flex: 1; font-size: 13.5px; color: var(--na-nocy-2); }
.baner-pwa .tekst strong { font-weight: 700; color: var(--na-nocy); }
.baner-pwa .tekst li { margin: 4px 0; }
.baner-pwa .tekst > b:first-child {
    display: block; font-family: var(--display); font-weight: 700;
    font-size: 17px; color: var(--na-nocy); letter-spacing: -.015em;
}
.baner-pwa button { white-space: nowrap; }
/* Na telefonie otwarty panel powiadomień sięga do dołu okna — baner nie może go przykrywać. */
body:has(.powiadomienia-panel.otwarty) .baner-pwa { display: none; }
.baner-pwa .x {
    background: none; border: 0; color: var(--na-nocy-2);
    font-size: 19px; cursor: pointer; padding: 4px;
}
.baner-pwa .x:hover { color: var(--na-nocy); }

/* ---------- stopka ---------------------------------------------------------- */
footer.stopka {
    border-top: 1.5px solid var(--atrament); margin-top: 40px;
    padding: 44px 0 34px; background: var(--papier-2);
}
footer.stopka .stopka-siatka { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
footer.stopka h4 {
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--tekst-2); margin-bottom: 12px;
}
footer.stopka a { display: block; color: var(--tekst); text-decoration: none; font-size: 14.5px; padding: 4px 0; }
footer.stopka a:hover { color: var(--rzeka); text-decoration: underline; }
footer.stopka .o-serwisie { font-size: 14px; color: var(--tekst-2); max-width: 330px; }
footer.stopka .stopka-dol {
    margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--linia);
    font-family: var(--mono); font-size: 11.5px; color: var(--tekst-2);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
footer.stopka .stopka-dol a { display: inline; font-family: var(--mono); font-size: 11.5px; }

/* ---------- toast ----------------------------------------------------------- */
.toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(90px);
    background: var(--pelny-tlo); color: var(--na-pelnym);
    padding: 13px 24px; border-radius: var(--r-2);
    box-shadow: var(--cien-plyw); font-size: 14px; font-weight: 700; z-index: 100;
    transition: transform .3s var(--ease-spring); max-width: calc(100vw - 40px); text-align: center;
}
.toast.widoczny { transform: translateX(-50%) translateY(0); }

/* ---------- responsywność --------------------------------------------------- */
@media (max-width: 1000px) {
    .hero-siatka { grid-template-columns: 1fr; gap: 30px; }
    .polecane-siatka { grid-template-columns: 1fr 1fr; }
    .katalog-siatka { grid-template-columns: 1fr 1fr 1fr; }
    .pas-b2b { grid-template-columns: 1fr; }
    footer.stopka .stopka-siatka { grid-template-columns: 1fr 1fr; }
}
/* Nagłówek na telefonie jest na styku: logo + przełącznik + dzwonek + CTA.
   Na 375 px cała zawartość potrzebuje ~460 px, więc zamiast rozpychać stronę
   (poziomy pasek przewijania na CAŁEJ witrynie) przewija się sam pasek nagłówka.
   Kolejność jest świadoma: w spoczynku widać CAŁE logo, przełącznik i dzwonek,
   a „Dla firm" odsłania się po przesunięciu paska — sygnalizuje to cień
   przy prawej krawędzi. */
@media (max-width: 680px) {
    .naglowek .szer { padding: 0 14px; }
    .naglowek-akcje { gap: 8px; }
    .naglowek-akcje .przycisk { white-space: nowrap; }

    .naglowek-wnetrze {
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;     /* przesuwanie paska nie „przeciąga" strony */
    }
    .naglowek-wnetrze::-webkit-scrollbar { display: none; }
    .logo, .naglowek-akcje { flex: 0 0 auto; }
    /* Cień „jest tu jeszcze coś dalej" — leży na nagłówku, a nie w przewijanym
       pasku, więc zostaje przy krawędzi ekranu niezależnie od przesunięcia. */
    .naglowek::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 26px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--naglowek-tlo));
        pointer-events: none;
    }
    /* Rozwijane panele muszą wyjść poza przewijany pasek — inaczej ucięłoby je
       jego overflow. Pozycja liczy się od nagłówka (ma backdrop-filter), czyli
       tam, gdzie dotąd rysował je position: absolute. */
    .motyw-lista, .powiadomienia-panel { position: fixed; top: 70px; right: 14px; }
    .powiadomienia-panel { width: min(410px, calc(100vw - 28px)); }
}

@media (max-width: 680px) {
    .menu { display: none; }
    /* Element siatki ma domyślnie min-width: auto, więc kafelek nie schodził
       poniżej swojej „najwęższej” treści i na 320 px rozpychał całą stronę. */
    .polecane-siatka > *, .katalog-siatka > * { min-width: 0; }
    .naglowek-wnetrze { height: 64px; gap: 12px; }
    .logo-znak { width: 42px; height: 33px; }
    .logo-tekst { font-size: 17px; }
    #mapa, .przestrzen-ramka { height: 76vh; min-height: 450px; }
    .polecane-siatka, .katalog-siatka { grid-template-columns: 1fr; }
    .hero { padding: 32px 0 20px; }
    .hero-liczby { flex-wrap: wrap; }
    .hero-liczby div { padding: 14px 18px 0 0; margin-right: 18px; }
    .pas-b2b { padding: 28px; }
    footer.stopka .stopka-siatka { grid-template-columns: 1fr; }
    .przycisk-glowny.tekst-dluzszy span { display: none; }
}

/* ---------- szacunek dla ustawień ruchu ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   DOKUMENTY — regulamin i polityka prywatności (/regulamin/, /polityka-prywatnosci/)
   Ten sam rytm co sekcje treści, ale węższa kolumna (76 znaków) i spis treści
   w dwóch kolumnach. Żółte pola .uzupelnij to celowo widoczne miejsca do
   uzupełnienia przed publikacją — nic nie zostaje „w środku".
   ============================================================================ */
.dokument { padding: 44px 0 70px; }
.dokument .tresc { max-width: 76ch; }
.dokument h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 44px); letter-spacing: -.025em; line-height: 1.1; color: var(--atrament); margin: 10px 0 8px; }
.dokument .etykieta { margin-bottom: 4px; }
.dokument .meta { font-family: var(--mono); font-size: 12px; color: var(--tekst-2); letter-spacing: .04em; margin-bottom: 28px; }
.dokument h2 { font-family: var(--display); font-size: 23px; color: var(--atrament); margin: 40px 0 10px; letter-spacing: -.015em; padding-top: 18px; border-top: 1px solid var(--linia); }
.dokument h3 { font-size: 16px; color: var(--atrament); margin: 22px 0 6px; }
.dokument p, .dokument li { font-size: 15.5px; line-height: 1.6; color: var(--tekst); }
.dokument p { margin: 0 0 12px; }
.dokument ul, .dokument ol { padding-left: 22px; margin: 0 0 12px; }
.dokument li { margin-bottom: 6px; }
.dokument table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 14px 0; }
.dokument th, .dokument td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--linia); }
.dokument th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.dokument code { font-family: var(--mono); font-size: 13px; background: var(--papier-2); padding: 1px 5px; border-radius: 4px; }
.dokument .spis { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-2); padding: 16px 20px; font-size: 14px; columns: 2; column-gap: 28px; margin: 0 0 8px; }
.dokument .spis a { display: block; padding: 3px 0; text-decoration: none; break-inside: avoid; color: var(--rzeka); }
.dokument .spis a:hover { color: var(--atrament); }
@media (max-width: 640px) { .dokument .spis { columns: 1; } }
.dokument mark.uzupelnij { background: var(--zloto-tlo); color: var(--zloto); padding: 1px 6px; border-radius: 4px; font-weight: 600; outline: 1.5px dashed var(--zloto); }
.dokument .ramka { background: var(--rzeka-tlo); border-left: 3px solid var(--rzeka); padding: 12px 16px; border-radius: 0 var(--r-2) var(--r-2) 0; font-size: 14.5px; margin: 16px 0; color: var(--tekst); }

/* ---------- strona błędu 404 ----------------------------------------------- */
/* Jedna kolumna, wyśrodkowana: 404 nie ma treści pobocznej, którą warto
   stawiać obok, a użytkownik ma tu jedno zadanie — wrócić na główną. */
.blad-404 { border-bottom: 0; padding: 64px 0 72px; }
.blad-404 .szer { max-width: 720px; text-align: center; }
.blad-404 h1 { font-size: clamp(30px, 4.4vw, 48px); }
.blad-404 p.zajawka { margin-left: auto; margin-right: auto; }
.blad-404 .hero-cta { justify-content: center; }

.blad-fotka {
    margin: 40px auto 0;
    max-width: 704px;
    border: 1px solid var(--linia);
    border-radius: var(--r-2);
    box-shadow: var(--cien);
    overflow: hidden;
    line-height: 0;
}
.blad-fotka img { width: 100%; height: auto; }