/*
 * Motyw "wsf" (Warsaw SerialCon) — globalne style frontu.
 *
 * Wychodzi ze struktury motywu "default" (te same nazwy klas: .site-header,
 * .main-nav, .mobile-nav, .cart-fab, .pgr-* …), bo wspólne szablony i widgety
 * na nich stoją. Różnica jest w PALECIE i typografii: festiwal ma projekt
 * monochromatyczny — czerń #010101, biel, szarości #F4F4F4/#CDCDCD/#8D8D8D,
 * font Inter 400/700/800, wersaliki w nawigacji i nagłówkach sekcji.
 *
 * Zmiany względem motywu default (poza paletą) zebrane są w sekcji na KOŃCU
 * pliku ("MOTYW WSF") — nagłówek z hasłem festiwalu, nawigacja wersalikami,
 * czarna stopka, przełącznik PL/EN. Dzięki temu widać, co jest wspólne,
 * a co własne.
 *
 * Plik jest STATYCZNY (zero Twiga) — nie wstawiać tu {{ }} ani {% %}.
 */
            /* Reset & Basic Variables — paleta wg projektu Figma (Teatr Rozrywki):
               czerń/biel, czerwony akcent #aa133b, bordowa stopka, ostre krawędzie */
            /* bootstrap-grid NIE zawiera resetu box-sizing — bez niego elementy
               width:100% + padding (np. .site-main) wystają poza viewport */
            *, *::before, *::after { box-sizing: border-box; }
            /* pasma pełnej szerokości (100vw) nie mogą tworzyć poziomego scrolla
               o szerokość paska przewijania; clip nie psuje position:sticky */
            html, body { overflow-x: clip; }
            :root {
                /* Paleta festiwalu: monochrom. „Akcentem" jest czerń — wspólne
                   szablony malują var(--color-accent) tam, gdzie Teatr Rozrywki
                   ma karmazyn, więc czerń daje spójny, redakcyjny wygląd. */
                --color-primary: #010101;
                --color-accent: #010101;
                --color-maroon: #010101;
                /* tła kart/pasm — wspólne szablony (widgety, listy) używają
                   var(--color-card-*) z tym samym fallbackiem */
                --color-card-bg: #f4f4f4;
                --color-card-hover: #e9e9e9;
                --color-bg: #ffffff;
                --color-text: #010101;
                /* Szarości (WCAG 1.4.3, audyt WSF 2026-09-25): oryginał ma #8d8d8d
                   (3,32:1 na bieli — za mało dla tekstu). Zostaje WYŁĄCZNIE dla
                   elementów nietekstowych (suwak paska przewijania). TEKST szary
                   (daty, etykiety, hover nawigacji, ikony nagłówka pod kursorem)
                   = --color-muted-text: #767676 → 4,54:1 na bieli; na szarych
                   kaflach #f4f4f4 (hover #e9e9e9) --color-muted-text-gray: #666
                   → 5,22:1 / 4,73:1. Nowy szary tekst: TYLKO te dwie zmienne. */
                --color-muted: #8d8d8d;
                --color-muted-text: #767676;
                --color-muted-text-gray: #666666;
                --color-line: #cdcdcd;
                --container-width: 1400px;
                --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);
                --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
                --radius-md: 0;
                --radius-lg: 0;
                --transition-fast: 0.15s ease;
                --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            body {
                font-family: 'Inter', system-ui, -apple-system, sans-serif;
                margin: 0;
                padding: 0;
                background-color: var(--color-bg);
                color: var(--color-text);
                display: flex;
                flex-direction: column;
                min-height: 100vh;
                line-height: 1.6;
            }
            h1, h2, h3, h4, h5, h6 { color: #111; font-weight: 800; letter-spacing: -0.01em; }
            h1 { font-size: 2rem; }

            /* ─── Dostępność (WCAG) ─── */
            .sr-only {
                position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
            }
            .skip-link {
                position: absolute; left: -9999px; top: 0; z-index: 100000;
                background: #111; color: #fff; padding: 0.8rem 1.4rem;
                font-weight: 700; text-decoration: none;
            }
            .skip-link:focus { left: 0; }
            a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
            textarea:focus-visible, summary:focus-visible,
            .nav-link-separator[tabindex]:focus-visible, [role="button"][tabindex]:focus-visible {
                outline: 3px solid var(--color-accent);
                outline-offset: 2px;
            }
            .site-footer a:focus-visible, #info-bar :focus-visible {
                outline-color: #fff;
            }
            /* Ciemne paski (#111): czarna obwódka miała na nich 1,11:1 (WSF-D-06) —
               pas koszyka na /kup-bilet i pasek filtrów programu. Tylko :focus-visible. */
            .theme-wsf .cart-band :focus-visible,
            .theme-wsf .repertoire-filters :focus-visible {
                outline-color: #fff;
            }
            /* Cel skip-linku dostaje fokus programowo (tabindex="-1", WSF-S-18) —
               to nie jest element sterujący, obwódka byłaby myląca */
            main#tresc:focus, main#tresc:focus-visible { outline: none; }

            /* Utilities (ładujemy tylko bootstrap-grid, więc dokładamy używane klasy) */
            .text-center { text-align: center; }
            .text-right { text-align: right; }
            .text-muted { color: #6c757d; }
            .text-dark { color: #111; }
            .text-danger { color: #aa133b; }
            .text-success { color: #198754; }
            .font-weight-bold, .font-weight-bolder { font-weight: 700; }
            .small { font-size: 0.875em; }
            .img-fluid { max-width: 100%; height: auto; }
            .w-100 { width: 100% !important; }
            .rounded, .rounded-sm { border-radius: 0; } /* ostre krawędzie wg projektu */
            .rounded-circle { border-radius: 50%; }
            .shadow-sm { box-shadow: var(--shadow-sm); }
            .img-thumbnail { border: 1px solid #ddd; padding: 0.25rem; max-width: 100%; height: auto; }
            .list-group { display: flex; flex-direction: column; }
            .list-group-item { padding: 0.85rem 1rem; background: #f8f5f3; margin-bottom: 0.5rem; }
            .border-bottom { border-bottom: 2px solid #111 !important; }
            .border-light.border-bottom { border-bottom: 1px solid #eee !important; }
            .border-0 { border: 0; }
            .btn { display: inline-block; text-decoration: none; cursor: pointer; }
            .btn-outline-primary {
                background: #111; color: #fff; border: none;
                text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em;
            }
            .btn-outline-primary:hover { background: var(--color-accent); color: #fff; }
            .btn-outline-secondary { border: 1px solid #111; color: #111; background: #fff; }
            .btn-outline-secondary:hover { background: #111; color: #fff; }
            .bg-primary { background: var(--color-accent) !important; }
            .btn-primary {
                background: #111; color: #fff; border: none; padding: 0.55rem 1.3rem;
                text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; font-size: 0.8rem;
            }
            .btn-primary:hover { background: var(--color-accent); color: #fff; }
            .btn-powrot {
                display: inline-flex; align-items: center; gap: 0.5rem;
                border: 1.5px solid #111; background: #fff; color: #111;
                text-transform: uppercase; font-size: 14px; font-weight: 700;
                letter-spacing: 0.05em; padding: 0.7rem 1.4rem; text-decoration: none; cursor: pointer;
            }
            .btn-powrot:hover { background: #111; color: #fff; }

            /* ─── Pływająca ikona koszyka + modal (docs/zmiany.md pkt 5) ───
               FAB pod szufladą menu mobilnego (10000/10001), modal NAD wszystkim. */
            .cart-fab {
                position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 9500;
                width: 56px; height: 56px; border-radius: 50%;
                background: #111; color: #fff; border: none; cursor: pointer;
                font-size: 21px; display: flex; align-items: center; justify-content: center;
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
            }
            .cart-fab:hover { background: var(--color-accent); }
            .cart-fab:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
            .cart-fab-count {
                position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px;
                border-radius: 11px; background: var(--color-accent); color: #fff;
                font-size: 12px; font-weight: 700; line-height: 22px; padding: 0 5px; text-align: center;
            }
            .cart-modal-overlay {
                position: fixed; inset: 0; z-index: 10500; background: rgba(0, 0, 0, 0.55);
                display: flex; align-items: center; justify-content: center; padding: 1rem;
            }
            .cart-modal {
                background: #fff; border: 1.5px solid #111; width: 100%; max-width: 560px;
                max-height: 85vh; display: flex; flex-direction: column;
            }
            .cart-modal-head {
                display: flex; align-items: center; justify-content: space-between;
                padding: 1.2rem 1.4rem 0.9rem; border-bottom: 2px solid #111;
            }
            .cart-modal-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
            .cart-modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #111; padding: 0 0.2rem; }
            .cart-modal-close:hover { color: var(--color-accent); }
            .cart-modal-body { padding: 1rem 1.4rem; overflow-y: auto; font-size: 14.5px; }
            .cm-item { display: flex; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid #e5e2e0; }
            .cm-info { flex: 1; }
            .cm-title { font-weight: 700; }
            .cm-meta { font-size: 13px; color: #444; }
            .cm-price { font-weight: 700; white-space: nowrap; }
            .cm-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; padding-top: 0.9rem; }
            .cm-total span:last-child { color: var(--color-accent); }
            .cart-modal-actions { display: flex; gap: 0.8rem; padding: 0 1.4rem 1.4rem; flex-wrap: wrap; }
            .cm-btn {
                flex: 1; text-align: center; font-size: 13.5px; font-weight: 700;
                text-transform: uppercase; letter-spacing: 0.05em; padding: 0.85rem 1rem;
                cursor: pointer; text-decoration: none; white-space: nowrap;
            }
            .cm-btn.outline { background: #fff; color: #111; border: 1.5px solid #111; }
            .cm-btn.outline:hover { background: #111; color: #fff; }
            .cm-btn.solid { background: #111; color: #fff; border: 1.5px solid #111; }
            .cm-btn.solid:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
            @media (max-width: 575.98px) {
                .cart-fab { width: 50px; height: 50px; right: 0.8rem; bottom: 0.8rem; font-size: 19px; }
            }

            /* ─── Header & Nav — biały pasek; logo 135x135 WYSTAJE poza pasek (wg Figmy) ─── */
            .site-header {
                background-color: #fff;
                color: #111;
                padding: 0;
                position: sticky;
                top: 0;
                z-index: 9999;
                box-shadow: var(--shadow-sm);
            }
            .site-header > .container {
                position: relative;
                min-height: 88px; /* biała belka menu: 88px wg projektu */
            }
            .container {
                max-width: var(--container-width);
                margin: 0 auto;
                padding: 0 1.5rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .header-logo { width: 135px; flex: 0 0 auto; }
            .header-logo a {
                position: absolute;
                top: 0;
                left: 1.5rem;
                z-index: 2;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: #111;
                color: #fff;
                text-decoration: none;
                font-size: 1.25rem;
                font-weight: 800;
                letter-spacing: 1px;
                text-transform: uppercase;
                width: 135px;
                height: 135px;
                text-align: center;
                line-height: 1.15;
                padding: 0.5rem;
                transition: background var(--transition-fast);
            }
            .header-logo a:hover { background: var(--color-accent); }
            .header-logo span { color: var(--color-accent); }
            .header-logo a:hover span { color: #fff; }
            .header-logo a.header-logo-img { background: #111; padding: 0; }
            .header-logo a.header-logo-img:hover { background: #111; opacity: 0.9; }
            .header-logo a.header-logo-img img { width: 135px; height: 135px; object-fit: contain; display: block; }
            @media (max-width: 1220px) {
                /* mobile: mniejsze logo w pasku, bez nawisu */
                .site-header > .container { min-height: 64px; }
                .header-logo { width: 56px; }
                .header-logo a {
                    position: static;
                    width: 56px;
                    height: 56px;
                    font-size: 0.65rem;
                }
                .header-logo a.header-logo-img img { width: 56px; height: 56px; }
            }
            .header-socials { margin-left: 2.2rem; }
            .header-socials a {
                display: inline-flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; border-radius: 50%;
                background: #111; color: #fff; font-size: 1.15rem;
                margin-left: 0.85rem; text-decoration: none;
            }
            .header-socials a:first-child { margin-left: 0; }
            .header-socials a:hover { background: var(--color-accent); }
            .header-search-link { font-size: 1.45rem !important; }
            .header-lang-link {
                font-family: 'Manrope', sans-serif;
                font-weight: 600;
                font-size: 20px !important;
                letter-spacing: 0.03em;
                margin-left: 1.8rem !important;
            }
            
            /* ─── Hamburger Button ─── */
            .nav-toggle {
                display: none;
                background: transparent;
                border: none;
                cursor: pointer;
                padding: 0.5rem;
                color: #111;
                font-size: 1.5rem;
                line-height: 1;
                z-index: 10001;
            }
            /* S-2: fokus musi być widoczny przy nawigacji klawiaturą (WCAG 2.4.7).
               :focus-visible nie zapala się po kliknięciu myszą — dla myszy bez zmian. */
            .nav-toggle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
            
            /* ─── Main Nav (desktop — poziome, przy logo, odstępy wg Figmy) ─── */
            .main-nav {
                margin-left: 3.5rem;
                margin-right: auto; /* menu przy logo, ikony dobite do prawej */
            }
            .main-nav > ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                align-items: center;
                gap: 3.5rem;
            }
            .nav-item { position: relative; }
            /* Typografia menu wg Figmy: Manrope SemiBold 22px, line-height 100%, letter-spacing 3% */
            .nav-item > a,
            .nav-link-separator {
                color: #111;
                text-decoration: none;
                transition: color var(--transition-fast);
                font-family: 'Manrope', sans-serif;
                font-weight: 600;
                font-size: 22px;
                line-height: 1;
                letter-spacing: 0.03em;
                text-align: center;
                /* podkreślenie hover 5px (SB-4048/1); padding-bottom skompensowany,
                   żeby wysokość pozycji menu nie drgnęła */
                padding: 1.25rem 0 calc(0.4rem - 3px);
                border-bottom: 5px solid transparent;
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                cursor: pointer;
            }
            .nav-link-separator {
                cursor: default;
            }
            .nav-item > a:hover,
            .nav-item.active > a,
            .nav-item:hover > .nav-link-separator {
                color: #111;
                border-bottom-color: var(--color-accent);
            }
            
            /* Dropdown with Animation */
            .nav-dropdown {
                visibility: hidden;
                opacity: 0;
                transform: translateY(10px);
                position: absolute;
                top: 100%;
                left: -1rem;
                background: #fff;
                box-shadow: var(--shadow-lg);
                min-width: 240px;
                z-index: 1000;
                padding: 0.5rem 0;
                margin: 0;
                list-style: none;
                border-radius: var(--radius-lg);
                border: 1px solid rgba(0,0,0,0.05);
                transition: all var(--transition-smooth);
            }
            .nav-item.has-dropdown:hover > .nav-dropdown,
            .nav-item.has-dropdown:focus-within > .nav-dropdown {
                visibility: visible;
                opacity: 1;
                transform: translateY(0);
            }
            .nav-dropdown li { position: relative; }
            .nav-dropdown li a,
            .nav-dropdown li .nav-link-separator {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.75rem 1.5rem;
                color: #334155;
                text-decoration: none;
                font-size: 0.925rem;
                font-weight: 500;
                transition: all var(--transition-fast);
            }
            .nav-dropdown li .nav-link-separator {
                cursor: default;
            }
            .nav-dropdown li a:hover,
            .nav-dropdown li.active > a {
                background: #f8f5f3;
                color: var(--color-accent);
                padding-left: 1.75rem;
                border-left-color: var(--color-accent);
            }
            /* 3 level dropdown */
            .nav-dropdown .has-dropdown > .nav-dropdown {
                top: -0.5rem;
                left: 100%;
                margin-left: 0;
                transform: translateX(10px);
            }
            .nav-dropdown .has-dropdown:hover > .nav-dropdown,
            .nav-dropdown .has-dropdown:focus-within > .nav-dropdown { transform: translateX(0); }
            .nav-dropdown .has-dropdown::after {
                content: '';
                position: absolute;
                top: 0; right: -10px;
                width: 10px; height: 100%;
            }

            /* ─── Mobile Menu Overlay ─── */
            .mobile-nav-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.5);
                /* ponad sticky .site-header (9999) — inaczej nagłówek zasłania szufladę */
                z-index: 10000;
            }
            .mobile-nav-overlay.active { display: block; }

            /* ─── Mobile Nav Drawer ─── */
            .mobile-nav {
                display: none;
                position: fixed;
                top: 0; right: 0;
                width: min(320px, 85vw);
                height: 100vh;
                height: 100dvh; /* mobilny pasek adresu nie zasłania dołu szuflady */
                background: #fff;
                z-index: 10001;
                padding: 4.5rem 1.5rem 2rem;
                overflow-y: auto;
                transform: translateX(100%);
                /* WSF-S-01/D-01: ZAMKNIĘTA szuflada nie może zostać w kolejności Tab
                   ani w drzewie czytnika (była tylko przesunięta poza kadr — 10
                   niewidocznych elementów przed hamburgerem). `visibility: hidden`
                   przełącza się z OPÓŹNIENIEM równym czasowi wysuwania, więc
                   animacja zamykania wygląda jak dotąd; przy otwieraniu zero opóźnienia. */
                visibility: hidden;
                transition: transform var(--transition-smooth), visibility 0s linear 0.3s;
                box-shadow: var(--shadow-lg);
            }
            .mobile-nav.open {
                transform: translateX(0);
                visibility: visible;
                transition: transform var(--transition-smooth), visibility 0s linear 0s;
            }
            .mobile-nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .mobile-nav li { border-bottom: 1px solid #eee; }
            .mobile-nav li:last-child { border-bottom: none; }
            .mobile-nav li > a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #111;
                text-decoration: none;
                padding: 0.85rem 0;
                font-family: 'Manrope', sans-serif;
                font-weight: 600;
                font-size: 20px;
                line-height: 1;
                letter-spacing: 0.03em;
                transition: color var(--transition-fast);
            }
            .mobile-nav li > a:hover,
            .mobile-nav li.active > a { color: var(--color-accent); }
            /* separator (pozycja bez strony) w szufladzie wygląda i działa jak link —
               tap rozwija submenu */
            .mobile-nav .nav-link-separator {
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.85rem 0;
                font-size: 20px;
                border-bottom: none;
            }
            /* Sub-items w mobile */
            .mobile-nav ul ul {
                padding-left: 1rem;
                border-left: 2px solid var(--color-accent);
                margin: 0 0 0.5rem 0;
            }
            .mobile-nav ul ul li { border-bottom: none; }
            .mobile-nav ul ul li > a {
                font-size: 0.9rem;
                color: #555;
                padding: 0.5rem 0;
            }
            .mobile-nav ul ul li > a:hover { color: var(--color-accent); }
            /* Toggle sub-menu arrow — strefa dotyku >=40px (WCAG), negatywne
               marginesy nie rozpychają wiersza */
            .mobile-nav .submenu-toggle {
                cursor: pointer;
                padding: 0.8rem 1rem;
                margin: -0.6rem -0.5rem -0.6rem 0;
                color: #888;
                font-size: 1rem;
            }
            .mobile-nav .has-dropdown > ul { display: none; }
            .mobile-nav .has-dropdown.sub-open > ul { display: block; }
            .mobile-nav .has-dropdown.sub-open .submenu-toggle { transform: rotate(90deg); }

            /* Close button in mobile menu */
            .mobile-nav-close {
                position: absolute;
                top: 1rem; right: 1rem;
                background: transparent;
                border: none;
                /* było #94a3b8 z motywu default (2,56:1 — WSF-S-09, WCAG 1.4.11);
                   w monochromie wsf krzyżyk ma kolor tekstu */
                color: var(--color-primary);
                font-size: 1.5rem;
                cursor: pointer;
                padding: 0.25rem;
                line-height: 1;
            }
            /* szuflada jest biała — hover NIE może być biały (znikający X) */
            .mobile-nav-close:hover { color: var(--color-accent); }

            /* ─── Sidebar Nav (vertical, used in desktop sidebar widget) ─── */
            .sidebar-nav {
                list-style: none;
                padding: 0; margin: 0;
            }
            .sidebar-nav li { border-bottom: 1px solid #f1f5f9; }
            .sidebar-nav li:last-child { border-bottom: none; }
            .sidebar-nav a {
                display: block;
                padding: 0.85rem 0;
                color: var(--color-text);
                text-decoration: none;
                font-weight: 500;
                transition: all var(--transition-fast);
            }
            .sidebar-nav a:hover,
            .sidebar-nav .active > a {
                color: var(--color-accent);
                transform: translateX(4px);
            }
            .sidebar-nav ul {
                list-style: none;
                padding-left: 1.25rem;
                margin: 0 0 0.5rem;
                border-left: 2px solid #e2e8f0;
            }
            .sidebar-nav .has-dropdown,
            .sidebar-nav .has-sub-dropdown { position: static; padding: 0; }
            .sidebar-nav .nav-dropdown {
                visibility: visible; opacity: 1; transform: none;
                position: static; box-shadow: none; padding: 0;
                background: transparent; min-width: 100%; z-index: 1;
                border: none; transition: none;
            }
            .sidebar-nav .has-dropdown::after { display: none; }
            .sidebar-nav .nav-dropdown .has-dropdown > .nav-dropdown { margin: 0; }
            .sidebar-nav .nav-dropdown li a {
                padding: 0.6rem 0;
                color: #64748b;
                font-size: 0.95rem;
                font-weight: 400;
                border-left: 2px solid transparent;
                transition: all var(--transition-fast);
            }
            .sidebar-nav .nav-dropdown li a:hover,
            .sidebar-nav .nav-dropdown li.active > a {
                background: transparent;
                color: var(--color-accent);
                padding-left: 0.25rem;
                border-left-color: var(--color-accent);
            }
            .sidebar-nav .nav-dropdown li { border-bottom: none; }

            /* ─── Layout: Site Main (Bootstrap row handles columns) ─── */
            .site-main {
                flex: 1;
                width: 100%;
                max-width: var(--container-width);
                margin: 2rem auto;
                padding: 0 1.5rem;
            }
            .site-main .row { gap: 0; }

            .sidebar {
                background: transparent;
                padding: 0 0 0 1rem;
                height: max-content;
                margin-bottom: 1.5rem;
            }
            @media (max-width: 1220px) {
                .sidebar { padding: 0; }
            }

            /* ─── Footer — czarny pas z kolumnami menu (wg Figmy);
                   bordowy pas kontaktowy renderuje blok w strefie footer_top ─── */
            .site-footer {
                background-color: #000;
                color: #ddd;
                padding: 3rem 0 1.5rem;
                margin-top: auto;
            }
            .site-footer .container {
                flex-direction: column;
                align-items: stretch;
            }
            .site-footer .widget-menu-title { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 1.1rem; }
            .site-footer .widget-custom-menu .submenu-item > a {
                color: #e8e8e8 !important;
                border: none !important;
                padding: 0.35rem 0 !important;
                background: transparent !important;
                font-size: 0.9rem;
            }
            .site-footer .widget-custom-menu .submenu-item > a:hover {
                color: #fff !important;
                text-decoration: underline;
            }
            /* kolumna 2 (bez nagłówka) — linki w linii z linkami kolumny "Teatr" */
            .site-footer .row > div:nth-child(2) .widget-custom-menu { margin-top: 3.15rem; }
            .footer-bottom {
                margin-top: 3.2rem;
                padding-top: 1rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 1rem;
                color: #bbb;
                font-size: 0.85rem;
            }
            .footer-socials a {
                display: inline-flex; align-items: center; justify-content: center;
                width: 34px; height: 34px; border-radius: 50%;
                background: #fff; color: #000; font-size: 1rem;
                margin-right: 0.6rem; text-decoration: none;
            }
            .footer-socials a:hover { background: var(--color-accent); color: #fff; }

            /* ─── Responsive breakpoints ─── */

            /* Treść nie może rozpychać viewportu na wąskich ekranach */
            .content-col img, .article-content img { max-width: 100%; height: auto; }
            .content-col iframe { max-width: 100%; }
            .article-content table { display: block; max-width: 100%; overflow-x: auto; }

            /* Szerokości pośrednie (laptop < kontener 1617px): ciaśniejszy nagłówek,
               żeby menu i ikony mieściły się w jednej linii */
            @media (min-width: 1221px) and (max-width: 1619.98px) {
                .main-nav { margin-left: 2rem; }
                .main-nav > ul { gap: 1.6rem; }
                .nav-item > a, .nav-link-separator { font-size: 17px; }
                .header-socials { margin-left: 1rem; }
                .header-socials a { width: 34px; height: 34px; font-size: 0.9rem; margin-left: 0.45rem; }
                .header-lang-link { margin-left: 1rem !important; font-size: 16px !important; }
            }

            @media (max-width: 1220px) {
                /* Show hamburger, hide desktop nav */
                .nav-toggle { display: block; }
                .main-nav { display: none; }
                .mobile-nav { display: block; }

                /* Sidebar order on mobile */
                .sidebar-left-col { order: 0; }  /* left sidebar: above content */
                .content-col      { order: 1; }
                .sidebar-col      { order: 2; }  /* right sidebar: below content */

                .site-main {
                    margin: 1.5rem auto;
                    padding: 0 1rem;
                }
                .container { padding: 0 1rem; }

                /* Mniejsze ikony społecznościowe w pasku (44px zjada za dużo miejsca) */
                .header-socials { margin-left: 0.6rem; }
                .header-socials a { width: 34px; height: 34px; font-size: 0.9rem; margin-left: 0.4rem; }
                .header-lang-link { margin-left: 0.8rem !important; font-size: 16px !important; }

                h1 { font-size: 1.6rem; }
            }
            @media (max-width: 575.98px) {
                /* Na telefonie ikony społecznościowe tylko w stopce */
                .header-socials { display: none; }
            }

            /* Stopka: kolumny łamią się poniżej 1200px (col-xl-3) —
               wyrównanie 2. kolumny do linku "Projekty" traci wtedy sens */
            @media (max-width: 1199.98px) {
                .site-footer .row > div:nth-child(2) .widget-custom-menu { margin-top: 0; }
            }
            @media (max-width: 767.98px) {
                .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
            }

            @media (min-width: 1221px) {
                /* Desktop: show nav, hide mobile drawer */
                .main-nav { display: block; }
                .nav-toggle { display: none; }
                .mobile-nav { display: none !important; }
                .mobile-nav-overlay { display: none !important; }

                /* Desktop: reset all sidebar orders */
                .sidebar-left-col { order: unset; }
                .sidebar-col      { order: unset; }
                .content-col      { order: unset; }

                .site-main { margin: 3rem auto; }
            }

            /* ─────────────────────────────────────────────────────────────────
               KOMUNIKATY (moduł /admin/komunikat, docs/zmiany.md pkt 5)
               Trzy formy: pasek nad nagłówkiem, box nad treścią, okno modalne.
               Wygląd paska przeniesiony 1:1 z dawnego bloku 22 — z tą różnicą,
               że style należą teraz do motywu, a nie do treści w bazie.
               Warianty barwne: .ann-info (karmazyn) / .ann-warning (czerń)
               / .ann-neutral (beż) — redaktor wybiera wagę, nie kolor.
               ───────────────────────────────────────────────────────────────── */
            .ann-info    { background: var(--color-accent); color: #fff; }
            .ann-warning { background: #111; color: #fff; }
            .ann-neutral { background: #f8f5f3; color: #111; }

            .ann-bar-inner {
                display: flex; align-items: center; gap: 2.2rem;
                padding: 1.8rem 1.5rem; max-width: var(--container-width); margin: 0 auto;
            }
            .ann-icon { position: relative; flex: 0 0 auto; width: 46px; height: 46px; }
            .ann-icon-mark {
                display: flex; align-items: center; justify-content: center;
                width: 46px; height: 46px; border-radius: 50%;
                font-family: Georgia, serif; font-weight: 800; font-size: 1.5rem; font-style: italic;
            }
            /* Koło w kolorze kontrastowym do pasma, litera w kolorze pasma */
            .ann-info .ann-icon-mark    { background: #fff;  color: var(--color-accent); }
            .ann-warning .ann-icon-mark { background: #fff;  color: #111; }
            .ann-neutral .ann-icon-mark { background: #111;  color: #f8f5f3; }

            .ann-bar-text { flex: 1; min-width: 0; }
            .ann-bar-title { margin: 0 0 0.45rem; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
            .ann-bar-body  { margin: 0; font-size: 0.95rem; }
            .ann-bar-body p { margin: 0; }
            .ann-bar-body a, .ann-box-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
            .ann-bar-cta {
                flex: 0 0 auto; border: 2px solid currentColor; color: inherit;
                padding: 0.6rem 1.4rem; text-transform: uppercase; font-weight: 700;
                font-size: 0.8rem; letter-spacing: 0.05em; text-decoration: none;
            }
            .ann-bar-cta:hover { background: currentColor; }
            .ann-close {
                flex: 0 0 auto; background: none; border: none; color: inherit;
                cursor: pointer; padding: 0.4rem; line-height: 0;
            }
            .ann-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

            .ann-box {
                position: relative; padding: 1.6rem 3rem 1.6rem 1.6rem; margin-bottom: 2rem;
            }
            .ann-box-title { margin: 0 0 0.6rem; font-size: 1.3rem; font-weight: 700; color: inherit; }
            .ann-box-body p:last-child { margin-bottom: 0; }
            .ann-box-close { position: absolute; top: 0.8rem; right: 0.8rem; }

            .ann-btn {
                display: inline-block; margin-top: 1rem; border: 2px solid currentColor;
                color: inherit; padding: 0.7rem 1.6rem; text-transform: uppercase;
                font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-decoration: none;
            }

            .ann-modal-overlay {
                position: fixed; inset: 0; z-index: 10050;
                background: rgba(0, 0, 0, 0.65);
                display: flex; align-items: center; justify-content: center; padding: 1.5rem;
            }
            .ann-modal {
                position: relative; width: min(720px, 100%); max-height: 90vh; overflow-y: auto;
            }
            .ann-modal-close { position: absolute; top: 0.9rem; right: 0.9rem; }
            .ann-modal-image { display: block; width: 100%; height: auto; }
            .ann-modal-body { padding: 2.4rem 2.6rem; }
            .ann-modal-title { margin: 0 0 1rem; font-size: 1.8rem; font-weight: 800; color: inherit; }
            .ann-modal-text p:last-child { margin-bottom: 0; }
            .ann-modal-text a { color: inherit; text-decoration: underline; }

            @media (max-width: 767.98px) {
                .ann-bar-inner { padding: 1rem; gap: 1rem; }
                .ann-icon, .ann-icon-mark { width: 36px; height: 36px; }
                .ann-icon-mark { font-size: 1.1rem; }
                .ann-bar-title { font-size: 1.1rem; }
                .ann-bar-body { font-size: 0.85rem; }
                .ann-bar-cta { display: none; }   /* na telefonie liczy się treść, nie przycisk */
                .ann-modal-body { padding: 1.5rem; }
                .ann-modal-title { font-size: 1.4rem; }
            }

/* ==========================================================================
   Stronicowanie list (Aktualności, listy edycji) — wg projektu:
   ‹ POPRZEDNI  [1] 2 3 … 8 │ NASTĘPNY ›
   Aktywna strona = czarne pole, najechanie = beż kart (#f4efeb).
   Współdzielone przez szablony frontu — markup: @theme/_pager.html.twig.
   ========================================================================== */
.pgr {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; margin: 40px 0 10px;
}
.pgr-step {
    display: inline-flex; align-items: center; gap: 10px; color: #111;
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; text-decoration: none; padding: 0 14px;
}
a.pgr-step:hover { color: var(--color-accent, #aa133b); }
.pgr-step--off { opacity: 0.35; }
/* kafel strony: 58×36 px — wymiar spróbkowany z renderu projektu */
.pgr-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 58px; height: 36px; padding: 0 6px;
    color: #111; font-size: 15px; font-weight: 700; text-decoration: none;
}
a.pgr-page:hover { background: #f4efeb; }
.pgr-page--active { background: #111; color: #fff; }
.pgr-dots { width: 34px; text-align: center; font-weight: 700; }
.pgr-sep { width: 1px; height: 36px; background: #111; margin: 0 8px; }

@media (max-width: 575.98px) {
    .pgr-step { padding: 0 6px; font-size: 13px; }
    .pgr-page { min-width: 40px; height: 34px; }
    .pgr-sep { height: 34px; margin: 0 4px; }
}

/* ============================================================
   Edytor blokowy (Editor.js) — klasy renderowane przez
   App\Service\BlockRenderer (prefiks ejb-, paleta z motywu).
   ============================================================ */
.ejb-b { margin: 0 0 1.1rem; }
.ejb-b > :first-child { margin-top: 0; }
.ejb-b > :last-child { margin-bottom: 0; }

/* tuny: tło (paleta motywu), padding, zaokrąglenie, wyrównanie */
.ejb-bg-bez       { background: var(--color-card-hover, #f4efeb); }
.ejb-bg-karmazyn  { background: var(--color-accent, #aa133b); color: #fff; }
.ejb-bg-ciemny    { background: #161616; color: #fff; }
.ejb-bg-karmazyn a, .ejb-bg-ciemny a { color: #fff; }
.ejb-pad-s { padding: 12px 16px; }
.ejb-pad-m { padding: 26px 24px; }
.ejb-pad-l { padding: 52px 32px; }
.ejb-round { border-radius: 10px; }
.ejb-align-center { text-align: center; }
.ejb-align-right  { text-align: right; }
.ejb-align-left   { text-align: left; }

/* listy / lista zadań */
.ejb-list { margin: 0 0 1.1rem; padding-left: 1.4em; }
.ejb-list .ejb-list { margin: .2em 0 0; }
.ejb-checklist { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.ejb-check { display: flex; align-items: flex-start; gap: .6em; margin: .35em 0; }
.ejb-check__box { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: .1em; border: 2px solid var(--color-accent, #aa133b); border-radius: 4px; position: relative; }
.ejb-check--on .ejb-check__box { background: var(--color-accent, #aa133b); }
.ejb-check--on .ejb-check__box::after { content: ""; position: absolute; left: 3px; top: 0; width: .35em; height: .65em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* cytat */
.ejb-quote { margin: 0 0 1.1rem; padding: 14px 20px; border-left: 4px solid var(--color-accent, #aa133b); background: var(--color-card-bg, #f8f5f3); }
.ejb-quote p { margin: 0; font-size: 1.05em; }
.ejb-quote__cite { display: block; margin-top: .5em; font-style: normal; font-size: .9em; color: #666; }

/* tabela */
.ejb-table-wrap { overflow-x: auto; margin: 0 0 1.1rem; }
.ejb-table { border-collapse: collapse; width: 100%; }
.ejb-table th, .ejb-table td { border: 1px solid #e2ddd8; padding: 8px 12px; text-align: left; }
.ejb-table th { background: var(--color-card-hover, #f4efeb); font-weight: 700; }

/* kod / separator */
.ejb-code { margin: 0 0 1.1rem; padding: 14px 16px; background: #1e2128; color: #e6e6e6; border-radius: 6px; overflow-x: auto; }
.ejb-code code { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: .85em; }
.ejb-delimiter { border: 0; text-align: center; margin: 1.6rem 0; }
.ejb-delimiter::before { content: "* * *"; letter-spacing: .5em; color: #999; }

/* obraz */
.ejb-figure { margin: 0 0 1.1rem; }
.ejb-figure img { max-width: 100%; height: auto; display: block; }
.ejb-figure--border img { border: 1px solid #ddd; }
.ejb-figure--bg { background: var(--color-card-hover, #f4efeb); padding: 14px; }
.ejb-figure figcaption { margin-top: .5em; font-size: .88em; color: #666; text-align: center; }

/* komunikaty (callout) */
.ejb-alert { margin: 0 0 1.1rem; padding: 12px 16px; border-radius: 6px; border: 1px solid #e0d6c8; background: #f7f2ea; }
.ejb-alert--primary { background: #f3eefb; border-color: #d8c8f0; }
.ejb-alert--info    { background: #eaf1fb; border-color: #b9d3f2; }
.ejb-alert--success { background: #eaf7ee; border-color: #b7e0c4; }
.ejb-alert--warning { background: #fff7e6; border-color: #ffe0a3; }
.ejb-alert--danger  { background: #fdecec; border-color: #f3b4b4; }
.ejb-alert--secondary, .ejb-alert--light { background: #f5f5f5; border-color: #e0e0e0; }
.ejb-alert--dark { background: #2a2a2a; border-color: #2a2a2a; color: #fff; }

/* kolumny */
.ejb-cols { display: flex; gap: 24px; margin: 0 0 1.1rem; align-items: flex-start; }
.ejb-col { flex: 1; min-width: 0; }
@media (max-width: 767.98px) {
    .ejb-cols { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   MOTYW WSF — własne reguły (wszystko poniżej nadpisuje strukturę z default).
   Wymiary i kolory SPRÓBKOWANE z renderów warsawserialcon.pl (GD, 1440px):
   czerń #010101, tło stron #F4F4F4, pasmo newslettera #CDCDCD, daty #8D8D8D,
   kontener treści 1000px (x 220–1220 przy 1440), nagłówek 150px z logo 120px,
   hero 508px (35.3vw), karta wpisu 316px z kadrem 16:9, przycisk sekcji
   „WIĘCEJ…" 468×55 (pół kontenera minus odstęp). Zrzuty referencyjne:
   var/wsf/oryginal-{home,lista,artykul}-1440.png + crop-*.png.
   ========================================================================== */

/* ─── Font: DOKŁADNIE ten plik, którego używa oryginał ────────────────────
   warsawserialcon.pl deklaruje własny @font-face na Inter z motywu
   Twenty Twenty-Four (oś slnt+wght), a NIE wariant „opsz" z Google Fonts.
   Metryki obu plików różnią się na tyle, że długie tytuły łamały się u nas
   o linię inaczej niż w oryginale — dlatego serwujemy ten sam plik lokalnie.
   NIE zastępować linkiem do Google Fonts. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2');
    font-stretch: normal;
}

/* ─── Skala typograficzna 1:1 z warsawserialcon.pl ────────────────────────
   Oryginał (WordPress) liczy rozmiary presetami płynnymi; przepisane tu
   wzory dają TE SAME wartości co do setnych piksela przy każdej szerokości
   (zweryfikowane przy 390/768/992/1200/1440/1920 — var/wsf/tokens.mjs).
   Przy 1440 px: small 13.27, medium 14.97, large 32.57, xx-large 49.54.
   NIE zastępować tego „ładniejszym" clamp() — rozjedzie się z oryginałem. */
:root {
    --fs-small:    calc(clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem) * 0.85);
    --fs-medium:   calc(clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.24), 1.125rem) * 0.85);
    --fs-large:    calc(clamp(1.75rem, 1.75rem + ((1vw - 0.48rem) * 0.24), 1.875rem) * 1.1);
    --fs-x-large:  calc(2.25rem * 1.15);
    --fs-xx-large: calc(clamp(4rem, 4rem + ((1vw - 0.48rem) * 11.538), 10rem) * 0.35);

    /* Szerokość treści oryginału jest SKOKOWA, nie płynna (zmierzone przy 19
       szerokościach): 800 → 1000 → 1200 → 1440. Kontener = treść + 2×20 px. */
    --wsf-content: 1000px;
    --container-width: calc(var(--wsf-content) + 40px);
}
@media (max-width: 1201px) {
    :root {
        --fs-medium:  calc(clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.24), 1.125rem) * 0.9);
        --fs-large:   calc(clamp(1.75rem, 1.75rem + ((1vw - 0.48rem) * 0.24), 1.875rem) * 0.9);
        --fs-x-large: calc(2.25rem * 1);
        --wsf-content: 800px;
    }
}
@media (min-width: 1600px) { :root { --wsf-content: 1200px; } }
@media (min-width: 1800px) { :root { --wsf-content: 1440px; } }

/* Motyw wsf jest W CAŁOŚCI na Inter. Reguły odziedziczone po motywie default
   ustawiają miejscami Manrope (menu, przełącznik języka, szuflada mobilna) —
   zdejmujemy je punktowo. NIE robić tego regułą `.theme-wsf *`: zepsułaby
   ikony Font Awesome, które też jadą na własnej rodzinie. */
.theme-wsf .nav-item > a,
.theme-wsf .nav-link-separator,
.theme-wsf .header-lang-link,
.theme-wsf .mobile-nav li > a { font-family: inherit; }

/* ─── Pasek przewijania (oryginał stylizuje go własnymi regułami) ───
   15 px, tor #F4F4F4, suwak czarny, pod kursorem szary. Bez tego strona ma
   domyślny szary pasek systemu i od razu widać, że to nie ten sam serwis. */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: #f4f4f4; }
::-webkit-scrollbar-thumb { background: #010101; }
::-webkit-scrollbar-thumb:hover { background: #8d8d8d; }
/* PUŁAPKA: `scrollbar-color` (standardowe) WYGRYWA w Chrome z regułami
   ::-webkit-scrollbar i rysuje ZAOKRĄGLONY suwak ze strzałkami — czyli coś
   innego niż oryginał. Dajemy je więc tylko tam, gdzie pseudoelementów
   webkitowych nie ma (Firefox). */
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: auto; scrollbar-color: #010101 #f4f4f4; }
}

/* ─── Typografia ─── */
body {
    /* dokładnie ten sam stos co oryginał — Inter serwujemy lokalnie (@font-face wyżej) */
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    background: #fff;
    font-size: var(--fs-medium);
    line-height: 1.75;
}

/* Nagłówki oryginału mają letter-spacing `normal` (NIE zagęszczony i NIE 0 —
   przy 0 przeglądarka inaczej łamie długie tytuły) */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.2;
}
h1 { font-size: var(--fs-xx-large); line-height: 1; text-transform: uppercase; }
h2 { font-size: var(--fs-large); }
h3 { font-size: var(--fs-medium); }
a { color: var(--color-primary); }

/* ─── Nagłówek: biały, PEŁNA szerokość (padding ~18px), 150px z logo 120px ─── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    color: var(--color-primary);   /* motyw default dawał tu #111 */
    border-bottom: 0;
    box-shadow: none;
    padding: 0;
}
.site-header .header-inner {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 152px;
    padding: 0 1rem; /* oryginał: logo startuje na x=16 przy każdej szerokości */
}
/* WSF-S-17 (WCAG 2.4.7 / 2.4.11): sticky nagłówek zasłaniał element, który dostał
   fokus po przewinięciu (Tab wstecz, skip-link, kotwice w treści). Wysokość
   zmierzona CDP: 152 px powyżej 1201 px, 102 px od 1201 w dół (do 320) + 8 px zapasu. */
html { scroll-padding-top: 160px; }
@media (max-width: 1201px) { html { scroll-padding-top: 110px; } }
.header-brand { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.header-logo { display: block; line-height: 0; flex: none; position: static; }
.header-logo img { height: 120px; width: auto; display: block; }
.header-logo-text {
    font-weight: 900; font-size: 1.15rem; text-transform: uppercase;
    letter-spacing: -0.02em; line-height: 1.1; display: block; max-width: 15ch;
}
/* Hasło przy logo (data + miasto) — bez separatora, bold wersalikami */
.header-tagline {
    font-size: var(--fs-medium); line-height: 1.15;
    letter-spacing: 0; color: var(--color-primary);
    /* treść niesie i WERSALIKI, i <strong> — dokładnie jak w oryginale */
    padding-left: 0; border-left: 0;
}
.header-tagline p { margin: 0; }

.header-nav-wrap { display: flex; align-items: center; gap: 2.6rem; }

/* ─── Nawigacja główna: wersaliki 15px/700, spore odstępy ─── */
.main-nav { margin: 0; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 3.4rem; }
.main-nav .nav-item { position: relative; }
.main-nav .nav-item > a,
.main-nav .nav-item > .nav-link-separator {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 700; font-size: var(--fs-medium); text-transform: uppercase;
    letter-spacing: 0.01em; text-decoration: none; color: var(--color-primary);
    padding: 0.5rem 0; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.main-nav .nav-item > a:hover,
.main-nav .nav-item > a:focus-visible,
.main-nav .nav-item.active > a,
.main-nav .nav-item > .nav-link-separator:hover {
    /* oryginał szarzeje do #8d8d8d (3,32:1) — tekst musi mieć 4,5:1 także pod kursorem */
    border-bottom-color: var(--color-muted-text);
    color: var(--color-muted-text);
}
/* strzałka rozwijania = szewron SVG jak w oryginale (9×9 w kadrze 12, stroke 1.5) */
.main-nav .nav-caret { width: 9px; height: 9px; flex: none; overflow: visible; }

/* Podmenu: :hover ORAZ :focus-within (działa bez JS — WCAG 2.1.1) */
.main-nav .nav-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 30;
    /* 1:1 z oryginałem: szare pudło 200 px, BEZ ramki i cienia, bez paddingu */
    min-width: 200px; margin: 0; padding: 0;
    list-style: none; background: var(--color-card-bg);
    border: 0; box-shadow: none;
    display: none;
    visibility: visible; opacity: 1; transform: none; transition: none;
}
.main-nav .nav-item:hover > .nav-dropdown,
.main-nav .nav-item:focus-within > .nav-dropdown { display: block; }
.main-nav .nav-dropdown .nav-item > a,
.main-nav .nav-dropdown .nav-item > .nav-link-separator {
    display: block; padding: 10.4px 20px; border-bottom: 0;
    font-size: var(--fs-medium); font-weight: 700; line-height: 1.25;
    text-transform: uppercase; letter-spacing: 0.01em; text-align: left;
    color: var(--color-primary);
}
.main-nav .nav-dropdown .nav-item > a:hover,
.main-nav .nav-dropdown .nav-item > a:focus-visible { background: var(--color-card-hover); }
.main-nav .nav-dropdown .nav-dropdown { top: 0; left: 100%; }

/* ─── Ikony brandowe, konto i język — czarne znaki bez kółek ─── */
.header-utils { display: flex; align-items: center; gap: 2.5rem; }
.theme-wsf .header-socials { display: inline-flex; gap: 2.5rem; margin-left: 0; }
.theme-wsf .header-socials a {
    width: auto; height: auto; border-radius: 0; margin-left: 0;
    background: transparent; color: var(--color-primary);
    display: inline-flex; text-decoration: none; line-height: 0;
}
/* ikony to teraz te same SVG co w oryginale (24×24, konto 22×22 na obrysie) */
.wsf-ikona { display: block; }
.theme-wsf .header-socials a:hover,
.theme-wsf .header-socials a:focus-visible { background: transparent; color: var(--color-muted-text); }
.header-account {
    color: var(--color-primary); line-height: 0;
    display: inline-flex; text-decoration: none;
}
.header-account:hover, .header-account:focus-visible { color: var(--color-muted-text); }
.header-lang { display: inline-flex; align-items: center; font-weight: 700; font-size: var(--fs-medium); }
.header-lang a { text-decoration: none; color: var(--color-primary); letter-spacing: 0.01em; }
.header-lang a:hover, .header-lang a:focus-visible { color: var(--color-muted-text); }
.mobile-nav-socials { display: flex; gap: 1.6rem; padding: 1.2rem 0 0; font-size: 1.25rem; }
.mobile-nav-socials a { color: var(--color-primary); text-decoration: none; }
.mobile-nav-lang { display: flex; gap: 1rem; padding: 1rem 0; font-weight: 700; }
.mobile-nav-lang a { text-decoration: none; color: var(--color-muted-text); }
.mobile-nav-lang a.is-current { color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; }

/* ─── Hero (widget wsf hero_slider) — pełna szerokość, 508px przy 1440 ─── */
.wsf-hero { position: relative; overflow: hidden; }
/* Wysokość slidera: ~34.72vw, ale ZATRZYMANA NA 500 px — oryginał nie rośnie
   powyżej tej wartości (zmierzone: 481 px @1385, 500 @1440/1600/1920).
   Wcześniejsze 640 px robiło na szerokich ekranach dużo wyższe hero niż oryginał. */
.wsf-hero-slide { position: relative; height: clamp(300px, 34.72vw, 500px); }
/* Dół widełek: 300 px, nie 380 — Smart Slider ma `min-height: 300px`, a proporcja 34.72vw
   schodzi poniżej 300 dopiero pod 864 px (pomiar 2026-11-02: 768 → 300, 1024 → 356,
   1100 → 382, 1200 → 417, 1280 → 444). Wcześniejsze 380 dawało na tablecie hero o 80 px za wysokie. */
.wsf-hero-slide[hidden] { display: none; }
.wsf-hero-slide img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* przyciemnienie jak w oryginale: delikatny werniks + gradient 135° od czerni */
.wsf-hero-slide::after {
    content: ''; position: absolute; inset: 0;
    /* przyciemnienie 1:1 z oryginałem: gradient 135° od #111 przy 30% krycia */
    background: linear-gradient(135deg, rgb(17 17 17) 0%, rgb(18 18 18 / 0) 100%);
    opacity: 0.3;
}
.wsf-hero-content {
    position: absolute; inset: 0; z-index: 1;
    /* Oryginał KOTWICZY treść slajdu DO DOŁU: przy 1455 i 1935 px dolna krawędź
       przycisku stoi zawsze 80 px nad dołem hero (góra „pływa" razem z liczbą
       wierszy tytułu). Wyśrodkowanie dawało rozjazd do 14 px. */
    display: flex; align-items: flex-end;
    padding-bottom: 80px;
}
.wsf-hero-inner {
    width: 100%; max-width: var(--container-width);
    margin: 0 auto; padding: 0 20px;
}
.wsf-hero-title { margin: 0; max-width: 720px; }
.wsf-hero-title a, .wsf-hero-title span {
    color: #fff; text-decoration: none;
    font-size: var(--fs-xx-large);
    font-weight: 800; text-transform: uppercase; line-height: 1;
    letter-spacing: 0; display: inline-block;
    /* czytelność na JASNYCH grafikach (key visuals EN, jasne niebo slajdu 1).
       WSF-D-07: sam miękki cień 12 px nie dawał kontrastu na jasnych fragmentach —
       doszło „halo" (ciasny cień przy krawędzi znaku). Na ciemnych kadrach
       prawie niewidoczne; gradient tła BEZ zmian. */
    text-shadow: var(--wsf-hero-halo);
}
.wsf-hero-title a:hover, .wsf-hero-title a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.wsf-hero-sub {
    margin: 24px 0 0; max-width: 720px;
    color: #fff; font-size: var(--fs-medium); font-weight: 800; line-height: 1.5;
    text-shadow: var(--wsf-hero-halo-small);
}
/* halo = ciasny ciemny obrys przy krawędzi znaku (1–2 px) + miękka poświata; ostatni
   cień to dotychczasowy cień oryginału. Pomiar pikseli (var/a11y-wsf/rdzen/obrys.mjs,
   kontrast bieli do pierścienia 2 px wokół liter): najjaśniejszy slajd PL („Yes,
   Chef!") mediana 2,28 → 4,45:1, plansza EN 2,22 → 4,81:1; ciemne kadry bez zmian. */
.wsf-hero {
    --wsf-hero-halo: 0 0 1px rgb(0 0 0 / 0.9), 0 0 2px rgb(0 0 0 / 0.8), 0 0 4px rgb(0 0 0 / 0.5), 0 0 8px rgb(0 0 0 / 0.35), 0 2px 12px rgb(0 0 0 / 0.35);
    --wsf-hero-halo-small: 0 0 1px rgb(0 0 0 / 0.9), 0 0 2px rgb(0 0 0 / 0.8), 0 0 4px rgb(0 0 0 / 0.45), 0 1px 10px rgb(0 0 0 / 0.35);
}
.wsf-hero-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 38px; min-width: 236px; height: 50px; padding: 12px 16px;
    border: 2px solid #fff; border-radius: 8px; color: #fff; background: transparent;
    font-size: var(--fs-medium); line-height: 1.5; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.01em; text-decoration: none;
    text-shadow: var(--wsf-hero-halo-small);
    transition: background var(--transition-fast), color var(--transition-fast);
}
/* pod kursorem/fokusem przycisk jest biały z czarnym tekstem — halo zbędne (brudziłoby znak) */
.wsf-hero-btn:hover, .wsf-hero-btn:focus-visible { background: #fff; color: #010101; text-shadow: none; }
.wsf-hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    /* strzałki oryginału: 40×40 px, 20 px od krawędzi, w osi pionowej hero */
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 0; color: #fff; cursor: pointer;
    opacity: 1;
    /* WSF-D-07 (WCAG 1.4.11): cienka biała kreska ginęła na jasnym niebie
       (prawa strzałka slajdu 1: mediana 1,8:1). Ciasny ciemny obrys przy kresce —
       kontrast do przyległych pikseli z mediany 1,2–2,7 do 3,4–6:1 na jasnych
       planszach; na ciemnych kadrach praktycznie niewidoczny. */
    filter: drop-shadow(0 0 1px rgb(0 0 0)) drop-shadow(0 0 1px rgb(0 0 0)) drop-shadow(0 0 2px rgb(0 0 0 / 0.6));
}
.wsf-hero-prev { left: 20px; }
.wsf-hero-next { right: 20px; }
.wsf-hero-playpause {
    position: absolute; left: 1rem; bottom: 0.9rem; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    /* WSF-S-04/D-10 (WCAG 2.2.2): oryginał nie ma przycisku pauzy; był ukryty
       (opacity 0) do najechania, więc na ekranie dotykowym nie dało się zatrzymać
       karuzeli. Teraz stale widoczny i dyskretny, pełne krycie pod kursorem i przy fokusie.
       WCAG 1.4.11 liczy kontrast kontrolki W SPOCZYNKU. 0.55 z notatki dostepnosc.md
       to granica dla ikon karuzeli TR na BEŻOWYM paśmie — nie dla zdjęć: przy
       podkładzie 0.45 ikona miała na jasnych slajdach tylko 2,2:1. Podkład 0.8 przy
       tym samym kryciu 0.55: ≥ 3:1 na każdym obecnym slajdzie PL/EN (min 3,8:1 przy
       1440 i 390) i na DOWOLNYM jednolitym tle (min 3,24:1), a ikona na ciemnych
       kadrach wygląda jak przy 0.55 (dobór: var/a11y-wsf/rdzen/pauza-siatka.mjs).
       Wariant „samo krycie 0.75" dawał min 3,06:1 i jaśniej świecącą ikonę. */
    background: rgb(0 0 0 / 0.8); border: 0; color: #fff;
    font-size: 0.8rem; cursor: pointer;
    opacity: 0.55; transition: opacity var(--transition-fast);
}
.wsf-hero:hover .wsf-hero-playpause,
.wsf-hero-playpause:focus-visible { opacity: 1; }
/* Fokus z klawiatury w hero (WSF-S-03/D-07): obwódka motywu (czarna) ginęła na
   zdjęciu. Trzy pierścienie — ciemny / biały / ciemny — są widoczne na każdym
   tle. Tylko :focus-visible: użytkownik myszy nic nie widzi. */
.wsf-hero a:focus-visible,
.wsf-hero button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #010101, 0 0 0 7px #010101;
}

/* ─── Treść: kontener 1000px, bez górnego marginesu (pasma sekcji rytmują) ─── */
/* Dolny odstęp niesie TREŚĆ, nie kontener — dzięki temu pasmo nawigacji
   między wpisami styka się z newsletterem dokładnie jak w oryginale. */
.site-main { margin: 0 auto; padding: 0 20px; }
.wsf-article-body { padding-bottom: 64px; }
.wsf-article-body:has(.wsf-postnav) { padding-bottom: 0; }
/* strona główna nie ma treści artykułu — odstępy niosą sekcje bloków */
body.wsf-home .wsf-article-body { padding-bottom: 0; }
.site-main .row { gap: 0; }

/* ─── Sekcje strony głównej (widget wsf article_grid) ────────────────────
   Rytm pionowy 1:1 z oryginałem (zmierzone paddingi wierszy Kadence):
   pasek nagłówka 104 px góra / 24 dół, siatka kart 24 / 104.
   Sekcja z klasą `wsf-section--tight` ma 24 px u góry — tak (odmiennie od
   pozostałych) ustawiony jest w oryginale wiersz „Recenzje". */
/* Oryginał ma BIAŁE <body>; szarość wnoszą dopiero PASMA (u niego wiersze `bg-2`).
   Trzy sąsiadujące pasma sekcji dają jedną ciągłą szarość — tak jak w oryginale,
   bez malowania jej na <body>. UWAGA: ta reguła MUSI stać po innych ustawieniach
   marginesu `.wsf-section`, inaczej `margin: 0` zabiera pełną szerokość. */
.wsf-section, body.wsf-bg-gray .wsf-list {
    margin: 0 calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    background: var(--color-card-bg);
}
/* rytm niosą paddingi sekcji — bootstrapowe `mt-4` na kontenerze bloków
   dokładało 24 px i przesuwało całą stronę główną w dół */
.theme-wsf .content-bottom-blocks { margin-top: 0 !important; }
.wsf-section-head {
    /* nagłówek i przycisk są GÓRĄ w jednej linii (oryginał: obie kolumny
       zaczynają się na tym samym y, mimo różnych wysokości) */
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    /* min-height liczy się z paddingiem (border-box): 104 + 66 treści + 24 */
    padding: 104px 0 24px; margin-bottom: 0; min-height: 194px;
}
.wsf-section--tight .wsf-section-head,
.content-bottom-blocks > .wsf-section:nth-child(2) .wsf-section-head {
    padding-top: 24px; min-height: 114px;
}
.wsf-section .article-grid { padding: 24px 0 104px; }
.wsf-section-title {
    margin: 0;
    font-size: var(--fs-large); line-height: 1.2;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0;
    border: 0; padding: 0;
}
.wsf-section-more {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 1 calc(50% - 32px); min-height: 59px; padding: 0.4rem 2rem;
    background: var(--color-primary); color: #fff; text-decoration: none;
    border-radius: 8px;   /* oryginał: zaokrąglone rogi przycisków sekcji */
    font-size: var(--fs-small); line-height: 1.75; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.01em; text-align: center;
    transition: background var(--transition-fast);
}
/* oryginał nie zmienia przycisków sekcji pod kursorem — zostaje tylko obrys fokusu */
.wsf-section-more:hover { background: var(--color-primary); }

/* Karty wpisów: białe na szarym tle, kadr 16:9, tytuł wersalikami, data szara (--color-muted-text) */
.theme-wsf .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.theme-wsf .article-grid-item {
    display: flex; flex-direction: column;
    background: #fff; text-decoration: none; color: var(--color-text);
    border-radius: 0; overflow: hidden; box-shadow: none;
    transition: none; transform: none;
}
.theme-wsf .article-grid-item:hover { transform: none; box-shadow: none; }
.theme-wsf .article-grid-thumb {
    position: relative; aspect-ratio: 16 / 9; background: #e9e9e9; overflow: hidden;
}
/* PUŁAPKA: przy `height: 100%` obrazek liczy wysokość względem rodzica o wysokości
   „auto", więc renderuje się w NATURALNYCH proporcjach i rozpycha kadr — aspect-ratio
   przestaje działać (karty miały wtedy różne wysokości). Pozycja absolutna to zdejmuje. */
.theme-wsf .article-grid-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Rytm karty (pomiar 2026-11-02: 1440 / 1280 / 640 / 390): kadr → tytuł = 1em obrazka
   (margin-bottom WP `1em`) + 12.8 px paddingu, tytuł → data 16 px, data → dół 24 px.
   Wcześniej 24/23/27 dawało kartę o 7 px wyższą (2 wiersze = +14 px całej strony). */
.theme-wsf .article-grid-info { padding: calc(var(--fs-medium) * 1.87) 24px 24px; display: flex; flex-direction: column; flex: 1; }
/* Tytuł karty bywa <h3> (sekcje strony głównej pod <h2> sekcji) albo <h2> (listy
   news_grid pod <h1> pasma — WSF-S-28). Obie wersje MUSZĄ wyglądać identycznie,
   dlatego reguła ustawia jawnie WSZYSTKIE właściwości, którymi h2 różni się od h3
   (rozmiar i marginesy z arkusza UA, globalne `h2 {font-size: --fs-large}`). */
.theme-wsf .article-grid-info h2,
.theme-wsf .article-grid-info h3 {
    margin: 0 0 1rem; font-size: var(--fs-medium); font-weight: 800; line-height: 1.2;
    text-transform: uppercase; letter-spacing: 0; color: var(--color-primary);
}
/* Hover karty 1:1 z oryginałem: plakat powiększa się o 5% w kadrze, tytuł
   szarzeje — BEZ podkreślenia i bez zmiany tła. Szarość tekstowa #767676
   zamiast #8d8d8d oryginału (4,54:1, WCAG 1.4.3). */
.theme-wsf .article-grid-item:hover .article-grid-info h2,
.theme-wsf .article-grid-item:focus-visible .article-grid-info h2,
.theme-wsf .article-grid-item:hover .article-grid-info h3,
.theme-wsf .article-grid-item:focus-visible .article-grid-info h3 { color: var(--color-muted-text); }
.theme-wsf .article-grid-thumb img { transition: transform var(--transition-smooth); }
.theme-wsf .article-grid-item:hover .article-grid-thumb img,
.theme-wsf .article-grid-item:focus-visible .article-grid-thumb img { transform: scale(1.05); }
.theme-wsf .article-grid-info time { color: var(--color-muted-text); font-size: var(--fs-small); line-height: 1.75; margin-top: 0; }

/* ─── Pasmo tytułowe podstron: faktura papieru + zielona ilustracja ─── */
.wsf-band {
    position: relative;
    background: #e9e7e2 url('img/pasmo-tekstura.webp') no-repeat;
    background-size: cover; background-position: 55% 10%;
    display: flex; align-items: center;
    min-height: 325px;
    /* oryginał: wiersz Kadence ma padding 24 px góra/dół, a min-height liczy się
       od CONTENT-BOXA — stąd pasmo artykułu ma 748 px przy „min-height: 700" */
    padding: 24px 0;
}
.wsf-band-inner {
    width: 100%; max-width: var(--container-width);
    margin: 0 auto; padding: 0 20px;
}
/* Tytuł zajmuje LEWĄ POŁOWĘ kontenera (oryginał: wiersz 2-kolumnowy 468+468,
   przerwa 64 px; prawa kolumna jest pusta i tylko trzyma szerokość). */
.wsf-band h1 {
    margin: 0 0 24px; max-width: calc((var(--wsf-content) - 64px) / 2);
    word-break: break-word;   /* jak w oryginale — wpływa na łamanie długich tytułów */
}
/* wariant artykułu: inna klatka tej samej grafiki, tytuł osadzony dołem */
.wsf-band--article {
    background-image: url('img/pasmo-tekstura-artykul.webp');
    background-position: 73% 3%;
    align-items: flex-end;
    min-height: 748px;
    padding: 24px 0;
}
.wsf-band--article h1 { margin-bottom: 33px; }
/* przyciemnienie pasma artykułu (oryginał: overlay „dim 30" z gradientem 135°) */
.wsf-band--article::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgb(17 17 17) 0%, rgb(18 18 18 / 0) 100%);
    opacity: 0.3; pointer-events: none;
}
.wsf-band-inner { position: relative; z-index: 1; }

/* ─── Pasmo NEWSLETTER (base.html.twig, na każdej stronie) ─── */
.wsf-newsletter {
    background: #cdcdcd; color: var(--color-primary);
    /* dół 103 px: 80 paddingu wiersza + 23 od kontenera zgody (jak w oryginale) */
    padding: 80px 20px 103px;
    text-align: center;
}
.wsf-newsletter h2 {
    margin: 0 auto 24px; max-width: var(--wsf-content);
    font-size: var(--fs-large); line-height: 1.2;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0;
}
.wsf-nl-box { width: 360px; max-width: 100%; margin: 44px auto 0; text-align: left; }
.wsf-nl-form { display: flex; }
.wsf-nl-form input {
    flex: 1; min-width: 0; height: 42px; padding: 0 10px;
    background: #fff; font: inherit; font-size: 14px; line-height: 20px;
    /* oryginał (MailerLite): ramka #ccc, zaokrąglenie 4 px, tekst #333 */
    border: 1px solid #ccc; border-radius: 4px; color: #333;
}
.wsf-nl-form input::placeholder { color: #75757d; }
/* Pływająca etykieta pola (wzorzec S-6, WSF-S-11 / WCAG 3.3.2): puste pole pokazuje
   SAM placeholder jak oryginał; po wpisaniu znaku placeholder znika, więc nad wpisem
   ujawnia się mała etykieta. Wysokość pola jest ustawiona na sztywno (42 px), więc
   przestawienie paddingu nie zmienia jego rozmiaru. */
.wsf-nl-form .pole { position: relative; flex: 1; min-width: 0; display: flex; }
.wsf-nl-form .pole label {
    position: absolute; top: 4px; left: 11px; z-index: 1;
    margin: 0; font-size: 10px; line-height: 1; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-text);
    opacity: 0; pointer-events: none; transition: opacity var(--transition-fast);
}
.wsf-nl-form .pole:has(input:not(:placeholder-shown)) label { opacity: 1; }
.wsf-nl-form .pole:has(input:not(:placeholder-shown)) input { padding: 13px 10px 0; }
.wsf-nl-form button {
    height: 42px; padding: 0 1.1rem; cursor: pointer;
    background: #000; color: #fff;
    border: 1px solid #000; border-radius: 4px;   /* oryginał: MailerLite, radius 4 px */
    font: inherit; font-size: 14px; line-height: 20px; font-weight: 700;
    letter-spacing: 0; white-space: nowrap;   /* treść jest już WERSALIKAMI */
}
.wsf-nl-form button:hover, .wsf-nl-form button:focus-visible { background: #2c2c2c; }
.wsf-nl-form button:disabled { opacity: 0.6; cursor: wait; }
.wsf-nl-note { margin: 15px 0 0; font-size: 12px; line-height: 1.833; }
.wsf-nl-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wsf-nl-status { margin: 0.6rem 0 0; font-size: 0.8125rem; font-weight: 700; }
/* Region statusu jest STALE w DOM (WSF-S-12: `hidden` zdejmowany razem z wpisem
   tekstu bywa pomijany przez czytniki). Pusty = zero wysokości i zero marginesu,
   ale nadal w drzewie dostępności. */
.wsf-nl-status:empty { margin: 0; }
.wsf-nl-status.is-error { color: #7a1414; }

/* ─── Stopka: czarna, PEŁNA szerokość, adres z lewej, meta z prawej ─── */
.site-footer {
    background: var(--color-primary);
    color: #fff;
    margin-top: 0;
    padding: 4.5rem 0;
    font-size: var(--fs-medium); line-height: 1.75;
}
.site-footer .footer-container {
    max-width: none; padding: 0 1rem;
    flex-direction: column; align-items: stretch;
}
.site-footer, .site-footer a, .site-footer h1, .site-footer h2,
.site-footer h3, .site-footer h4, .site-footer strong { color: #fff; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
/* oryginał nie zmienia linków stopki pod kursorem — sygnał zostaje dla klawiatury */
.site-footer a:focus-visible { text-decoration: none; }
.site-footer img { max-width: 100%; height: auto; }
.footer-cols {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 2.5rem; margin: 0;
}
.footer-col:empty { display: none; }
.footer-col p { margin: 0; }
.footer-col-meta {
    margin-left: auto; text-align: right;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1.6rem;
}
.footer-credit { color: #fff; }
/* kolumna menu z bloku (widget menu) — spokojna lista bez podkreśleń */
.site-footer .widget-menu-title {
    color: #fff; font-size: 0.9375rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.9rem;
}
.site-footer .widget-custom-menu .submenu-item > a {
    color: #fff !important; border: none !important; background: transparent !important;
    padding: 0.2rem 0 !important; font-size: 0.9375rem; text-decoration: none;
}
.site-footer .widget-custom-menu .submenu-item > a:hover { text-decoration: underline; }
.site-footer .row > div:nth-child(2) .widget-custom-menu { margin-top: 0; }

/* ─── Karuzela partnerów (sponsor_list) — białe pasmo, loga bez ramek ─── */
.theme-wsf .sponsor-band { background: #fff; }
.theme-wsf .sponsor-band-title { color: var(--color-muted-text); }
.theme-wsf .footer-socials { display: none; } /* oryginał nie ma ikon w stopce */

/* Sekcja „O festiwalu" (blok html) — u oryginału białe pasmo na szarej stronie */
.theme-wsf .wsf-about {
    background: #fff;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

/* ─── RWD ─── */
@media (max-width: 1220px) {
    /* od 2026-11-02 próg 1220 px (był 1201): źródło zwija nawigację do hamburgera i
       zmniejsza logo do 70 px regułą `@media (max-width: 1220px)` — pomiar: 1200 px logo 70
       + hamburger, 1280 px logo 120 + pełne menu */
    .header-logo img { height: 70px; }
    .site-header .header-inner { min-height: 102px; }
}
@media (max-width: 1220px) {
    /* poniżej lg nawigacja przenosi się do szuflady (hamburger);
       układ paska jak w oryginale: [logo + data] … [EN · konto · hamburger] */
    .header-nav-wrap .main-nav { display: none; }
    .site-header .header-inner { min-height: 102px; gap: 0.75rem; padding: 0 1rem; }
    .header-logo img { height: 70px; }
    /* ikony brandowe są w szufladzie; konto i język ZOSTAJĄ w pasku (jak oryginał) */
    .header-utils .header-socials { display: none; }
    .header-utils { gap: 1.1rem; }
    .header-nav-wrap { order: 2; margin-left: auto; gap: 0; }
    .nav-toggle { order: 3; }
    .wsf-band--article { min-height: 420px; }
}
@media (max-width: 1024px) {
    /* nagłówek sekcji bez górnego przycisku: 104 / 45 (pomiar 768 i 1024: hero → h2 = 104,
       h2 → karty = 45 + 24); wiersz „Recenzje" zostaje przy 24 u góry, ale BEZ min-height 114
       (desktopowe 114 = 59 px przycisku + paddingi; bez przycisku źródło ma 99) */
    .wsf-section-head { padding: 104px 0 45px; min-height: 0; }
    .theme-wsf .content-bottom-blocks > .wsf-section .wsf-section-head { min-height: 0; }
    /* oryginał ukrywa GÓRNY przycisk „WIĘCEJ …" na tablecie i telefonie (Kadence
       kvs-md/sm-false = ≤1024 px) i pokazuje tam DOLNY (kvs-lg-false) — sekcja AUDYT */
    .wsf-section-more:not(.wsf-section-more--dol) { display: none; }
}
@media (max-width: 767.98px) {
    /* stopka mobilna oryginału: wszystko wyśrodkowane, duże światło */
    .footer-cols { flex-direction: column; align-items: center; gap: 3rem; text-align: center; }
    .footer-col-meta { margin-left: 0; text-align: center; align-items: center; gap: 1.6rem; }
    .site-footer { padding: 4rem 0; }
}
@media (max-width: 575.98px) {
    /* minmax(0, 1fr), nie 1fr (= minmax(auto, 1fr)): minimalna szerokość treści karty
       nie może rozepchnąć kolumny poza ekran (W1-04 — jak news_grid motywu default) */
    .theme-wsf .article-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    /* zdjęcie karty idzie na PEŁNĄ szerokość kafla (oryginał nie ma ramki) */
    .theme-wsf .article-grid-thumb { margin: 0; }
    /* hero mobilne: liczby w sekcji „AUDYT 1:1 2026-11-02" (układ ≤768 px) */
    .wsf-hero-arrow { width: 42px; height: 42px; }
    /* pasmo 250 px i odstęp od treści — patrz sekcja AUDYT 1:1 (próg 767.98, nie 575) */
    .wsf-band--article { min-height: 300px; }
    /* newsletter mobilny oryginału: pole / disclaimer / czarny przycisk w pionie
       (display:contents wyciąga dzieci formularza do kolumny boxu) */
    .wsf-newsletter { padding-bottom: 4.5rem; }
    .wsf-nl-box { display: flex; flex-direction: column; }
    .wsf-nl-form { display: contents; }
    /* Pole ma 42 px jak w oryginale (zmierzone CDP na warsawserialcon.pl przy 390:
       computed height 42 px). Wcześniej `flex: 1` pola w KOLUMNIE flex dawało
       flex-basis 0 → wysokość z treści = 19 px (a `height: 46px` było ignorowane).
       Elementem kolumny jest teraz `.pole` (flex: none), pole w nim ma sztywną
       wysokość — pływająca etykieta działa jak na desktopie. */
    .wsf-nl-form .pole { order: 1; flex: none; }
    .wsf-nl-form input { order: 1; height: 42px; border: 1px solid #e5e5e5; }
    /* odstępy pole → zgoda → przycisk: 20 / 15 px, przycisk 42 px (pomiar 390 px, 2026-11-02) */
    .wsf-nl-note { order: 2; margin: 20px 0 15px; line-height: 1.5; }
    .wsf-nl-form button { order: 3; height: 42px; }
    .wsf-nl-status { order: 4; }
}
/* siatka kart: 1 kolumna < 600 px, 3 kolumny od 600 px (WordPress `columns-3` @media (min-width:600px);
   pomiar 2026-11-02: 575 → 1 kolumna 535 px, 640 → 3 kolumny po 179 px) — patrz sekcja AUDYT 1:1 */

/* ==========================================================================
   MOTYW WSF — podstrony (pasmo tytułowe w treści, artykuł, stronicowanie)
   ========================================================================== */

/* Pasmo tytułowe siedzi w kontenerze treści (block content), ale wizualnie
   jest full-bleed — wychodzi na cały viewport marginesem ujemnym */
/* odstęp pasma tytułowego do treści = 104 px na KAŻDYM typie strony (zmierzone
   na liście, stronie statycznej i wpisie) */
.wsf-band { margin-inline: calc(50% - 50vw); margin-bottom: 104px; }
.wsf-band--article { margin-bottom: 104px; }

/* ─── Strona artykułu: treść na białym, typografia jak w oryginale ─── */
.wsf-article-body { font-size: var(--fs-medium); line-height: 1.75; }
.wsf-article-body img { max-width: 100%; height: auto; }
.wsf-article-body a { text-underline-offset: 2px; }
/* LEAD. Oryginał daje pierwszemu akapitowi preset `large` (33 px przy 1440)
   i interlinię 1.5. Klasę `.wsf-lead` nadaje importer (var/wsf_import.php);
   druga reguła to zapas dla treści wpisanych ręcznie w panelu. */
.wsf-article-body .wsf-lead,
.wsf-article-body .wsf-duzy,
.wsf-rich .wsf-duzy,
.wsf-article-body > p:first-of-type:has(> strong:only-child) {
    font-size: var(--fs-large); line-height: 1.5; letter-spacing: 0; font-weight: 400;
    margin: 0 0 1em;
}
.wsf-article-body .wsf-lead strong { font-weight: 900; }

/* Separator, data i podpis pod zdjęciem — wymiary i kolory z oryginału */
.wsf-article-body hr {
    width: 250px; height: 2px; border: 0; background: #111; margin: 24px 0;
}
.wsf-article-body time { font-size: var(--fs-small); color: #636363; }
.wsf-article-body :has(> time) { margin-bottom: 64px; }
.wsf-article-body figure { margin: 0 0 31px; }
/* h1 przywleczony w treści importu — nie może konkurować z H1 pasma */
.wsf-article-body h1 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
/* ─── Nawigacja między wpisami: szare pasmo pełnej szerokości, dwie kolumny
   (oryginał: wiersz `bg-2 post-wrap`, padding 64 px, kolumny 468+468). ─── */
.wsf-postnav {
    background: var(--color-card-bg);
    margin-inline: calc(50% - 50vw);
    margin-top: 79px;
    padding: 64px calc(50vw - 50%);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 1.5rem;
    line-height: 1.75;
}
.wsf-postnav-prev, .wsf-postnav-next { font-size: var(--fs-small); }
/* strzałka jest osobnym węzłem tekstowym bez spacji — odstęp dokłada margines */
.wsf-postnav a { font-weight: 700; color: var(--color-primary); text-underline-offset: 3px; }
.wsf-postnav-prev a { margin-left: 0.4em; }
.wsf-postnav-next a { margin-right: 0.4em; }
.wsf-postnav a:hover, .wsf-postnav a:focus-visible { text-decoration: none; }
@media (max-width: 767.98px) {
    .wsf-postnav { grid-template-columns: 1fr; padding-block: 40px; }
}

.wsf-article-date { margin: 2.5rem 0 0; }
.wsf-article-date hr { width: 120px; margin: 0 0 0.7rem; border: 0; border-top: 1px solid var(--color-primary); }
.wsf-article-date time { color: var(--color-muted-text); font-size: 0.9em; }

/* ─── Stronicowanie list: cyfry z lewej, POPRZEDNIA/NASTĘPNA z prawej ─── */
.wsf-pager {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem 2rem; flex-wrap: wrap; margin-top: 48px; font-size: var(--fs-small);
}
/* Sekcja listy kończy się 104 px światła przed newsletterem (padding wiersza
   listy w oryginale: 104 px góra i dół). */
.wsf-list { padding-bottom: 104px; }
/* „Brak wpisów." na szarym tle listy: bootstrapowe #6c757d dawało 4,26:1 (WSF-S-41);
   ciemniejszy odcień tej samej szarości = 5,54:1 na #f4f4f4 */
.theme-wsf .wsf-list .text-muted { color: #5c636a; }
.wsf-pager-pages { display: inline-flex; gap: 1.2rem; }
.wsf-pager-num { color: var(--color-primary); text-decoration: none; }
.wsf-pager-num.is-current { font-weight: 800; }
a.wsf-pager-num:hover, a.wsf-pager-num:focus-visible { text-decoration: underline; }
.wsf-pager-steps { display: inline-flex; gap: 2rem; }
.wsf-pager-steps a {
    color: var(--color-primary); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.wsf-pager-steps a:hover, .wsf-pager-steps a:focus-visible { text-decoration: underline; }

@media (max-width: 575.98px) {
    .wsf-band { margin-bottom: 1.5rem; }
    .wsf-band--article { margin-bottom: 2rem; }
    /* lead skaluje się już samym presetem --fs-large */
}

/* ==========================================================================
   MOTYW WSF — komponenty treści stron statycznych (1:1 z oryginałem):
   naprzemienne biało-szare pasma full-bleed, układy 2-kolumnowe, akordeony,
   czarne przyciski, listy strzałkowe, sekcja partnerów. Klas używa treść
   artykułów przebudowana generatorem var/wsf/uklad_stron.php.
   ========================================================================== */

/* Pasma sekcji: szare pasmo wychodzi na pełną szerokość viewportu */
.wsf-sec { margin: 0 0 2.5rem; }
.wsf-sec--white {
    background: #fff;
    margin-inline: calc(50% - 50vw);
    padding: 104px calc(50vw - 50%);
}
.wsf-sec--gray {
    background: var(--color-card-bg);
    margin-inline: calc(50% - 50vw);
    padding: 104px calc(50vw - 50%);
}
.wsf-sec > :first-child, .wsf-sec--gray > :first-child { margin-top: 0; }
/* Dwa szare rzędy obok siebie (Branża: nagłówek „Rodzaje akredytacji" + karty; Jury,
   Informacje praktyczne) są w oryginale JEDNYM ciągłym pasmem — pomiar 2026-11-02
   (var/harmonogram/mierz-szare.mjs: źródło 1935+90 = 2025 = start następnego; u nas 40 px
   bieli i podwójny padding). Drugi rząd dokleja się bez odstępu i bez górnego paddingu. */
.wsf-sec--gray + .wsf-sec--gray { margin-top: -2.5rem; padding-top: 0; }

/* Układ 2-kolumnowy (oryginał: kolumny Kadence; pusta kolumna trzyma szerokość) */
.wsf-cols-2 {
    /* oryginał domyślnie wyrównuje kolumny GÓRĄ (kt-row-valign-top); wariant
       wyśrodkowany (jak blok „O festiwalu" na stronie głównej) ma modyfikator */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    /* odstępy wierszy Kadence: 32 px w pionie, 64 px między kolumnami */
    column-gap: 64px; row-gap: 32px; align-items: start;
}
.wsf-cols-2--srodek { align-items: center; }
.wsf-cols-2--lista { row-gap: 64px; }
/* Branża / Industry (2026-11-02): rząd trzech białych kart akredytacji na szarym paśmie —
   oryginał: grid 3 × minmax(0,1fr), odstępy 4rem/2rem, karta tło #fff, radius 1rem,
   padding 2rem (≤1024: 1rem). Generator: var/wsf/uklad_stron.php, gałąź industry-wrap. */
.wsf-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4rem; row-gap: 2rem; align-items: start; }
.wsf-card { background: #fff; border-radius: 1rem; padding: 2rem; }
.wsf-card > :first-child { margin-top: 0; }
.wsf-card > :last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .wsf-card { padding: 1rem; } .wsf-cols-3 { column-gap: 2rem; } }
@media (max-width: 767.98px) { .wsf-cols-3 { grid-template-columns: minmax(0, 1fr); } }
/* kadr 16:9 dla zdjęć w kolumnach (oryginał: obrazek Kadence z proporcją) */
.wsf-img-16x9 { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wsf-col > :first-child { margin-top: 0; }
.wsf-col > :last-child { margin-bottom: 0; }

/* Nagłówki treści: wersaliki jak w oryginale */
.wsf-article-body h2, .wsf-rich h2 {
    text-transform: uppercase; font-size: var(--fs-large); line-height: 1.2;
    /* odstęp nagłówka do akapitu jak w oryginale — proporcjonalny: 27 px przy 1440 (32.6 px fontu),
       22 px przy 390 (25.2 px); sztywne 27 dawało na telefonie o 5–6 px za dużo (audyt 2026-11-02) */
    margin: 0 0 0.84em;
}
.wsf-article-body h3, .wsf-rich h3 { text-transform: uppercase; font-size: var(--fs-medium); line-height: 1.2; }

/* Listy strzałkowe (oryginał: ul z markerem „→") */
.wsf-article-body ul:not(.wsf-plain), .wsf-rich ul:not(.wsf-plain) { list-style: none; padding-left: 0; }
.wsf-article-body ul:not(.wsf-plain) > li, .wsf-rich ul:not(.wsf-plain) > li {
    position: relative; padding-left: 1.7rem; margin: 0.55rem 0;
}
.wsf-article-body ul:not(.wsf-plain) > li::before, .wsf-rich ul:not(.wsf-plain) > li::before {
    content: '\2192'; position: absolute; left: 0; top: 0; font-weight: 700;
}

/* Czarny przycisk blokowy (REGULAMIN, NEWS Z WYNIKAMI…) */
.wsf-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 59px; padding: 0.5rem 2rem; width: 100%;
    background: var(--color-primary); color: #fff !important; text-decoration: none !important;
    border-radius: 8px;
    font-size: var(--fs-small); line-height: 1.75; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.01em; text-align: center;
    transition: background var(--transition-fast);
}
.wsf-btn:hover { background: var(--color-primary); }
.wsf-btn-wrap { margin: 0 0 1.1rem; }

/* Grupa w jednej linii (oryginał: wp-block-group is-layout-flex) — pasek
   odnośników kotwicowych, logotypy obok siebie itp. */
.wsf-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.55rem; }

/* Pusty wiersz-zaślepka oryginału (odtworzony odstęp — patrz var/wsf/puste.mjs) */
.wsf-pusta { width: 100%; }
.wsf-inline > * { margin: 0; }

/* „Pokaż więcej" (oryginał: Kadence show-more) — treść przycięta do 250 px
   i przycisk konturowy na pełną szerokość. Przycięcie WŁĄCZA JS (klasa
   `is-zwiniete`), więc bez JS-a czytelnik widzi całość zamiast uciętej treści. */
.wsf-showmore-body { overflow: hidden; }
.wsf-showmore.is-zwiniete .wsf-showmore-body { max-height: 250px; }
.wsf-showmore-btn {
    display: block; width: 100%; min-height: 61px; margin-top: 14px;
    padding: 0.5rem 2rem; cursor: pointer;
    background: transparent; color: var(--color-primary);
    border: 1px solid var(--color-primary); border-radius: 8px;
    font: inherit; font-size: var(--fs-small); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.01em;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.wsf-showmore-btn:hover, .wsf-showmore-btn:focus-visible {
    background: var(--color-primary); color: #fff;
}

/* Akordeony (oryginał: Kadence accordion — u nas natywne <details>) */
.wsf-acc { margin: 1rem 0; }
.wsf-acc-item { border-bottom: 1px solid var(--color-primary); }
.wsf-acc-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    /* wiersz akordeonu ma w oryginale 50 px rozstawu: 12 + 24 (interlinia) + 13 + 1 px kreski */
    padding: 12px 0.2rem 13px 0; cursor: pointer; list-style: none;
    font-size: var(--fs-medium); line-height: 1.6; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0;
}
.wsf-acc-item summary::-webkit-details-marker { display: none; }
.wsf-acc-item summary::after {
    content: ''; flex: 0 0 auto; width: 11px; height: 11px;
    border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg) translateY(-3px); transition: transform var(--transition-fast);
}
.wsf-acc-item[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.wsf-acc-item summary:hover, .wsf-acc-item summary:focus-visible { opacity: 0.7; }
.wsf-acc-body { padding: 0.2rem 0 1.2rem; }
.wsf-acc-body > :first-child { margin-top: 0; }
.wsf-acc-body > :last-child { margin-bottom: 0; }

/* Obrazki i osadzenia w treści */
.wsf-article-body figure, .wsf-rich figure { margin: 0 0 1.1rem; }
.wsf-article-body figcaption, .wsf-rich figcaption { margin-top: 16px; font-size: 0.9em; color: var(--color-primary); text-align: center; }
.wsf-embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.1rem; }
/* Mapa Google: pasmo pełnej szerokości, 450 px (jak w oryginale) */
.wsf-mapa { margin-inline: calc(50% - 50vw); width: 100vw; height: 450px; }
.wsf-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.wsf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sekcja partnerów (strona główna + strona Partnerzy): etykieta + loga */
.wsf-partners { background: #fff; padding: 104px 0 80px; }
.wsf-partners-inner { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
/* w TREŚCI strony siatka log siedzi już w kontenerze — bez drugiego paddingu */
.wsf-article-body .wsf-partners-inner, .wsf-rich .wsf-partners-inner { max-width: none; padding: 0; }
.wsf-article-body .wsf-partners, .wsf-rich .wsf-partners { padding: 0; }
/* Etykieta grupy: <h3> na stronie głównej (pod <h2> sekcji), <h2> na stronie
   Partnerzy (pod <h1> pasma — WSF-S-27). Wygląd identyczny: reguła ustawia jawnie
   wszystko, czym h2 różni się od h3 (także `.wsf-article-body h2` treści strony). */
.wsf-partners h2,
.wsf-partners h3 {
    margin: 0 0 1em; font-size: calc(var(--fs-small) * 0.85); line-height: 1.2;   /* 1em = 11 px przy 1440, 10 px przy 390 (pomiar 2026-11-02) */
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--color-muted-text);   /* oryginał: szary #8d8d8d, nie czerń; #767676 = 4,54:1 */
}
/* Odstępy pod logami są w oryginale RÓŻNE dla każdej grupy (edytor Kadence:
   raz odstęp wiersza, raz dodatkowy margines bloku) — odwzorowane 1:1. */
.wsf-partners-row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; margin: 0 0 64px; }
/* odstępy po wierszach log — zmierzone ponownie 2026-11-02 (nowe logo BNP 2025): 64 / 73 / 88
   (1440: loga kończą się 4336 / 4526 / 4763, kolejne etykiety 4400 / 4599 / 4851; przy 390 tak samo);
   wiersz Estrady ma w źródle logo 16 px NIŻEJ pod etykietą niż pozostałe (4599 → 4640 vs 25 px) */
.wsf-partners-row:nth-of-type(2) { margin-bottom: 73px; }
.wsf-partners-row:nth-of-type(3) { margin-bottom: 88px; padding-top: 16px; }
.wsf-partners-row:last-of-type { margin-bottom: 0; }
/* rozmiar niesie width/height w treści bloku (jak w oryginale) — bez height:auto */
.wsf-partners-row img { display: block; max-width: 100%; object-fit: fill; }
/* logo tytularne jest w oryginale w kadrze 3:1 i PRZYCIĘTE (kb-image-ratio-land31) */
.wsf-partners-row:first-of-type img { object-fit: cover; }
.wsf-partners-row a { display: block; }
.wsf-partners-row a:hover img, .wsf-partners-row a:focus-visible img { opacity: 0.75; }

/* Stopka 3-kolumnowa: [logo OFF + adres] [logo WSC środek] [meta z prawej];
   skrajne kolumny mają równy flex — środkowe logo stoi w osi strony */
.footer-cols { align-items: center; }
.footer-cols .footer-col:first-child, .footer-cols .footer-col-meta { flex: 1 1 0; }
.footer-col img.wsf-footer-off { width: 120px; height: 120px; margin-bottom: 1.2rem; display: block; }
.footer-col img.wsf-footer-logo { width: 150px; height: 150px; display: block; margin: 0 auto; }
.footer-col--center { text-align: center; }

/* (2026-11-02) odstęp kolumn 64 px zostaje też na tablecie — źródło: 768 px → kolumny
   332 = (728 − 64) / 2, 1024 px → 368 = (800 − 64) / 2; dawne 2rem przy ≤991 było zgadywane */
@media (max-width: 767.98px) {
    /* na wąskich ekranach rozmiary z atrybutów ustępują skalowaniu do szerokości */
    .wsf-partners-row img { height: auto; }
    /* minmax(0, 1fr), NIE 1fr (= minmax(auto, 1fr)): min-content kolumny z sylwetkami
       jury rozpychał ją do 524 px i tekst był ucinany przy ≤ 544 px (WSF-D-03, 1.4.10) */
    .wsf-cols-2 { grid-template-columns: minmax(0, 1fr); }
    /* pusta kolumna-wypełniacz znika, gdy kolumny i tak stoją jedna pod drugą */
    .wsf-col:empty { display: none; }
    .wsf-sec--gray, .wsf-sec--white { padding-block: 56px; }
    .footer-col img.wsf-footer-off { margin-inline: auto; }
}

/* Warianty grafiki pasma tytułowego — oryginał ma 4 ilustracje przypisane do
   stron (mapa: var/wsf — okładki wp-block-cover); wybór klasą z artykułu
   (custom_css_classes, seed 2026-08-08_wsf_stopka_menu.sql):
   default = dziewczyna z basztą (listy, kontakt, polityka), v2 = ulica z palmami
   (o nas, wolontariat, bank, jury, archiwum), v3 = konie (informacje praktyczne),
   v4 = pomnik (konkurs — niska wersja grafiki artykułowej). */
.wsf-band--v2 { background-image: url('img/pasmo-tekstura-2.webp'); }
.wsf-band--v3 { background-image: url('img/pasmo-tekstura-3.webp'); }
.wsf-band--v4 { background-image: url('img/pasmo-tekstura-artykul.webp'); background-position: 55% 10%; }
/* 3. edycja (identyfikacja 2026, warsawserialcon.pl od jesieni 2026): trzy grafiki pasma
   stron statycznych, punkt kadrowania = object-position bloku cover oryginału (stały dla
   każdej grafiki). Przypisanie strona → klasa: docs/sql/2026-11-02_wsf_5_aktualizacja.sql;
   pliki z var/wsf/mkband.php (assets3). Listy i wpisy zostają przy syrence. */
.wsf-band--e1 { background-image: url('img/pasmo-3ed-1.webp'); background-position: 80% 12%; }
.wsf-band--e2 { background-image: url('img/pasmo-3ed-2.webp'); background-position: 74% 8%; }
.wsf-band--e3 { background-image: url('img/pasmo-3ed-3.webp'); background-position: 77% 12%; }

/* Strona główna: sekcja „O festiwalu" (białe pasmo) styka się z sekcją
   partnerów — bez szarych prześwitów między pasmami (jak w oryginale) */
body.wsf-home .site-main { padding-bottom: 0; }
body.wsf-home .content-bottom-blocks { margin-bottom: 0 !important; }
.wsf-rich .wsf-sec--white { margin-bottom: 0; }
/* 104 px paddingu wiersza + 16 px marginesu ostatniego akapitu — tak wychodzi
   w oryginale odstęp między blokiem „O festiwalu" a pasmem partnerów */
.wsf-rich .wsf-sec--white:last-child { padding-bottom: 120px; }

/* ==========================================================================
   STREFA KLIENTA (/moje-konto) — konto WIDZA: bilety, karnety, zamówienia,
   ulubione. Logowanie bez hasła (e-mail + numer zamówienia/karnetu), więc
   układ jest celowo rzeczowy: żadnych danych ponad to, co jest na bilecie.
   ========================================================================== */
.wsf-login { max-width: 480px; margin: 0 auto; padding-bottom: 104px; }
.wsf-login h2 { font-size: var(--fs-large); line-height: 1.2; margin: 0 0 16px; }
.wsf-login-wstep { margin: 0 0 28px; }
.wsf-login-blad {
    margin: 0 0 20px; padding: 14px 16px;
    background: var(--color-card-bg); border-left: 4px solid var(--color-primary);
    font-weight: 700;
}
.wsf-login-form .pole { position: relative; margin-bottom: 16px; }
/* pływająca etykieta (wzorzec S-6 z docs/analiza-dostepnosci-wcag.md):
   puste pole pokazuje sam placeholder, po wpisaniu ujawnia się etykieta.
   Suma paddingów pionowych MUSI zostać stała, inaczej pole skacze. */
.wsf-login-form label {
    position: absolute; top: 6px; left: 12px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-text);
    opacity: 0; transition: opacity var(--transition-fast); pointer-events: none;
}
.wsf-login-form .pole:has(input:not(:placeholder-shown)) label { opacity: 1; }
.wsf-login-form input {
    width: 100%; padding: 0.8rem 0.75rem; border: 1px solid var(--color-line);
    background: #fff; font: inherit; font-size: var(--fs-medium); color: var(--color-primary);
}
.wsf-login-form .pole:has(input:not(:placeholder-shown)) input { padding: 1.3rem 0.75rem 0.3rem; }
.wsf-login-form input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.wsf-login-form .wsf-btn { margin-top: 8px; }
.wsf-login-pomoc { margin: 24px 0 0; font-size: var(--fs-small); color: var(--color-muted-text); }

/* Konta z hasłem (2026-11-03, ustawienia 44/45): logowanie hasłem nad formularzem numeru
   zamówienia, linki pod formularzem, komunikat sukcesu, zgoda przy rejestracji, hasło
   w zakładce konta. Klasy współdzielone z _shared/strefa.css (motywy default/trc/dmt). */
.wsf-login-info {
    margin: 0 0 20px; padding: 14px 16px;
    background: var(--color-card-bg); border-left: 4px solid var(--color-accent, var(--color-primary));
}
.wsf-login-linki { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; font-size: var(--fs-small); }
.wsf-login-linki a { color: var(--color-primary); text-decoration: underline; }
.wsf-login-linki a:hover, .wsf-login-linki a:focus-visible { color: var(--color-muted-text); }
.wsf-login-alt { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--color-line); }
.wsf-login-alt h2 { font-size: var(--fs-medium); }
.wsf-login-form .pole-zgoda { display: flex; gap: 10px; align-items: flex-start; }
.wsf-login-form .pole-zgoda input { width: auto; margin: 0.25em 0 0; padding: 0; flex: 0 0 auto; }
.wsf-login-form .pole-zgoda label {
    position: static; opacity: 1; pointer-events: auto; text-transform: none; letter-spacing: 0;
    font-size: var(--fs-small); font-weight: 400; color: var(--color-primary);
}
.wsf-login-form .pole-zgoda a { color: var(--color-primary); }
.wsf-login-w-koncie { margin: 0; padding-bottom: 0; }

/* Wysyłanie formularza (2026-11-04, _shared/customer/_wysylanie): po kliknięciu kółko na
   przycisku i „Proszę czekać…" pod nim; kolejne kliknięcia są blokowane skryptem. */
.wsf-login-form button.is-busy { cursor: progress; }
.wsf-login-form button.is-busy::before {
    content: ""; display: inline-block; flex: 0 0 auto; width: 1.4em; height: 1.4em; margin-right: 0.7em;
    vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: strefa-kolo 0.75s linear infinite;
}
@keyframes strefa-kolo { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .wsf-login-form button.is-busy::before { animation: none; border-right-color: currentColor; border-style: dotted; }
}
.wsf-login-czekaj { margin: 12px 0 0; font-size: var(--fs-small, 0.9rem); }
.wsf-login-czekaj:empty { margin: 0; }

/* układ konta: menu zakładek z lewej, treść z prawej */
.wsf-konto { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-bottom: 104px; }
.wsf-konto-menu ul { list-style: none; margin: 0 0 24px; padding: 0; }
.wsf-konto-menu li { border-bottom: 1px solid var(--color-line); }
.wsf-konto-menu a {
    display: block; padding: 12px 0; text-decoration: none; color: var(--color-primary);
    font-size: var(--fs-medium); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
}
.wsf-konto-menu a:hover, .wsf-konto-menu a:focus-visible { color: var(--color-muted-text); }
.wsf-konto-menu a.is-aktywna { border-bottom: 2px solid var(--color-primary); }
.wsf-konto-wyloguj button {
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
    font-size: var(--fs-small); color: var(--color-muted-text); text-decoration: underline;
}
.wsf-konto-wyloguj button:hover { color: var(--color-primary); }
.wsf-konto-witaj { margin: 0 0 28px; font-size: var(--fs-small); color: var(--color-muted-text); }
.wsf-konto-tresc h2 { font-size: var(--fs-large); line-height: 1.2; margin: 36px 0 20px; }
.wsf-konto-tresc h2:first-of-type { margin-top: 0; }
.wsf-konto-pusto { color: var(--color-muted-text); }
.wsf-konto-wiecej { font-weight: 700; text-decoration: none; }
.wsf-konto-wiecej:hover { color: var(--color-muted-text); }

.wsf-konto-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 44px; }
.wsf-konto-kafel {
    display: flex; flex-direction: column; gap: 4px; padding: 20px;
    background: var(--color-card-bg); text-decoration: none; color: var(--color-primary);
}
.wsf-konto-kafel:hover { background: var(--color-card-hover); }
.wsf-konto-kafel .liczba { font-size: var(--fs-large); font-weight: 800; line-height: 1; }
.wsf-konto-kafel .opis { font-size: var(--fs-small); color: var(--color-muted-text-gray); }

.wsf-tabela-owijka { overflow-x: auto; }
.wsf-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-medium); }
.wsf-tabela th, .wsf-tabela td { padding: 12px 14px 12px 0; text-align: left; border-bottom: 1px solid var(--color-line); }
.wsf-tabela th { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; }
.wsf-znacznik { font-size: var(--fs-small); color: var(--color-muted-text); }
.wsf-znacznik.is-ok { color: var(--color-primary); font-weight: 700; }

.wsf-konto-lista { list-style: none; margin: 0; padding: 0; }
.wsf-konto-lista li {
    display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
    padding: 14px 0; border-bottom: 1px solid var(--color-line);
}
.wsf-konto-lista span { color: var(--color-muted-text); font-size: var(--fs-small); }

.wsf-karnety { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.wsf-karnet { padding: 24px; background: var(--color-card-bg); }
/* Karnet zablokowany — przygaszony, ale CZYTELNY (WSF-S-07, WCAG 1.4.3). Dawniej
   `opacity: .6` na całej karcie: numer karnetu i etykiety spadały do ~2,4:1. Teraz
   te same efektywne barwy co przy przygaszeniu, tylko bez przezroczystości tekstu:
   tło #f8f8f8 (= #f4f4f4 przy 60 % na bieli), tytuł i wartości #676767 (= czerń przy
   60 %; 5,33:1), numer i etykiety #6e6e6e (4,80:1 — najjaśniejsza szarość ≥ 4,5:1
   na tym tle). Stan niesie też etykieta „Zablokowany". */
.wsf-karnet.is-zablokowany { background: #f8f8f8; color: #676767; }
.wsf-karnet.is-zablokowany h3,
.wsf-karnet.is-zablokowany dd { color: #676767; }
.wsf-karnet.is-zablokowany .numer,
.wsf-karnet.is-zablokowany dt,
.wsf-karnet.is-zablokowany .wsf-znacznik { color: #6e6e6e; }
.wsf-karnet h3 { margin: 0 0 4px; font-size: var(--fs-medium); line-height: 1.2; }
.wsf-karnet .numer { margin: 0 0 16px; font-size: var(--fs-small); color: var(--color-muted-text-gray); }
.wsf-karnet dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: var(--fs-small); }
.wsf-karnet dt { color: var(--color-muted-text-gray); }
/* znacznik „Zablokowany" leży na szarej karcie karnetu — ciemniejsza szarość */
.wsf-karnet .wsf-znacznik { color: var(--color-muted-text-gray); }
.wsf-karnet dd { margin: 0; font-weight: 700; }

@media (max-width: 767.98px) {
    .wsf-konto { grid-template-columns: 1fr; gap: 32px; }
    .wsf-konto-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* tabela na telefonie: wiersze jako karty, nagłówek z atrybutu data-etykieta.
       Tabela i tbody też jako bloki — inaczej karty-wiersze kurczyły się do szerokości
       treści (~200 px przy oknie 390; runda F5 2026-09-24) */
    .wsf-tabela, .wsf-tabela tbody { display: block; width: 100%; }
    .wsf-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .wsf-tabela tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
    .wsf-tabela td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 4px 0; }
    .wsf-tabela td::before { content: attr(data-etykieta); font-weight: 700; }
}

/* ==========================================================================
   Wyróżniona osoba (pole „Wyróżniony" w panelu → Osoby, usterka #4, 2026-09-24)
   Siatki osób: strona zespołu, zakładki Artyści, blok team_list. Wyróżnieni
   idą pierwsi (CastExtension/ActorRepository::featuredFirst), tu tylko znacznik:
   gwiazdka w rogu zdjęcia w kolorze akcentu (monochrom motywu).
   ========================================================================== */
.theme-wsf .is-wyrozniony .artist-media { position: relative; }
.theme-wsf .artist-media-round { position: relative; display: inline-block; }
.theme-wsf .artist-featured-badge {
    position: absolute; top: 0; left: 0; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: 0;
    background: var(--color-accent, #010101); color: #fff;
    font-size: 1rem; line-height: 1; pointer-events: none;
}
.theme-wsf .artist-media-round .artist-featured-badge { top: 2px; left: 2px; border-radius: 50%; }

/* ==========================================================================
   Ograniczenie ruchu (prefers-reduced-motion: reduce) — WSF-S-10 / D-21.
   Dotyczy WYŁĄCZNIE osób z włączoną preferencją systemową. Przejścia skracamy do
   0.01 ms (NIE do zera: `transitionend` nadal wystrzeli — wzorzec S-4 z notatki
   dostepnosc.md), zdejmujemy opóźnienia (szuflada chowa się od razu) i powiększenie
   plakatu karty o 5 %. Hero wyłącza autoodtwarzanie samo (hero_slider.html.twig).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .theme-wsf *,
    .theme-wsf *::before,
    .theme-wsf *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .theme-wsf .article-grid-item:hover .article-grid-thumb img,
    .theme-wsf .article-grid-item:focus-visible .article-grid-thumb img { transform: none; }
    .theme-wsf .sidebar-nav a:hover,
    .theme-wsf .sidebar-nav .active > a { transform: none; }
}

/* ==========================================================================
   AUDYT 1:1 z warsawserialcon.pl — 2026-11-02
   Pomiary: var/audyt-wsf-2026-11-02/m/*.json (measure.mjs) i probe/*.vmap.json (snap.mjs)
   przy 390/575/640/768/1024/1100/1200/1280/1366/1440 px. Reguły z prefiksem .theme-wsf
   biją wcześniejsze (także te w media queries). Opis: docs/notatki/instancja-wsf.md.
   ========================================================================== */

/* ── Nagłówek ── */
/* Link logo bez sztywnej szerokości z motywu default (135 px dla obrazka 120 px → hasło
   stało 3 px za blisko); odstęp logo → hasło i odstępy EN/konto/hamburger = preset WP
   spacing-30 = min(2.5rem, 3vw) (pomiar: 390 → 12, 640 → 19, 1200 → 36, 1440 → 40). */
.theme-wsf .header-logo { width: auto; }
.theme-wsf .header-brand { gap: min(2.5rem, 3vw); }
.theme-wsf .header-tagline { line-height: 1.15; }
.theme-wsf .header-utils { gap: min(2.5rem, 3vw); }
/* hamburger = SVG 24×24 bez paddingu (źródło: wp-block-navigation__responsive-container-open) */
.theme-wsf .nav-toggle { padding: 0; width: 24px; height: 24px; line-height: 0; color: var(--color-primary); }
.theme-wsf .nav-toggle svg { display: block; }
@media (max-width: 1220px) {
    /* pasek zwinięty (≤1220 px jak w źródle): [logo + hasło] … [EN · konto · ☰] — EN PRZED
       ikoną konta (pomiar 390: EN x290, konto x322, ☰ x350; 1200: konto x1108, ☰ x1160);
       ikona konta 16.5 px (źródło: 22 px × 0.75) */
    .theme-wsf .header-utils { flex-direction: row-reverse; }
    .theme-wsf .header-account svg { width: 16.5px; height: 16.5px; }
    .theme-wsf .site-header .header-inner { gap: min(2.5rem, 3vw); }
}
@media (max-width: 768px) {
    /* hasło przy logo: 11.9 px / 1.15 (preset small × 0.8; pomiar 390/575/640/768; 1024 → 14.95) */
    .theme-wsf .header-tagline { font-size: 11.9px; }
}

/* ── Hero ── */
/* ≤768 px układ „tablet/telefon" Smart Slidera: treść WYŚRODKOWANA w pionie (bez 80 px od
   dołu), pole treści z paddingiem 64 px, tytuł 22.4 px / 1 (margines 4 + 8 = 12 px), zajawka
   14.4 px / 1.5 / 800, przycisk 150×33 (11.9 px, padding 5.6/9.6, margines 20 + 8 + 8 + 1 = 37);
   od 1024 px wartości desktopowe (pomiar 390/575/640/768 vs 1024/1100/1200). */
@media (max-width: 768px) {
    .theme-wsf .wsf-hero-content { align-items: center; padding-bottom: 0; }
    .theme-wsf .wsf-hero-inner { padding: 0 64px; text-align: center; }
    .theme-wsf .wsf-hero-title { margin: 0 auto; }
    .theme-wsf .wsf-hero-title a, .theme-wsf .wsf-hero-title span { font-size: 22.4px; }
    .theme-wsf .wsf-hero-sub { font-size: 14.4px; line-height: 1.5; margin: 12px auto 0; }
    .theme-wsf .wsf-hero-btn {
        /* 150 px to w źródle content-box: + 2×9.6 paddingu + 2×2 ramki = 173.2 px pudła */
        min-width: 173.2px; height: 33px; padding: 0 9.6px; margin-top: 37px;
        font-size: 11.9px; line-height: 1.5; letter-spacing: 0.01em;
    }
}

/* ── Karty wpisów ── */
/* 1 kolumna < 600 px, 3 kolumny od 600 px (WordPress `columns-3` @media (min-width: 600px);
   pomiar: 575 → 1 kolumna 535 px, 640 → 3 kolumny po 179 px); odstęp siatki 32 px do 1220 px,
   24 px wyżej (640/768/1024/1100/1200 → 32, 1280/1366/1440 → 24). */
@media (max-width: 1220px) { .theme-wsf .article-grid { gap: 32px; } }
@media (min-width: 600px) and (max-width: 1220px) { .theme-wsf .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .theme-wsf .article-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
/* Dolny przycisk „WIĘCEJ …" (Kadence kvs-lg-false): tylko ≤1024 px, pełna szerokość treści,
   padding 16, interlinia 1.75, ramka 2 px w kolorze tła (wysokość 52/57/58 przy 575/768/1024);
   font: small × 0.75 do 767 px (8.925 px), small od 768 px (11.9 / 12.42). Odstęp od siatki
   kart 32 px (odstęp kolumn Kadence), pod nim 104 px pasma (pomiar 390: siatka do 2775,
   przycisk 2807–2859, nagłówek kolejnej sekcji 2987 = 104 + 24). */
.theme-wsf .wsf-section-more--dol { display: none; }
@media (max-width: 1024px) {
    .theme-wsf .wsf-section .article-grid { padding-bottom: 0; }
    .theme-wsf .wsf-section-more--dol {
        display: flex; width: 100%; flex: none; margin: 32px 0 104px; min-height: 0;
        padding: 16px; border: 2px solid var(--color-primary); line-height: 1.75;
    }
}
@media (max-width: 767.98px) {
    .theme-wsf .wsf-section-more--dol { font-size: calc(var(--fs-small) * 0.75); }
    /* telefon (pomiar rzędów Kadence przy 390, 2026-11-02): KAŻDY rząd nagłówka 64/24,
       każdy rząd siatki 24/64 — hero 402 → h2 466; przycisk 2859 → 64 + 64 → h2 2987;
       przy 768 rzędy mają już desktopowe 104/24 i 24/104 */
    .theme-wsf .content-bottom-blocks > .wsf-section .wsf-section-head { padding-top: 64px; }
    /* siatka kart kończy rząd 64 px paddingu (desktop 104) */
    .theme-wsf .wsf-section-more--dol { margin-bottom: 64px; }
}

/* ── Blok „O festiwalu" ── */
/* kolumna z logo wyśrodkowana w pionie (źródło: `align-self: center`; pomiar 1440: logo y3270
   w rzędzie 3046–3956) i ≤767 px PRZED tekstem (źródło: order kolumn w @media ≤767px).
   Klasę nadaje generator (blockAbout). */
.theme-wsf .wsf-cols-2--logo { align-items: center; }
@media (max-width: 767.98px) { .theme-wsf .wsf-cols-2--logo > .wsf-col:last-child { order: -1; } }

/* ── Newsletter ── */
/* Szerokość formularza = środkowa kolumna rzędu źródła minus 2 × 20 px paddingu osadzenia
   MailerLite: >1024 px 40 % treści (1100/1200 → 280, 1280/1440 → 360), 768–1024 px ⅓ treści
   (768 → 203, 1024 → 227), ≤767 px 360 px (390: 310 = 350 − 40). Przycisk: padding 10 px
   (108 px szerokości przy 1440; było 113). Układ pionowy pole / zgoda / przycisk dopiero
   ≤400 px (MailerLite; 575 i 640 mają jeszcze pole i przycisk w jednej linii). */
.theme-wsf .wsf-nl-box { width: calc(min(var(--wsf-content), 100vw - 40px) * 0.4 - 40px); max-width: 100%; }
/* MailerLite: pole 70 % / przycisk 30 % szerokości formularza (1440: 252 + 108; 1024: 159 + 68;
   768: 142 + 61 — napis łamie się na „ZAPISZ / SIĘ", przycisk 62 px) */
.theme-wsf .wsf-nl-form .pole { flex: 0 0 70%; }
.theme-wsf .wsf-nl-form button { flex: 0 0 30%; padding: 0 10px; white-space: normal; min-width: 0; height: auto; min-height: 42px; }
.theme-wsf .wsf-nl-note { margin-top: 0; }           /* zgoda tuż pod polem (pomiar 1440: pole 5275–5317, zgoda 5317) */
/* dół pasma: zgoda → stopka = 118 px przy 768/1024/1440 (80 paddingu rzędu + 38 px osadzenia
   MailerLite), 133 przy 575/640 (jedna kolumna, odstęp 32 po pustej kolumnie), 146 przy ≤400 */
.theme-wsf .wsf-newsletter { padding-bottom: 118px; }
@media (max-width: 1024px) { .theme-wsf .wsf-nl-box { width: calc(min(var(--wsf-content), 100vw - 40px) / 3 - 40px); } }
@media (max-width: 767.98px) {
    .theme-wsf .wsf-nl-box { width: 360px; max-width: calc(100% - 40px); margin-top: 76px; }
    /* 76 = 44 jak na desktopie + 32 px odstępu po PUSTEJ pierwszej kolumnie rzędu (pomiar 390:
       h2 kończy się 8311, pole 8388 = 24 + 32 + 20 + 1) */
    /* pasmo w jednej kolumnie ma pod formularzem 133 px (pomiar 575/640: zgoda → stopka), od 768 px 103 */
    .theme-wsf .wsf-newsletter { padding-bottom: 133px; }
}
@media (min-width: 401px) and (max-width: 575.98px) {
    /* 401–575 px: pole i przycisk w jednej linii jak w źródle (blok ≤575 wyżej stawia je w kolumnie) */
    .theme-wsf .wsf-nl-box { display: block; }
    .theme-wsf .wsf-nl-form { display: flex; }
    .theme-wsf .wsf-nl-form .pole { flex: 1; }
    .theme-wsf .wsf-nl-form input { border: 1px solid #ccc; }
    .theme-wsf .wsf-nl-note { margin: 0; line-height: 1.833; }
}
@media (max-width: 400px) {
    .theme-wsf .wsf-nl-box { max-width: 100%; }
    .theme-wsf .wsf-nl-form .pole, .theme-wsf .wsf-nl-form button { flex: none; }
    .theme-wsf .wsf-nl-note { margin: 20px 0 15px; }
    .theme-wsf .wsf-newsletter { padding-bottom: 146px; }
}

@media (max-width: 768px) { .theme-wsf .wsf-nl-note { line-height: 1.5; } }

/* ── Blok „O festiwalu" i pasmo partnerów — paddingi rzędów źródła ── */
/* desktop 104/104 i 104/80; telefon (≤767 px, CSS źródła `@media (max-width:767px)
   { padding-block: 4rem }` dla rzędu O festiwalu; pomiar 390: logo-grid 64/64) */
/* dół = padding rzędu + ~15 px marginesu ostatniego akapitu źródła (u nas ostatni akapit
   ma margines 0): 104 + 15 = 119 na desktopie, 64 + 15 = 79 na telefonie (pomiar 390:
   akapit kończy się 7171, pasmo log zaczyna 7250) */
.theme-wsf .wsf-rich > .wsf-sec--white { padding-block: 104px 119px; }
/* dół pasma log: 80 + 8 px (logo w linii — descender), telefon 64 + 7 (pomiar 1440: ostatnie logo
   kończy się 5024, rząd newslettera zaczyna 5112; 390: 8130 → 8201) */
.theme-wsf .wsf-partners { padding-bottom: 88px; }
@media (max-width: 767.98px) {
    .theme-wsf .wsf-rich > .wsf-sec--white { padding-block: 64px 79px; }
    .theme-wsf .wsf-partners { padding: 64px 0 71px; }
    /* przyciski treści i sekcji na telefonie: preset small × 0.75 (źródło: wszystkie
       .wp-block-button__link przy ≤767 px mają 8.925 px, padding 16 → 52 px wysokości) */
    .theme-wsf .wsf-btn { font-size: calc(var(--fs-small) * 0.75); min-height: 0; padding: 16px; border: 2px solid var(--color-primary); }
    /* stopka telefon: kolumny co 65 px, logo BNP z 6 px światła pod spodem (źródło: obrazek
       w linii — descender; pomiar 390: adres kończy 9014 → logo 9079 → meta 9270) */
    .theme-wsf .footer-cols { gap: 65px; }
    .theme-wsf .footer-col img.wsf-footer-logo { margin-bottom: 6px; }
    /* pusta kolumna-wypełniacz OSTATNIEGO rzędu strony zostaje w siatce (wysokość 0), bo źródło
       trzyma dla niej odstęp wiersza 32 px także po ułożeniu kolumn jedna pod drugą (pomiar O nas
       390: ostatni akapit 1468 → koniec treści rzędu 1514 = 15 + 32). Tylko ostatni rząd: rzędy
       nagłówkowe (Bilety, Kontakt) mają w źródle odstęp wiersza 0 i tam pusta kolumna nadal znika. */
    .theme-wsf .wsf-rich > .wsf-sec:last-child .wsf-col:empty { display: block; }
}
/* koniec treści podstrony → newsletter: 104 px paddingu rzędu + 15 px marginesu ostatniego
   akapitu (pomiar O nas 1440: akapit 1468 → h2 newslettera 1650 − 80 = 198 = 15 + 104 + 80 − 1) */
.theme-wsf .wsf-article-body { padding-bottom: 79px; }

/* ── Nagłówek od 1221 px: zawijanie nawigacji pod logo jak w źródle ── */
/* Grupa WP: `justify-content: space-between; gap: 19.2px; flex-wrap: wrap` — przy 1280 px
   nawigacja z ikonami (884 px) nie mieści się obok logo z hasłem (347) i schodzi do drugiego
   wiersza od lewej (x 16, y 155; nagłówek 197 px zamiast 152), przy 1366 mieści się (nav x 447).
   Odstępy w nawigacji i między ikonami = min(2.5rem, 3vw) (1366 → 40, 1280 → 38.4);
   pozycja nawigacji ma 26 px wysokości (interlinia 1.75), nie 33. */
.theme-wsf .header-inner { flex-wrap: wrap; gap: 19.2px; justify-content: space-between; padding-block: 16px; }   /* 16 + 120 + 19.2 + 26 + 16 = 197 przy zawinięciu; 152 bez (pomiar 1280/1366) */
.theme-wsf .header-nav-wrap { margin-left: 0; gap: min(2.5rem, 3vw); }
.theme-wsf .main-nav ul { gap: min(2.5rem, 3vw); }
.theme-wsf .header-socials { gap: min(2.5rem, 3vw); }
/* TYLKO pozycje pierwszego poziomu (> ul >): pozycje podmenu też mają klasę .nav-item, a ich odstępy
   10.4px/20px i interlinia 1.25 są z pomiaru źródła (var/wsf/hover-menu.mjs) */
.theme-wsf .main-nav > ul > .nav-item > a,
.theme-wsf .main-nav > ul > .nav-item > .nav-link-separator { padding-block: 0; line-height: 1.75; margin-bottom: -2px; }
/* Podmenu 1:1 (pomiar hover-menu.mjs, 2026-11-02): pudło 200 px prawą krawędzią przy prawej krawędzi
   pozycji (źródło: right: 0, pudło wystaje w lewo), czarna górna krawędź 2 px, 12 px luzu nad pierwszą
   i pod ostatnią pozycją (źródło: padding li), pozycje 39 px (dwuwierszowe 58). Hover pozycji zostaje
   jako tło #e9e9e9 (źródło: szary tekst #8d8d8d na #f4f4f4 = 3,1:1, poniżej WCAG 1.4.3). */
.theme-wsf .main-nav .nav-dropdown { left: auto; right: 0; border-top: 2px solid var(--color-primary); padding: 12px 0; }
.theme-wsf .main-nav .nav-dropdown .nav-dropdown { left: 100%; right: auto; }

/* ── Stopka ── */
/* padding min(5vw, 4rem) (pomiar 768 → 38.4, 1024 → 51.2, 1200 → 60, 1280+ → 64), telefon 4rem;
   kolumny w naturalnej szerokości (logo BNP przy 1440 na x = 664 jak w źródle, było 645);
   logo OFF → tekst: 157 px od góry akapitu (było 142); logo BNP 120 px ≤767 px (640 → 120, 768 → 150). */
.theme-wsf .site-footer { padding: min(5vw, 4rem) 0; }
.theme-wsf .footer-cols > .footer-col { flex: 0 1 auto; }
.theme-wsf .footer-col img.wsf-footer-off { margin-bottom: 34.2px; }
@media (max-width: 767.98px) {
    .theme-wsf .site-footer { padding: 4rem 0; }
    .theme-wsf .footer-col img.wsf-footer-logo { width: 120px; height: 120px; }
}

/* ── Pasmo tytułowe podstron na telefonie i tablecie (≤767 px) ── */
/* źródło: `.hero-photo-half { min-height: 250px }`, h1 wyśrodkowany z marginesem min(0.8rem, 2vw)
   (390 → 7.8, 640 → 12.8), pierwszy rząd treści 64 px od pasma, ostatni rząd 64 px u dołu
   (pomiar O nas 390/640: pasmo 102–352, h1 y 212/209, h2 y 416). Dotyczy stron statycznych;
   wpis listy (`.wsf-band--article`) zostaje przy dotychczasowych wartościach. */
@media (max-width: 767.98px) {
    .theme-wsf .wsf-band:not(.wsf-band--article) { min-height: 250px; margin-bottom: 64px; }
    .theme-wsf .wsf-band:not(.wsf-band--article) h1 { margin-bottom: min(0.8rem, 2vw); }
    .theme-wsf .wsf-rich > .wsf-sec:last-child { margin-bottom: 0; }
}

/* ── Strona „Zakup bilet / karnet" (Bilety) ── */
/* CSS źródła: `.zakup-wrap__tickets > … > .wp-block-kadence-column { background: #fff;
   border-radius: 1rem; padding: 2rem }` (≤767 px: 1rem), `.pass-item { max-width: 404px }`,
   `.heading-ticket { font-size: medium × 1.35 }`, `.font-color-1 { color: #8d8d8d }` (u nas
   --color-muted-text, WCAG 1.4.3), `.bnp-card-icon img { filter: drop-shadow(0 0 .5rem #e1e1e1) }`,
   przyciski w karcie small × 0.75. Pomiar 1440: karta x220 w468 (treść x252 w404), nagłówki
   20/800/lh24 (odstęp 4 px), ikonka karty 53×33 + tekst od x321, przyciski 404×53 co 16 px. */
.theme-wsf .wsf-card--bilet { max-width: 468px; padding: 2rem; }
.theme-wsf .wsf-card--bilet > :first-child { margin-top: 0; }
.theme-wsf .wsf-card--bilet > :last-child { margin-bottom: 0; }
.theme-wsf .wsf-rich .wsf-h-bilet { font-size: calc(var(--fs-medium) * 1.35); line-height: 1.2; margin: 0 0 4px; }
.theme-wsf .wsf-rich .wsf-h-bilet + .wsf-h-bilet { margin-bottom: 0; }
.theme-wsf .wsf-rich .wsf-szary { color: var(--color-muted-text); }
.theme-wsf .wsf-rich .wsf-maly { font-size: var(--fs-small); line-height: 1.5; }
.theme-wsf .wsf-bilet-cena { display: grid; grid-template-columns: 53px minmax(0, 1fr); column-gap: 16px; align-items: center; margin: 0; padding: 16px 0 24px; }
.theme-wsf .wsf-bilet-cena figure { margin: 0; }
.theme-wsf .wsf-bilet-cena img { width: 53px; height: auto; display: block; filter: drop-shadow(0 0 .5rem rgb(225 225 225)); }
.theme-wsf .wsf-bilet-cena p { margin: 0 0 1em; }
.theme-wsf .wsf-card--bilet p.wsf-maly { margin: 0; }
.theme-wsf .wsf-card--bilet .wsf-maly + .wsf-btn-wrap { margin-top: 40px; }
.theme-wsf .wsf-card--bilet .wsf-btn { font-size: calc(var(--fs-small) * 0.75); min-height: 0; padding: 16px; line-height: 1.75; border: 2px solid var(--color-primary); }
.theme-wsf .wsf-card--bilet .wsf-btn-wrap { margin: 0 0 16px; }
.theme-wsf .wsf-card--bilet .wsf-btn-wrap + .wsf-maly { margin-top: 24px; }
/* rzędy strony biletów (pomiar 1440): tekst 104/104 (odstęp wierszy siatki 16), nagłówek szary
   104/8 (drugi, po karcie: 64/8), karta 8/64 (ostatnia przed tekstem: 8/104); rzędy stykają się
   bez marginesów; po ostatnim rzędzie od razu newsletter */
.theme-wsf .wsf-sec--bilety { margin-block: 0; }   /* tylko pion — szare rzędy zachowują ujemne marginesy na pełną szerokość */
.theme-wsf .wsf-rich > .wsf-sec--bilety-tekst:first-child { padding-top: 0; }   /* 104 px od pasma daje już margines pasma */
.theme-wsf .wsf-sec--bilety-tekst { padding-block: 104px; }
.theme-wsf .wsf-sec--bilety-tekst .wsf-cols-2 { row-gap: 16px; }
.theme-wsf .wsf-sec--gray.wsf-sec--bilety-naglowek { padding-block: 104px 8px; margin-top: 0; }
.theme-wsf .wsf-sec--bilety-karta + .wsf-sec--gray.wsf-sec--bilety-naglowek { padding-top: 64px; }
.theme-wsf .wsf-sec--gray.wsf-sec--bilety-karta { padding-block: 8px 64px; margin-top: 0; }
.theme-wsf .wsf-sec--gray.wsf-sec--bilety-karta:has(+ .wsf-sec--bilety-tekst) { padding-bottom: 104px; }
.theme-wsf .wsf-article-body:has(> .wsf-rich > .wsf-sec--bilety) { padding-bottom: 0; }
/* w rzędach strony biletów ostatni akapit kolumny ZACHOWUJE margines 1em, a nagłówek-solo
   0.84em (źródło: akapit kończy się 872, rząd 991 = 15 + 104; h2 „Karnet" → karta = 27 + 8 + 8);
   ogólna reguła `.wsf-col > :last-child { margin-bottom: 0 }` by je zerowała */
.theme-wsf .wsf-sec--bilety .wsf-col > p:last-child { margin-bottom: 1em; }
.theme-wsf .wsf-sec--bilety-naglowek .wsf-col > h2:last-child { margin-bottom: 0.84em; }
.theme-wsf .wsf-card--bilet .wsf-bilet-cena p.wsf-maly { margin: 0 0 1em; }
@media (max-width: 767.98px) {
    /* rzędy strony biletów na telefonie (pomiar 390): tekst 64/64, nagłówek „Karnet" 48/16,
       karta 16/32, nagłówek „Bilety" 24/16, ostatnia karta 16/80 */
    .theme-wsf .wsf-sec--bilety-tekst { padding-block: 64px; }
    .theme-wsf .wsf-rich > .wsf-sec--bilety-tekst:first-child { padding-top: 0; }
    .theme-wsf .wsf-sec--gray.wsf-sec--bilety-naglowek { padding-block: 48px 16px; }
    .theme-wsf .wsf-sec--bilety-karta + .wsf-sec--gray.wsf-sec--bilety-naglowek { padding-top: 24px; }
    .theme-wsf .wsf-sec--gray.wsf-sec--bilety-karta { padding-block: 16px 32px; }
    .theme-wsf .wsf-sec--gray.wsf-sec--bilety-karta:has(+ .wsf-sec--bilety-tekst) { padding-bottom: 80px; }
    /* wiersz ceny na telefonie: kolumna ikonki 87 px (Kadence „right-golden"), ikonka na całą
       kolumnę (pomiar 390: ikonka 36–123, tekst od x 139 szer. 215) */
    .theme-wsf .wsf-bilet-cena { grid-template-columns: 87px minmax(0, 1fr); }
    .theme-wsf .wsf-bilet-cena img { width: 100%; }
    /* karta karnetu na telefonie: przyciski 0.7rem pod tekstem, 7 px nad „Aby kupić"
       (pomiar 390: p kończy 1431 → przycisk 1442; przycisk 1562 → p 1569) */
    .theme-wsf .wsf-card--bilet .wsf-maly + .wsf-btn-wrap { margin-top: 0.7rem; }
    .theme-wsf .wsf-card--bilet .wsf-btn-wrap + .wsf-maly { margin-top: 7px; }
}
.theme-wsf .wsf-btn--pelny { width: 100%; }
@media (max-width: 767.98px) { .theme-wsf .wsf-card--bilet { padding: 1rem; max-width: 436px; } }