/* ============================================================
   SZLAK BRDY — główny plik CSS
   Wygląd dopasowany do produkcyjnej strony szlakbrdy.bydgoszcz.pl.

   USTALENIE (2026-07-27): 100% personalizacji wizualnej — kolorów marki,
   przycisków, ramek, stopki, linków itd. — robimy TUTAJ, w CSS, NIE przez
   SCSS bootstrap-package/settings.yaml. `settings.yaml` tego Setu już nie
   ustawia żadnych kolorów (plugin.bootstrap_package.settings.scss.* usunięte),
   bootstrap-package kompiluje swój własny, stonowany domyślny motyw, a poniższe
   reguły nadpisują dokładnie te miejsca, w których ten domyślny motyw "wypieka"
   na sztywno swój kolor (przyciski, ramki tła, stopka, subnav) zamiast czytać
   zmienną CSS. Powód zmiany: edycja pliku CSS przez FTP/Plesk File Manager nie
   wymaga cyklu composer/cache jak zmiana ustawień Setu, więc jest szybsza
   w codziennej pracy — a strona ma jeszcze sporo poprawek przed sobą.

   Blok "ZMIENNE MARKI" niżej to jedyne źródło prawdy o kolorach tego serwisu
   i jednocześnie gotowy szablon do skopiowania (razem z sekcją "KOLORY MARKI")
   do analogicznego pliku CSS każdego z pozostałych 8 serwisów, gdy przyjdzie
   na nie kolej — wzorowane na strukturze custom-online.css (ten sam katalog,
   referencyjny przykład stylu z new.online.com.pl).

   Edytuj bezpośrednio przez FTP/Plesk File Manager.
   Po zapisaniu wyczyść cache TYPO3: Admin Tools → Maintenance → Flush Cache
   ============================================================ */

/* ===== ZMIENNE MARKI (jedyne źródło prawdy o kolorach tego serwisu) =====
   Paleta "odświeżenie 2026-07-27" dostarczona przez użytkownika (ciemny
   morski teal jako primary + ciepły piaskowy akcent) — zastępuje poprzednią
   jasną zieleń dopasowaną do starej produkcji.

   PEŁNA PALETA dostarczona przez użytkownika (2026-07-27, potwierdzona
   ponownie 2026-08-03) - zapisana w CAŁOŚCI, także kolory jeszcze NIE
   użyte nigdzie w CSS (success/danger), żeby nie zgubić ich drugi raz:
   $primary: 07373e   $secondary: 2b716d   $tertiary: e9ae75  $quaternary: a85d14
   $default: 1f1f1f   $success:  08c2ae   $info: 5ce2e7      $warning: f89b09
   $danger:  e0130b   $lighter:  dbe6e7   $light: afc4c7
   $dark:    03252a   $darker:   021a1d
   ($info użyty w main.css sekcja 10, tło baneru cookieconsent - jedyny
   dotąd użyty z "nieużywanej" czwórki success/info/warning/danger). */
:root {
    /* Font serwisu (self-hosted, patrz fonts-local.css) - szlakbrdy = domyślny,
       pozostałe serwisy nadpisują tę zmienną literalnie w <site>-theme.css */
    --bs-font-sans-serif: 'Source Sans Pro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --site-primary:         #07373e; /* $primary  - tła: przyciski, ramki nagłówków */
    --site-primary-hover:   #03252a; /* $dark     - hover/ciemniejszy stopień gradientu */
    --site-primary-active:  #021a1d; /* $darker   - stan aktywny/wciśnięty */
    --site-secondary:       #2b716d; /* $secondary - akcenty, aktywne pozycje menu */
    --site-secondary-rgb:   43, 113, 109; /* jw., do rgba() w poświatach fokusu */
    --site-text:            #1f1f1f; /* $default  - tekst treści */
    --site-dark:            #03252a; /* $dark     - tło górnej stopki */
    --site-footer-meta:     #021a1d; /* $darker   - tło dolnego paska stopki */
    --site-accent:          #e9ae75; /* $tertiary  - ciepły akcent, do drobnych detali */
    --site-accent-rgb:      233, 174, 117; /* jw., do rgba() w poświacie scroll-top */
    --site-accent-dark:     #a85d14; /* $quaternary - ciemniejszy wariant akcentu */
    --site-lighter:         #dbe6e7; /* $lighter  - tło paska nawigacji */
    --site-light:           #afc4c7; /* $light    - dolna linia paska nawigacji */
    --site-darker:          #021a1d; /* $darker   - tło dolnego paska stopki (ta sama wartość co --site-footer-meta) */
    --site-warning:         #f89b09; /* $warning  - podkreślenie najechanego linku w menu */

    /* Spójne zaokrąglenie narożników w całym serwisie — jedna zmienna Bootstrapa
       zamiana z domyślnych .375rem na trochę bardziej "miękki", nowoczesny promień;
       konsumowana automatycznie przez przyciski, pola formularzy, dropdowny itd. */
    --bs-border-radius: .5rem;

    /* nadpisania zmiennych CSS bootstrap-package, których jego komponenty
       faktycznie SŁUCHAJĄ (linki <a>, podświetlenie aktywnej pozycji w menu
       głównym, tekst strony) — reszta komponentów ma kolor "wypieczony" na
       sztywno przy kompilacji SCSS, więc jest nadpisywana per-selektor niżej */
    --bs-primary:               var(--site-primary);
    --bs-primary-rgb:           7, 55, 62;
    /* Linki w treści: kolor primary na stałe (bez zmiany na hover) — ten
       sam wzorzec co reszta serwisu (menu, wiersze tabeli): tekst zostaje,
       tylko dochodzi animowany akcent w warning (patrz reguła podkreślenia
       niżej, sekcja "ODŚWIEŻENIE WYGLĄDU"). --site-secondary/-hover nadal
       używane gdzie indziej (przyciski, akcenty menu) — bez zmian. */
    --bs-link-color:            var(--site-primary);
    --bs-link-color-rgb:        7, 55, 62;
    --bs-link-hover-color:      var(--site-primary);
    --bs-link-hover-color-rgb:  7, 55, 62;
    --bs-body-color:            var(--site-text);
    --mainnavigation-hightlight: var(--site-secondary);
}


/* ============================================================
   0. KOLORY MARKI — komponenty, które bootstrap-package "wypieka"
      na sztywno przy kompilacji SCSS (nie czytają zmiennej --bs-primary
      w locie), więc trzeba je nadpisać wprost, per komponent.
   ============================================================ */

/* przyciski — gradient secondary→primary, na hover pogłębiony do primary→dark */
.btn-primary,
.frame-type-felogin_login input[type=submit] {
    --bs-btn-color:               #ffffff;
    --bs-btn-bg:                  var(--site-primary);
    --bs-btn-border-color:        var(--site-primary);
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-hover-bg:            var(--site-primary-hover);
    --bs-btn-hover-border-color:  var(--site-primary-hover);
    --bs-btn-active-bg:           var(--site-primary-active);
    --bs-btn-active-border-color: var(--site-primary-active);
    --bs-btn-focus-shadow-rgb:    7, 55, 62;
    background-image: linear-gradient(135deg, var(--site-secondary), var(--site-primary));
    border: none;
    box-shadow: 0 2px 8px rgba(3, 37, 42, .25);
    transition: box-shadow .2s ease, transform .2s ease, background-image .2s ease;
}

.btn-primary:hover,
.frame-type-felogin_login input[type=submit]:hover {
    background-image: linear-gradient(135deg, var(--site-primary), var(--site-primary-hover));
    box-shadow: 0 4px 14px rgba(3, 37, 42, .35);
    transform: translateY(-1px);
}

.btn-outline-primary {
    --bs-btn-color:               var(--site-secondary);
    --bs-btn-border-color:        var(--site-secondary);
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-hover-bg:            var(--site-secondary);
    --bs-btn-hover-border-color:  var(--site-secondary);
}

/* tła ramek (pole "Ramka" → kolor tła elementu treści) — gradient dla głębi.
   Wariant "ciemny środek" (na życzenie użytkownika, 2026-08-09 - zasada
   ujednolicona jako reguła dla WSZYSTKICH serwisów, TE SAME dwa kolory co
   poprzednio - secondary/primary - tylko inny układ): ciemniejszy z pary
   (primary) na środku, jaśniejszy (secondary) rozchodzący się na boki,
   poziomo (90deg) - zamiast poprzedniego, kierunkowego (135deg) gradientu. */
.frame-background-primary {
    --frame-color:            #ffffff;
    --frame-background:       var(--site-primary);
    --frame-link-color:       #ffffff;
    --frame-link-hover-color: #ffffff;
    background-image: linear-gradient(90deg, var(--site-secondary) 0%, var(--site-primary) 50%, var(--site-secondary) 100%);
}

.frame-background-dark {
    --frame-color:            #ffffff;
    --frame-background:       var(--site-dark);
    --frame-link-color:       var(--site-primary);
    --frame-link-hover-color: var(--site-primary-hover);
}

.frame-background-light {
    --frame-color:            var(--site-dark);
    --frame-background:       #f8f9fa;
    --frame-link-color:       var(--site-primary);
    --frame-link-hover-color: var(--site-primary-hover);
}

/* Ramka tła elementu treści (pole "Ramka" → kolor tła, dowolny wariant
   OPRÓCZ "none") — spójny język wizualny z resztą "kart" w serwisie
   (galeria, tekst-ikona): zaokrąglone narożniki, delikatna neutralna
   ramka (ten sam odcień co ramka kart galerii), bez efektu hover,
   niewielki odstęp od sąsiednich elementów. Dotyczy WSZYSTKICH 6 wariantów
   koloru (nie tylko primary/dark/light nadpisanych wyżej), na wszystkich
   serwisach naraz (main.css, bez zmian per-site).
   Scoped do #page-content (kolumny 0/8/9, wewnątrz <main>) - WYŁĄCZA
   pełnoszerokościowe banery tytułowe stron (colPos=3, sekcja "Border" w
   layoucie bootstrap-package, renderowana PRZED <main>, poza nim) - tam
   zaokrąglenie/ramka/odstęp nie pasują do zamierzonego, pełnoszerokiego
   wyglądu "flush" pod paskiem menu (na życzenie użytkownika, 2026-08-09). */
#page-content .frame-background-primary,
#page-content .frame-background-secondary,
#page-content .frame-background-tertiary,
#page-content .frame-background-quaternary,
#page-content .frame-background-light,
#page-content .frame-background-dark {
    border-radius: var(--bs-border-radius);
    border: 1px solid rgba(3, 37, 42, .12);
    margin-top: .75rem;
    margin-bottom: .75rem;
}

/* stopka górna (linki, cała treść) — linki w kolorze akcentu, NIE primary:
   primary jest tak ciemny, że na ciemnym tle stopki byłby praktycznie
   niewidoczny (ciemne na ciemnym). */
.footer-section-content {
    /* ten sam kąt co gradient nagłówków (135°), ale z jaśniejszym środkiem
       (secondary) i ciemnymi krawędziami (dark) zamiast płaskiego dwustopniowego */
    background: linear-gradient(135deg, var(--site-dark) 0%, var(--site-primary) 50%, var(--site-dark) 100%) !important;
    --frame-color:             #ffffff;
    --frame-background:        var(--site-dark);
    --frame-link-color:        var(--site-accent);
    --frame-link-hover-color:  #ffffff;
}

/* przycisk "do góry" — stały kolor to dotychczasowy hover (primary),
   hover to akcent (--site-accent, $tertiary). Kolor ikony na hover
   przełączony na ciemny (primary) — biała ikona na jasnym piaskowym
   tle byłaby słabo czytelna. */
.scroll-top {
    --scrolltop-bg: var(--site-primary);
    --scrolltop-hover-bg: var(--site-accent);
    --scrolltop-hover-color: var(--site-primary);
    transition: background-color .3s ease-in-out, color .3s ease-in-out, transform .25s ease, box-shadow .25s ease;
}

/* Uniesienie + poświata w kolorze akcentu na hover, ten sam charakter
   co unoszenie kart tekst-ikona/galerii — tylko przeniesiony na
   okrągły przycisk, w umiarkowanym zakresie (1.08), żeby przycisk
   przypięty do rogu ekranu nie wyglądał na "nerwowy". */
.scroll-top:hover,
.scroll-top:focus {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(var(--site-accent-rgb), .55);
}

.scroll-top .scroll-top-icon {
    transition: transform .25s ease;
}

.scroll-top:hover .scroll-top-icon,
.scroll-top:focus .scroll-top-icon {
    /* rotate(45deg) to baza kształtu strzałki (theme) — trzeba go
       zachować w tym samym transform, inaczej podbicie nadpisałoby
       obrót i ikona straciłaby kształt */
    transform: rotate(45deg) translateY(-3px);
}

/* Ikony w modułach "Tekst i ikona" — dotychczas kolor tła kółka był zapisany
   na sztywno (inline style) per element treści, z poprzedniej, zielonej
   palety. Nadpisujemy !important, żeby wszystkie ikony spójnie używały
   nowego zestawu barw niezależnie od tego, co ma w sobie rekord. */
.texticon-inner-icon {
    background-image: linear-gradient(135deg, var(--site-secondary), var(--site-primary)) !important;
    background-color: var(--site-primary) !important;
    color: #ffffff !important;
}


/* ============================================================
   0b. PASEK NAWIGACJI — nowe tło, tekst, dolna linia, podkreślenie hover
   ============================================================
   Dotyczy TYLKO stanów z pełnym tłem (.navbar-default na podstronach,
   .navbar-transition na stronie głównej po scrollu) — stan przezroczysty
   na starcie strony głównej (na tle karuzeli, biały tekst) zostaje bez zmian,
   bo ma osobne, bardziej specyficzne reguły w bootstrap-package. */

.navbar-mainnavigation {
    /* tło paska w stanie "solid" — .navbar-default/.navbar-transition czytają
       kolor przez rgba(var(--bs-white-rgb), var(--bs-bg-opacity)), więc
       wystarczy podmienić samą zmienną RGB zamiast walczyć z !important */
    --bs-white-rgb: 219, 230, 231;
    /* tekst i ikony linków menu w stanie "solid" — transparentny stan
       ma WŁASne, bardziej specyficzne nadpisanie na biało, więc to tutaj
       go nie dotyczy */
    --bs-navbar-color:        var(--site-primary);
    --bs-navbar-hover-color:  var(--site-primary);
    --bs-navbar-active-color: var(--site-primary);
}

.navbar-default,
.navbar-mainnavigation.navbar-transition {
    border-bottom: 1.5px solid var(--site-light);
}

/* Podkreślenie najechanej pozycji menu — grubsze, w kolorze warning,
   animacja "wysuwania" (scaleX) zamiast domyślnego zanikania opacity,
   ten sam charakter co animowane podkreślenie linków w treści. */
.navbar-mainnavigation .nav-link.nav-link-main:before {
    height: 3px;
    background: var(--site-warning);
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.navbar-mainnavigation .nav-link.nav-link-main:hover:before,
.navbar-mainnavigation .nav-link.nav-link-main:focus-visible:before {
    opacity: 1;
    transform: scaleX(1);
}


/* ============================================================
   1. NAWIGACJA — drobne uzupełnienia, których SCSS nie obejmuje
   ============================================================ */

/* Logo skaluje się razem z paskiem przy scrollowaniu (BP używa --mainnavigation-nav-height) */
.navbar-mainnavigation .navbar-brand-image img {
    max-height: calc(var(--mainnavigation-nav-height) * 0.45); /* +12.5% względem poprzednich 0.40 */
    transition: max-height 0.27s cubic-bezier(0, 0, 0.58, 1);
}

/* Ikony logowania / wyszukiwania dodane w MainAfter.html — kolor jak standardowy
   Bootstrap "navbar-light" (taki sam odcień jak reszta ikon/togglera w jasnym pasku).
   Na stronie głównej (navbar-default-transition) białe dopóki nie przewinięto -
   te same selektory co bootstrap-package używa dla .nav-link (patrz theme.css:
   ".navbar-default-transition:not(.navbar-transition) .navbar-nav>li>.nav-link"),
   więc zachowanie jest identyczne i tak samo niezawodne (czysty CSS, bez JS-timingu). */
/* height:var(--mainnavigation-link-height) - ten sam trik co .navbar-brand w
   bootstrap-package (vendor bootstrap5-theme.css) do wyrównania w pionie z
   resztą paska: .navbar-mainnavigation ma padding-top/bottom wyliczony tak,
   żeby WYŚRODKOWAĆ wiersz o wysokości dokładnie --mainnavigation-link-height
   (wysokość zwykłego .nav-link z jego padding-y). Bez wymuszenia tej samej
   wysokości nasz <a> (bez paddingu, sama ikona 20-21px) był niższy niż
   .nav-link i "pływał" wyżej/niżej niż reszta pozycji menu (zgłoszenie
   2026-08-12: ikony Szukaj/Logowanie nie w jednej linii z resztą). */
a.nav-login-icon,
a.nav-search-icon {
    color: var(--site-primary);
    display: flex;
    align-items: center;
    height: var(--mainnavigation-link-height);
    gap: 0.6rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

a.nav-login-icon {
    margin-left: 1.5rem;
}

a.nav-search-icon {
    margin-left: 1rem;
}

a.nav-login-icon:hover,
a.nav-search-icon:hover {
    color: rgba(0, 0, 0, .9);
}

/* display:contents na .nav-icon-svg - usuwa ten span z drzewa renderowania
   jako osobny box, więc <svg> w środku staje się BEZPOŚREDNIM elementem flex
   kotwicy (a.nav-login-icon/nav-search-icon), centrowanym JEDNYM poziomem
   align-items:center zamiast DWOMA zagnieżdżonymi flexami (a > span > svg).
   Zmierzone realnie w przeglądarce użytkownika (2026-08-12, konsola DevTools,
   getBoundingClientRect): podwójne zagnieżdżenie flex dawało ~2px błędu
   zaokrąglenia przy centrowaniu (niewidoczne w headless Chrome testowym, ale
   realne u użytkownika) - jeden poziom flex eliminuje tę niepewność całkowicie. */
a.nav-login-icon .nav-icon-svg,
a.nav-search-icon .nav-icon-svg {
    display: contents;
}

a.nav-login-icon svg,
a.nav-search-icon svg,
a.nav-login-icon img,
a.nav-search-icon img {
    display: block;
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
}

/* Etykieta tekstowa "Logowanie"/"Szukaj" (MainAfter.html) - ukryta na desktopie,
   zostaje sama ikona jak dotychczas. Na telefonie (patrz media query niżej,
   ~767.98px) pokazuje się OBOK ikony (nie zamiast niej), tak jak zwykłe
   pozycje menu (ikona + tekst). */
.nav-icon-label {
    display: none;
}

/* Rozwijane pole wyszukiwania (2026-08-13, MainAfter.html) - dropdown
   Bootstrapa (data-bs-toggle="dropdown" na a.nav-search-icon), ten sam
   mechanizm .dropdown-menu.show co mega-menu (reguła bazowa
   .navbar-mainnavigation .dropdown-menu w sekcji dropdownów niżej w tym
   pliku daje białe tło/ramkę/cień/padding - tu tylko layout formularza
   w środku). Celowo BEZ klasy nav-style-simple/nav-style-mega, więc na
   desktopie otwiera się WYŁĄCZNIE po kliknięciu (nie po najechaniu myszką
   jak zwykłe pozycje menu) - to pole do wpisania frazy, nie lista linków. */
.nav-search-dropdown {
    min-width: 280px;
}

.nav-search-form {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    padding: 0 .9rem;
}

.nav-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    padding: .45rem .7rem;
    font-size: .95rem;
    color: var(--site-text);
}

.nav-search-input:focus {
    outline: none;
    border-color: var(--site-primary);
    box-shadow: 0 0 0 .15rem var(--site-lighter);
}

.nav-search-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    border: none;
    border-radius: var(--bs-border-radius);
    background: var(--site-primary);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}

.nav-search-submit:hover,
.nav-search-submit:focus {
    background: var(--site-primary-hover);
}

.nav-search-submit svg {
    display: block;
    width: 16px;
    height: 16px;
}

.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon {
    color: rgba(255, 255, 255, .9);
}

.navbar-default-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon:hover,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon:hover {
    color: #fff;
}

/* Cień pod białym menu na przezroczystym pasku strony głównej — ZAMIAST
   przyciemniania samego zdjęcia (patrz próba niżej w sekcji 1c, usunięta:
   każdy gradient-do-zera na jasnym/gładkim zdjęciu tworzy widoczne pasmo
   "Mach band", niezależnie jak łagodna krzywa). Cień działa niezawodnie
   na DOWOLNYM tle (jasnym czy ciemnym), bo nie zależy od jasności zdjęcia
   wgranego przez edytora — rozwiązuje realną potrzebę (czytelność) bez
   ryzyka artefaktu. */
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link,
.navbar-inverse-transition:not(.navbar-transition) .navbar-nav > li > .nav-link {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 1px 10px rgba(0, 0, 0, .5);
}

.navbar-default-transition:not(.navbar-transition) .navbar-brand-image img,
.navbar-inverse-transition:not(.navbar-transition) .navbar-brand-image img,
.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-default-transition:not(.navbar-transition) .navbar-toggler,
.navbar-inverse-transition:not(.navbar-transition) .navbar-toggler {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
}

/* Bug znaleziony 2026-08-02 (zgłoszenie: biały pasek u góry strony głównej
   przy 1280x1024): bootstrap-package zakłada w SCSS ($navbar-heights), że
   pasek menu ma DOKŁADNIE 110px wysokości w zakresie 1200-1399px (xl) — na
   tym założeniu opiera się trik ".carousel{margin-top:-110px}" (podciąga
   karuzelę pod przezroczysty pasek na stronie głównej, patrz sekcja 1b).
   Przy 6 pozycjach menu głównego szlakbrdy z długimi etykietami ("Władze i
   dokumenty", "Koła, kluby, komisje") tekst w tym zakresie szerokości nie
   mieści się w jednej linii (brakuje ok. 5-6px), więc pasek realnie ma
   ~133px — 23px różnicy odsłania białe tło strony NAD paskiem (bo pasek
   jest przezroczysty, ale karuzela za nim zaczyna się o te 23px za nisko).
   Zweryfikowane renderem headless (Playwright) w całym zakresie 1200-1399px.
   Fix (na życzenie użytkownika, wariant 2 — zamiast zmniejszać czcionkę):
   TYLKO w tym zakresie chowamy ikonki przy pozycjach menu i ściągamy
   odstępy/padding, tekst zostaje w oryginalnym rozmiarze — odzyskana w ten
   sposób szerokość wystarcza, żeby żadna etykieta się nie łamała, więc
   pasek wraca do założonych 110px bez ruszania triku karuzeli.

   2026-08-12 (zgłoszenie): rozszerzone w dół do 992px (poprzednio osobna
   reguła 992-1199px wymuszała tu hamburger, "bo nie ma miejsca na poziome
   menu" - ale to samo rozwiązanie co wyżej (bez ikon, węższe odstępy)
   wystarcza też w tym zakresie, więc tablet w poziomie (1024x768) dostaje
   teraz normalny poziomy pasek zamiast hamburgera, tak jak desktop. Stara
   reguła wymuszająca hamburger USUNIĘTA. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-mainnavigation {
        --mainnavigation-nav-spacing-x: .4em;
        --mainnavigation-link-padding-x: .4em;
    }

    .navbar-mainnavigation .nav-link-icon {
        display: none;
    }
}

/* 992-1199.98px jest WĘŻSZY niż 1200-1399.98px (i --mainnavigation-nav-height
   tu wynosi 100px, nie 110px) - same odstępy .4em z bloku wyżej NIE
   wystarczały, dwie najdłuższe etykiety szlakbrdy ("Władze i dokumenty",
   "Koła, kluby, komisje") dalej łamały się na 2 linie, pasek realnie miał
   123px zamiast założonych 100px -> wracał biały pasek nad karuzelą (ten sam
   mechanizm bugu co wyżej, patrz komentarz 2026-08-02). Dodatkowe ściągnięcie
   odstępów TYLKO w tym węższym podzakresie (zmierzone Playwright: .25em
   wystarcza, wraca dokładnie do 100px) - bez ruszania czcionki, ani zakresu
   1200-1399.98px (tam .4em już działało poprawnie, zostaje bez zmian). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-mainnavigation {
        --mainnavigation-nav-spacing-x: .25em;
        --mainnavigation-link-padding-x: .25em;
    }
}

/* Cień/podświetlenie (text-shadow, filter:drop-shadow) z bloku wyżej (linie
   ~336-357) istnieje TYLKO po to, by tekst i ikony menu były czytelne na
   PRZEZROCZYSTYM pasku na tle dowolnego zdjęcia karuzeli (desktop, stan przed
   scrollem). Na telefonie ten sam pasek/panel prędzej czy później ma
   NIEPRZEZROCZYSTE tło (sam pasek po scrollu — patrz --bs-bg-opacity niżej —
   albo rozwinięty panel menu), więc cień/podświetlenie nigdzie tam nie pełni
   swojej funkcji, tylko szkodzi czytelności (rozmyte, "brudne" krawędzie
   tekstu i ikon). 2026-08-12: zamiast punktowo domykać listę selektorów
   (.nav-link-icon, potem .navbar-toggler, potem znowu coś przeoczonego -
   .nav-login-icon/.nav-search-icon też miały ten problem) - JEDNA reguła
   zerująca oba efekty dla WSZYSTKICH elementów paska na tej szerokości,
   z !important (konieczne, bo część reguł źródłowych ma wyższą specyficzność
   - patrz poprzednia wersja tego komentarza w historii pliku).
   2026-08-12: rozszerzone z 767.98px do 991.98px - tablet w pionie (768x1024)
   ma dokładnie tę samą kolumnową listę menu (hamburger) co telefon, więc
   powinien dostawać te same poprawki czytelności/wyrównania ikon. Realny
   przełącznik hamburger/poziomy pasek jest przy 992px (patrz
   vendor bootstrap5-theme.css ".navbar-mainnavigation .navbar-collapse"),
   więc 991.98px to górna granica trybu mobilnego w całym tym pliku. */
@media (max-width: 991.98px) {
    .navbar-mainnavigation .navbar-nav > li > .nav-link,
    .navbar-mainnavigation .navbar-brand-image img,
    .navbar-mainnavigation a.nav-login-icon,
    .navbar-mainnavigation a.nav-search-icon,
    .navbar-mainnavigation .navbar-toggler,
    .navbar-mainnavigation .nav-link-icon,
    .navbar-mainnavigation .nav-link-icon svg {
        text-shadow: none !important;
        filter: none !important;
    }

    /* Zgłoszenie 2026-08-12 (Przewodnicy): "tło paska robi się białe, a po
       scrollu dostaje kolor". Przyczyna: na tej szerokości pasek NIGDY
       naprawdę nie jest przezroczysty na zdjęciu karuzeli (efekt "hero" z
       linii ~336 wyżej realnie działa tylko na desktopie) - .navbar-mainnavigation
       ma zawsze pełne, jednolite tło z --bs-white-rgb (per-site, tu #FAFAFA -
       patrz <site>-theme.css), TYLKO opacity różni się: 1 przed scrollem,
       .92 po (.navbar-transition, linia ~816/przewodnicy-theme.css:685) +
       backdrop-filter:blur(10px) (linia ~812). Te 8% przezroczystości + blur
       przepuszczają nikły odcień tła spod paska (np. ciemnozielona stopka) -
       na jasnym #FAFAFA Przewodników widać to jako "zabrudzenie"/zmianę
       koloru. Na telefonie ten "szklany" efekt i tak nie ma czego imitować
       (tło pod paskiem nie jest już zdjęciem karuzeli w tym momencie scrolla),
       więc wymuszamy pełną nieprzezroczystość - pasek zostaje wizualnie
       identyczny przed i po scrollu. */
    .navbar-mainnavigation {
        --bs-bg-opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Zgłoszenie 2026-08-12: gołe ikony Szukaj/Logowanie (MainAfter.html) na
       dole rozwiniętego panelu menu telefonu źle wyglądały obok zwykłych
       tekstowych pozycji menu wyżej (brak kontekstu bez podpisu) - pierwotny
       fix chował ikonę i zostawiał sam tekst. Od 2026-08-12 (kontynuacja,
       ikony Szukaj/Logowanie zaczęły też czytać "Icon Set" strony jak zwykłe
       pozycje menu, patrz MainAfter.html) pokazujemy OBOK SIEBIE ikonę i
       tekst na telefonie, tak jak zwykłe pozycje menu (nav-link-icon +
       nav-link-text) - spójny wygląd, ikona ma teraz kontekst (podpis obok),
       więc powód pierwotnego chowania już nie dotyczy. Reguła bazowa
       .nav-icon-label{display:none} (linia ~327) jest dla desktopu (tam
       zostaje sama ikona, bez podpisu, jak dotychczas). */
    .navbar-mainnavigation .nav-icon-label {
        display: inline;
    }

    /* Zgłoszenie 2026-08-12 (wyrównanie): dopasowanie do .nav-link zwykłych
       pozycji menu (padding-left:12px per bootstrap-package) - wcześniejsze
       `padding: .5rem 0` zerowało padding-left, więc "Szukaj"/"Logowanie"
       zaczynały się 12px bardziej na lewo niż np. "O klubie" nad nimi. */
    .navbar-mainnavigation a.nav-login-icon,
    .navbar-mainnavigation a.nav-search-icon {
        margin-left: 0;
        padding: .5rem .75rem;
    }

    /* Zgłoszenie 2026-08-12 (szlakbrdy/trawers/okk/przewodnicy): napisy
       "Szukaj"/"Logowanie" białe i niewidoczne. Przyczyna: linia ~322-327
       (`.navbar-default-transition:not(.navbar-transition) a.nav-login-icon`
       itd.) wymusza biały kolor tekstu/ikon dla stanu "hero" na desktopie
       (czytelność na zdjęciu karuzeli) - na telefonie ten sam stan
       ":not(.navbar-transition)" trwa dopóki się nie przewinie, NIEZALEŻNIE
       od tego czy panel menu jest akurat otwarty (panel ma już wtedy
       nieprzezroczyste, jasne tło - patrz reguła --bs-bg-opacity wyżej), więc
       biały tekst ginie na jasnym tle panelu. Wcześniej to samo dotyczyło
       ikon SVG (fill="currentColor"), tylko mniej rzucało się w oczy niż
       pełny biały napis. Kolor `--bs-navbar-color` (nie `--site-primary`
       bezpośrednio!) - to ta sama zmienna, której realnie używa .nav-link
       (linia ~249), inaczej odcień się nie zgadza (sprawdzone: --site-primary
       samo w sobie dawało WIDOCZNIE inny kolor niż reszta pozycji menu). */
    .navbar-mainnavigation a.nav-login-icon,
    .navbar-mainnavigation a.nav-search-icon {
        color: var(--bs-navbar-color) !important;
    }
}


/* ============================================================
   1c. NAGŁÓWKI KARUZELI (Border/Header Media) — białe i pogrubione
   ============================================================
   Produkcja ustawia kolor nagłówka karuzeli inline (style="color:#FFFFFF"
   na otaczającym divie .valign) per slajd. Nowsza wersja bootstrap-package
   w tym projekcie nie generuje już tego wrappera/inline stylu wcale
   (uproszczona struktura karuzeli), więc domyślnie tekst wychodził ciemny
   i nieczytelny na zdjęciu w tle. Odtworzone jako stały, globalny styl. */

.carousel-header,
.carousel-subheader {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}

/* Bootstrap5 nadaje h1/h2 karuzeli dodatkową klasę "awesome" (efekt
   "display heading"), skompilowaną jako "h1.awesome{font-weight:300}"
   (specyficzność 0,1,1) - PRZEBIJA powyższą regułę ".carousel-header
   {font-weight:700}" (specyficzność 0,1,0), więc pogrubienie w
   praktyce nigdy nie działało. Fix: to samo, ale zaczepione o rodzica
   (.carousel-text-inner), specyficzność 0,2,0 - wygrywa niezależnie
   od kolejności w kaskadzie, bez potrzeby !important. */
.carousel-text-inner .carousel-header,
.carousel-text-inner .carousel-subheader {
    font-weight: 700;
}

/* Gradienty (dolny i próba górnego) na zdjęciu karuzeli USUNIĘTE na życzenie
   użytkownika (2026-08-01) — czytelność menu na stronie głównej zapewnia
   text-shadow/drop-shadow na samym tekście/ikonach, patrz sekcja 1b wyżej,
   niezależnie od zdjęcia w tle. */
.carousel-content {
    position: relative;
}

.carousel-content-inner {
    position: relative;
    z-index: 1;
}


/* ============================================================
   1d. ELEMENT TREŚCI "TYLKO NAGŁÓWEK" (CType=header) — białe, pogrubione
   ============================================================
   Ten typ elementu w bootstrap-package zawsze renderuje się z kolorowym
   tłem (frame-background-primary, zielone), więc potrzebuje białego,
   pogrubionego tekstu żeby był czytelny - w przeciwieństwie do zwykłych
   nagłówków innych elementów (texticon itp.), które mają jasne tło i
   muszą zostać przy domyślnym ciemnym kolorze. */

.frame-type-header .element-header {
    color: #fff;
    font-weight: 700;
}

.frame-type-header .element-subheader {
    color: #fff;
    font-weight: 400;
}


/* ============================================================
   1e. MENU BOCZNE (subnav) — stylistyka "karty", jak zakładki (tabs):
   biały panel z ramką/cieniem, aktywna/najechana pozycja podświetlona
   tłem + kolorowy pasek z boku zamiast domyślnego trójkąta.
   ============================================================ */

.subnav-nav {
    background: #ffffff;
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}

.subnav-item + .subnav-item {
    border-top: 1px solid var(--site-light);
}

.subnav-link {
    border: none !important;
    padding: .65rem 1rem;
    color: var(--site-primary);
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease, box-shadow .2s ease;
}

.subnav-link:before {
    display: none !important;
}

.subnav-link:hover,
.subnav-link:focus {
    background-color: var(--site-lighter) !important;
    color: var(--site-primary);
    padding-left: 1.25rem;
    /* linia boczna na hover w primary — dla pozycji aktywnej i tak
       wygrywa box-shadow z reguły .active (deklarowana niżej, ta sama
       specyficzność, kolejność w pliku rozstrzyga), więc kolor warning
       aktywnej pozycji zostaje nienaruszony nawet pod kursorem */
    box-shadow: inset 3px 0 0 0 var(--site-primary);
}

.active > .subnav-link {
    color: var(--site-primary) !important;
    background-color: var(--site-lighter) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--site-warning);
}


/* ============================================================
   1f. STOPKA DOLNA (footer-section-meta) — odcień jak produkcja
   ============================================================
   Analogicznie: domyślny motyw daje tu #212121, produkcja ma #232323. */

.footer-section-meta {
    background: var(--site-footer-meta) !important;
    --frame-background: var(--site-footer-meta);
    --frame-link-color: var(--site-accent);
    --frame-link-hover-color: #ffffff;
}


/* ============================================================
   1g. STOPKA GÓRNA, KOLUMNA ŚRODKOWA — logo PTTK wyśrodkowane
   ============================================================
   Element treści (textpic/gallery) domyślnie wyrównuje obrazek do lewej
   krawędzi kolumny (flex, justify-content: flex-start). */

.footer-section-content-column-middle .gallery-row {
    justify-content: center;
}

/* To samo miejsce renderuje też logo PTTK jako element "galerii" (textpic) —
   ale logo jest okrągłe, więc ogólny styl "karty" (biała ramka, cień,
   padding) dodany niżej dla właściwych galerii zdjęć wygląda tu źle
   (białe kwadratowe tło pod okrągłym logo). Neutralizujemy go punktowo. */
.footer-section-content-column-middle .gallery-item figure {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.footer-section-content-column-middle .gallery-item:hover figure {
    box-shadow: none;
    border-color: transparent;
}

.footer-section-content-column-middle .gallery-item figure img {
    background-color: transparent;
    /* rozmiar źródłowego pliku to 150x150 - bootstrap-package dolicza
       własny, większy rozmiar z układu kolumn galerii, więc wymuszamy
       wprost, żeby logo nie było większe niż na pozostałych serwisach */
    max-width: 150px;
    width: 100%;
}

/* Link z logiem PTTK w tej kolumnie NIE ma żadnego tekstu (samo `<img>`
   w `<a>`) - animowane podkreślenie linków w treści (sekcja niżej,
   "Linki w treści") liczy pozycję kreski względem wysokości LINII TEKSTU
   (line-height), nie względem faktycznej wysokości obrazka, więc kreska
   wychodziła w poprzek środka loga zamiast pod nim. Zamiast poprawiać
   pozycjonowanie tylko dla tego jednego linku - po prostu wyłączona,
   bo pod samym logiem i tak nie ma tekstu do podkreślenia. */
.footer-section-content-column-middle .frame :not(.btn) > a:not([class]),
.footer-section-content-column-middle .frame p a:not([class]) {
    background-image: none;
}

/* Na telefonach (poniżej 768px kolumny stopki górnej stackują się jedna
   pod drugą) — wyśrodkuj całą zawartość, łącznie z kolumną "Dane rejestrowe"
   (ma na sztywno .text-end) i "Strony oddziałowe" (domyślnie do lewej). */
@media (max-width: 767.98px) {
    .footer-section-content-column {
        text-align: center;
    }

    .footer-section-content-column .text-end,
    .footer-section-content-column .text-start,
    .footer-section-content-column .text-right,
    .footer-section-content-column .text-left {
        text-align: center !important;
    }

    /* Zgłoszenie 2026-08-12: stopka DOLNA (footer-section-meta, ciemny pasek
       z copyright) zostawała wyrównana do lewej na wąskich telefonach, mimo
       że górna stopka (wyżej) jest już wyśrodkowana. Przyczyna: bootstrap-
       package centruje .footer-info-section dopiero od 576px w górę
       (@media min-width:576px) - poniżej tej szerokości zostaje domyślne
       "start". .footer-menu-section (nawigacja stopki/kontakt, u nas
       wyłączone, ale na wypadek włączenia w przyszłości) w ogóle nie ma
       wersji wyśrodkowanej na żadnej szerokości mobile w rdzeniu Setu. */
    .footer-section-meta .footer-info-section,
    .footer-section-meta .footer-menu-section {
        text-align: center;
    }
}


/* ============================================================
   1h. TŁO STRONY — fotografia (próba, do oceny)
   ============================================================ */

body {
    background-image: url('/fileadmin/user_upload/pttk-bydgoszcz/background_szlakbrdy.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


/* ============================================================
   2. KONTENER TREŚCI
   ============================================================ */

#page-content {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

/* ============================================================
   TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja CLAUDE
   ============================================================ */
/* TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja GEMINI
   wyrównuje wysokości ramek */

/* 1. RAMKA + TŁO — gradient light->lighter->biel (zamiast zdjęcia,
   które okazało się zbyt rozpraszające), ramka w kolorze secondary */
.frame-type-texticon .texticon {
    border: 1.5px solid var(--site-secondary) !important;
    border-radius: 8px;
    padding: 1.5rem;
    /* radialny, niecentryczny — "źródło światła" w lewym górnym rogu,
       gasnące przez lighter do light w kierunku przeciwległego rogu.
       Tło większe niż karta (background-size) + przesuwana pozycja,
       żeby "światło" mogło płynnie wędrować na hover (patrz niżej) */
    background: radial-gradient(circle at 20% 15%, #ffffff 0%, var(--site-lighter) 45%, var(--site-light) 100%);
    background-size: 160% 160%;
    background-position: 0% 0%;
    transition: box-shadow .25s ease, border-color .25s ease, border-width .25s ease, transform .25s ease, background-position .5s ease;
}

/* 2. ŁAŃCUCH WYSOKOŚCI (EQUAL HEIGHT) */

/* Rząd musi być flexem */
.section-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}

/* Kolumna musi być flexem */
.section-column-third {
    display: flex !important;
    flex-direction: column !important;
}

/* WYMUSZENIE WZROSTU NA WSZYSTKICH WARSTWACH WEWNĄTRZ */
/* Dodajemy tutaj klasy, które widzę w Twoim inspektorze: .frame-container-default oraz .frame-inner */
.section-column-third .frame,
.frame-group-container,
.frame-group-inner,
.frame-container-default,
.frame-inner,
.texticon {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: auto !important;
}

/* Opcjonalnie: upewnij się, że tekst w środku nie jest ściśnięty */
.texticon-content {
    flex-grow: 1;
}

/* Hover dla ramki — lekkie uniesienie + głębszy cień. Kolor ramki
   zostaje w tej samej rodzinie (secondary), tylko "przyciemniony" do
   primary (ten sam zabieg co animowane podkreślenie linków — nie
   zmiana koloru, tylko pogłębienie tego samego tonu) + delikatnie
   grubsza. */
.frame-type-texticon .texticon:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, 0.18);
    border-width: 2.5px !important;
    border-color: var(--site-primary) !important;
    transform: translateY(-3px);
    /* "światło" wędruje w stronę przeciwległego rogu */
    background-position: 100% 100%;
}


/* ============================================================
   ODŚWIEŻENIE WYGLĄDU 2026-07-27 — mikroanimacje i detale
   ============================================================ */

/* Galeria zdjęć — jednakowa wysokość kafli z zachowaniem proporcji zdjęć
   (bez przycinania), delikatna ramka, cień pogłębiający się po najechaniu,
   plus zoom samego zdjęcia. Ten sam wzorzec co custom-online.css. */
.gallery-row {
    align-items: stretch;
}

.gallery-item {
    display: flex;
    flex-direction: column;
}

.gallery-item figure {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    border: 1px solid rgba(3, 37, 42, .12);
    padding: 6px;
    /* białe tło całej "karty" (obrazek + padding + podpis) - bez tego
       przestrzeń paddingu i pole podpisu były przezroczyste, więc
       przebijało przez nie tło strony (widoczne zwłaszcza na serwisach
       z fotograficznym tłem strony, sekcja 1h) zamiast jednolitej karty */
    background-color: #ffffff;
    /* cień bez przesunięcia (0 0) — rozkłada się równo dookoła zamiast "uciekać" w dół */
    box-shadow: 0 0 8px rgba(3, 37, 42, .08);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.gallery-item:hover figure {
    box-shadow: 0 0 22px rgba(3, 37, 42, .4);
    border-color: rgba(3, 37, 42, .3);
}

.gallery-item figure picture,
.gallery-item figure a {
    flex: 1;
    display: flex;
    min-height: 140px;
}

.gallery-item figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: #ffffff;
    display: block;
    transition: transform .35s ease;
}

.gallery-item:hover figure img {
    transform: scale(1.06);
}

/* Podpis pod zdjęciem — wyśrodkowany, z odstępem odsuwającym go od
   zdjęcia (transform:scale na hover wizualnie "wjeżdża" na sąsiada
   w tym samym elemencie figure, bo overflow:hidden tnie tylko na
   zewnętrznej krawędzi, nie między rodzeństwem) */
.gallery-item .caption {
    text-align: center;
    margin-top: .6rem;
}

/* Linki w treści — animowane podkreślenie zamiast statycznego,
   ten sam język co pasek nawigacji (nav-link-main:before) */
.frame :not(.btn) > a:not([class]),
.frame p a:not([class]) {
    text-decoration: none;
    background-image: linear-gradient(var(--site-warning), var(--site-warning));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .25s ease, color .15s ease;
}

.frame :not(.btn) > a:not([class]):hover,
.frame p a:not([class]):hover {
    background-size: 100% 2px;
}

/* Pasek nawigacji — efekt "szkła" i cień, gdy ma pełne tło (podstrony
   z .navbar-default ORAZ strona główna po przewinięciu, .navbar-transition).
   Stan przezroczysty (hero na stronie głównej przed scrollem) zostaje bez
   zmian, żeby nie rozmywać zdjęcia w tle karuzeli. */
.navbar-default,
.navbar-mainnavigation.navbar-transition {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(3, 37, 42, .22);
}

.navbar-default,
.navbar-default-transition.navbar-transition {
    --bs-bg-opacity: .92;
}

/* Cytat / wyróżniony fragment tekstu — akcent w kolorze marki zamiast
   domyślnej szarej kreski Bootstrapa */
.frame blockquote,
blockquote.blockquote {
    border-left: 3px solid var(--site-accent);
    padding-left: 1rem;
    font-style: italic;
}

/* Nagłówek karuzeli — delikatne wejście przy załadowaniu strony */
@keyframes szb-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-item.active .carousel-header {
    animation: szb-fade-up .6s ease-out both;
}

.carousel-item.active .carousel-subheader {
    animation: szb-fade-up .6s ease-out .12s both;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .carousel-header,
    .carousel-item.active .carousel-subheader {
        animation: none;
    }
}

/* ============================================================
   ZAKŁADKI (element "Tabs") — wygląd "połączonej karty": aktywna
   zakładka zlewa się wizualnie z panelem treści pod nią, akcentowany
   górny pasek w kolorze warning, reszta w języku kart z innych sekcji
   (biel, delikatna ramka, zaokrąglenie, cień).
   ============================================================ */

/* Kontener zakładek (.contentcontainer, b13/container) to CSS grid
   z globalnym odstępem --contentcontainer-gap:40px (używanym też do
   rozstawiania kolumn w innych typach kontenerów, np. 2/3/4-kolumnowych)
   — to on wpychał 40px przerwy między pasek zakładek a panel treści,
   mimo że oba mają być wizualnie połączone. Zerowany TYLKO tutaj. */
.contentcontainer[data-container-identifier="szlakbrdy_tabs"] {
    --contentcontainer-gap: 0;
}

.nav-tabs {
    border-bottom: 1px solid var(--site-light);
    gap: .25rem;
}

.nav-tabs .nav-link {
    position: relative;
    border: 1px solid transparent;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    color: var(--site-primary);
    font-weight: 600;
    padding: .6rem 1.25rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent;
    background-color: var(--site-lighter);
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    color: var(--site-primary);
    background-color: #ffffff;
    border-color: var(--site-light) var(--site-light) #ffffff;
    box-shadow: 0 -4px 14px rgba(3, 37, 42, .1);
}

.nav-tabs .nav-link.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    background: linear-gradient(90deg, var(--site-warning), var(--site-accent));
}

.tab-content {
    background-color: #ffffff;
    border: 1px solid var(--site-light);
    border-top: none;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    padding: 1.5rem;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}


/* ============================================================
   3. SUBMENU GÓRNEGO MENU (dropdown) — ten sam język "karty"
   co menu boczne (subnav, patrz 1e.): biały panel, ramka w
   --site-light, cień, kolorowy pasek z boku przy najechanej/
   aktywnej pozycji zamiast domyślnego szarego tła Bootstrapa.
   Na desktopie (pełne poziome menu, od 1200px — patrz breakpoint
   hamburgera w 1.) rozwija się dodatkowo po najechaniu myszką,
   niezależnie od dotychczasowego mechanizmu kliknięcia (Bootstrap
   JS/Popper) używanego na dotyku/mobile — oba działają równolegle.
   ============================================================ */

.navbar-mainnavigation .dropdown-menu {
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: var(--site-light);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-box-shadow: 0 8px 22px rgba(3, 37, 42, .16);
    padding: .4rem 0;
    overflow: hidden;
}

.navbar-mainnavigation .dropdown-menu-simple .dropdown-nav > .nav-item + .nav-item,
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav > .nav-item + .nav-item {
    border-top: 1px solid var(--site-light);
}

.navbar-mainnavigation .nav-link-dropdown {
    padding: .65rem 1rem;
    color: var(--site-primary);
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease, box-shadow .2s ease;
}

.navbar-mainnavigation .nav-link-dropdown:hover,
.navbar-mainnavigation .nav-link-dropdown:focus {
    background-color: var(--site-lighter);
    color: var(--site-primary);
    padding-left: 1.25rem;
    /* jw. (subnav) — linia boczna na hover w primary, aktywna pozycja
       (reguła .active niżej, ta sama specyficzność) zachowuje warning */
    box-shadow: inset 3px 0 0 0 var(--site-primary);
}

.navbar-mainnavigation .nav-link-dropdown.active {
    color: var(--site-primary);
    background-color: var(--site-lighter);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--site-warning);
}

/* Rozwijanie po najechaniu myszką — tylko tam, gdzie realnie widać
   pełne poziome menu bez hamburgera (patrz sekcja 1.: 992-1199px jest
   celowo wymuszony na hamburger, więc prawdziwy próg desktopu to
   1200px). Menu trzyma się w layoucie (position:absolute niezależnie
   od hover), więc pokazywanie/ukrywanie przez opacity+visibility
   zamiast display nie powoduje "skoków" treści pod spodem i pozwala
   na płynne przejście spójne z resztą mikroanimacji serwisu. */
@media (min-width: 1200px) {
    .navbar-mainnavigation .nav-style-simple .dropdown-menu,
    .navbar-mainnavigation .nav-style-mega .dropdown-menu {
        display: block;
        top: 100%;
        /* margin-top:0 (nie --bs-dropdown-spacer, domyślnie .5rem) —
           motyw zostawiał martwą, niehoverowalną strefę między linkiem
           a panelem; kursor tracił hover w tej przerwie zanim zdążył
           dotrzeć do menu, więc ono znikało zanim dało się kliknąć
           pozycję. Panel przylega teraz bezpośrednio do paska. */
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px);
        /* przy CHOWANIU dodatkowy grace period (.28s) zanim visibility
           faktycznie przełączy się na hidden — margines bezpieczeństwa
           na wypadek chwilowej niedokładności ruchu myszką; przy hover
           (:hover/:focus-within) ten delay jest zerowany, więc otwarcie
           reaguje od razu, bez opóźnienia */
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .28s;
    }

    .navbar-mainnavigation .nav-style-simple .dropdown-menu {
        left: 0;
    }

    .navbar-mainnavigation .nav-item.nav-style-simple:hover > .dropdown-menu,
    .navbar-mainnavigation .nav-item.nav-style-mega:hover > .dropdown-menu,
    .navbar-mainnavigation .nav-item.nav-style-simple:focus-within > .dropdown-menu,
    .navbar-mainnavigation .nav-item.nav-style-mega:focus-within > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    /* Strzałka rozwijania niepotrzebna przy hover — chowamy ją tylko
       wizualnie (klik nadal działa dla klawiatury/dotyku na tym
       breakpoincie, gdyby ktoś mimo wszystko z niego skorzystał). */
    .navbar-mainnavigation .nav-link-toggle .nav-link-indicator {
        transition: transform .18s ease;
    }

    .navbar-mainnavigation .nav-item.nav-style-simple:hover .nav-link-toggle .nav-link-indicator,
    .navbar-mainnavigation .nav-item.nav-style-mega:hover .nav-link-toggle .nav-link-indicator {
        transform: rotate(180deg);
    }
}

/* Zagnieżdżony (3.) poziom w mega-dropdownie — wystąpi tylko na witrynach,
   których struktura stron jest głębsza niż na szlakbrdy (tam mega nigdy
   się nie pojawia, bo żaden dropdown nie schodzi tam do 3. poziomu).
   Bootstrap Package renderuje kolumny 2. poziomu pogrubione, ale zagnieżdżone
   dzieci bez żadnego stylu (płaska lista tej samej szerokości) — dodajemy
   wcięcie + mniejszą czcionkę + --site-secondary, żeby hierarchia była
   czytelna niezależnie od tego, ile poziomów ma dana witryna. */
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav {
    margin-top: .15rem;
    margin-bottom: .35rem;
}

.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown {
    padding-top: .35rem;
    padding-bottom: .35rem;
    padding-left: 1.5rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--site-secondary);
}

.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown:hover,
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown:focus {
    padding-left: 1.75rem;
}


/* ============================================================
   4. TABELE (element treści "Tabela") — kontener jak karta
   (ramka --site-light, cień, zaokrąglone rogi), nagłówek w
   --site-secondary z białym pogrubionym tekstem, wiersze treści
   naprzemienne: pierwszy biały, potem co drugi --site-lighter.
   ============================================================ */

.frame-type-table .table-responsive {
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    /* tylko overflow-y ukryty (żeby zaokrąglenie realnie przycinało
       górne/dolne rogi tabeli) — overflow-x zostaje auto, inaczej
       szerokie tabele straciłyby poziomy scroll na wąskich ekranach */
    overflow-x: auto;
    overflow-y: hidden;
}

.frame-type-table .table {
    margin-bottom: 0;
    --bs-table-border-color: var(--site-light);
}

.frame-type-table .table > :not(caption) > * > * {
    padding: .65rem 1rem;
    vertical-align: middle;
}

.frame-type-table thead th {
    background-color: var(--site-secondary);
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: var(--site-secondary);
}

.frame-type-table tbody tr td {
    background-color: #ffffff;
}

.frame-type-table tbody tr:nth-child(even) td {
    background-color: var(--site-lighter);
}

.frame-type-table tbody tr td {
    transition: background-color .2s ease;
}

.frame-type-table tbody tr:hover td {
    background-color: var(--site-light);
}

/* Akcentowy pasek "wysuwający się od środka" w pierwszej kolumnie —
   ten sam motyw animacji (transform:scaleY, transform-origin:center)
   co podkreślenie linku w menu głównym i w treści, tylko obrócony
   pionowo. */
.frame-type-table tbody tr td:first-child {
    position: relative;
    transition: background-color .2s ease, color .2s ease, font-weight .2s ease;
}

.frame-type-table tbody tr td:first-child:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--site-warning);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.frame-type-table tbody tr:hover td:first-child:before {
    transform: scaleY(1);
}

.frame-type-table tbody tr:hover td:first-child {
    color: var(--site-primary);
    font-weight: 600;
}

/* Tabele wklejone jako surowy HTML (CType=html, treść migrowana z T9) -
   stare atrybuty prezentacyjne (bordercolor, cellpadding, width="90%")
   są ignorowane przez współczesne przeglądarki i renderują się bez
   żadnego stylu, czasem szersze niż kontener - łamiąc układ strony
   w poziomie ("na produkcji tak nie robi" - stara produkcja miała
   własny, inny globalny reset CSS dla tabel). Zabezpieczenie:
   kontener przewijalny poziomo + podstawowe, czytelne obramowanie -
   NIE pełny styl "karty" jak .frame-type-table, bo treść html jest
   zbyt zróżnicowana żeby zakładać konkretną strukturę. */
.frame-type-html {
    overflow-x: auto;
}

.frame-type-html table {
    border-collapse: collapse;
    max-width: 100%;
}

.frame-type-html table td,
.frame-type-html table th {
    border: 1px solid var(--site-light);
    padding: .5rem .75rem;
}


/* ============================================================
   5. POLA FORMULARZY — spójna kolorystyka z paletą marki. Motyw
   "wypieka" kolor ramki/fokusu na sztywno przy kompilacji SCSS
   (patrz zasada w sekcji 0.), więc trzeba go nadpisać wprost.
   Obejmuje też "gołe" pola felogin bez klasy .form-control w
   markupie (motyw celuje w nie osobno przez input[type], w tym
   samym miejscu co .form-control — stąd te same selektory tutaj)
   oraz checkbox zgody RODO w rejestracji sf_register: markup tego
   pola to .custom-control/-input/-label, klasy z Bootstrapa 4 —
   ten motyw (BS5) nie ma dla nich ŻADNEGO CSS, więc bez tych
   reguł pole renderowało się jako gołe, natywne query bez stylu.
   ============================================================ */

.form-control,
.form-select,
.frame-type-felogin_login input[type=text],
.frame-type-felogin_login input[type=password] {
    border-color: var(--site-light);
    /* kreska pod polem, "wysuwana" na fokusie — ten sam motyw co
       podkreślenie linków w treści/menu, tu w kolorze warning dla
       kontrastu z tealową ramką fokusu (2 tony zamiast dublowania
       tego samego koloru w dwóch miejscach) */
    background-image: linear-gradient(var(--site-warning), var(--site-warning));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-size .3s ease;
}

.form-control:focus,
.form-select:focus,
.form-group input[type=file]:focus,
.frame-type-felogin_login input[type=text]:focus,
.frame-type-felogin_login input[type=password]:focus {
    border-color: var(--site-secondary);
    box-shadow: 0 0 0 .25rem rgba(var(--site-secondary-rgb), .25);
    background-size: 100% 2px;
}

/* Autouzupełnianie przeglądarki (np. zapamiętane logowanie/hasło) nakłada
   WŁASNE, natywne tło pola (Chrome/Edge: niebieskawe lub żółte) przez
   pseudo-klasę :-webkit-autofill - background-color/background-image
   same w sobie tego nie nadpiszą, jedyny niezawodny sposób to
   "oszukanie" ogromnym, wstawionym (inset) box-shadow w tym samym
   kolorze co tło pola. Bez tego pole logowania po zapamiętaniu przez
   przeglądarkę wygląda inaczej niż reszta formularzy i "zjada"
   widoczność cienkiego paska pod spodem. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.frame-type-felogin_login input:-webkit-autofill,
.frame-type-felogin_login input:-webkit-autofill:hover,
.frame-type-felogin_login input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--site-text);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-label {
    color: var(--site-primary);
    font-weight: 600;
    transition: color .2s ease;
}

/* Etykieta reaguje na fokus pola pod nią — mikro-feedback, że pole
   jest aktywne. Trzy różne miejsca to trzy różne markupy formularzy
   (EXT:form ma klasę .form-label, felogin/sf_register mają gołe
   <label> bez klasy), stąd osobne selektory per typ formularza. */
.form-element:focus-within .form-label {
    color: var(--site-secondary);
}

.frame-type-felogin_login fieldset > div:focus-within label,
.frame-type-sfregister_create div:focus-within label,
.frame-type-sfregister_edit div:focus-within label {
    color: var(--site-secondary);
    transition: color .2s ease;
}

.required {
    color: var(--site-warning);
    font-weight: 700;
}

.custom-control {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.custom-control-input {
    appearance: none;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    margin-top: .15em;
    border: 1.5px solid var(--site-light);
    border-radius: .3em;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.custom-control-input:checked {
    background-color: var(--site-secondary);
    border-color: var(--site-secondary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% 65%;
    animation: szb-checkbox-pop .3s ease;
}

@keyframes szb-checkbox-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .custom-control-input:checked {
        animation: none;
    }
}

.custom-control-input:focus {
    outline: 0;
    border-color: var(--site-secondary);
    box-shadow: 0 0 0 .2rem rgba(var(--site-secondary-rgb), .25);
}

.custom-control-label {
    cursor: pointer;
    padding-top: .1em;
}


/* ============================================================
   6. MAPA NA STRONACH KONTAKTOWYCH — ta sama "ramka" co zdjęcia
   w galerii (biała karta, delikatna ramka, zaokrąglone rogi,
   padding), ale bez hover/cienia (mapa nie jest klikalną kartą).
   Selektor celuje w konkretny wrapper (div[style*=max-width:600px])
   zamiast całego .frame-type-html, żeby nie dotknąć innych,
   niepowiązanych elementów HTML na stronie.
   ============================================================ */

.frame-type-html div[style*="max-width:600px"] {
    border: 1px solid rgba(3, 37, 42, .12);
    border-radius: var(--bs-border-radius);
    padding: 6px;
    background-color: #ffffff;
    overflow: hidden;
}


/* ============================================================
   7. BREADCRUMB — tło $lighter, delikatna linia oddzielająca od
   treści pod spodem.
   ============================================================ */

.breadcrumb-section {
    background-color: var(--site-lighter);
    border-bottom: 1px solid var(--site-light);
}


/* ============================================================
   8. AKORDEON, PANEL (alert) I GRUPA KART — dociągnięcie do
   stylistyki serwisu. Sporo kolorów tu jest "wypieczonych" przy
   kompilacji SCSS (stary, zielony motyw domyślny) niezależnie od
   naszych nadpisań --bs-primary itd., więc trzeba je nadpisać
   wprost — ten sam wzorzec co w sekcjach 0./5.
   ============================================================ */

/* --- Akordeon (szlakbrdy_accordion_grid) — nagłówek (zwinięty) w
   tym samym języku co panel/alert: kolorowe tło, biały pogrubiony
   tekst. Rozwinięty panel zostaje przy dotychczasowym jasnym stylu
   (--site-lighter/--site-primary) — to teraz "stan aktywny". */
.accordion {
    --bs-accordion-btn-bg: var(--site-secondary);
    --bs-accordion-btn-color: #ffffff;
    --bs-accordion-active-bg: var(--site-lighter);
    --bs-accordion-active-color: var(--site-primary);
    --bs-accordion-border-color: var(--site-light);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--site-secondary-rgb), .25);
    /* ikony strzałki — SVG ma kolor "wypieczony" (stary zielony motyw),
       w data-URI nie da się użyć var(), stąd literalny hex dla obu
       stanów: biała na kolorowym tle nagłówka, ciemna na jasnym tle
       rozwiniętego panelu */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2307373e' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}

.accordion-button {
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

.accordion-button:hover {
    background-color: var(--site-primary-hover);
}

.accordion-button:not(.collapsed):hover {
    background-color: var(--site-lighter);
}

/* "wodotryski": strzałka odbija się przy rozwijaniu (spring-easing
   zamiast liniowego obrotu), treść wjeżdża z lekkim fade-up — ten
   sam motyw co nagłówek karuzeli (szb-fade-up, zdefiniowany wyżej) */
.accordion-button::after {
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.accordion-collapse.show .accordion-body {
    animation: szb-fade-up .35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-collapse.show .accordion-body {
        animation: none;
    }
}

/* --- Panel (alert card, CType=panel) — kolor nagłówka per wariant
   (card-panel-primary/secondary/info/warning), reszta wariantów
   (success/danger/light/dark) zostaje na razie na domyślnych
   kolorach motywu, bo w treści serwisu nie występują */
.card-panel-primary {
    --cardpanel-header-background: var(--site-primary);
    --cardpanel-header-color: #ffffff;
    --cardpanel-border-color: var(--site-primary);
}

.card-panel-secondary,
.card-panel-info {
    --cardpanel-header-background: var(--site-secondary);
    --cardpanel-header-color: #ffffff;
    --cardpanel-border-color: var(--site-secondary);
}

.card-panel-warning {
    --cardpanel-header-background: var(--site-warning);
    --cardpanel-header-color: #ffffff;
    --cardpanel-border-color: var(--site-warning);
}

.frame-type-panel .btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--site-secondary);
    --bs-btn-border-color: var(--site-secondary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--site-primary-hover);
    --bs-btn-hover-border-color: var(--site-primary-hover);
    --bs-btn-active-bg: var(--site-primary-hover);
    --bs-btn-active-border-color: var(--site-primary-hover);
    --bs-btn-focus-shadow-rgb: 43, 113, 109;
}

/* --- Grupa kart (card_group) — scalona z językiem "karty" tekst-ikona
   (ta sama ramka/gradient/hover co .frame-type-texticon .texticon wyżej),
   zamiast osobnego, prostszego stylu. Nagłówek/treść/przycisk wyśrodkowane. */
.card-group-element-item .card {
    border: 1.5px solid var(--site-secondary) !important;
    border-radius: 8px;
    background: radial-gradient(circle at 20% 15%, #ffffff 0%, var(--site-lighter) 45%, var(--site-light) 100%);
    background-size: 160% 160%;
    background-position: 0% 0%;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    transition: box-shadow .25s ease, border-color .25s ease, border-width .25s ease, transform .25s ease, background-position .5s ease;
    position: relative;
    text-align: center;
}

.card-group-element-item .card:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, .18);
    border-width: 2.5px !important;
    border-color: var(--site-primary) !important;
    /* BEZ transform:translateY - na wysokich kartach (dużo wyższe niż
       tekst-ikona, skąd ten wzorzec pochodzi) przesunięcie karty spod
       nieruchomego kursora powoduje migotanie hover przy krawędzi
       (karta "ucieka" → hover znika → wraca na miejsce → hover wraca →
       w kółko). Cień + pogrubienie ramki wystarczą jako sygnał hover,
       bez przesuwania realnej granicy klikalnego obszaru. */
    background-position: 100% 100%;
}

.card-group-element-item .card-title {
    color: var(--site-primary);
    font-weight: 600;
}

.card-group-element-item .card-footer {
    background: transparent;
    border-top: none;
}

/* Cała karta klikalna tak samo jak przycisk "zobacz" (wzorzec Bootstrap
   "stretched-link", bez zmian w szablonie Fluid) — ::after przycisku
   rozciąga się na całą kartę (stąd position:relative wyżej), sam przycisk
   wizualnie zostaje na miejscu w stopce karty. */
.card-group-element-item .card-footer .btn {
    position: static;
}

.card-group-element-item .card-footer .btn:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* ============================================================
   9. AKTUALNOŚCI I RELACJE (georgringer/news, styl Twb5) — pierwszy
   serwis w projekcie z tym typem treści (szlakbrdy go nie ma), więc
   układ zaprojektowany od zera, w tym samym języku "karty" co reszta
   serwisu (galeria/tekst-ikona/grupa kart): biała karta, ramka
   --site-light, cień, uniesienie na hover.
   Uwaga: w projekcie NIE MA Font Awesome (Twb5 zakłada <i class="fas
   fa-*">), więc te ikony są ukryte - bez tego renderowałyby się jako
   puste kwadraciki. Rozdzielacze "|" w linii meta zostają (czysty tekst
   z szablonu, nie CSS).
   ============================================================ */

.news-list-view {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.news-list-view .list-group-item {
    background: linear-gradient(135deg, var(--site-lighter), var(--site-light));
    border: 1px solid var(--site-accent);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    padding: 1.5rem;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.news-list-view .list-group-item:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, .18);
    border-color: var(--site-secondary);
    transform: translateY(-3px);
}

/* ============================================================
   MINIATURA NA LIŚCIE AKTUALNOŚCI/RELACJI - przeprojektowane
   2026-08-11 na stałych pikselach zamiast procentów (kilka kolejnych
   poprawek na % nawarstwiło się w nieprzewidywalny, rosnący z
   szerokością ekranu odstęp - zgłoszenie użytkownika).
   ============================================================
   WAŻNY BUG naprawiony przy okazji: poprzednia reguła celowała we
   WSZYSTKIE `img` wewnątrz `.news-list-item`, nie tylko w miniaturę
   w .col-md-3 - łapała też MAŁE, wklejone w treść zajawki ikony/emoji
   (np. relacje Gryfu, powstałe z konwersji serii elementów "Tekst i
   obrazki" na standardowe rekordy news) i naciągała je na 70% szerokości
   w kwadrat z object-fit:cover, co dawało rozmazany, gradientowy "pasek"
   zamiast małej ikonki. Efekt WIDOCZNY TYLKO w widoku listy (bo tylko
   tam zajawka z ikoną leży wewnątrz .news-list-item) - w widoku
   szczegółów tej reguły nie ma, ikony renderują się poprawnie, co
   pasowało do zgłoszenia. Selektor zawężony do `.col-md-3 img`. */
.news-list-item {
    /* usuwa gutter siatki Bootstrapa (domyślnie ~1.5rem) między kolumną
       miniatury a tekstu - jedyny odstęp od teraz to margin-right
       miniatury niżej, nic dodatkowego się nie dokłada */
    --bs-gutter-x: 0;
    /* kolumny NIE rozciągają się nawzajem do wspólnej wysokości - inaczej
       krótsza (miniatura) byłaby sztucznie wysoka jak dłuższa (tekst),
       co dawało dużą pustą przestrzeń pod/wokół małego zdjęcia */
    align-items: flex-start;
    /* Bootstrap .row domyślnie ma flex-wrap:wrap (do responsywnego
       układania kolumn pod sobą na wąskich ekranach) - w tym konkretnym
       układzie 2-kolumnowym to niepożądane: dla NIEKTÓRYCH pozycji na
       liście (np. Gryf/Relacje, "Klubowe Zaduszki Rowerowe") kolumna
       tekstowa potrafiła się "zawinąć" pod miniaturę zamiast obok niej,
       mimo że miejsca teoretycznie starczało - klasyczna pułapka
       flexboksa (patrz min-width niżej). Ten komponent ma osobny,
       jawny breakpoint na 130px miniaturę (media query niżej), więc
       zjawiskowe zawijanie się kolumn nie jest tu w ogóle potrzebne. */
    flex-wrap: nowrap;
}

.news-list-item .col-md-3 {
    /* stałe rozmiary zamiast siatki 25% - kolumna ciasno otula miniaturę,
       zero niewykorzystanej, "martwej" przestrzeni przed tekstem */
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    /* odstęp od tekstu PRZENIESIONY tutaj z marginesu na <img> (sekcja 12,
       zgłoszenie 2026-08-13: domalówka na ::after tej kolumny używa
       inset:0, więc rysowała się na całej szerokości kolumny WŁĄCZNIE
       z marginesem obrazka - 1rem "pustego" pola nakładki wystającego
       poza prawą krawędź zdjęcia). Margines na kolumnie (poza obszarem
       ::after) zamiast na samym <img> - teraz kolumna ciasno otula
       WYŁĄCZNIE zdjęcie, nakładka pokrywa się z nim 1:1. */
    margin-right: 1rem;
}

.news-list-item .col-md-9 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    /* Flex itemy mają domyślnie min-width:auto (nie 0!) - element może
       odmówić skurczenia się poniżej szerokości swojej WEWNĘTRZNEJ
       zawartości (np. długiego, niełamliwego fragmentu tekstu), co przy
       zbyt małej przestrzeni objawia się jako "przelanie" wiersza,
       a z flex-wrap:wrap (Bootstrap) - właśnie jako zawinięcie całej
       kolumny pod spód. Zerowanie min-width to standardowy,
       podręcznikowy fix na tę klasę błędów flexboksa. */
    min-width: 0;
}

.news-list-item .col-md-3 img {
    border-radius: var(--bs-border-radius);
    object-fit: cover;
    /* stały rozmiar w pikselach (nie procent kolumny) - nie rośnie z
       szerokością ekranu, w przybliżeniu odpowiada wcześniej
       zatwierdzonemu wizualnie rozmiarowi "-30%" względem oryginału */
    width: 200px;
    height: 200px;
    /* BRAK marginesu z góry/z lewej - miniatura zaczyna się dokładnie
       w tym samym miejscu co tytuł (zgłoszenie: "obrazki nie mają tego
       samego odstępu co tytuł"). Odstęp od tekstu z prawej PRZENIESIONY
       na margin-right kolumny .col-md-3 wyżej (2026-08-13) - patrz
       komentarz tam. */
    margin: 0;
}

@media (max-width: 767.98px) {
    .news-list-item .col-md-3 img {
        width: 130px;
        height: 130px;
    }
}

.news-list-item h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.news-list-item h3 a {
    color: var(--site-primary);
    text-decoration: none;
    transition: color .15s ease;
}

.news-list-item h3 a:hover {
    color: var(--site-secondary);
}

.news-list-item .extra,
.frame-type-news_newsdetail .extra {
    color: var(--site-secondary);
    font-size: .875rem;
    margin-bottom: .75rem;
}

.news-list-item .extra i,
.frame-type-news_newsdetail .extra i,
.frame-type-news_newsdetail .news-related i {
    display: none;
}

.news-list-item .extra .label,
.frame-type-news_newsdetail .extra .label {
    background: var(--site-lighter);
    color: var(--site-primary);
    padding: .1rem .6rem;
    border-radius: 1rem;
    font-size: .8rem;
}

.news-list-item .lead {
    font-size: 1rem;
    color: var(--site-text);
}

/* Paginacja - style spójne z resztą serwisu (dotyczy każdej paginacji
   w projekcie zbudowanej na natywnych klasach Bootstrapa, nie tylko news) */
.pagination {
    gap: .35rem;
}

.pagination .page-link {
    border: 1.5px solid var(--site-light);
    color: var(--site-primary);
    border-radius: var(--bs-border-radius);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pagination .page-link:hover {
    background-color: var(--site-lighter);
    border-color: var(--site-secondary);
    color: var(--site-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--site-primary);
    border-color: var(--site-primary);
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    border-color: var(--site-light);
    color: var(--site-secondary);
    opacity: .5;
}

/* Przyciski "pierwsza"/"poprzednia"/"następna"/"ostatnia" (dodane obok
   oryginalnej listy numerów stron w Partials/List/Pagination.html) są
   STAŁE (flex-shrink:0) po obu stronach - środkowa lista numerów jest
   w osobnym, przewijalnym poziomo kontenerze (.page-numbers-viewport),
   więc przy dużej liczbie stron (np. Relacje ~55) pokazuje się tyle
   numerów ile się zmieści, bez zawijania do nowego wiersza - reszta
   dostępna przewinięciem, strzałki po bokach zawsze widoczne. */
.pagination.pagination-scroll {
    flex-wrap: nowrap;
    overflow: hidden;
}

.pagination.pagination-scroll .pagination-fixed {
    flex-shrink: 0;
}

.pagination.pagination-scroll .page-numbers-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pagination.pagination-scroll .page-numbers-inner {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: .35rem;
    width: max-content;
}

/* Widok szczegółowy pojedynczego newsa/relacji — to samo tło/ramka co
   karta na liście, żeby oba widoki wyglądały spójnie */
.frame-type-news_newsdetail .frame-inner {
    background: linear-gradient(135deg, var(--site-lighter), var(--site-light));
    border: 1px solid var(--site-accent);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem;
}

.frame-type-news_newsdetail h1 {
    border-color: var(--site-light) !important;
    color: var(--site-primary);
}

.frame-type-news_newsdetail .lead {
    font-size: 1.1rem;
}

.frame-type-news_newsdetail .thumbnail {
    border: 1.5px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    padding: .5rem;
    margin-bottom: 1rem;
    background: #ffffff;
}

.frame-type-news_newsdetail .thumbnail img {
    border-radius: calc(var(--bs-border-radius) - 3px);
}

.frame-type-news_newsdetail .thumbnail .caption {
    text-align: center;
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--site-secondary);
}

.frame-type-news_newsdetail .news-related .list-group-item {
    border: none;
    border-top: 1px solid var(--site-light);
    border-radius: 0;
    padding: .65rem 0;
}

.frame-type-news_newsdetail .news-related .list-group-item:first-child {
    border-top: none;
}


/* ============================================================
   10. BANER COOKIECONSENT (bootstrap-package) — dopasowany do palety
   ============================================================
   Domyślnie (2026-08-02, zgłoszenie użytkownika) baner renderował się
   po angielsku (brak polskiego tłumaczenia w samym rozszerzeniu, patrz
   ext_localconf.php + Overrides/bootstrap_package) i w generycznym,
   ciemnoszarym kolorze bootstrap-package ($cookieconsent-bg: #1b1b1b),
   niezwiązanym z paletą serwisu. Komponent czyta te zmienne CSS w locie
   (nie są "wypieczone" przy kompilacji SCSS jak np. .btn-primary), więc
   wystarczy podmienić same zmienne - reszta (layout, animacje, z-index)
   zostaje z bootstrap-package bez zmian.

   DOPRECYZOWANIE (2026-08-03, na życzenie użytkownika): tło ma używać
   koloru "info" z ORYGINALNIE przypisanego zestawu palety tej witryny
   (szlakbrdy: #5ce2e7 - jedyny z 4 kolorowanych serwisów, który miał go
   od razu zapisanego; main.css/#5ce2e7 pochodzi z pierwszej palety
   "odświeżenie 2026-07-27"), NIE z kolorów już zużytych gdzie indziej
   (--site-dark/--site-primary itd.) - gradient to jasny/ciemny ODCIEŃ
   TEJ SAMEJ barwy info (te same H/S w HSL, różna jasność), nie dwa
   różne kolory marki. --site-info/-dark to jedyne miejsce w main.css,
   gdzie ten kolor jest używane - reszta serwisu nadal primary/secondary/
   accent jak dotychczas. */
:root {
    --site-info:       #5ce2e7; /* info (szlakbrdy) - jasny błękit/turkus */
    --site-info-dark:  #0F6063; /* ten sam odcień, ciemniejszy (dla gradientu tła) */
    --site-info-darker:#093C3E; /* jw., jeszcze ciemniejszy (drugi koniec gradientu) */
    --site-info-light: #BCF3F5; /* jw., jasny (nagłówek/link na ciemnym tle) */

    --cookieconsent-bg: var(--site-info-dark);
    --cookieconsent-color: #ffffff;
    --cookieconsent-link-color: var(--site-info-light);
    --cookieconsent-button-bg: var(--site-primary);
}

.cc-window {
    background-image: linear-gradient(135deg, var(--site-info-dark), var(--site-info-darker));
    box-shadow: 0 -4px 20px rgba(3, 37, 42, .3);
    /* kontener na animowany "połysk" niżej - .cc-window ma już z SCSS
       bootstrap-package overflow:hidden, więc pasek światła ::after
       jest ładnie przycinany do granic banera bez dodatkowych reguł */
    position: fixed;
}

.cc-header {
    color: var(--site-info-light);
}

.cc-link:hover,
.cc-link:focus {
    color: #ffffff;
}

/* "Wodotrysk" na życzenie użytkownika - cienki, jasny pas światła
   przesuwający się raz na kilka sekund po tle banera (ten sam charakter
   subtelnego "shimmeru" co np. na przyciskach premium), NIE ciągły ruch -
   przez większość cyklu pasek stoi poza widocznym obszarem. */
.cc-window::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .16), transparent);
    animation: cc-shine 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cc-shine {
    0% {
        left: -60%;
    }

    35% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-window::after {
        animation: none;
        display: none;
    }
}

/* .cc-btn to WŁASNA klasa bootstrap-package (SCSS @extend .btn przy
   kompilacji), nie ma w DOM-ie class="btn-primary" do podłapania stąd
   gradientu - powtórzony wprost, ten sam wzorzec co .btn-primary wyżej.
   Przycisk CELOWO zostaje w kolorach MARKI (secondary→primary), NIE
   info - kontrastuje z informacyjnym tłem banera i jest spójny z resztą
   przycisków CTA serwisu. */
.cc-btn {
    border-radius: var(--bs-border-radius);
    background-image: linear-gradient(135deg, var(--site-secondary), var(--site-primary));
    border: none;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(3, 37, 42, .25);
    transition: box-shadow .2s ease, transform .2s ease, background-image .2s ease;
    position: relative;
}

.cc-btn:hover,
.cc-btn:focus {
    background-image: linear-gradient(135deg, var(--site-primary), var(--site-primary-hover));
    box-shadow: 0 4px 14px rgba(3, 37, 42, .35);
    transform: translateY(-1px);
    color: #ffffff;
}

/* IKONA PDF — dowolny link do pliku .pdf w TREŚCI strony (nie w stopce - tam
   wyglądała źle w wąskich kolumnach, celowo wykluczona) i nie w elemencie
   "Pliki do pobrania" (tam już jest własna ikonka typu-pliku obok nazwy,
   dwie ikonki obok siebie wyglądały źle - tu nadpisujemy ją PDF-ową zamiast
   dokładać drugą, patrz reguła .filelink-fileicon niżej). Czysty CSS, nie
   zależy od mechanizmu renderowania (header_link, zwykły link w RTE...). */
#page-content a[href$=".pdf" i]:not(.filelink-item a)::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: .25em;
    vertical-align: -0.35em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c0392b' d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6z'/%3E%3Cpath fill='%23e6a29b' d='M14 2v6h6z'/%3E%3Ctext x='12' y='18.5' font-family='Arial,sans-serif' font-size='7.2' font-weight='700' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");
}

/* Element "Pliki do pobrania" (CType=uploads, tryb "ikona") - zamieniamy
   generyczną ikonkę pliku na PDF-ową TYLKO gdy plik faktycznie jest PDF-em,
   zamiast dokładać drugą ikonkę obok. .filelink-fileicon sam jest zwykłym
   inline-span (tylko font-size, bez wymiarów) więc background-image na nim
   się nie pokaże - trzeba podmienić `content` bezpośrednio na wewnętrznym
   ::before, które normalnie renderuje glif z fontu ikon. */
.filelink-item:has(a[href$=".pdf" i]) .filelink-fileicon .bootstrappackageicon-file::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c0392b' d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6z'/%3E%3Cpath fill='%23e6a29b' d='M14 2v6h6z'/%3E%3Ctext x='12' y='18.5' font-family='Arial,sans-serif' font-size='7.2' font-weight='700' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
}

/* ============================================================
   11. STRONA WYNIKÓW WYSZUKIWANIA (ke_search, plugin na /wyszukaj) —
   rozszerzenie ekipy 2026-08-13 (nawiązuje do rozwijanego pola w górnym
   menu, MainAfter.html). Wtyczka NIE ma własnego arkusza włączonego w
   TypoScript (vendor/tpwd/ke_search/.../ke_search_pi1.css nigdzie nie
   jest ładowany), więc bez tego bloku wyniki renderują się zupełnie
   nieformatowane (gołe łącza, systemowe przyciski). Cały styl niżej to
   własny, kompletny zamiennik w JĘZYKU KART tego serwisu — te same
   reguły co .news-list-view w sekcji 9 (gradient jasny→jaśniejszy,
   ramka --site-accent, cień, uniesienie na hover) - wyniki wyszukiwania
   mają wyglądać jak rodzeństwo kart Aktualności/Relacji, nie jak osobny,
   nieszablonowy dodatek. Nazwy klas/id ustalone przez vendor (Partials/
   ResultRow.html, PageBrowser.html, Sorting.html, Filters/*.html) -
   nie do zmiany bez nadpisania szablonów Fluid.
   ============================================================ */

.tx-kesearch-pi1 .clearer {
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
}

.tx-kesearch-pi1 form {
    margin-bottom: 1.5rem;
}

.kesearch_searchbox {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
}

.kesearchbox {
    flex: 1 1 260px;
    margin-bottom: 0;
}

#ke_search_sword {
    width: 100%;
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    padding: .6rem .9rem;
    font-size: 1rem;
    color: var(--site-text);
}

#ke_search_sword:focus {
    outline: none;
    border-color: var(--site-primary);
    box-shadow: 0 0 0 .15rem var(--site-lighter);
}

/* Przyciski Anuluj/Szukaj wyrównane wysokością z polem tekstowym
   (padding .6rem + border 1px z obu stron = calc niżej), tak samo jak
   .nav-search-submit w sekcji 1. (dropdown w górnym menu). */
span.resetbutt a.resetButton,
span.submitbutt input[type="submit"] {
    display: inline-flex;
    align-items: center;
    height: calc(1.5em + 1.2rem + 2px);
    padding: 0 1.3rem;
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

span.submitbutt input[type="submit"] {
    border: 1px solid var(--site-primary);
    background: var(--site-primary);
    color: #fff;
}

span.submitbutt input[type="submit"]:hover {
    background: var(--site-primary-hover);
    border-color: var(--site-primary-hover);
}

span.resetbutt a.resetButton {
    border: 1px solid var(--site-light);
    background: transparent;
    color: var(--site-primary);
}

span.resetbutt a.resetButton:hover {
    background: var(--site-lighter);
    border-color: var(--site-primary);
}

#kesearch_num_results {
    color: var(--site-secondary);
    font-size: .9rem;
    margin-bottom: .75rem;
}

/* Sortowanie wyników (opcja w BE wtyczki - obecnie wyłączona na
   wszystkich serwisach, ale styl gotowy "na przyszłość" tak jak
   indeksery ke_search - patrz project_ke_search_news_indexing.md) */
#kesearch_ordering .ordering {
    margin-bottom: 1rem;
}

#kesearch_ordering ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#kesearch_ordering li.sortlink a {
    color: var(--site-primary);
    text-decoration: none;
    font-size: .9rem;
}

#kesearch_ordering li.sortlink a:hover {
    text-decoration: underline;
}

#kesearch_ordering span.up,
#kesearch_ordering span.down {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
}

#kesearch_ordering span.up {
    border-style: solid;
    border-width: 0 .3em .35em;
    border-color: transparent transparent var(--site-primary);
}

#kesearch_ordering span.down {
    border-style: solid;
    border-width: .35em .3em 0;
    border-color: var(--site-primary) transparent transparent;
}

/* Karty wyników - ten sam wzorzec co .news-list-view (sekcja 9) */
#kesearch_results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.result-list-item {
    background: linear-gradient(135deg, var(--site-lighter), var(--site-light));
    border: 1px solid var(--site-accent);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    /* 2026-08-13 (zgłoszenie): 1.25rem/1.5rem dawało tekst "przyklejony"
       do ramki, zwłaszcza przy długiej zajawce (wyniki typu "page" -
       ke_search dorzuca surowy tekst całej strony) - podbite dla
       wyraźniejszego oddechu. */
    padding: 1.75rem 2rem;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.result-list-item:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, .18);
    border-color: var(--site-secondary);
    transform: translateY(-3px);
}

.result-number {
    color: var(--site-secondary);
    font-weight: 600;
    margin-right: .4rem;
}

.result-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--site-primary);
    margin-bottom: .5rem;
}

/* Wynik może nie mieć linku (strona docelowa ukryta w drzewie stron -
   przypadek Seniorzy, patrz project_ke_search_news_indexing.md) -
   .result-title jest wtedy zwykłym tekstem bez <a>, poniższe reguły
   celują tylko w <a>, więc taki wynik zostaje czytelny, po prostu bez
   podkreślenia/koloru linku. */
.result-title a {
    color: inherit;
    text-decoration: none;
}

.result-title a:hover {
    text-decoration: underline;
}

.add-info {
    font-size: .85rem;
    color: var(--site-secondary);
    margin-bottom: .75rem;
}

.add-info i {
    font-style: normal;
    font-weight: 600;
}

.teaser_icon img {
    float: left;
    max-width: 90px;
    max-height: 90px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    margin: 0 1rem .5rem 0;
    border: 1px solid var(--site-light);
    background: #ffffff;
}

.result-teaser {
    display: block;
    color: var(--site-text);
    line-height: 1.55;
}

/* Podświetlenie trafionej frazy w zajawce (wtyczka sama owija ją w
   <span class="hit"> w resultrow.teaser) - kolor warning, tak jak reszta
   akcentów/podświetleń w serwisie (np. aktywna pozycja menu, sekcja 1/8) */
.result-teaser .hit,
.result-title .hit {
    background: var(--site-warning);
    color: var(--site-darker);
    font-weight: 700;
    padding: 0 .15em;
    border-radius: 2px;
}

/* Stronicowanie */
.pages_total {
    padding: .75rem 0;
    margin: 1.5rem 0;
    border-top: 1px solid var(--site-light);
    border-bottom: 1px solid var(--site-light);
    text-align: center;
}

.result_txt {
    font-size: .85rem;
    color: var(--site-secondary);
    margin-bottom: .5rem;
}

.kesearch_pagebrowser ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.kesearch_pagebrowser .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .6rem;
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    color: var(--site-primary);
    text-decoration: none;
    font-size: .9rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.kesearch_pagebrowser .page-link:hover {
    background: var(--site-lighter);
    border-color: var(--site-primary);
}

.kesearch_pagebrowser .page-item.active .page-link {
    background: var(--site-primary);
    border-color: var(--site-primary);
    color: #fff;
}

.kesearch_pagebrowser .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}

#kesearch_query_time {
    text-align: center;
    font-size: .8rem;
    color: var(--site-secondary);
    margin-top: 1rem;
}

/* Filtry (opcja w BE wtyczki, obecnie nieużywana na żadnym serwisie) -
   styl gotowy "na przyszłość", tak jak sortowanie wyżej */
#kesearch_filters {
    margin-bottom: 1rem;
}

#kesearch_filters select {
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    padding: .5rem .7rem;
    margin-bottom: .75rem;
}

#kesearch_filters .list {
    border: 1px solid var(--site-light);
    border-radius: var(--bs-border-radius);
    padding: .75rem;
    margin-bottom: .75rem;
    width: auto;
    max-width: 320px;
}

#kesearch_filters .list .head {
    display: block;
    font-weight: 600;
    color: var(--site-primary);
    border-bottom: 1px solid var(--site-light);
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}

#kesearch_filters .list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#kesearch_filters .list li {
    margin-bottom: .35rem;
}

#kesearch_filters .list li a {
    color: var(--site-text);
    text-decoration: none;
}

#kesearch_filters .list li a:hover {
    color: var(--site-primary);
    text-decoration: underline;
}

#kesearch_filters .list li.selected {
    font-weight: 600;
    color: var(--site-primary);
}

#kesearch_filters label {
    display: block;
    font-weight: 600;
    color: var(--site-primary);
    margin-bottom: .35rem;
}

/* ============================================================
   12. ODŚWIEŻENIE WYGLĄDU — trzy efekty na ISTNIEJĄCEJ treści (bez
   nowych zdjęć/tekstów), wypróbowane najpierw tylko na wędrowniku
   (2026-08-13), zaakceptowane, teraz na wszystkich serwisach:
   1. Wjazd bloków treści/kart przy scrollowaniu (main.js dokłada klasy
      .wow-reveal / .wow-reveal-visible).
   2. Ciepła "domalówka" (tint) w kolorze marki na miniaturkach
      Aktualności/Relacji + delikatny zoom na hover. TU (main.css) kolor
      przez var(--site-primary) - działa OD RAZU poprawnie dla szlakbrdy/
      seniorzy/pttkinfopl (dziedziczą paletę szlakbrdy, patrz
      feedback_css_theming). Pozostałe 4 serwisy z WŁASNĄ paletą
      (wędrownik/trawers/przewodnicy/okk/gryf) nadpisują TYLKO kolor tej
      domalówki literalnie w <site>-theme.css (ten sam wzorzec co reszta
      pliku - cross-file var(--site-*) nie działa, patrz komentarz w
      sekcji "ZMIENNE MARKI" na górze tego pliku).
   3. Animowane "wjechanie" tytułu/podtytułu w banerze przy KAŻDYM
      przełączeniu slajdu karuzeli - czysty CSS na klasę .active
      dodawaną przez Bootstrap, NIE dotyka warstwy z parallax/sepią
      (ta ma już swój JS, unikamy kolizji dwóch mechanizmów sterujących
      tym samym transform).
   ============================================================ */

/* --- 1. Wjazd treści przy scrollu --- */
.wow-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16, .84, .44, 1),
                transform .7s cubic-bezier(.16, .84, .44, 1);
}

.wow-reveal.wow-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 2. Domalówka + zoom na miniaturkach list Aktualności/Relacji --- */
.news-list-item .col-md-3 {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
}

.news-list-item .col-md-3 img {
    transition: transform .6s ease;
}

.news-list-item .col-md-3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--site-primary) 0%, transparent 65%);
    mix-blend-mode: multiply;
    opacity: .3;
    pointer-events: none;
}

.list-group-item:hover .news-list-item .col-md-3 img {
    transform: scale(1.07);
}

/* --- 3. Wjazd tytułu/podtytułu banera przy każdym przełączeniu slajdu --- */
.carousel-item.active [class^="contentContainer"] h1.cities,
.carousel-item.active [class^="contentContainer"] h2.cities {
    animation: wow-hero-in .9s cubic-bezier(.16, .84, .44, 1) both;
}

.carousel-item.active [class^="contentContainer"] h2.cities {
    animation-delay: .15s;
}

@keyframes wow-hero-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dostępność: dla osób z ustawionym prefers-reduced-motion wyłączamy
   WSZYSTKIE trzy efekty animacji/przejść naraz. */
@media (prefers-reduced-motion: reduce) {
    .wow-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .news-list-item .col-md-3 img {
        transition: none;
    }

    .list-group-item:hover .news-list-item .col-md-3 img {
        transform: none;
    }

    .carousel-item.active [class^="contentContainer"] h1.cities,
    .carousel-item.active [class^="contentContainer"] h2.cities {
        animation: none;
    }
}