/*!
 * Odkrywaj ze mną — Style produkcyjne (Joomla 6 / Cassiopeia Extended)
 * © 2026 Tadeusz Ibrom
 *
 * Wariant A · Klasyk redakcyjny — wersja finalna dopasowana do realnego DOM
 * strony odkrywajzemna.pl. W przeciwieństwie do makiety (preview/) ten plik
 * stylizuje natywne klasy Joomli/Cassiopei, nie własne klasy .nav__*.
 *
 * Cel DOM (nagłówek) — po przebudowie pozycji modułów (czerwiec 2026):
 *   header.header.container-header.position-sticky.sticky-top   (display:flex; flex-wrap)
 *   ├─ .container-topbar > .topbar                       RZĄD 1: pasek social
 *   │     ├─ h5 (opcjonalny tytuł modułu)               (po lewej)
 *   │     └─ #mod-custom120 .row.socialIcons .socialIcon  (po prawej; FontAwesome fa-5x)
 *   ├─ .grid-child > .navbar-brand > a.brand-logo > img   RZĄD 2: logo
 *   └─ .grid-child.container-nav                          RZĄD 2: menu + narzędzia
 *      ├─ nav.menu > nav#joffcanvas1.navbar.navbar-expand-lg
 *      │  ├─ button.navbar-toggler > span.icon-menu       (hamburger mobile)
 *      │  └─ .offcanvas.offcanvas-end                      (szuflada mobile)
 *      │     └─ ul.mod-menu.mod-menu_dropdown-metismenu.metismenu
 *      │        └─ li.metismenu-item.level-1|2|3 (.deeper .parent / .current .active)
 *      │           ├─ a · button.mm-toggler · ul.mm-collapse
 *      └─ .container-search > [ <search> form.mod-finder (lupa), .gtranslate_wrapper ]
 *
 * Okruszki (mod-breadcrumbs) są teraz w osobnym pasku pod nagłówkiem (poza tym plikiem).
 *
 * Wymaga Google Fonts:
 *   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600;700&display=swap
 */

/* ============================================================
   DESIGN TOKENS  (:root)
   ============================================================ */

:root {
    /* ----- Kolory marki ----- */
    --espresso: #1C1812;
    /* nagłówki, tekst na jasnym tle, ciemne sekcje */
    --copper: #B87333;
    /* akcent główny: linki, hover, aktywne pozycje */
    --copper-dark: #96602A;
    /* hover akcentu, stany :active */
    --forest: #3D5C3A;
    /* akcent drugorzędny: tagi, pin „uwielbiam” */
    --cream: #F5F0E6;
    /* tło strony */
    --warm-white: #FAF8F3;
    /* tło nawigacji, kart, paneli */
    --cream-dark: #EDE5D3;
    /* obramowania, separatory, tła hover */
    --brown-warm: #7A6040;
    /* tekst drugorzędny, leady */
    --taupe: #9A8B7A;
    /* meta, podpisy, placeholdery */
    --body-text: #4A3C2A;
    /* podstawowy kolor tekstu */

    /* ----- Kolory funkcjonalne (pochodne, do nakładek/cieni) ----- */
    --ink-06: rgba(28, 24, 18, 0.06);
    --ink-08: rgba(28, 24, 18, 0.08);
    --ink-14: rgba(28, 24, 18, 0.14);
    --ink-28: rgba(28, 24, 18, 0.28);
    --copper-12: rgba(184, 115, 51, 0.12);
    --copper-35: rgba(184, 115, 51, 0.35);

    /* ----- Kolory ciemnego motywu (offcanvas, stopka, newsletter) ----- */
    --dark-bg: #1C1812;
    /* tło sekcji ciemnych = --espresso */
    --dark-text: #C9BDAB;
    /* tekst na ciemnym tle */
    --dark-muted: #9A8B7A;
    /* tekst wyciszony na ciemnym tle */
    --dark-faint: #6E6552;
    /* najsłabszy tekst / copyright */
    --dark-line: #2C2820;
    /* separatory na ciemnym tle */

    /* ----- Typografia ----- */
    --serif: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
    /* display, nagłówki, leady */
    --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* UI, tekst, nawigacja */

    /* ----- Promienie ----- */
    --r-card: 8px;
    --r-btn: 3px;
    --r-tag: 3px;
    --r-pill: 40px;

    /* ----- Cienie ----- */
    --shadow-sm: 0 1px 2px var(--ink-06);
    --shadow-md: 0 8px 24px var(--ink-08);
    --shadow-lg: 0 18px 48px var(--ink-14);

    /* ----- Rytm odstępów ----- */
    --gap-xs: 8px;
    --gap-sm: 16px;
    --gap-md: 24px;
    --gap-lg: 48px;
    --gap-xl: 80px;
    --gap-xxl: 120px;

    /* ----- Nawigacja (parametry belki) ----- */
    --nav-max: 1280px;
    /* maks. szerokość zawartości nagłówka */
    --nav-pad-x: 32px;
    /* poziomy padding belki (desktop) */
    --nav-pad-y: 14px;
    /* pionowy padding belki (desktop) */
    --nav-gap: 28px;
    /* odstęp między pozycjami menu poziomego */
    --nav-z: 50;
    /* warstwa sticky nagłówka */
    --nav-link-fs: 11px;
    /* rozmiar etykiety pozycji menu */
    --nav-link-ls: 0.18em;
    /* tracking pozycji menu */
}


/* ============================================================
   NAGŁÓWEK / BELKA NAWIGACJI
   Cel: natywny DOM Joomla (header.container-header).
   Układ desktop: [logo] —— [menu poziome] —— [GTranslate]
   Breakpoint: 992px (Bootstrap lg = navbar-expand-lg).
   ============================================================ */

/* ----- Belka: lity pasek redakcyjny -----
   Trzy dzieci nagłówka (DOM po przebudowie modułów):
     .container-topbar         → pasek social (rząd 1, pełna szerokość)
     .grid-child               → logo            ┐ rząd 2 (główna belka)
     .grid-child.container-nav → menu + szukanie + GTranslate ┘
   flex-wrap pozwala paskowi social zająć osobny, pełnej szerokości rząd nad belką. */
header.container-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    background: var(--warm-white);
    border-bottom: 1px solid var(--cream-dark);
    /* tło na całą szerokość, treść wyśrodkowana do --nav-max */
    padding: 5px max(var(--nav-pad-x), (100% - var(--nav-max)) / 2);
    /* Desktop: belka sticky u góry (menu zawsze pod ręką).
       Na mobile (media query niżej) header wraca do relative i przewija się w górę. */
    position: sticky;
    top: 0;
    z-index: var(--nav-z);
}

/* ----- Górny pasek social (rząd 1, pełna szerokość) ----- */
header.container-header>.container-topbar {
    order: 0;
    flex: 0 0 100%;
    min-width: 0;
    padding: 0;
    border-bottom: 1px solid var(--cream-dark);
}

.container-topbar .topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}

.container-header (margin-top: 0);



/* opcjonalny nagłówek modułu (tytuł włączany w ustawieniach modułu) — po lewej */
.container-topbar .topbar>h5 {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: var(--brown-warm);
}

/* social zawsze przy prawej krawędzi — niezależnie od tego, czy tytuł jest włączony */
.container-topbar .topbar>.mod-custom {
    margin-left: auto;
}

/* Dwoje dzieci nagłówka (DOM po przebudowie pozycji modułów):
     .grid-child            → logo
     .grid-child.container-nav → menu (nav.menu) + .container-search (finder + GTranslate + social)
   width:max-content/padding:0 na logo: Cassiopeia rozdyma .grid-child do 100% (flex-basis:auto),
   więc logo trzymamy do treści, a container-nav robimy elastycznym kontenerem reszty. */
header.container-header>.grid-child:not(.container-nav) {
    order: 1;
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
    padding: 0;
}



/* logo */
header.container-header>.grid-child.container-nav {
    order: 2;
    flex: 1 1 0;
    /* basis 0 KONIECZNE: przy flex-basis:auto container-nav żąda max-content i zawija się
       pod logo (osobny rząd). Basis 0 trzyma go w rzędzie z logo i pozwala rosnąć. */
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--nav-gap);
}

/* menu + narzędzia. flex-direction:row KONIECZNE — Cassiopeia daje .grid-child{flex-direction:column} */

/* Wewnątrz container-nav: menu rośnie (i centruje pozycje), narzędzia po prawej */
.container-nav>nav.menu {
    flex: 1 1 auto;
    min-width: 0;
}

.container-nav>.container-search {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ----- Logo (raster .png/.webp, NIE tekstowy lockup z dist) ----- */
header .grid-child .navbar-brand {
    width: auto;
    margin: 0;
    height: 70px;
}

header .grid-child .brand-logo {
    display: inline-flex;
    align-items: center;
}

header .grid-child .brand-logo img {
    height: 70px;
    width: auto;
    display: block;
}

/* Pusty a.navbar-brand wewnątrz offcanvas — zerujemy, żeby nie dodawał szerokości */
#joffcanvas1>.container-fluid>.navbar-brand {
    display: none;
}

/* ----- Kontener menu (nav.menu > nav#joffcanvas1.navbar) ----- */
.container-nav nav.menu {
    min-width: 0;
    margin-top: 0 !important;
}

.container-nav .navbar {
    padding: 0;
    width: 100%;
}

.container-nav .navbar>.container-fluid {
    display: flex;
    justify-content: center;
    padding: 0;
}

/* ----- Lista menu (poziomo na desktopie) ----- */
ul.mod-menu.metismenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Pozycja level-1 + miejsce zaczepienia dropdownu */
.mod-menu .metismenu-item.level-1 {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.container-header .container-search {
    margin-top: 0;
}

/* Link level-1 — traktowanie jak .nav__link z makiety */
.mod-menu .metismenu-item.level-1>a {
    font-family: var(--sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--nav-link-ls);
    font-size: var(--nav-link-fs);
    color: var(--espresso);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
}

.mod-menu .metismenu-item.level-1>a:hover,
.mod-menu .metismenu-item.level-1.current>a,
.mod-menu .metismenu-item.level-1.active>a {
    color: var(--copper);
    border-bottom-color: var(--copper);
}

/* ----- Przyciski rozwijające (mm-toggler) — wspólny wygląd karetki ----- */
.metismenu.mod-menu .mm-toggler {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--espresso);
    transition: color 200ms ease, transform 200ms ease;
}

.metismenu.mod-menu .mm-toggler::after {
    content: "";
    width: 7px;
    height: 7px;
    /* border-top/-left jawnie wyzerowane — inaczej przeciekają z domyślnego
       trójkąta Cassiopei (template.min.css ma ten sam selektor i ustawia
       border-top: .5em solid + border-left: .5em solid transparent; CSS
       kaskaduje per-właściwość, więc bez tego nadpisania te dwie strony
       mieszają się z naszym border-right/-bottom, dając krzywy kształt) */
    border-top: 0;
    border-left: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 200ms ease;
}

.metismenu.mod-menu .level-1>.mm-toggler {
    color: var(--espresso);
}

.metismenu.mod-menu .level-1:hover>.mm-toggler {
    color: var(--copper);
}

.metismenu.mod-menu .level-2 .mm-toggler {
    color: var(--brown-warm);
}

/* ============================================================
   DESKTOP (>= 992px) — dropdowny na hover
   Odtwarza istniejące zachowanie Cassiopei (mod-menu_dropdown),
   tylko na marce. Pełne mega-menu na hover dodamy później.
   ============================================================ */
@media (min-width: 992px) {

    /* Toggler na desktopie tylko jako wskaźnik karetki — nie blokuje hovera */
    .metismenu.mod-menu .level-1>.mm-toggler {
        pointer-events: none;
    }

    .metismenu.mod-menu .level-1:hover>.mm-toggler::after {
        transform: rotate(225deg);
        margin-top: 2px;
    }

    /* Wszystkie panele podmenu w obrębie pozycji level-1: domyślnie ukryte */
    .metismenu.mod-menu .metismenu-item.level-1 .mm-collapse {
        position: absolute;
        min-width: 250px;
        padding: 8px;
        list-style: none;
        background: var(--warm-white);
        border: 1px solid var(--cream-dark);
        border-radius: var(--r-card);
        box-shadow: var(--shadow-md);
        /* nadpisanie zwijania metismenu (height:0/overflow) z Cassiopei */
        height: auto !important;
        display: block;
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
        z-index: 60;
    }

    /* Poziom 2 — panel pod pozycją level-1 */
    .metismenu.mod-menu .metismenu-item.level-1>.mm-collapse {
        top: 100%;
        left: 0;
        margin-top: 12px;
    }

    /* Poziom 3 — flyout w prawo od pozycji level-2 */
    .metismenu.mod-menu .metismenu-item.level-2>.mm-collapse {
        top: -9px;
        left: calc(100% + 8px);
        transform: translateX(8px);
    }

    /* Pokazanie panelu po najechaniu na BEZPOŚREDNIEGO rodzica */
    .metismenu.mod-menu .metismenu-item.level-1:hover>.mm-collapse,
    .metismenu.mod-menu .metismenu-item.level-2:hover>.mm-collapse {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Pozycje wewnątrz dropdownu */
    .metismenu.mod-menu .mm-collapse .metismenu-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .metismenu.mod-menu .mm-collapse a {
        flex: 1;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
        color: var(--body-text);
        text-decoration: none;
        padding: 9px 12px;
        border-radius: var(--r-btn);
        transition: background 160ms ease, color 160ms ease;
    }

    .metismenu.mod-menu .mm-collapse a:hover {
        background: var(--cream);
        color: var(--copper);
    }

    /* Karetka pozycji z podmenu w dropdownie — wskazuje w prawo (flyout) */
    .metismenu.mod-menu .mm-collapse .mm-toggler {
        pointer-events: none;
    }

    .metismenu.mod-menu .mm-collapse .mm-toggler::after {
        transform: rotate(-45deg);
        margin-top: 0;
    }
}

/* ============================================================
   NARZĘDZIA W PASKU: szukanie (Finder) · social · GTranslate
   DOM: .container-nav > .container-search > [
          <search><form.mod-finder>,           (pole szukania)
          .gtranslate_wrapper,                  (GTranslate)
          .search.no-card #mod-custom120 .socialIcons ]  (social)
   ============================================================ */

/* Porządek w klastrze (.container-search): pole szukania · GTranslate */
.container-search>search {
    order: 1;
    display: flex;
    align-items: center;
}

.container-search>.gtranslate_wrapper {
    order: 2;
    display: inline-flex;
    align-items: center;
}

/* GTranslate: ukryj nazwę języka (span tuż po fladze), zostaw flagę + strzałkę */
.container-search .gt_switcher-popup img+span {
    display: none;
}

.container-search .gt_switcher-popup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* --- Social (w górnym pasku .container-topbar): zbicie fa-5x do okrągłych ikon --- */
.container-topbar .socialIcons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    --bs-gutter-x: 0;
    /* kasuje gutter bootstrapowego .row */
}

.container-topbar .socialIcon {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

.container-topbar .socialIcon a {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cream-dark);
    border-radius: 50%;
    color: var(--espresso);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.container-topbar .socialIcon a:hover {
    background: var(--espresso);
    color: #fff;
    border-color: var(--espresso);
}

.container-topbar .socialIcon i {
    font-size: 13px !important;
    /* nadpisuje .fa-5x (5em) */
    line-height: 1;
}

/* --- Szukanie (Finder): statyczne pole-pigułka z lupą (jak .nav__search w makiecie) ---
   Cała .mod-finder jest pigułką: tło cream + obwódka + r-pill; lupa (label.finder)
   to ikona wewnątrz, input zawsze widoczny. Bez animacji rozwijania. */
.container-search .mod-finder {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 220px;
    /* desktop: stała szerokość pigułki; mobile nadpisuje na 100% */
    padding: 7px 14px;
    background: var(--cream);
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-pill);
    color: var(--taupe);
    transition: border-color 200ms ease, color 200ms ease;
}

.container-search .mod-finder:focus-within {
    border-color: var(--copper);
    color: var(--copper);
}

/* lupa = label.finder; tylko ikona, bez okręgu i tła */
.container-search .mod-finder label.finder {
    margin: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--brown-warm);
    font-size: 0;
    /* chowa tekst „Szukaj!” */
    cursor: pointer;
}

.container-search .mod-finder label.finder::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f002";
    /* magnifying-glass (FA ładowany przez Joomlę) */
    font-size: 14px;
}

.container-search .mod-finder .awesomplete {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.container-search .mod-finder input[name="q"] {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--body-text);
}

.container-search .mod-finder input[name="q"]::placeholder {
    color: var(--taupe);
}

.container-search .mod-finder input[name="q"]:focus {
    outline: none;
}

/* ============================================================
   MOBILE (< 992px) — szuflada offcanvas (ciemny motyw)
   ============================================================ */
@media (max-width: 991.98px) {

    /* Hamburger — selektor z .container-header bije Cassiopeię
     (.container-header .navbar-toggler{border:1px solid #fff;color:#fff}) */
    .container-header .navbar-toggler {
        border: 1px solid var(--cream-dark);
        padding: 8px 10px;
        color: var(--espresso);
        box-shadow: none;
    }

    .container-header .navbar-toggler .icon-menu {
        color: var(--espresso);
    }

    .container-header .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }

    /* Panel szuflady — prefiks ID + !important biją Bootstrap .text-bg-dark
     (background/color z !important dają slate-grey zamiast espresso) */
    #offcanvasNavbar1.offcanvas {
        background: var(--dark-bg) !important;
        color: var(--dark-text) !important;
        width: min(86vw, 360px);
        border-left: 1px solid var(--dark-line);
    }

    .offcanvas-header {
        border-bottom: 1px solid var(--dark-line);
        padding: 20px 24px;
    }

    .offcanvas-title {
        display: block;
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 600;
        color: var(--warm-white);
    }

    .offcanvas .btn-close {
        filter: invert(1) sepia(0.2) brightness(1.3);
        opacity: 0.8;
    }

    .offcanvas-body {
        padding: 8px 12px 24px;
    }

    /* Lista pionowa */
    .offcanvas-body ul.mod-menu.metismenu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Każda pozycja to wiersz: [link rośnie] [toggler], podmenu pełnej szerokości pod spodem.
     Nadpisuje bazowy display:flex pozycji level-1 i porządkuje akordeon. */
    .offcanvas-body .mod-menu .metismenu-item {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        border-bottom: 1px solid var(--dark-line);
    }

    .offcanvas-body .mod-menu .mm-collapse .metismenu-item:last-child {
        border-bottom: none;
    }

    /* Link w szufladzie */
    .offcanvas-body .mod-menu a {
        flex: 1 1 auto;
        min-width: 0;
        font-family: var(--sans);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.06em;
        color: var(--dark-text);
        text-decoration: none;
        padding: 13px 12px;
        border-left: 2px solid transparent;
        transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .offcanvas-body .mod-menu .level-1>a {
        color: var(--warm-white);
        text-transform: uppercase;
        letter-spacing: var(--nav-link-ls);
        border-bottom: 0;
        /* kasuje podkreślenie z wersji desktop (pasek) */
    }

    .offcanvas-body .mod-menu a:hover,
    .offcanvas-body .mod-menu .current>a,
    .offcanvas-body .mod-menu .active>a {
        color: var(--copper);
        border-left-color: var(--copper);
    }

    /* Wcięcia poziomów */
    .offcanvas-body .mod-menu .level-2>a {
        padding-left: 26px;
        font-weight: 500;
        text-transform: none;
    }

    .offcanvas-body .mod-menu .level-3>a {
        padding-left: 42px;
        font-weight: 400;
        color: var(--dark-muted);
    }

    /* Toggler w szufladzie — kwadrat po prawej wiersza */
    .offcanvas-body .mm-toggler {
        flex: 0 0 48px;
        width: 48px;
        height: auto;
        color: var(--dark-text);
        border-left: 1px solid var(--dark-line);
    }

    .offcanvas-body .mm-toggler::after {
        transform: rotate(45deg);
        margin-top: -3px;
    }

    .offcanvas-body .metismenu-item>.mm-collapse.mm-show~.mm-toggler::after,
    .offcanvas-body .mm-toggler[aria-expanded="true"]::after {
        transform: rotate(225deg);
        margin-top: 2px;
    }

    /* Podmenu: akordeon pełnej szerokości pod wierszem (metismenu steruje .mm-show) */
    .offcanvas-body .mm-collapse {
        flex: 0 0 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.22);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* --- WZMOCNIENIE KOLORÓW (prefiks ID + !important) ---
     Na żywo Bootstrap (.text-bg-dark color:#fff!important, .text-primary na
     .offcanvas-body) i Cassiopeia nadpisują kolory linków. Selektor z
     #offcanvasNavbar1 (specyficzność ID) + !important gwarantuje wygraną. */
    #offcanvasNavbar1 .offcanvas-title {
        color: var(--warm-white) !important;
    }

    #offcanvasNavbar1 .mod-menu a {
        color: var(--dark-text) !important;
    }

    #offcanvasNavbar1 .mod-menu .level-1>a {
        color: var(--warm-white) !important;
    }

    #offcanvasNavbar1 .mod-menu .level-3>a {
        color: var(--dark-muted) !important;
    }

    #offcanvasNavbar1 .mod-menu a:hover,
    #offcanvasNavbar1 .mod-menu .current>a,
    #offcanvasNavbar1 .mod-menu .active>a {
        color: var(--copper) !important;
    }

    #offcanvasNavbar1 .mm-toggler {
        color: var(--dark-text) !important;
    }

    /* --- Układ mobilny belki (3 rzędy) ---
     Rząd 1: logo (lewo) + hamburger (prawo, absolutnie na linii logo).
     Rząd 2: pasek social (wyśrodkowany).
     Rząd 3: szukanie + GTranslate (wyśrodkowane).
     Logo jako rząd 1 (order:1) → hamburger absolutny top:12px równa się z logo. */
    header.container-header {
        position: relative;
        flex-wrap: wrap;
        row-gap: 12px;
    }

    header.container-header>.grid-child:not(.container-nav) {
        order: 1;
        flex: 1 1 auto;
    }

    /* logo, rząd 1 */

    header.container-header>.container-topbar {
        order: 2;
        margin-bottom: 0;
        border-bottom: 0;
    }

    /* social, rząd 2 */
    .container-topbar .topbar {
        justify-content: center;
        padding-bottom: 0;
    }

    .container-topbar .topbar>.mod-custom {
        margin-left: 0;
    }

    /* social wyśrodkowane na mobile */

    header.container-header>.grid-child.container-nav {
        order: 3;
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* narzędzia, rząd 3 */

    .container-nav>nav.menu {
        position: absolute;
        top: 12px;
        right: 16px;
        /* hamburger w prawym górnym rogu, na linii logo */
        flex: 0 0 auto;
        margin: 0;
    }

    /* Rząd narzędzi: pole szukania rośnie (lewo), flaga GTranslate po prawej */
    .container-nav>.container-search {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* pole szukania wypełnia dostępną szerokość */
    .container-search>search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .container-search .mod-finder {
        width: 100%;
    }

    /* flaga GTranslate w normalnym flow, dosunięta do prawej krawędzi */
    .container-search>.gtranslate_wrapper {
        flex: 0 0 auto;
    }
}


/* ============================================================
   OKRUSZKI (mod-breadcrumbs) — cienki pasek pod nagłówkiem
   Brak na makiecie; stylizacja dla spójności z belką nawigacji.
   DOM: nav.mod-breadcrumbs__wrapper
          > ol.mod-breadcrumbs.breadcrumb (.px-3 .py-2 z Bootstrapa)
             > li.mod-breadcrumbs__here ("Jesteś tutaj:")
             > li.mod-breadcrumbs__item.breadcrumb-item ( > a | span )
   ============================================================ */

/* Pasek na pełną szerokość; treść wyśrodkowana do --nav-max jak w nagłówku.
   Okruszki dotykają belki nawigacji, wyglądają jak jej część (margin-top:0 nadpisuje
   domyślny odstęp 1.2rem, który Cassiopeia dodaje między pozycjami modułów). Tło
   nieprzezroczyste, żeby treść nie prześwitywała. */
.mod-breadcrumbs__wrapper {
    background: var(--warm-white);
    border-bottom: 1px solid var(--cream-dark);
    /* .container-component > :first-child z Cassiopei (template.min.css) ma wyższą
       specyficzność (.container-component + :first-child) niż goła klasa tutaj — bije
       margin-top:0 i wstawia 1em odstępu mimo deklaracji. !important wymuszone. */
    margin-top: 0 !important;
}

ol.mod-breadcrumbs.breadcrumb {
    max-width: var(--nav-max);
    margin: 0 auto;
    /* !important bije .px-3 .py-2 z markupu Joomli */
    padding: 10px var(--nav-pad-x) !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    font-family: var(--sans);
    font-size: 12px;
    background: transparent;
    /* kasuje domyślne tło/margines bootstrapowego .breadcrumb */
    margin-bottom: 0;
}

/* „Jesteś tutaj:" — serif italic, w tonie tytułu w topbarze */
.mod-breadcrumbs__here {
    float: none !important;
    /* kasuje .float-start z Joomli */
    margin: 0 12px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--brown-warm);
}

.mod-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    color: var(--taupe);
}

/* separator między pozycjami — nadpisuje bootstrapowy "/" */
.mod-breadcrumbs .breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
}

.mod-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    content: "\203A";
    /* › */
    padding: 0 8px;
    color: var(--taupe);
    font-size: 14px;
}

.mod-breadcrumbs__item a {
    color: var(--brown-warm);
    text-decoration: none;
    transition: color 160ms ease;
}

.mod-breadcrumbs__item a:hover {
    color: var(--copper);
}

/* aktywna (ostatnia) pozycja — bieżąca strona */
.mod-breadcrumbs__item.active,
.mod-breadcrumbs__item.active span {
    color: var(--espresso);
    font-weight: 500;
}

@media (max-width: 991.98px) {
    ol.mod-breadcrumbs.breadcrumb {
        padding: 8px 16px !important;
    }

    .mod-breadcrumbs__here {
        font-size: 13px;
        margin-right: 8px;
    }
}


/* ============================================================
   HERO (pozycja banner) — moduł Newsflash z override .a-hero
   DOM: .container-banner.full-width > section.banner.hero > section.a-hero
   Wymaga override: templates/cassiopeia/html/mod_articles_news/default.php
   Ustawienia modułu: Layout = Default · Article Image = Intro ·
   Include Featured = Only · Count = 1 · Module Style = None.
   ============================================================ */

/* Pełnoekranowy baner: zerujemy padding chrome/kontenera, układ rządzi sam */
.container-banner.full-width:has(.a-hero) {
    padding: 0;
}

.banner.hero {
    padding: 0;
    margin: 0;
    border: 0;
}

.a-hero {
    position: relative;
    isolation: isolate;
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--espresso);
}

.a-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.a-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Czytelność tekstu: ciemny gradient od dołu i od lewej */
.a-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(28, 24, 18, .15) 0%, rgba(28, 24, 18, 0) 30%, rgba(28, 24, 18, .55) 78%, rgba(28, 24, 18, .85) 100%),
        linear-gradient(90deg, rgba(28, 24, 18, .70) 0%, rgba(28, 24, 18, .25) 45%, rgba(28, 24, 18, 0) 75%);
}

.a-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--nav-max);
    margin: 0 auto;
    padding: 64px var(--nav-pad-x) 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
    gap: 56px;
    align-items: end;
}

.a-hero__main {
    max-width: 760px;
}

.a-hero__eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #E9C9A3;
    /* jasna miedź — akcent na ciemnym tle */
    margin-bottom: 18px;
}

.a-hero h1 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 20px;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.a-hero__lead {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.55;
    color: var(--cream-dark);
    margin: 0 0 28px;
    max-width: 60ch;
}

.a-hero__cta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* CTA — przycisk miedziany (user.css nie ma globalnego .btn) */
.a-hero .btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 13px 26px;
    background: var(--copper);
    color: #fff;
    border: 0;
    border-radius: var(--r-btn);
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
}

.a-hero .btn:hover {
    background: var(--copper-dark);
    transform: translateY(-1px);
}

.a-hero__meta {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #C9BDAB;
}

/* ----- Aside „Warto zobaczyć" — przeszklony panel na zdjęciu ----- */
.a-hero__aside {
    background: rgba(28, 24, 18, .42);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-card);
    padding: 24px 24px 10px;
}

.a-hero__aside-title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #E9C9A3;
    margin: 0 0 16px;
}

.a-hero__aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.a-hero__aside li {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.a-hero__aside li:first-child {
    border-top: none;
    padding-top: 0;
}

.a-hero__aside a {
    display: block;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 6px;
    text-decoration: none;
    transition: color 200ms ease;
}

.a-hero__aside a:hover {
    color: #E9C9A3;
}

.a-hero__aside .meta {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #A99F8D;
}

/* Tablet: aside pod hero, jedna kolumna */
@media (max-width: 1024px) {
    .a-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    .a-hero__aside {
        max-width: 480px;
    }
}

@media (max-width: 680px) {
    .a-hero {
        min-height: 78vh;
    }

    .a-hero__inner {
        padding: 48px 20px 40px;
    }
}


/* ============================================================
   BLOK 2 — KARTY (mod_articles_news, Layout = cards)
   DOM: .com-content-article__body > section.a-features
   Wymaga override: templates/cassiopeia_extended/html/mod_articles_news/cards.php
   Desktop: 3 kolumny × 2 rzędy (6). Tablet: 2 kolumny. Telefon: 1 kolumna, max 3 karty.
   ============================================================ */

.a-features {
    padding: var(--gap-xl) 32px;
}

/* Nagłówek sekcji (kicker + tytuł) */
.section__head {
    max-width: var(--nav-max);
    margin: 0 auto var(--gap-lg);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.section__sub {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--taupe);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 10px;
}

.section__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--espresso);
    margin: 0;
}

/* "Najpopularniejsze wpisy" / "Najnowsze wpisy" (tytuł modułu, .section__title) i
   "Czytane najczęściej" / "Świeże wpisy" (.section__sub) znaczyły to samo — dwa
   nagłówki w jednej sekcji. Tytuł modułu zniknął, a eyebrow przejął jego styl
   (duży serif), żeby został tylko jeden nagłówek na sekcję. Scoped do .a-features/
   .a-latest — bare .section__sub jest też używany w sekcji mapy i newsletterze,
   gdzie ma zostać mały. */
.a-features .section__title,
.a-latest .section__title {
    display: none;
}

.a-features .section__sub,
.a-latest .section__sub {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--copper-dark);
    text-transform: none;
    margin: 0;
}

.section__link {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.section__link:hover {
    color: var(--copper-dark);
}

/* Siatka kart */
.a-features__grid {
    max-width: var(--nav-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

/* ----- Karta ----- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--warm-white);
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform 320ms cubic-bezier(.2, .7, .2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--copper-35);
}

.card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cream-dark);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.card:hover .card__media img {
    transform: scale(1.04);
}

.card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.card__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.18;
    color: var(--espresso);
    margin: 0;
    text-wrap: balance;
}

.card__excerpt {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.65;
    color: var(--brown-warm);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    /* długi tekst „Read More" zawija się w nowy wiersz zamiast rozpychać kartę */
}

.card__foot .meta {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--taupe);
}

.card__cta {
    color: var(--copper);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 200ms ease, color 200ms ease;
}

.card:hover .card__cta {
    gap: 10px;
    color: var(--copper-dark);
}

/* ----- Tag (kicker na zdjęciu karty) ----- */
.tag {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 6px 10px;
    color: var(--forest);
    border-radius: var(--r-tag);
}

.tag.tag--forest {
    background: var(--forest);
    color: #fff;
}

.tag.tag--copper {
    background: var(--copper);
    color: #fff;
}

/* ----- Responsywność bloku 2 ----- */
@media (max-width: 1024px) {
    .a-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {

    /* Gutter treści Cassiopei (grid gap .site-grid) to 38px — na telefonie za dużo,
       przez co kafelki robią się jak znaczki pocztowe. Zwężamy do 16px na mobile;
       dotyczy całej treści (tekst, okruszki), banner pozostaje pełnoszeroki.
       !important: regułę gapu szablon ustawia selektorem o wyższej specyficzności. */
    .site-grid {
        column-gap: 16px !important;
    }

    /* Bez poziomego paddingu sekcji — jedynym marginesem bocznym jest 16px gutter treści */
    .a-features {
        padding: var(--gap-lg) 0;
    }

    .a-features__grid {
        grid-template-columns: 1fr;
    }

    /* Telefon: pokazujemy tylko 3 pierwsze karty (reszta i tak w DOM) */
    .a-features__grid .card:nth-child(n+4) {
        display: none;
    }
}

/* ============================================================
   BLOK 3 — NAJNOWSZE + SIDEBAR (Wariant A)
   DOM (HTML artykułu + 2 moduły mod_articles_news):
     section.a-latest
       > .section__head            (kicker + tytuł + link — w HTML artykułu)
       > .a-latest__layout
           > .a-latest__main       (moduł "Najnowsze",  Layout = grid)
               > a.card …          (2 kolumny na desktopie)
           > aside.a-sidebar
               > .a-sidebar__block        (moduł "Najpopularniejsze", Layout = sidebar)
                   > h4 + .a-sidebar__popular > a.pop …
               > .a-sidebar__block--coffee (statyczny HTML w artykule)
   Wymaga override'ów:
     templates/cassiopeia_extended/html/mod_articles_news/grid.php
     templates/cassiopeia_extended/html/mod_articles_news/horizontal.php
   Reużywa .card / .tag / .section__* z BLOKU 2.
   ============================================================ */

.a-latest {
    padding: var(--gap-xl) 32px;
}

.a-latest__layout {
    max-width: var(--nav-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--gap-lg);
    align-items: start;
}

/* Lewa kolumna — siatka 2 kart w rzędzie (moduł grid.php) */
.a-latest__main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
}

/* ----- Sidebar ----- */
.a-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.a-sidebar__block {
    background: var(--warm-white);
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-card);
    padding: 24px;
}

.a-sidebar__block h4 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--espresso);
    margin: 0 0 18px;
}

.a-sidebar__popular {
    display: flex;
    flex-direction: column;
}

/* Pojedynczy wpis na liście popularnych */
.pop {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--cream-dark);
    text-decoration: none;
    color: inherit;
}

.pop:first-child {
    border-top: none;
    padding-top: 0;
}

.pop:last-child {
    padding-bottom: 0;
}

.pop__media {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--cream-dark);
}

.pop__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.pop:hover .pop__media img {
    transform: scale(1.06);
}

.pop__body {
    min-width: 0;
}

.pop__tag {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper);
    margin-bottom: 4px;
}

.pop__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    color: var(--espresso);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pop:hover .pop__title {
    color: var(--copper-dark);
}

/* ----- Box „Postaw mi kawę" (ciemny) ----- */
.a-sidebar__block--coffee {
    background: var(--espresso);
    border-color: var(--espresso);
}

.a-sidebar__block--coffee h4 {
    color: var(--copper);
}

/* .art-body p (color: --espresso) ma tę samą specyficzność (klasa+element) i jest niżej
   w pliku, więc bije ten kolor — tekst wychodził espresso-na-espresso, czyli niewidoczny.
   Dopisany ".art-body" podnosi specyficzność i gwarantuje biały kolor niezależnie od kolejności. */
.art-body .a-sidebar__block--coffee p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--cream-dark);
    margin: 0 0 18px;
}

/* Przycisk CTA — user.css nie ma globalnego .btn, więc stylujemy scoped (jak .a-hero .btn) */
.a-sidebar__block--coffee .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 13px 26px;
    background: var(--copper);
    color: #fff;
    border: 0;
    border-radius: var(--r-btn);
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
}

.a-sidebar__block--coffee .btn:hover {
    background: var(--copper-dark);
    transform: translateY(-1px);
}

/* ----- Responsywność bloku 3 ----- */
@media (max-width: 1024px) {
    .a-latest__layout {
        grid-template-columns: 1fr;
    }

    .a-sidebar {
        position: static;
    }
}

@media (max-width: 680px) {
    .a-latest {
        padding: var(--gap-lg) 0;
    }

    .a-latest__main {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   BLOK 4 — MAPA (Wariant A)
   DOM (HTML artykułu + moduł GMapFP):
     section.a-map
       > .a-map__layout
           > .a-map__intro    (kicker + h2 + tekst + .legend[placeholder] + .btn--ghost)
           > .a-map__canvas   (<section class="map">{gmapfp id="..."}</section>)
   Mapę renderuje GMapFP — wysokość ustaw w module (np. 100% / ~480px).
   Legenda/piny: placeholder w HTML; style legendy gotowe poniżej.
   ============================================================ */

/* Pełna szerokość pasów (full-bleed) — sekcja wychodzi poza kolumnę treści
   (.container-component ~1088px) na całą szerokość okna. overflow-x: clip na <html>
   kasuje 8px poziomego przewinięcia, które dodaje 100vw (szerokość paska scrolla);
   nie psuje sticky nagłówka. Wymaga przeglądarek z obsługą overflow: clip. */
html {
    overflow-x: clip;
}

.a-map {
    background: var(--cream-dark);
    padding: var(--gap-xl) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.a-map__layout {
    max-width: var(--nav-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--gap-lg);
    align-items: center;
}

.a-map__intro h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--espresso);
    margin: 0 0 18px;
}

.a-map__intro h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--copper);
}

.a-map__intro p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--brown-warm);
    margin: 0 0 28px;
    max-width: 46ch;
}

/* Kontener mapy GMapFP */
.a-map__canvas {
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid var(--cream-dark);
    box-shadow: var(--shadow-md);
    background: var(--cream);
}

.a-map__canvas .map,
.a-map__canvas iframe,
.a-map__canvas img {
    display: block;
    width: 100%;
}

/* Przycisk ghost (user.css nie ma globalnego .btn--ghost) */
.a-map__intro .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 13px 26px;
    background: transparent;
    color: var(--espresso);
    border: 1px solid var(--espresso);
    border-radius: var(--r-btn);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.a-map__intro .btn:hover {
    background: var(--espresso);
    color: #fff;
    transform: translateY(-1px);
}

/* Legenda pinów (gotowe style — piny dodasz później) */
.a-map .legend {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.a-map .legend__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: var(--espresso);
}

.a-map .legend__pin {
    width: 18px;
    height: 32px;
    display: inline-block;
    flex-shrink: 0;
}

.a-map .legend__pin svg,
.a-map .legend__pin img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: visible;
}

.a-map .legend__count {
    color: var(--taupe);
    font-weight: 500;
    letter-spacing: 0.1em;
}

@media (max-width: 1024px) {
    .a-map__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 680px) {
    .a-map {
        padding: var(--gap-lg) 20px;
    }
}


/* ============================================================
   BLOK 5 — O AUTORZE (Wariant A)
   DOM (HTML artykułu):
     section.a-about (full-bleed, tło warm-white)
       > .a-about__inner  (portret 220px + treść: eyebrow / cytat / podpis)
   Portret: images/Tadeusz-Ibrom.webp (ścieżka WZGLĘDNA — działa na /test/ i na root)
   ============================================================ */

.a-about {
    background: var(--warm-white);
    padding: var(--gap-xl) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.a-about__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--gap-lg);
    align-items: center;
}

.a-about__photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cream-dark);
    border: 4px solid var(--cream);
    box-shadow: var(--shadow-md);
}

.a-about__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a-about__eyebrow {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    margin: 0 0 14px;
}

.a-about__quote {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.32;
    color: var(--espresso);
    margin: 0 0 24px;
    text-wrap: balance;
}

.a-about__sig {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--brown-warm);
}

.a-about__sig strong {
    color: var(--espresso);
}

.a-about__sig a {
    color: var(--copper);
    font-weight: 600;
    text-decoration: none;
}

.a-about__sig a:hover {
    color: var(--copper-dark);
}

@media (max-width: 680px) {
    .a-about {
        padding: var(--gap-lg) 20px;
    }

    .a-about__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 28px;
    }

    .a-about__sig {
        justify-content: center;
    }
}


/* ============================================================
   BLOK 6 — NEWSLETTER (Wariant A)
   DOM (HTML artykułu): section.newsletter (full-bleed, tło espresso)
       > .newsletter__inner  (treść po lewej + formularz po prawej)
   Formularz statyczny; jeśli użyjesz modułu zapisu (np. Acymailing),
   podmień <form>…</form> na {loadmoduleid XX} i ostyluj jego output.
   ============================================================ */

.newsletter {
    background: var(--espresso);
    color: #fff;
    padding: var(--gap-xl) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.newsletter__inner {
    max-width: var(--nav-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.newsletter .section__sub {
    color: var(--copper);
}

.newsletter h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 16px;
}

.newsletter h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--copper);
}

/* .art-body p (color: --espresso) ma tę samą specyficzność i jest niżej w pliku — bije ten
   kolor (ten sam problem co .a-sidebar__block--coffee p wyżej). ".art-body" podnosi specyficzność. */
.art-body .newsletter p {
    color: var(--cream-dark);
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}

.newsletter form {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    padding: 8px;
    border-radius: var(--r-btn);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.newsletter input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: var(--sans);
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
}

.newsletter input::placeholder {
    color: #6e6552;
}

/* Przycisk CTA (user.css nie ma globalnego .btn) */
.newsletter .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 13px 26px;
    background: var(--copper);
    color: #fff;
    border: 0;
    border-radius: var(--r-btn);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 200ms ease, transform 200ms ease;
}

.newsletter .btn:hover {
    background: var(--copper-dark);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .newsletter__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 680px) {
    .newsletter {
        padding: var(--gap-lg) 20px;
    }

    .newsletter form {
        flex-direction: column;
    }

    .newsletter .btn {
        justify-content: center;
    }
}


/* ============================================================
   BLOK 7 — TAGI (Wariant A)
   To MODUŁ „Tagi - popularne" (mod_tags_popular) w pozycji bottom-b — nie HTML w artykule.
   Stylujemy natywny DOM modułu (jak blok 2/3):
     .grid-child.container-bottom-b
       > .bottom-b.card
           > h3.card-header  (tytuł)
           > .card-body > .mod-tagspopular-cloud.tagspopular.tagscloud
               > span.tag > a.tag-name
   Pigułki jednolite (moduł ustawiony tak, że nie wstawia inline font-size).
   ============================================================ */

/* Pas pełnoszeroki (cream) — pozycja bottom-b */
.container-bottom-b {
    background: var(--cream);
    padding: var(--gap-lg) 32px var(--gap-xl);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Reset karty Cassiopei + wyśrodkowanie */
.container-bottom-b .card,
.container-bottom-b .bottom-b.card {
    max-width: 1080px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
}

/* Tytuł modułu = a-tags__title */
.container-bottom-b .card-header {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--taupe);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 24px;
}

.container-bottom-b .card-body {
    padding: 0;
}

/* Chmura → wyśrodkowane pigułki */
.container-bottom-b .mod-tagspopular-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-bottom-b .tag {
    display: inline-block;
    margin: 0;
    /* moduł zostawia inline font-size:1em na .tag-name; em liczy się od rodzica,
       więc rozmiar pigułki ustawiamy TU (bez !important) */
    font-size: 13px;
}

/* licznik artykułów (badge) — makieta go nie ma */
.container-bottom-b .tag-count {
    display: none;
}

.container-bottom-b .tag .tag-name {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 500;
    line-height: 1;
    padding: 9px 16px;
    background: var(--warm-white);
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-pill);
    color: var(--brown-warm);
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.container-bottom-b .tag .tag-name:hover {
    border-color: var(--copper);
    color: var(--copper);
    transform: translateY(-1px);
}

@media (max-width: 680px) {
    .container-bottom-b {
        padding: var(--gap-lg) 20px;
    }
}


/* ============================================================
   BLOK 8 — STOPKA (Wariant A)
   Moduł Custom HTML w pozycji footer. Natywny <footer class="container-footer
   footer full-width"> jest już ciemny (espresso) i pełnoszeroki — stylujemy tylko
   wnętrze modułu: .footer__inner (grid) + kolumny + .footer__bottom.
   HTML modułu: blok8-footer-module.html
   ============================================================ */

/* .grid-child stopki jest flex → moduł zwężał się do treści i lądował po lewej.
   display:block + width:100% na module → .footer__inner (max 1280) centruje się. */
.container-footer .grid-child {
    display: block;
    max-width: none;
    padding: var(--gap-xl) 32px var(--gap-lg);
}

.container-footer .mod-custom {
    width: 100%;
}

.footer__inner {
    max-width: var(--nav-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
}

.footer__brand .logo img,
.footer__brand .footer__logo img {
    height: 40px;
    width: auto;
    display: block;
}

.footer__brand p {
    color: var(--dark-muted);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.7;
    margin: 18px 0 0;
    max-width: 320px;
}

.container-footer h4 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fff;
    margin: 0 0 18px;
}

.container-footer .footer__inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container-footer .footer__inner li {
    margin-bottom: 10px;
}

.container-footer .footer__inner a {
    color: var(--dark-text);
    font-family: var(--sans);
    font-size: 13px;
    text-decoration: none;
    transition: color 200ms ease;
}

.container-footer .footer__inner a:hover {
    color: var(--copper);
}

.footer__bottom {
    max-width: var(--nav-max);
    margin: 60px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--dark-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dark-faint);
}

@media (max-width: 768px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .container-footer .grid-child {
        padding: var(--gap-lg) 20px var(--gap-md);
    }

    .footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ============================================================
   KATEGORIE — HERO (Wariant A)
   Moduł Custom HTML na pozycji `banner`. Klasy ogólne (.cat-hero*)
   — dziedziczone przez WSZYSTKIE kategorie. Na kolejnych kategoriach
   zmieniasz tylko treść modułu (obraz, H1, lead, breadcrumb, statystyki).
   Dopisać na końcu user.css.

   Pozycja `banner` w Cassiopeia Extended jest pełnoszeroka — hero nie
   wymaga full-bleed. Jeśli u Ciebie banner jest w kontenerze, odkomentuj
   blok FULL-BLEED na dole.
   ============================================================ */

.cat-hero {
    position: relative;
    isolation: isolate;
    min-height: 46vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--espresso);
}

.cat-hero--leaf {
    min-height: 40vh;
}

.cat-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cat-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(28, 24, 18, .25) 0%, rgba(28, 24, 18, 0) 30%, rgba(28, 24, 18, .60) 78%, rgba(28, 24, 18, .88) 100%),
        linear-gradient(90deg, rgba(28, 24, 18, .72) 0%, rgba(28, 24, 18, .30) 50%, rgba(28, 24, 18, 0) 80%);
}

.cat-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--nav-max, 1280px);
    margin: 0 auto;
    padding: 56px 32px 48px;
}

/* okruszki */
.cat-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #c9bdab;
    margin: 0 0 22px;
}

.cat-breadcrumb a {
    color: #c9bdab;
    text-decoration: none;
    transition: color 180ms ease;
}

.cat-breadcrumb a:hover {
    color: #E9C9A3;
}

.cat-breadcrumb [aria-current] {
    color: #fff;
}

.cat-breadcrumb .sep {
    opacity: .5;
}

.cat-hero__eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #E9C9A3;
    margin-bottom: 16px;
}

.cat-hero h1 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 18px;
    text-wrap: balance;
    max-width: 18ch;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.cat-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: #E9C9A3;
}

.cat-hero__lead {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
    color: #EDE5D3;
    margin: 0;
    max-width: 62ch;
}

/* pasek statystyk */
.cat-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 26px;
}

.cat-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-hero__stat b {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 26px;
    color: #fff;
    line-height: 1;
}

.cat-hero__stat span {
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #c9bdab;
}

/* dopóki licznik się nie wczyta, nie pokazuj pustego/„0" — placeholder */
.cat-hero__stat b[data-cat-count]:empty::before {
    content: "…";
}

@media (max-width: 680px) {
    .cat-hero__inner {
        padding: 40px 20px 32px;
    }

    .cat-hero__stats {
        gap: 20px;
    }
}

/* ------------------------------------------------------------
   FULL-BLEED (odkomentuj TYLKO jeśli pozycja `banner` jest w kontenerze
   i hero nie wychodzi na całą szerokość). Wymaga html{overflow-x:clip}.
   ------------------------------------------------------------
.cat-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
*/

/* ============================================================
   KATEGORIE — INTRO (opis nad regionami)
   Pas pełnoszeroki (warm-white) — zachowuje rytm kolorów:
   hero (espresso) → intro (warm-white) → regiony (cream).
   Klasy ogólne — dziedziczone. Wymaga html{overflow-x:clip} (jest już z bloku 4).
   ============================================================ */

.cat-intro {
    background: var(--warm-white);
    padding: var(--gap-lg) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cat-intro__inner {
    max-width: 760px;
    margin: 0 auto;
}

.cat-intro p {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.7;
    color: var(--body-text, #4A3C2A);
    margin: 0 0 18px;
}

.cat-intro p:last-child {
    margin-bottom: 0;
}

.cat-intro p:first-child::first-letter {
    font-weight: 600;
    color: var(--copper);
}

@media (max-width: 680px) {
    .cat-intro {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   KATEGORIE — PAS REGIONÓW / PODKATEGORII (HUB)
   Karty generowane automatycznie z podkategorii (override
   mod_articles_categories/cards.php). Klasy ogólne — dziedziczone.
   Pas pełnoszeroki (cream): wymaga html{overflow-x:clip} (jest już z bloku 4).
   Dopisać na końcu user.css.
   ============================================================ */

/* nagłówek sekcji (wspólny dla sekcji kategorii) */
.cat-shead {
    max-width: var(--nav-max, 1280px);
    margin: 0 auto var(--gap-md);
}

.cat-shead__sub {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--copper);
    margin: 0 0 10px;
}

.cat-shead h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--espresso);
    margin: 0;
}

.cat-shead h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--copper);
}

/* pas (pełna szerokość) */
.cat-regions {
    background: var(--cream);
    padding: var(--gap-xl) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cat-regions__grid {
    max-width: var(--nav-max, 1280px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

/* karta regionu */
.cat-region {
    display: flex;
    flex-direction: column;
    background: var(--warm-white);
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-card);
    overflow: hidden;
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
    color: inherit;
    text-decoration: none;
}

.cat-region:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--copper);
}

.cat-region__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--cream-dark);
    overflow: hidden;
}

.cat-region__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.cat-region:hover .cat-region__media img {
    transform: scale(1.05);
}

.cat-region__media--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--taupe);
}

.cat-region__count {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: rgba(28, 24, 18, .6);
    backdrop-filter: blur(4px);
    padding: 5px 10px;
    border-radius: var(--r-pill);
}

.cat-region__body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cat-region__name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    color: var(--espresso);
    margin: 0 0 8px;
}

.cat-region__desc {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--brown-warm);
    margin: 0 0 18px;
}

.cat-region__cta {
    margin-top: auto;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--copper);
}

.cat-region:hover .cat-region__cta {
    color: var(--copper-dark);
}

@media (max-width: 1024px) {
    .cat-regions__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .cat-regions {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cat-regions__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   KATEGORIE — BLOK SEO (dół) + FAQ
   Pasy pełnoszerokie: SEO (cream-dark) → FAQ (warm-white).
   Klasy ogólne — dziedziczone. Wymaga html{overflow-x:clip} (jest już z bloku 4).
   ============================================================ */

/* ---- BLOK SEO ---- */
.cat-seo {
    background: var(--cream-dark);
    padding: var(--gap-xl) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cat-seo__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-lg);
}

.cat-seo__col h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 26px;
    color: var(--espresso);
    margin: 0 0 16px;
}

.cat-seo__col h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--copper);
}

.cat-seo__col p {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--brown-warm);
    margin: 0 0 14px;
}

.cat-seo__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--brown-warm);
}

.cat-seo__col li {
    padding: 8px 0 8px 26px;
    position: relative;
    border-top: 1px solid rgba(122, 96, 64, .18);
}

.cat-seo__col li:first-child {
    border-top: none;
}

.cat-seo__col li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--copper);
    font-weight: 700;
}

/* linki w bulletach (np. do artykułów regionalnych) — marka, nie domyślny niebieski */
.cat-seo__col li a {
    color: var(--espresso);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--copper-35);
    text-decoration-thickness: 1px;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}

.cat-seo__col li a:hover {
    color: var(--copper);
    text-decoration-color: var(--copper);
}

/* ---- FAQ ---- */
.cat-faq {
    background: var(--warm-white);
    padding: var(--gap-xl) 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cat-faq__inner {
    max-width: 820px;
    margin: 0 auto;
}

.cat-faq__head {
    text-align: center;
    margin-bottom: var(--gap-md);
}

.cat-faq__head .cat-shead__sub {
    color: var(--copper);
}

.cat-faq__head h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--espresso);
    margin: 6px 0 0;
}

.cat-faq__item {
    border-bottom: 1px solid var(--cream-dark);
}

.cat-faq__item>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 20px;
    color: var(--espresso);
}

.cat-faq__item>summary::-webkit-details-marker {
    display: none;
}

.cat-faq__item>summary::after {
    content: "+";
    font-family: var(--sans);
    font-weight: 400;
    font-size: 26px;
    color: var(--copper);
    transition: transform 220ms ease;
    line-height: 1;
}

.cat-faq__item[open]>summary::after {
    transform: rotate(45deg);
}

.cat-faq__answer {
    padding: 0 4px 24px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--brown-warm);
}

.cat-faq__answer p {
    margin: 0 0 12px;
}

.cat-faq__answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 680px) {

    .cat-seo,
    .cat-faq {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cat-seo__inner {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }
}

/* ============================================================
   KATEGORIE — LIŚĆ: lista artykułów + sidebar + paginacja + powiązane regiony
   Renderowane przez override com_content/category (blog.php + blog_item.php).
   Nie full-bleed (treść w normalnym kontenerze, jak .a-features).
   ============================================================ */

.cat-leaf {
    padding: var(--gap-xl) 32px;
}

.cat-leaf__layout {
    max-width: var(--nav-max, 1280px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--gap-lg);
    align-items: start;
}

.cat-leaf__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
}

/* "Wszystkie wpisy" (tag "Podróże", id 2, com_tags/tag/default.php → $isArchive) — sama lista
   na całą szerokość, bez sidebaru "Najczęściej czytane" i bez filtra miejscowości (nieistotne
   dla archiwum całego bloga), siatka 4 kolumny / 2 / 1, jak galeria w widoku artykułu. */
.cat-leaf--archive .cat-leaf__layout {
    grid-template-columns: 1fr;
}

.cat-leaf--archive .cat-leaf__list {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .cat-leaf--archive .cat-leaf__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .cat-leaf--archive .cat-leaf__list {
        grid-template-columns: 1fr;
    }
}

/* ---- paginacja ----
   $this->pagination->getPagesLinks() generuje natywny Joomla/Bootstrap markup
   (ul.pagination > li.page-item > a.page-link/span.page-link). Resetujemy
   Bootstrap i stylujemy na wzór .cat-pagination z makiety. */
.cat-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--gap-lg);
}

.cat-pagination .pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-pagination .page-item {
    display: flex;
}

.cat-pagination .page-link {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-btn);
    color: var(--brown-warm);
    background: var(--warm-white);
    text-decoration: none;
    transition: all 180ms ease;
}

.cat-pagination .page-link:hover {
    border-color: var(--copper);
    color: var(--copper);
}

.cat-pagination .page-item.active .page-link {
    background: var(--espresso);
    border-color: var(--espresso);
    color: #fff;
}

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

/* ---- filtr po miejscowości (widok po tagu, np. Knajpki) ---- */
.cat-filter {
    background: var(--warm-white);
    padding: 0 32px var(--gap-md);
}

.cat-filter__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cat-filter__label {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--taupe);
    margin-right: 6px;
}

.cat-filter__chip {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--cream-dark);
    background: var(--cream);
    color: var(--brown-warm);
    cursor: pointer;
    transition: all 180ms ease;
}

.cat-filter__chip:hover {
    border-color: var(--copper);
    color: var(--copper);
}

.cat-filter__chip.is-active {
    background: var(--espresso);
    border-color: var(--espresso);
    color: #fff;
}

.cat-leaf__list .card.is-hidden {
    display: none;
}

/* ---- powiązane regiony (auto, bez obrazków) ---- */
.cat-related {
    background: var(--warm-white);
    padding: var(--gap-lg) 32px var(--gap-xl);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cat-related__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.cat-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md);
    margin-top: var(--gap-md);
}

.cat-related__tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 22px;
    background: var(--cream);
    border: 1px solid var(--cream-dark);
    border-radius: var(--r-card);
    text-decoration: none;
    color: inherit;
    transition: all 220ms ease;
}

.cat-related__tile:hover {
    border-color: var(--copper);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.cat-related__tile b {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 19px;
    color: var(--espresso);
}

.cat-related__tile span {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--brown-warm);
}

@media (max-width: 1024px) {
    .cat-leaf__layout {
        grid-template-columns: 1fr;
    }

    .cat-related__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .cat-leaf {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cat-leaf__list {
        grid-template-columns: 1fr;
    }

    .cat-related {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cat-related__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   WIDOK ARTYKUŁU (com_content/article) — chrome (Wariant A)
   Stylizuje TYLKO chrome (.art-*): tytuł, meta, tagi, hero. Treść JCE
   (.article-blog, Bootstrap .row/.col-md-6, .content-list, .tip/.alert)
   zostaje nietknięta, poza 1 wąską regułą na duplikat <h1> (patrz niżej).
   Breadcrumb (mod-breadcrumbs) NIE jest tu stylizowany — już ma swoją
   sekcję wyżej w tym pliku.
   ============================================================ */
.com-content-article {
    display: flex;
    flex-direction: column;
}

/* Biała sekcja tytułu ma tę samą szerokość co hero (80%) — wygląda jak ten sam "kafelek". */
.art-header {
    background: var(--warm-white);
    padding: var(--gap-lg) 0 40px;
    width: 80%;
    max-width: none;
    margin: 0 auto;
}

/* Strona główna = artykuł (Menu Item "Single Article" + page class "pagehome") z
   show_title wyłączonym i bez meta/tagów — .art-header z default.php renderuje się
   pusty, ale wciąż zachowuje padding 48px/40px, co tworzy widoczną białą belkę nad
   "Czytane najczęściej". Na stronie głównej nagłówek artykułu jest zawsze pusty z
   założenia (hero ma własny tytuł w .a-hero), więc chowamy go całkowicie. */
.item-pagehome .art-header {
    display: none;
}

.art-header__inner {
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: 20px;
}

.art-header h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--copper-dark);
    margin: 0 0 18px;
    text-wrap: balance;
}

/* .art-header__meta owija natywny <dl class="article-info"> renderowany przez core
   LayoutHelper::render('joomla.content.info_block', …) — markup Joomli, restyling przez CSS. */
.art-header__meta dl.article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--taupe);
    margin: 0 0 18px;
}

.art-header__meta dt.article-info-term {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.art-header__meta dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.art-header__meta .icon-calendar,
.art-header__meta .icon-eye {
    font-size: 14px;
    opacity: .8;
}

/* .art-header__tags owija natywny <ul class="tags list-inline"> z <a class="btn btn-sm btn-info"> */
.art-header__tags ul.tags.list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.art-header__tags .tags.list-inline .btn-info {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
}

.art-header__tags .tags.list-inline .btn-info:hover {
    background: var(--copper);
    border-color: var(--copper);
}

/* order: -1 — wizualnie hero przed tytułem, bez zmiany kolejności w DOM (PHP);
   wymaga .com-content-article { display:flex; flex-direction:column } wyżej. */
.art-hero {
    width: 80%;
    max-width: none;
    margin: 40px auto;
    padding: 0;
    order: -1;
}

.art-hero img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: var(--r-card);
    display: block;
}

/* Magazyn podróżniczy: zdjęcia >= tekst — sekcje row/col-md-6 (obraz+tekst) dostają PEŁNĄ
   szerokość kontenera (jak hero), czysty tekst (bez obrazków) zostaje w wąskiej, czytelnej
   kolumnie. Żadna klasa w HTML się nie zmienia, tylko ile miejsca CSS przydziela. */
.art-body {
    width: 80%;
    max-width: none;
    margin: 0 auto;
    padding: 0 0 var(--gap-xl);
}

.art-body>p,
.art-body>hr,
.art-body .article-blog>p,
.art-body .article-blog>hr,
.art-body .article-blog>section:not(.row) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Rytm sekcji: jednolity odstęp 50px góra/dół we WSZYSTKICH sekcjach treści (.row,
   czysty tekst, galeria, wideo) — padding, nie margin (nie collapsuje między sekcjami). */
.art-body .article-blog>section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.art-body .article-blog>section.row {
    max-width: 100%;
}

/* Spis treści ma własną sekcję bez .row (czysty tekst), ale NIE chcemy go zwężać do 760px —
   inaczej nigdy nie odpala się próg 900px na 3 kolumny. Niech korzysta z pełnej .art-body. */
.art-body .article-blog>section:has(.content-list) {
    max-width: none;
}

/* Galeria (Balbooa, .ba-gallery) to siatka zdjęć, nie tekst — nie ma sensu zwężać jej do
   760px jak akapit. Ten sam wyjątek co spis treści powyżej. */
.art-body .article-blog>section:has(.ba-gallery) {
    max-width: none;
}

/* Duplikat tekstu z kafelka/karty (introtext — treść przed <hr id="system-readmore"> w JCE,
   ten sam tekst co excerpt na liście artykułów) — w widoku pełnego artykułu jest redundantny.
   Identyfikowany przez .art-intro-dup, klasę dodawaną w override'ie PHP (default.php) na
   podstawie struktury Joomli (introtext vs fulltext) — NIE przez nazwę klasy w treści JCE.
   Odporne na to, jakich klas autor użyje w HTML artykułu (np. .row.section), bo nie zależy
   od treści — tylko od tego, gdzie Joomla sama dzieli artykuł na intro/fulltext. */
.art-body .art-intro-dup {
    display: none;
}

/* Linia oddzielająca sekcje obraz+tekst (zig-zag), galerię (Balbooa) i wideo (iframe) —
   te trzy typy sekcji dostają tę samą linię na dole, czysty tekst/TOC nie.
   border-bottom nie umie być węższy niż element — linia 30% szerokości wymaga pseudo-elementu
   wycentrowanego pod sekcją. Padding góra/dół już ustawiony w regule ogólnej wyżej. */
.art-body .article-blog>section.row,
.art-body .article-blog>section:has(.ba-gallery),
.art-body .article-blog>section:has(iframe) {
    position: relative;
}

.art-body .article-blog>section.row::after,
.art-body .article-blog>section:has(.ba-gallery)::after,
.art-body .article-blog>section:has(iframe)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30%;
    height: 1px;
    background: var(--brown-warm);
}

.art-body .article-blog>section.row:last-of-type,
.art-body .article-blog>section:has(.ba-gallery):last-of-type,
.art-body .article-blog>section:has(iframe):last-of-type {
    padding-bottom: 0;
}

.art-body .article-blog>section.row:last-of-type::after,
.art-body .article-blog>section:has(.ba-gallery):last-of-type::after,
.art-body .article-blog>section:has(iframe):last-of-type::after {
    display: none;
}

/* Zig-zag: proporcje kolumn 50/50 (domyślne Bootstrapa, col-md-6/col-md-6) — nie nadpisujemy
   flex/max-width. align-items:center wyśrodkowuje zdjęcie względem tekstu w wierszu.
   Naprzemienność jest AUTOMATYCZNA: każda druga sekcja `.row` dostaje flex-direction:row-reverse,
   więc autor zawsze pisze w tej samej kolejności (obraz, tekst) w HTML, a układ sam się przeplata
   wizualnie. `:nth-child(even of .row)` liczy TYLKO sekcje .row (CSS Selectors Level 4, szerokie
   wsparcie od 2023), więc inne sekcje (wprowadzenie, spis treści) nie zaburzają liczenia. */
@media (min-width: 768px) {
    .art-body .row.section {
        align-items: center;
    }

    .art-body .article-blog>section.row:nth-child(even of .row) {
        flex-direction: row-reverse;
    }
}

.art-body .row.section [class*="col-"] img {
    margin: 0 auto;
}

/* Reset odpowiedzialny za skalowanie obrazków JCE: mają atrybuty width/height (CLS), ale bez
   tego nic nie skaluje wysokości proporcjonalnie do szerokości — obrazek zostaje rozciągnięty
   na sztywnej wysokości z atrybutu. */
.art-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-card);
}

.art-body p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--espresso);
}

.art-body p.intro {
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.6;
    color: var(--brown-warm);
    margin-bottom: var(--gap-md);
}

.art-body h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    color: var(--copper-dark);
    margin: var(--gap-lg) 0 14px;
}

/* Bez tej reguły h3 dziedziczy domyślny rozmiar przeglądarki (~26px w kontekście treści
   JCE) — praktycznie tej samej wielkości co h2 (28px). Jawny rozmiar utrzymuje hierarchię
   h1 > h2 > h3. */
.art-body h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 21px;
    color: var(--copper-dark);
    margin: var(--gap-md) 0 10px;
}

/* h4 mniejszy od h3 (rozmiarem), ale nie "niewidoczny" — odwracamy hierarchię na hasłową
   etykietę (sans, wersaliki), ten sam trik co .section__sub/.card__cta: widoczność przez
   wagę i wersaliki, nie przez wysokość liter. Kolor ujednolicony z resztą nagłówków. */
.art-body h4 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--copper-dark);
    margin: var(--gap-sm) 0 8px;
}

/* Spis treści — narasta do 3 kolumn na desktopie; na telefonie 1 kolumna. */
.art-body .content-list {
    background: var(--cream);
    border-radius: var(--r-card);
    padding: 22px 28px;
    column-count: 1;
}

@media (min-width: 600px) {
    .art-body .content-list {
        column-count: 2;
        column-gap: 32px;
    }
}

@media (min-width: 900px) {
    .art-body .content-list {
        column-count: 3;
        column-gap: 32px;
    }
}

.art-body .content-list>li {
    break-inside: avoid;
    margin-bottom: 8px;
}

.art-body .content-list ul {
    column-count: 1;
    margin-top: 6px;
}

.art-body .content-list a {
    color: var(--brown-warm);
}

.art-body .content-list a:hover {
    color: var(--copper);
}

.art-body p.tip {
    background: var(--cream);
    border-left: 3px solid var(--copper);
    border-radius: 0 var(--r-btn) var(--r-btn) 0;
    padding: 14px 18px;
    font-size: 14px;
}

/* Duplikat <h1> wewnątrz treści JCE (autorski wzorzec w wielu artykułach) — znika tu wizualnie
   bez zmiany znacznika: pierwszy <h1> w .article-blog ma wygląd zwykłego <h2>, bo prawdziwy,
   semantyczny H1 strony już jest w .art-header. */
.art-body .article-blog>section:first-of-type h1,
.art-body .article-blog h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    color: var(--copper-dark);
    margin: var(--gap-lg) 0 14px;
}

/* Formularz komentarzy (Akeeba Engage) renderuje się POZA .art-body (osobna sekcja w
   .com-content-article), więc dziedziczy pełną szerokość kontenera artykułu — za szeroki
   na formularz. Zwężony do 50% (jak ustalone), wycentrowany. */
.akengage-outer-container {
    max-width: 50%;
    margin: 0 auto;
}

/* Poniżej "medium" (768px, breakpoint md jak reszta zig-zaga): kolumna 80% przestaje
   działać — obrazki rozciągają się maksymalnie na boki (margines 2px), tekst i nagłówki
   dostają węższy margines 10px. */
@media (max-width: 767.98px) {

    /* Biała sekcja tytułu: ta sama szerokość/margines co hero (2px) — tekst w środku ma
     własny margines 10px (.art-header__inner), więc nie dotyka krawędzi białego pola. */
    .art-header {
        width: auto;
        margin: 0 2px;
    }

    .art-header__inner {
        width: auto;
        margin: 0 10px;
    }

    .art-body {
        width: auto;
        margin: 0;
        padding: 0 0 var(--gap-lg);
    }

    /* 50% komentarzy ma sens tylko na desktopie — na telefonie to za wąsko na pole tekstowe. */
    .akengage-outer-container {
        max-width: none;
        margin: 0 10px;
    }

    /* tekst i nagłówki: margines 10px */
    .art-body>p,
    .art-body>hr,
    .art-body .article-blog>p,
    .art-body .article-blog>hr,
    .art-body .article-blog>section:not(.row),
    .art-body h2,
    .art-body .content-list {
        max-width: none;
        margin-left: 10px;
        margin-right: 10px;
    }

    /* Sekcje zig-zag (.row/.col-md-6): zerujemy domyślny gutter Bootstrapa (.row margin -12px,
     .col-md-6 padding 12px), bo inaczej znosiłby się on do 0px od krawędzi — margines 2px/10px
     liczymy od krawędzi widoku, nie od wnętrza kolumny. */
    .art-body .row.section,
    .art-body .row.section [class*="col-"] {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .art-body .row.section [class*="col-"]>h2,
    .art-body .row.section [class*="col-"]>h3,
    .art-body .row.section [class*="col-"]>p,
    .art-body .row.section [class*="col-"]>ul {
        margin-left: 10px;
        margin-right: 10px;
    }

    /* obrazki: margines 2px (hero + treść, w tym zdjęcia w sekcjach zig-zag); góra/dół symetrycznie */
    .art-hero {
        width: auto;
        margin: 24px 2px;
    }

    .art-body img,
    .art-body .row.section [class*="col-"] img {
        width: calc(100% - 4px);
        margin-left: 2px;
        margin-right: 2px;
    }
}