/* ======================================================================
   PASEK GÓRNY (Prawa1) — reguły globalne i pasek z adresem
   ----------------------------------------------------------------------
   ŹRÓDŁO: ten plik. CSS wyjechał tu z `Prawa1.php` 19.08.2026, bo
   wypisywany z <body> docierał do przeglądarki PO narysowaniu strony —
   pasek pojawiał się w złym miejscu i przeskakiwał (ok. 70 px w bok,
   30 px w dół). Teraz strony linkują go w <head> przez `style_glowa.php`.
   `Prawa1.php` linkuje go DODATKOWO u siebie — dla stron, które wstawki
   w <head> jeszcze nie mają. Ten sam adres, więc przeglądarka pobiera raz.
   🔴 ZMIENIASZ TEN PLIK → podbij `?v=` w `style_glowa.php` ORAZ w `Prawa1.php`,
      inaczej Apache poda starą kopię przez 7 DNI (max-age=604800).
   WYCOFANIE: wklej treść z powrotem jako <style> w `Prawa1.php`.
   ====================================================================== */

/* ---- część 1 z Prawa1.php (przed siatką linków) ---- */


    /* === GLOBAL-BOXSIZING START (przepis blue.php — globalnie na KAŻDEJ stronie z menu) ===
       Padding/border liczone WEWNATRZ szerokosci → tabele z cellpadding i panele
       przestaja wystawac o kilka px (likwiduje "przesuw calej strony przy kliknieciu"
       na mobile). WYCOFANIE: skasuj caly ten blok (od START do END).
       Kopia zapasowa: _kopia_Prawa1_PRZED_BOXSIZING.php */
    *, *::before, *::after { box-sizing: border-box; }
    /* === GLOBAL-BOXSIZING END === */

    /* WYMUSZENIE STAŁEGO SCROLLBAR - eliminuje jump */
    html {
        overflow-y: scroll !important;
        scrollbar-gutter: stable;
    }

    /* JEDNOLITY box-sizing dla MENU na KAŻDEJ stronie (Prawa1 jest wszędzie).
       Bez tego: strony bez globalnego box-sizing (content-box, np. zespoly/bezdomni)
       liczą .nav-wrapper jako width:100% + padding:0 5px = siatka linków WYSTAJE ~10px
       poza pasek; strony z border-box (np. audiowybor) - siatka mieści się w pasku.
       Różnica = poziomy "jump" siatki kolumn przy nawigacji między stronami.
       border-box tutaj = padding wliczony w 100% → siatka zawsze mieści się w pasku,
       identycznie na wszystkich stronach. */
    .main-nav-wrapper, .main-nav-wrapper *,
    .main-nav-wrapper *::before, .main-nav-wrapper *::after {
        box-sizing: border-box;
    }

    /* GŁÓWNY WRAPPER NAWIGACJI - tylko otacza, nie zmienia layoutu */
    .main-nav-wrapper {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        /* 🔴 BARIERA DZIEDZICZENIA INTERLINII (2026-08-04) - nie usuwać.
           .nav-link ma własny line-height TYLKO w @media do 600px, więc na
           DESKTOPIE pasek brał interlinię z body strony. Zmierzone: pasek
           106.2px na paradoksy.php (`body{line-height:1.6}` bez media query)
           kontra 94.0px wszędzie indziej = 12px skoku przy wejściu na tę
           stronę. To ta sama pułapka co w menu_lewe.php i ta sama Zasada #1b
           z jump_potwierdzone_przypadki.md - tyle że tu objaw jest większy,
           bo pasek ma trzy wiersze linków.
           Pasek ma mieć IDENTYCZNĄ wysokość na każdej stronie serwisu,
           niezależnie od tego, co ta strona trzyma w body - dlatego bariera
           stoi tutaj, a nie w kilkunastu stronach osobno.
           `normal` = stan na stronach wzorcowych (odautora, margaret).
           ⚠️ TYLKO DESKTOP - patrz @media pod tą regułą. Na telefonie paska
           NIE RUSZAMY: tam foot.php narzuca `body{line-height:1.25}` ≤860px
           WSZYSTKIM stronom naraz, więc pasek jest jednolity i jumpa nie ma.
           Bariera obniżyłaby go tylko o 3.5px bez żadnego zysku, a wysokość
           paska mobilnego była osobno dostrajana (2026-07-29).
           WYCOFANIE: skasuj blok @media poniżej. */
        /* Caly pasek 5px NIZEJ (2026-07-29, prosba usera) - schodzi z nim URL
           i panel glosnosci, bo siedza w srodku.
           ⚠️ PADDING, NIE MARGIN (Zasada #8): margin-top na tym elemencie zapada
           sie z marginesem rodzica i zamiast przesunac pasek, spycha cala strone
           - klasyczny jump. menu_lewe.php nie dotyka samego .main-nav-wrapper
           (tylko jego dzieci), wiec ta linia dziala takze przy sidebarze. */
        padding-top: 5px;
    }

    /* Bariera dziedziczenia interlinii - TYLKO desktop (uzasadnienie wyżej). */
    @media (min-width: 861px) {
        .main-nav-wrapper { line-height: normal; }
    }

    .nav-container {
        padding: 5px 5px 5px 5px;
    }

    .top-url {
        display: block;
        margin-bottom: 10px;
        font-family: Arial, sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: yellow !important;
        text-decoration: none;
    }
    /* 🔴 NA DESKTOPIE ADRES ZOSTAJE WYSRODKOWANY - nie przesuwac go.
       Prosba o przesuniecie w prawo dotyczyla TELEFONU (tam adres wchodzil pod
       przycisk "☰ Menu"), nie komputera. Bylo tu przez chwile
       `@media (min-width:861px) { .top-url { position:relative; left:40px } }`
       - zdjete 2026-07-29. Srodek bierze sie z `text-align:center` na
       .main-nav-wrapper; .top-url nie ustawia wlasnego wyrownania. */

    /* TELEFON: adres DOSUNIETY DO PRAWEJ zamiast sztywnego przesuniecia.
       ⚠️ `left: 40px` bylo tu zlym pomyslem w obie strony: na waskim ekranie
       (360px) napis ma ~355px i wychodzil 15px POZA krawedz robiac poziomy
       scroll, a na szerokim (412px) 40px to za malo, zeby uciec spod przycisku
       "☰ Menu" (zajmuje lewe ~114px). Wyrownanie do prawej rozwiazuje oba
       przypadki naraz: adres bierze tyle miejsca, ile ekran akurat daje, i nigdy
       nie wystaje. Zapas 15px, zeby nie dotykal krawedzi. (2026-07-29) */
    @media (max-width: 860px) {
        .top-url {
            text-align: right;
            padding-right: 15px;
        }
    }

    /* Wrapper menu */
    .nav-wrapper {
        margin: 0 auto;
        width: 100%;
        max-width: 850px;
    }

    /* WYGLĄD NA KOMPUTER (PC) - KLASYCZNY UKŁAD LINIOWY */
    .nav-grid {
        display: block;
        margin-bottom: 5px;
    }

    .nav-link {
        display: inline-block;
        font-family: "Times New Roman", Times, serif;
        font-size: 17px;
        font-weight: bold;
        padding: 2px 8px;
        text-decoration: none;
        transition: color 0.2s;
    }

    .nav-link.silver { color: silver; }
    .nav-link.gold { color: #FFC020; }
    .nav-link:hover { color: red !important; }

    .nav-divider {
        max-width: 850px;
        margin: 2px auto;
        border-bottom: 1px solid silver;
    }

    /* WYGLĄD NA MOBILE (TELEFON) */
    @media (max-width: 600px) {
        .main-nav-wrapper {
            width: 100% !important;
            max-width: 100%;
        }

        .nav-container {
            padding: 5px 5px 5px 5px;
        }

        .nav-wrapper {
            width: 100% !important;
            max-width: 100%;
            padding: 0 5px;
        }

        .nav-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px 3px;
        }

        .nav-link {
            display: block;
            font-size: 16px;
            padding: 3px 0;
            text-align: center;
            min-width: 0;
            overflow-wrap: anywhere;
            line-height: 1.1;
            letter-spacing: -0.3px;
        }

        /* Wyrozniony HOME na mobile - zlote tlo, czarny tekst */
        .nav-link.gold[href*="index.php"] {
            background: linear-gradient(180deg, #FFD700 0%, #FFC020 50%, #FFA500 100%);
            color: #000 !important;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            font-weight: bold;
            transform: translateY(-3px);
        }

        .nav-link.gold[href*="index.php"]:hover {
            background: linear-gradient(180deg, #FFA500 0%, #FFC020 50%, #FFD700 100%);
            color: #000 !important;
        }

        .top-url {
            font-size: 16px;
            margin-bottom: 8px;
        }
    }

    @media (max-width: 400px) {
        .nav-link {
            font-size: 16px;
            padding: 2px 0;
        }
    }

    /* === PANELE #005560 NA TELEFONIE: ODDECH PRZY KRAWEDZIACH (2026-07-29) ===
       Objaw (user): "panele przesuniete za bardzo w lewo, strone da sie przesuwac
       lewo-prawo, lewego marginesu nie ma a prawy za duzy".
       Przyczyna: panele maja `max-width` + `padding`, ale NIE MAJA
       `box-sizing: border-box`. Przy domyslnym `content-box` padding dokladany jest
       Z ZEWNATRZ, wiec na waskim ekranie panel dostaje pelna szerokosc rodzica
       PLUS 30-40px paddingu i wychodzi poza ekran. Stad poziomy scroll i zludzenie
       "wszystko poszlo w lewo" - w rzeczywistosci dokument jest szerszy od okna.
       Zmierzone: 100 stron z panelem #005560 nie ma nigdzie `box-sizing`.
       Lek: border-box (padding do srodka) + 15px marginesu z obu stron.
       ⚠️ TYLKO ponizej 861px - na desktopie panele sa wezsze od okna i nic nie
       wystaje, wiec nie ma po co ruszac dzialajacego ukladu.
       WYCOFANIE: skasowac ten blok @media - zadna inna regula od niego nie zalezy. */
    @media (max-width: 860px) {
        /* KROK 1 - dziala dla wiekszosci paneli. Sprawdzone przez usera na
           zespoly.php: "idealny, marginesy ok 20px obustronnie". NIE RUSZAC. */
        .box, .panel, .content-box, .info-box, .sklad-zespolu, .sekcja-karta,
        .content-card, .sklad-box, .gallery-box, .tbl-801 {
            box-sizing: border-box !important;
            margin-left: 15px !important;
            margin-right: 15px !important;
        }
        /* KROK 2 - TYLKO dla paneli, ktorych KROK 1 nie zwezil.
           ⚠️ Gdy panel ma `width:100%` (.sekcja-karta na ciekawe.php), szerokosc
           liczy sie od rodzica, a marginesy DOKLADAJA sie z zewnatrz - panel
           wystaje o te same 15px, o ktore mial sie cofnac. Podobnie .tbl-801
           (odautora.php) ma wlasne `margin:20px auto !important`.
           `max-width` bije `width`, wiec calc() przycina je niezaleznie od tego,
           co ustawila strona. Zmierzone po zmianie: ciekawe 20/20, odautora 25/25.
           🔴 Tej reguly NIE rozszerzac na `.box` - zespoly.php ma zagniezdzenie
           #container > .box > .sekcja-kolumny i wychodzi z niej ASYMETRIA 35/50.
           Wzorcowa strona ma zostac nietknieta. */
        .sekcja-karta, .tbl-801 {
            max-width: calc(100% - 40px) !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }

    /* UNIWERSALNY MARGINES DLA PIERWSZEGO ELEMENTU PO NAWIGACJI */
    .main-nav-wrapper + * {
        margin-top: 15px !important;
    }

    /* Dla kontenera #container */
    .main-nav-wrapper + #container,
    .main-nav-wrapper ~ #container {
        margin-top: 15px !important;
    }

    /* === SUWAK GŁOŚNOŚCI W MENU === */
    .volume-control-section {
        text-align: center;
        /* Ramka nizsza o 14px (2026-07-28): gora 8→2px + odstep pod napisem 5→1px
           = suwak 10px WYZEJ; dol 8→4px = dolna krawedz 4px blizej suwaka. */
        padding: 2px 12px 4px 12px;
        /* ⚠️ TEJ WARTOSCI NIE ZMIENIAJ, gdy chcesz przesunac suwak przy WLACZONYM
           sidebarze - nie zobaczysz efektu. menu_lewe.php ma
           `.main-nav-wrapper .volume-control-section { margin-top: ...!important }`,
           ktore bije to z trzech powodow naraz: !important, wyzsza specyficznosc
           (dwie klasy) i pozniejsza pozycja w dokumencie (menu dolacza sie na
           KONCU Prawa1). Ta linia dziala tylko przy `?menu=gora`. (2026-07-29) */
        margin: 10px auto 0 auto;
        background: rgba(0, 40, 50, 0.65);
        border: 1px solid rgba(255, 192, 32, 0.4);
        border-radius: 12px;
        max-width: 420px;
        /* Kotwica dla dymka przy maksimum (patrz #vol-dymek-nav) - bez tego dymek
           uciekłby do pierwszego przodka z position, czyli gdzieś na górę strony. */
        position: relative;
    }

    /* ===== DYMEK PRZY MAKSIMUM (2026-08-03) - wzor: fantom.php `.vol-dymek` =====
       Suwak dobity do konca, a nadal za cicho - to nie usterka. Nasz suwak dzieli tylko to,
       co przydzielil system; wyzej podnosi sie juz klawiszami telefonu albo miksarem Windows.
       Dymek mowi to wprost, zamiast zostawiac wrazenie, ze cos nie dziala.
       Idzie POD panel: nad nim wchodzilby na menu.
       Bez ozdob - to podpowiedz, nie ostrzezenie. */
    #vol-dymek-nav {
        position: absolute;
        top: calc(100% + 9px);
        left: 50%;
        transform: translateX(-50%);
        /* Ponizej podgladu strony na hover (2147483000), powyzej tresci pod paskiem. */
        z-index: 2147482000;
        padding: 6px 10px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(255, 215, 0, 0.5);
        border-radius: 8px;
        color: silver;
        font-family: Arial, sans-serif;
        font-size: 13px;
        font-weight: normal;
        font-style: normal;
        line-height: 1.35;
        text-align: center;
        white-space: nowrap;
        /* Znika miekko, ale `visibility` zabiera go tez czytnikom ekranu i myszy -
           samo `opacity:0` zostawiloby niewidzialny prostokat lapiacy klikniecia. */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s;
        pointer-events: none;     /* nie zaslania tresci pod paskiem */
    }
    #vol-dymek-nav.widoczny { opacity: 1; visibility: visible; }
    /* Dziobek - kwadracik obrocony o 45 stopni, dwoma bokami wpiety w gorna krawedz */
    #vol-dymek-nav::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        margin-left: -4px;
        width: 8px;
        height: 8px;
        background: rgba(0, 0, 0, 0.9);
        border-left: 1px solid rgba(255, 215, 0, 0.5);
        border-top: 1px solid rgba(255, 215, 0, 0.5);
        transform: rotate(45deg);
    }
    /* Waski ekran: zdanie w jednej linii by nie wjechalo - lamiemy je. */
    @media (max-width: 380px) {
        #vol-dymek-nav {
            white-space: normal;
            max-width: 230px;
            font-size: 12px;
        }
    }

    .volume-info-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 1px;
    }

    /* Suwak i glosniczek w JEDNEJ linii (2026-07-28) - glosniczek na samym koncu,
       suwak skraca sie dokladnie o to, co ikona zajmie. flex:1 + min-width:0 zamiast
       sztywnej szerokosci, wiec dziala na kazdej szerokosci ekranu. */
    .volume-slider-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .volume-slider-row .volume-slider-nav {
        flex: 1;
        min-width: 0;
    }

    .volume-control-label {
        font-family: Arial, sans-serif;
        font-size: 12px;
        color: #FFC020;
    }

    .volume-slider-nav {
        /* Pelna szerokosc ramki - tak samo jak na telefonie (regula ponizej, 600px).
           Wczesniej 200px, czyli polowa panelu: dluzsza droga suwaka = drobniejszy
           krok glosnosci i latwiej trafic. */
        width: 100%;
        max-width: 100%;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: linear-gradient(to right, #000, #fff);
        outline: none;
        border-radius: 3px;
        cursor: pointer;
        display: block;
        margin: 0 auto;
    }

    .volume-slider-nav::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: #FFC020;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s;
    }

    .volume-slider-nav::-webkit-slider-thumb:hover {
        background: red;
    }

    .volume-slider-nav::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: #FFC020;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s;
    }

    .volume-slider-nav::-moz-range-thumb:hover {
        background: red;
    }

    .volume-value-nav {
        font-family: Arial, sans-serif;
        font-size: 12px;
        color: silver;
        min-width: 35px;
    }

    /* === GLOSNICZEK (2026-07-28) ===
       Ten sam rysowany SVG co w odtwarzaczu uniwersalnym (player/player_audio.php),
       a nie emoji - emoji kazdy system rysuje po swojemu i nie da sie go powiekszyc
       bez rozmycia. Trzy stany (off / down / up) podmienia JS.
       Miejsce: koniec linii SUWAKA (patrz .volume-slider-row) - nie wiersza z napisem.
       DAWNIEJ position:absolute w wierszu opisu; user 2026-07-28: "umiesc na koncu
       w jednej linii, skroc ile potrzeba slider".
       NIEAKTUALNE: napis "Głośność" i procent zostaja WYSRODKOWANE w ramce,
       a glosniczek siada przy prawej krawedzi niezaleznie od dlugosci tekstu. */
    .volume-icon-nav {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Ujemny margines + dodatni padding = strefa klikania wychodzi POZA ikone,
           nie zmieniajac jej rozmiaru (latwiej trafic palcem). */
        margin: -8px;
        padding: 8px;
        line-height: 0;
        color: #FFC020;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Powrot do 20px (2026-07-28): przy 40px czerwony glosniczek 0 dB "razil w oczy
       za bardzo" - czerwien sama w sobie przyciaga wzrok, wiec ikona ma byc mala.
       Mobile ma wlasna wartosc w @media 600px nizej. */
    .volume-icon-nav svg {
        width: 20px;
        height: 20px;
        display: block;
    }

    .volume-icon-nav:hover svg {
        filter: brightness(1.3);
    }

    /* CISZA (0%): glosniczek przekreslony NA CZERWONO razem z opisem - z drugiego konca
       pokoju widac, ze strona nie jest niema, tylko wyciszona. */
    .volume-icon-nav.wyciszony {
        color: red;
    }

    .volume-control-label.wyciszony {
        color: red;
    }

    /* Mobile - suwak na pełną szerokość */
    @media (max-width: 600px) {
        .volume-control-section {
            /* Gora/dol 10→6px (2026-07-29) - razem z .volume-info-row
               (margin-bottom 8→1px) pasek na telefonie jest 15px nizszy.
               ⚠️ `margin-top` ponizej jest MARTWY przy wlaczonym sidebarze -
               menu_lewe.php nadpisuje go przez !important. */
            padding: 6px 5px;
            margin-top: 15px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 10px;
        }

        .volume-info-row {
            /* 8 → 1 → -4px (2026-07-29). Razem ze zwezonym paddingiem
               .volume-control-section (10→6px) pasek jest 20px nizszy.
               ⚠️ WARTOSC UJEMNA JEST CELOWA. Przy `margin-bottom:1px` user nadal
               widzial ~10px przerwy, bo tor suwaka ma 6px wysokosci, a KCIUK 14px
               - wystaje po 4px w gore i w dol i robi powietrze, ktorego nie widac
               w zadnym marginesie. Ujemny margines sciaga wlasnie ten naddatek.
               Nizej niz -4px nie schodzic: kciuk zacznie nachodzic na napis. */
            margin-bottom: -4px;
            gap: 8px;
        }

        .volume-control-label {
            font-size: 14px;
        }

        .volume-value-nav {
            font-size: 14px;
            min-width: 40px;
        }

        .volume-icon-nav svg {
            width: 24px;
            height: 24px;
        }

        .volume-icon-nav {
            margin: -11px;
            padding: 11px;
        }

        .volume-slider-nav {
            width: 100%;
            max-width: 100%;
            height: 8px;
        }
    }


/* ---- część 2 z Prawa1.php (po siatce linków) ---- */

    #menu-link-preview {
        position: fixed;
        z-index: 2147483000;
        width: 420px;
        height: 300px;
        background: #04252b;
        border: 2px solid #FFC020;   /* złota ramka */
        border-radius: 10px;
        box-shadow: 10px 10px 10px black;   /* jak panele #005560 - w dół i w prawo, mało rozmyty */
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.14s ease;
        pointer-events: none;      /* nie przechwytuje myszy - hover linku dziala normalnie */
        /* visibility zamiast display:none - okno caly czas jest wyrenderowane (tylko niewidoczne),
           wiec pokazanie go NIE wymusza wielkiego reflowu ciezkiego iframe = brak mrugniecia
           i brak przyciecia dzwieku na ulamek sekundy. */
        visibility: hidden;
    }
    #menu-link-preview.mlp-visible {
        opacity: 1;
        visibility: visible;
    }
    #menu-link-preview .mlp-bar {
        height: 22px;
        line-height: 22px;
        padding: 0 8px;
        font-family: Arial, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #04252b;
        background: linear-gradient(180deg,#e9e9e9,#b9b9b9);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #menu-link-preview .mlp-viewport {
        position: absolute;
        top: 22px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    /* Iframe renderowany w duzej szerokosci i pomniejszany (efekt miniatury calej strony) */
    #menu-link-preview iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 1280px;
        height: 853px;                 /* 1280 * (278/420) - proporcja okienka */
        border: 0;
        transform: scale(0.328125);    /* 420 / 1280 */
        transform-origin: 0 0;
        background: #04252b;
        pointer-events: none;
    }



/* ======================================================================
   PŁYNNE PRZEJŚCIE MIĘDZY STRONAMI (20.08.2026)
   ----------------------------------------------------------------------
   Objaw: „klikam link w menu i cała strona maluje się od nowa". Zmierzone
   klatka po klatce na żywym serwerze — sekwencja przy każdym kliknięciu:
       tło + pasek  ->  (+109 ms) menu  ->  (+800 ms) treść
   Widz ogląda budowanie strony na żywo, bo przeglądarka wyrzuca stary
   dokument, zanim nowy jest gotowy.

   `@view-transition` każe jej TRZYMAĆ STARĄ KLATKĘ na ekranie i podmienić
   ją dopiero na gotową nową stronę. Fazy pośrednie przestają być widoczne.

   `view-transition-name` na pasku i menu mówi przeglądarce, że to TEN SAM
   element po obu stronach przejścia — nie przerysowuje ich, tylko przenosi.
   Dzięki temu menu stoi nieruchomo, a zmienia się wyłącznie treść.
   ⚠️ Nazwa musi być UNIKATOWA na stronie — sprawdzone: `.main-nav-wrapper`
   i `#menu-lewe` występują po jednym razie.

   🔑 Działa TYLKO gdy OBIE strony mają tę regułę — dlatego siedzi tutaj,
   we wspólnym arkuszu, a nie na pojedynczych stronach.
   Przeglądarki, które tego nie znają, po prostu ją pomijają — zachowują się
   dokładnie jak dziś, więc nic nie może się zepsuć.

   WYCOFANIE: skasuj ten blok (od nagłówka do END).
   ====================================================================== */
@view-transition { navigation: auto; }

.main-nav-wrapper { view-transition-name: pasek-gorny; }

/* 🔴 PODMIANA NATYCHMIASTOWA, BEZ PRZENIKANIA (prośba właściciela, 20.08.2026).
   Przy 160 ms przenikania w połowie animacji obie treści są półprzezroczyste,
   a jeśli zdjęcia nowej strony jeszcze nie doszły, obszar treści na moment
   robi się pusty — czyli wraca dokładnie to, co mieliśmy usunąć.
   1 ms zamiast 0 celowo: zerowy czas potrafi w niektórych przeglądarkach
   pominąć całą grupę przejścia. WARTOŚĆ ZATWIERDZONA — nie "poprawiać" jej z powrotem. */
::view-transition-group(*) { animation-duration: 1ms; }

/* Pasek i menu są identyczne na obu stronach — przenosimy je BEZ animacji,
   żeby naprawdę stały w miejscu, zamiast delikatnie mrugać. */
::view-transition-old(pasek-gorny), ::view-transition-new(pasek-gorny),
::view-transition-old(menu-lewe),   ::view-transition-new(menu-lewe) {
    animation: none;
    mix-blend-mode: normal;
}

/* Szanujemy ustawienie „ogranicz animacje" w systemie. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) { animation-duration: 1ms; }
}
/* === PŁYNNE PRZEJŚCIE — END === */
