/* @admin: Franek 2026-08-07 — "strona sie normalnie w dol scrolluje jak normalna strona a nie te slidy
   sie przeskakuja bo to nie jest jednak fajne i te animacje od menu" (task t1786093333_6wsdx).

   Motyw Roger budowal strone jako pagepiling: body{overflow:hidden}, kazda sekcja position:absolute
   o wysokosci dokladnie jednego ekranu, a scrollHeight rowny innerHeight — strona fizycznie nie miala
   jak sie przewijac. Ten plik przywraca normalny uklad dokumentu. Nie ruszamy zminifikowanego motywu
   (ptf-main.min.css / ptf-controllers.min.js) — nadpisujemy warstwa wlasna, zeby dalo sie to cofnac
   usunieciem dwoch plikow i jednej pary tagow w index.html. */

html {
    scroll-behavior: smooth;
}

/* Przewijanie dokumentu zamiast przeskoku slajdow. */
html,
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

/* Kontener slajdow staje sie zwyklym blokiem. */
.ptf-fullpage-slider,
.pp-wrapper {
    height: auto !important;
    transform: none !important;
    position: static !important;
}

/* Sekcja: z warstwy nalozonej na ekran robi sie kolejny kawalek strony. min-height zostawia
   pelnoekranowy oddech, ktory byl w projekcie, ale dluzsza tresc moze juz urosnac w dol. */
/* transform: translateZ(0) robi tu DWIE rzeczy naraz i dlatego nie jest to "none":
   (1) kasuje przesuniecie, ktore ustawial pagepiling,
   (2) czyni z sekcji BLOK ZAWIERAJACY dla potomkow z position:fixed.
   Punkt (2) jest istotny: w sekcji Home trzy elementy (naglowek "Glos Daje Moc", przycisk "Dowiedz sie
   wiecej", ikona odtwarzania) maja w motywie position:fixed z konkretnymi odsunieciami. Przy slajdach
   bylo to nieszkodliwe, bo sekcja zajmowala caly ekran. Po przejsciu na zwykle przewijanie plywaly nad
   cala strona — na telefonie napis z Home lezal wprost na tekscie sekcji "O mnie" (zlapane na zrzucie).
   Dzieki tej jednej deklaracji ich odsuniecia liczone sa juz od sekcji, wiec ukladaja sie DOKLADNIE tak
   jak na produkcji i jada razem ze strona. Probowana wczesniej podmiana na position:absolute byla ZLA:
   blokiem zawierajacym staje sie wtedy najblizszy pozycjonowany przodek, ktorym jest wewnetrzny kontener
   Elementora, a nie sekcja — naglowek ladowal na top:-193px zamiast 458px i byl ucinany u gory. */
.ptf-section,
.pp-section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 100vh;
    transform: translateZ(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* @admin: Franek 2026-08-10, zrzut z iPhone'a: "nie ma ani jednego buttona ani drugiego".
   PRZYCZYNA, widoczna dopiero na PRAWDZIWYM Safari na iOS, nie w emulowanym oknie:
   w Safari na iOS `100vh` to wysokosc okna BEZ paskow przegladarki (tzw. duzy widok), a realnie widac
   mniej — gora pasek adresu, dol pasek narzedzi. Sekcja z `min-height: 100vh` jest wiec WYZSZA niz to,
   co uzytkownik widzi. Oba przyciski Home sa w motywie `position: fixed`, a nasza deklaracja `transform`
   powyzej czyni z sekcji BLOK ZAWIERAJACY dla takich potomkow — wiec ich odsuniecia liczone sa od DOLU
   SEKCJI, ktory na iOS lezy pod paskiem narzedzi. Efekt: przyciski sa poprawnie ulozone i niewidoczne.
   Jednostka widoku uwzgledniajaca paski sprawia, ze dol sekcji rowna sie dolowi tego, co widac.
   Deklaracja stoi PO tamtej i tylko ja nadpisuje: przegladarki bez tej jednostki zignoruja regule
   i zostana przy `100vh`, czyli przy dotychczasowym zachowaniu — zero pogorszenia tam, gdzie dzialalo.
   DLACZEGO NIE ZLAPALEM TEGO WCZESNIEJ: mierzylem w emulowanym oknie, gdzie widok ma dokladnie tyle,
   ile sekcja, wiec roznica wynosila zero. Blad tej klasy widac wylacznie na urzadzeniu z paskami.

   @admin: task t1786370333_6o5iq, zgloszenie Franka z nagrania: "jak przewijam to skacze".
   PIERWOTNIE bylo tu `100dvh` i to ono skakanie POWODOWALO. `dvh` jest z definicji DYNAMICZNE:
   zmienia sie w trakcie przewijania, gdy Safari chowa i pokazuje paski. Kazda taka zmiana przelicza
   wysokosc WSZYSTKICH osmiu sekcji naraz, wiec dokument rosnie i kurczy sie o setki pikseli POD PALCEM
   uzytkownika — tresc ucieka spod kciuka i strona sprawia wrazenie zacinajacej sie.
   Zmierzone: wysokosc sekcji zmieniala sie miedzy pierwszym renderem a chwila pozniej (900 -> 759 px),
   a na nagraniu z iPhone'a widac zarowno przesuniecia przy chowaniu paska, jak i samoczynne cofniecie
   strony po zatrzymaniu palca.
   `svh` to wysokosc widoku przy POKAZANYCH paskach — wartosc STALA, ktora sie nie przelicza przy
   przewijaniu. Zachowuje cel poprzedniej poprawki (dol sekcji nie chowa sie pod paskiem narzedzi,
   wiec oba przyciski Home sa widoczne), bo `svh` jest zawsze mniejsze lub rowne `dvh` — czyli jest
   wariantem ostrozniejszym, nie slabszym. Rozwiazuje przyczyne zamiast tlumic skutek. */
.ptf-section,
.pp-section {
    min-height: 100svh;
}

/* Wewnetrzne kontenery przewijania sekcji — juz niepotrzebne, tresc plynie w dokumencie. */
.pp-scrollable,
.ptf-section__vertical-align,
.ptf-section__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* @admin: Franek 2026-08-12 (grupa „Glor-Ja Biznes", z filmikiem) — "jak klikam po menu to nie kazda
   strona sie zaczyna od gory tylko od gory jest z 30% pustki - kazda ma byc od gory tak jak o mnie np"
   oraz "po kliku w menu nie kazda strona zaczyna sie od gory tylko jest 30% puste bez sensu na mobile".

   PRZYCZYNA (zmierzona w kodzie, nie zgadnieta): tresc sekcji jest centrowana w pionie DWIEMA warstwami
   naraz — pagepiling ustawia `.pp-tableCell{vertical-align:middle}`, a motyw
   `.ptf-fullpage-slider .ptf-section__vertical-align{align-items:center}`. Powyzszy blok tej warstwy
   zdejmowal juz z tych kontenerow wysokosc i przewijanie, ale NIE ruszal centrowania. Skutek widac
   dopiero przy KROTKIEJ tresci: sekcja ma `min-height:100svh`, wiec przy malej ilosci tresci ta laduje
   na srodku ekranu, a nad nia zostaje pusty pas. Sekcja "O mnie" wyglada dobrze WYLACZNIE dlatego, ze ma
   tresci na tyle duzo, ze wypelnia ekran — czyli roznica nie byla w tamtej sekcji, tylko w ilosci tresci.

   Dlatego zdejmujemy centrowanie w OBU warstwach zamiast poprawiac pojedyncza sekcje: kazda zaczyna sie
   od gory, a sekcje z duza trescia (jak "O mnie") wygladaja dokladnie tak jak dotad, bo i tak wypelnialy
   ekran. Zachowany zostaje `min-height`, wiec sekcje nadal zajmuja pelna wysokosc okna. */
.pp-tableCell {
    vertical-align: top !important;
}

.ptf-fullpage-slider .ptf-section__vertical-align,
.ptf-section__vertical-align {
    -webkit-box-align: start !important;
    -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
}

/* Nawigacja kropkowa slajdow (gora/dol + kropki) traci sens przy normalnym przewijaniu. */
.ptf-fullpage-slider-nav {
    display: none !important;
}

/* @admin: elementy przypiete do OKNA wewnatrz sekcji sa odpinane w normal-scroll.js, a NIE tutaj.
   Powod: CSS nie potrafi wybrac "elementow, ktorych wyliczona pozycja to fixed", a zgadywanie selektorow
   (.ptf-heading, .elementor-button) trafia takze w te same klasy w pozostalych sekcjach, gdzie nic nie
   jest przypiete. Skrypt czyta stan WYLICZONY, wiec odpina dokladnie te elementy, ktore tego wymagaja,
   i obejmie rowniez nowe, gdyby Gloria dolozyla je w przyszlosci. */

/* @admin: menu boczne — wylaczamy TYLKO przejscia i animacje CSS, zeby otwieralo sie bez ociagania.
   NIGDY nie zerujemy tu transform. Zamkniete menu boczne jest chowane WYLACZNIE transformem
   (translateX(550px) — sprawdzone na produkcji: visibility:visible, opacity:1, position:fixed), wiec
   "transform: none" nie kasuje animacji, tylko wyciaga zamkniete menu na srodek ekranu i trwale zaslania
   nim strone. Ten blad byl tu realnie popelniony i zlapany dopiero na zrzucie z telefonu — sam odczyt
   DOM by go nie pokazal, bo menu raportowalo sie jako "widoczne" takze wtedy, gdy poprawnie stalo poza
   ekranem. Transform zostaje domena motywu (GSAP). */
.ptf-offcanvas-menu,
.ptf-offcanvas-menu__navigation,
.ptf-offcanvas-menu__inner,
.ptf-offcanvas-menu li,
.ptf-offcanvas-menu__socials {
    transition: none !important;
    animation: none !important;
}

.animsition,
.animsition-overlay {
    animation-duration: 0s !important;
    transition: none !important;
    opacity: 1 !important;
}

/* Elementy tresci byly odslaniane dopiero przy zmianie slajdu — bez pagepilingu to zdarzenie
   juz nie nadchodzi, wiec bez tego czesc strony zostalaby niewidoczna. */
.ptf-animate-element {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* @admin: Franek 2026-08-10 (grupa "Glor-Ja Biznes") — "na stronie glownej home ten button dowiedz sie
   wiecej nie jest od razu widoczny tylko po scrollu (...) naprawiaj".

   ZMIERZONE NA ZYWO (1366x768, wysokosc okna 681 px), a nie odczytane z kodu:
     padding-top .ptf-section__content .. 220 px
     h1.ptf-heading ................... 501 px  (font 138 px, interlinia 151.8 px, trzy wiersze)
     odstepnik (spacer) ................ 61 px
     przycisk .......................... 58 px
     razem do dolu przycisku ........... 840 px  >  681 px okna
   Przycisk wypada wiec 159 px PONIZEJ zgiecia i widac go dopiero po przewinieciu.

   WAZNE USTALENIE: to samo zmierzono na produkcyjnej glor-ja.pl — tam dol przycisku wypada IDENTYCZNIE
   na 840 px, wiec przy tych samych oknach jest tak samo. Roznica pojawia sie dopiero od ok. 873 px
   wysokosci okna, gdzie obie strony miesza sie w ekranie. To NIE jest wiec regresja wniesiona przez
   przejscie na normalne przewijanie — to wada obecna takze na starej stronie, ktora naprawiamy tutaj.

   ROZWIAZANIE: klucz na WYSOKOSCI okna, nie na szerokosci — problem jest pionowy. Na niskich ekranach
   naglowek skaluje sie z wysokoscia okna, a gorne odsuniecie i odstepnik malaja, dzieki czemu przycisk
   miesci sie nad zgieciem. Powyzej 900 px wysokosci nie zmienia sie NIC (na 1920x1080 i 1680x1050
   przycisk juz byl widoczny, odpowiednio 153 i 123 px nad zgieciem).
   Dolna granica min-width:1025px jest CELOWA: na telefonach naglowek ma juz mniejszy font (78.75 px)
   i przycisk sie miesci; bez tej granicy 13vh policzyloby font WIEKSZY niz obecny i pogorszyloby telefon. */
@media (min-width: 1025px) and (max-height: 900px) {
    /* !important jest tu KONIECZNE, nie ozdobne: pierwsza wersja tej reguly (bez niego) byla wczytana
       — sprawdzone w przegladarce, regula figurowala w document.styleSheets — a mimo to font pozostawal
       138 px, bo arkusz Elementora celuje w ten sam naglowek selektorem o wyzszej specyficznosci. */
    .ptf-section:first-of-type .ptf-section__content {
        padding-top: 120px !important;
        padding-bottom: 60px !important;
    }

    .elementor-77 h1.ptf-heading {
        font-size: clamp(56px, 13vh, 138px) !important;
    }

    .elementor-77 .elementor-spacer-inner {
        height: 24px !important;
    }
}

/* @admin: Franek 2026-08-10 — "ten butotn od play zrob tez ze ma byc zawsze widoczny na mobile tez jednak
   ma byc" + doprecyzowanie "na prawo od dowiedz sie wiecej buttona".

   ZMIERZONE NA TELEFONIE (szerokosc uzytkowa 500 px, okno 845 px):
     przycisk "Dowiedz sie wiecej" .. position: fixed, 20 px od lewej, 20 px od dolu — JUZ jest zawsze widoczny
     ikona odtwarzania ............ display: NONE — motyw chowa ja na telefonie calkowicie
   Czyli na telefonie brakowalo wylacznie ikony, a nie przycisku.

   Ikona ladowana jest w te sama wstege co przycisk i dosuwana do prawej krawedzi. Zakotwiczenie przez
   bottom/right, a NIE przez powielenie odsuniec przycisku, jest swiadome: szerokosc przycisku zalezy od
   dlugosci napisu, wiec "left = lewa przycisku + jego szerokosc" rozjechaloby sie przy kazdej zmianie
   tekstu. Przy przycisku po lewej i ikonie po prawej tej samej wstegi ikona jest zawsze na prawo od niego. */
@media (max-width: 1024px) {
    .elementor-77 .elementor-element-d74171d,
    .elementor-77 .elementor-element-d74171d .elementor-widget-container,
    .elementor-77 .elementor-element-d74171d .elementor-icon-wrapper {
        display: block !important;
    }

    .elementor-77 .elementor-element-d74171d .elementor-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: fixed !important;
        right: 20px !important;
        bottom: 20px !important;
        left: auto !important;
        top: auto !important;
        width: 56px !important;
        height: 56px !important;
        z-index: 50 !important;
    }

    .elementor-77 .elementor-element-d74171d .elementor-icon svg,
    .elementor-77 .elementor-element-d74171d .elementor-icon i {
        width: 100% !important;
        height: 100% !important;
    }
}

/* @admin: task t1786370333_6o5iq — zdjecie w bloku "O mnie" ma z motywu float: left, wiec tekst je
   oblewa. Na laptopie jest to w porzadku (akapit ma ponad 1100 px), ale na telefonie zdjecie zabiera
   200 z 375 px szerokosci i wstep laduje sie w kolumnie po kilka slow w wierszu. Zobaczone na
   PRAWDZIWYM Safari na iPhonie, nie w emulowanym oknie — odczyt DOM tego nie pokazuje, bo tam wszystko
   jest "widoczne". Na waskich ekranach zdjecie idzie nad tekst, wysrodkowane i wezsze.
   NIE dotyka to zadnej z regul chronionych: transform na .ptf-section, pary 100vh + 100dvh,
   wylaczonych przejsc menu ani widocznosci przyciskow sekcji Home. */
@media (max-width: 767px) {
    [data-anchor="O mnie"] .elementor-widget-text-editor img.alignnone {
        float: none !important;
        display: block !important;
        margin: 0 auto 18px !important;
        width: 160px !important;
        height: auto !important;
    }
}

/* @admin: task t1786370333_6o5iq — po przywroceniu naglowka "Występy" (byl ukryty regula display:none,
   wiec problem wczesniej nie mial jak sie ujawnic) blok osi czasu dotykal go na waskich ekranach:
   na zrzucie z iPhone'a dolne wydluzenia liter "y" i "ę" wchodzily pod gorna krawedz ciemnego bloku.
   Na pulpicie odstep jest wystarczajacy, wiec regula obejmuje wylacznie waskie ekrany — te same,
   ktore dostaja z motywu margin-top: -150px na tresci sekcji. */
@media (max-width: 1000px) {
    [data-anchor="Występy"] .ptf-timeline-slider {
        margin-top: 20px;
    }
}

/* @admin: Franek 2026-08-11, CZERWONA KARTKA i TRZECIE zgloszenie tej samej wady: "dalej button dowiedz
   sie wiecej ani ten od yt na stronie nie dzialaja 3 raz to zglaszam i dalej nie poprawione".

   PRZYCZYNA USTALONA POMIAREM, nie zalozeniem. Przy szerokosci telefonu document.elementFromPoint
   w SRODKU obu sterowan zwraca DIV.ptf-section__content, a nie odnosnik — czyli tresc sekcji lezy NA
   nich i zjada dotkniecie. Zmierzone wartosci: przycisk ma z motywu position:fixed z z-index:auto,
   a .ptf-section__content ma position:relative z z-index:2 i przy waskim ekranie rosnie w dol
   (prostokat 0,563 o rozmiarze 489x1262), wiec siega miejsca, w ktorym stoja oba sterowania,
   i jako wyzsza warstwa wygrywa.

   DLACZEGO WRACALO TRZY RAZY MIMO "POPRAWIONE": na pulpicie uklad jest inny i wada NIE WYSTEPUJE —
   sprawdzenie w zwyklej przegladarce pokazywalo dzialajacy przycisk (klik przewijal strone z 0 na 5280).
   Wada zyje wylacznie przy szerokosci telefonu, wiec kazde sprawdzenie na pulpicie ja przepuszczalo.

   ODTWORZONE NA ZYWO na iPhone 13 mini w Safari, przed poprawka: stukniecie w "Dowiedz sie wiecej"
   NIE zmienia ekranu (jedyna roznica miedzy zrzutami to zegar w pasku stanu), stukniecie w przycisk
   YouTube tak samo — zero zmiany. W tej samej sesji stukniecie w hamburger otwiera menu (roznica na
   obszarze 0,144-1080,1954), co dowodzi, ze dotyk trafia tam, gdzie ma, i problemem nie jest sterowanie
   symulatorem, tylko warstwa nad odnosnikiem. */
.elementor-77 .elementor-element-6d8093e .elementor-button,
.elementor-77 .elementor-element-d74171d .elementor-icon {
    z-index: 3 !important;
}

/* Sam z-index na przyciskach NIE WYSTARCZYL i wiem to z pomiaru, a nie z domyslu: po jego wdrozeniu
   document.elementsFromPoint w tym samym punkcie dawal od gory DIV.ptf-section__content [z=2], a dopiero
   pod nim A.elementor-button [z=3]. Przodek nie moze tak przykryc potomka — i faktycznie NIE JEST to
   przodek: zaslaniajacy content nalezy do NASTEPNEJ sekcji ("O mnie", sprawdzone przez closest
   [data-anchor]), a wciaga go na hero motywowy margin-top: -150px (odczytany ze stylu obliczonego).
   Sekcja pozniejsza w dokumencie maluje sie nad wczesniejsza, wiec zaden z-index NA SAMYM PRZYCISKU
   tego nie odwroci — trzeba podniesc CALA sekcje Home, bo to ona jest blokiem zawierajacym dla obu
   sterowan z position:fixed. */
.ptf-section:first-of-type {
    z-index: 3 !important;
}

/* @admin: Franek 2026-08-11 ze zrzutem: "zobacz na screenie jest uciete bez sensu scroll nie miesci sie
   poprawiaj". Na jego telefonie menu z hamburgera urywalo sie w polowie pozycji "Nauka wokalu", a "Kontakt"
   nie byl widoczny wcale.

   ODTWORZONE I ZMIERZONE przy oknie o wysokosci 513 px: panel .ptf-offcanvas-menu ma wysokosc 513 px
   i overflow-y: visible, a ostatnia pozycja "Kontakt" konczy sie na 524 px — czyli 11 px POZA ekranem,
   bez zadnej mozliwosci przewiniecia. Ikony spolecznosciowe siedza w tym czasie na 428-461 px, wiec
   dodatkowo wchodza w rytm listy. Menu urosło po dolozeniu pozycji "Kolektyw DobryVibe" i od tego momentu
   przestalo sie miescic na niskich ekranach.

   DWIE WARSTWY, bo jedna nie wystarcza. (1) Przewijanie wlaczone ZAWSZE: gdy tresc sie miesci, nic sie nie
   zmienia, a gdy nie — da sie doscignac reszte. overscroll-behavior: contain zatrzymuje przewijanie
   w panelu i nie przenosi go na strone pod spodem. (2) Na niskich ekranach zaciesniony rytm listy, zeby
   komplet pozycji miescil sie BEZ przewijania — przewijanie ma byc zabezpieczeniem, a nie codziennym
   sposobem dotarcia do ostatniej pozycji. Zmierzone: pozycja ma 41 px wysokosci przy foncie 24,5 px,
   wiec zejscie do 21 px oddaje okolo 7 px na pozycji, czyli ponad 50 px na osmiu — z zapasem na te 11 px
   brakujace na oknie 513 px. */
.ptf-offcanvas-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* @admin: klucz na SZEROKOSCI, nie na wysokosci — i to nie jest dowolny wybor. Pierwsza wersja tej reguly
   miala max-height: 700px i DZIALALA w przegladarce na pulpicie przy oknie 513 px, ale na iPhone 13 mini
   NIE zadzialala: zrzut po wdrozeniu pokazal dalej duzy font i brak dwoch ostatnich pozycji. Powod jest
   znany dla iOS Safari — do zapytan medialnych podaje on wysokosc PELNEGO ekranu, a nie widocznego obszaru
   nad paskiem adresu, wiec 812 px telefonu nigdy nie spelnia warunku 700 px. Menu przepelnia sie wylacznie
   na telefonach, wiec szerokosc jest tu kryterium pewniejszym i odpornym na te roznice. */
@media (max-width: 1024px) {
    .ptf-offcanvas-menu .sf-menu > li > a {
        font-size: 21px !important;
        line-height: 1.35 !important;
    }

    /* @admin: WLASCIWY WINOWAJCA, znaleziony przez przejscie po przodkach pozycji "Kontakt" i odczytanie
       ich stylow obliczonych. NAV.ptf-offcanvas-menu__navigation ma wysokosc 153 px przy tresci 363 px,
       a lezaca w nim UL.sf-menu ma overflow: hidden. Lista byla wiec scisnieta w male okienko wewnatrz
       panelu: dwa zagniezdzone obszary przewijania, z ktorych ten wewnetrzny jest tak niski, ze gest
       trafia w strone pod spodem zamiast w liste. Stad zgloszenie Franka "uciete, scroll nie miesci sie".
       Zdejmujemy przycinanie z obu poziomow — wtedy zostaje JEDEN obszar przewijania, sam panel, ktory
       ma juz overflow-y: auto. */
    .ptf-offcanvas-menu__navigation {
        overflow: visible !important;
        max-height: none !important;
    }

    .ptf-offcanvas-menu .sf-menu {
        overflow: visible !important;
    }
}

/* @admin: Franek 2026-08-11 ze zrzutem: "te zdjecia jak ze screena mialy wchodzic brzegami w opacity
   fade out tak jak na ofercie jest". WZORZEC ODCZYTANY Z SAMEJ OFERTY, nie z opisu: w
   Resources/glor-ja/www/oferta/oferta.pdf zdjecie na pierwszej stronie rozplywa sie u GORY i u DOLU
   w ciemne tlo, a boki idzie na pelna szerokosc. Dlatego zanik jest tu PIONOWY — odwzorowuje oferte,
   zamiast wymyslac wlasny efekt na cztery strony.

   Robione maska, a nie nakladka z gradientem: nakladka musialaby znac kolor tla pod spodem i rozjechalaby
   sie przy kazdej zmianie tla sekcji, a maska po prostu wygasza piksele zdjecia i przepuszcza to, co jest
   pod nim, czymkolwiek by nie bylo.

   LOGO KOLEKTYWU JEST SWIADOMIE POMINIETE. Zdjec na stronie jest cztery, ale jedno z nich to
   dobryvibe-logo.png — znak graficzny na przezroczystym tle. Zanik na znaku wyglada jak uszkodzony plik,
   a nie jak efekt, wiec selektory celuja w sekcje ze zdjeciami oraz w pliki wystepow po nazwie, a nie
   w kazdy obrazek na stronie. */
[data-anchor="O mnie"] img,
[data-anchor="Projekt Hiszpański"] img,
/* @admin: plakat Huty WYLACZONY swiadomie. wyst-huta.jpg to GRAFIKA wydarzenia z wlasna kompozycja
   i wlasna ramka, a nie zdjecie — zdjety obrys i rozmyte brzegi zrobily z niej wypelnienie karty
   zamiast plakatu (sprawdzone na zrzucie z telefonu po pierwszym podejsciu). Ta sama zasada co przy
   logu kolektywu: zanik jest dla zdjec, nie dla znakow i plakatow. */
img[src*="wyst-"]:not([src*="huta"]) {
    /* @admin: biala ramka MUSI zniknac razem z zalozeniem zaniku i nie jest to kwestia gustu. Zmierzone
       na zywej stronie: te obrazki maja border 5px solid rgb(255,255,255) wprost na elemencie IMG. Przy
       samym zaniku zdjecie rozplywalo sie w BIALA RAMKE zamiast w ciemne tlo — zrzut z iPhone'a po
       pierwszym podejsciu pokazal dokladnie to i wygladalo gorzej niz przed zmiana. W ofercie, ktora jest
       tu wzorcem, zadnej ramki nie ma; zdjecie przechodzi wprost w tlo. */
    border: 0 !important;
    /* @admin: DWA gradienty, nie jeden. Sama pionowa maska zostawiala twarde krawedzie boczne — widoczne
       na zrzucie z telefonu, bo zdjecie na stronie jest wsuniete od krawedzi ekranu, inaczej niz w ofercie,
       gdzie idzie na pelna szerokosc i bokow po prostu nie widac. Franek prosil o "brzegami", wiec zanik
       obejmuje wszystkie cztery. Skladanie masek podane w dwoch zapisach: -webkit-mask-composite ze slowem
       source-in rozumie Safari, mask-composite ze slowem intersect to zapis standardowy. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%),
                        linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%),
                linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* @admin: Franek 2026-08-11 — "w duo gloria i aleksander daj zdjecie zaraz pod tytulem nad opisem
   i buttony pobierz oferte i posluchaj niech beda na zdjeciu w jego dolnej czesci".
   Sekcja przebudowana z dwoch kolumn na jedna: tytul, zdjecie z przyciskami polozonymi NA nim, opis.
   Przyciski leza w warstwie nad zdjeciem, przy dolnej krawedzi, na delikatnym przyciemnieniu — bez niego
   bialy tekst na jasnym fragmencie fotografii bywa nieczytelny, a to zdjecie ma u dolu jasny dywan. */
.tenx-foto-duo {
    position: relative;
    margin: 0 0 26px;
    border-radius: 8px;
    overflow: hidden;
}

.tenx-foto-duo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.tenx-foto-duo__akcje {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 18px 18px;
    background: linear-gradient(to bottom, rgba(10,5,19,0) 0%, rgba(10,5,19,.82) 62%, rgba(10,5,19,.94) 100%);
}

.tenx-foto-duo__akcje .e-con-inner {
    gap: 14px !important;
    justify-content: center;
}

.tenx-foto-duo__akcje .e-grid {
    margin-top: 0 !important;
}

/* @admin: Franek 2026-08-11 ze zrzutem z monitora 4K — "zobacz jak dziwnie strona wyglada na monitorze 4k
   cala strone masz obejrzec widok po widoku i popoprawiac ma byc ok na 4k na normalnej rozdzielczosci
   na tableci i na telefonie".

   ZMIERZONE NA CZTERECH SZEROKOSCIACH (3840, 1440, 834, 390), a nie ocenione na oko:
     4K       — naglowek hero 138 px zajmuje 17 procent szerokosci, przycisk 18 px, wiersze tekstu
                159 znakow (Projekt Hiszpanski), 117 (O mnie), 105 (Kolektyw);
     monitor  — naglowek 117 px na 44 procentach, czyli dobrze, ale wiersze DALEJ 159 i 117 znakow;
     tablet   — 98 znakow w dwoch sekcjach;
     telefon  — bez zastrzezen, 340-360 px na akapit.
   Poziomego przewijania nie ma na zadnej z czterech szerokosci.

   PRZYCZYNA jest jedna dla wszystkich trzech objawow: strona ma zaszyte GORNE limity z laptopa i powyzej
   nich przestaje rosnac, a tekst nie ma zadnego ograniczenia szerokosci, wiec rozlewa sie na cala kolumne.

   Wiersz czyta sie dobrze przy 60-90 znakach. Ograniczenie podane w jednostce ch, czyli w szerokosci
   znaku danego kroju — dzieki temu limit trzyma sie liczby ZNAKOW przy kazdym rozmiarze pisma, zamiast
   byc sztywna liczba pikseli, ktora przy wiekszym foncie znowu daje za dlugi wiersz. */
/* @admin: Franek 2026-08-11 ze zrzutem, pytanie "widzisz co jest krzywo?" — TAK, i jedna z tych krzywizn
   byla MOJA. Ograniczenie w jednostce ch trzyma liczbe ZNAKOW, ale nie trzyma szerokosci w pikselach:
   zmierzone w sekcji O mnie pierwszy akapit konczyl sie na 997 px, a kolejne na 805 px, bo pierwszy ma
   wieksze pismo. Prawa krawedz wygladala przez to jak zab wystajacy w prawo. Limit podany w pikselach
   daje WSPOLNA prawa krawedz dla wszystkich akapitow sekcji, a to wlasnie rownosc krawedzi jest tu
   widoczna dla oka, nie liczba znakow. */
.ptf-section__content p {
    max-width: 690px;
}

/* @admin: druga krzywizna z tego samego zrzutu — LEWA krawedz. Zdjecie w sekcji O mnie bylo wpuszczone
   w tekst (float: left), wiec dopoki trwalo, wiersze zaczynaly sie od 370 px, a ponizej jego dolnej
   krawedzi wskakiwaly na 165 px — zalamanie w polowie akapitu, dokladnie przy "sila. Pierwszy singiel".
   Zdjecie przestaje byc oplywane i staje sie zwyklym blokiem nad tekstem, dzieki czemu KAZDY wiersz
   startuje z tej samej krawedzi. */
[data-anchor="O mnie"] img {
    float: none !important;
    display: block;
    margin: 0 0 24px;
}

/* Nagłówek hero i przycisk rosną powyżej zwykłego monitora. Próg 1921 px jest celowy: na 1440 Franek
   ocenil uklad jako dobry, wiec ta szerokosc zostaje NIETKNIETA — zmiana dotyczy wylacznie ekranow
   szerszych niz pelne HD. */
@media (min-width: 1921px) {
    .elementor-77 h1.ptf-heading {
        font-size: clamp(138px, 7vw, 300px) !important;
        line-height: 1.05 !important;
    }

    .elementor-77 .elementor-element-6d8093e .elementor-button {
        font-size: clamp(18px, 1.05vw, 32px) !important;
        padding: clamp(20px, 1.1vw, 34px) clamp(25px, 1.4vw, 44px) !important;
    }

    .elementor-77 .elementor-element-d74171d .elementor-icon {
        width: clamp(56px, 4.2vw, 168px) !important;
        height: clamp(56px, 4.2vw, 168px) !important;
    }
}

/* @admin: Franek 2026-08-11 — "jak jest to ciemne tlo w wystepach to prostokatne pod tekstem to tez
   niech gradientem fade out krawedzie na opacity zjezdzaja".

   ZMIERZONE: ciemny prostokat to .swiper-slide z tlem rgba(6,3,12,.92), a samo przyciemnienie niesie
   jego warstwa ::before (inset 0, ten sam kolor). Maska idzie WYLACZNIE na te warstwe, a NIE na sam
   kafelek — gdyby poszla na kafelek, rozmylyby sie takze tekst i plakat, czyli tresc, ktora ma zostac
   ostra. Dzieci kafelka maja juz z motywu position:relative i z-index:1, wiec leza nad ta warstwa
   i maska ich nie dotyka. */
/* @admin: maska tej warstwy przeniesiona do index.html razem z mozaika (Franek 2026-08-11:
   "te mozaiki niech maja lekkie opacity i na brzegach ma wchodzic opacity fade out") — jedna
   deklaracja w jednym miejscu zamiast dwoch nakladajacych sie na ten sam pseudoelement. */


/* @admin: Franek 2026-08-12 — „duo gloria i aleksander tam sa 2 buttony i tez maja byc tej samej
   wielkosci co reszta a nie mniejsze".
   HISTORIA TEGO MIEJSCA, zeby nastepny czytajacy nie cofnal tego w kolko: 11 sierpnia oba przyciski
   NIE MIESCILY sie na zdjeciu — zrzut z iPhone'a pokazal „Posluchaj na YouTube" ucietego dolna
   krawedzia kadru — wiec zostaly ZMNIEJSZONE do 13 px, zeby weszly w jeden rzad NA zdjeciu. Teraz
   Franek chce pelnego rozmiaru, a to znaczy, ze nie moga juz lezec na zdjeciu: dwa przyciski po 58 px
   nie zmieszcza sie w kadrze i wrociloby ucinanie.
   ROZWIAZANIE ZMIENIA POLOZENIE, A NIE ROZMIAR: na waskich ekranach warstwa przyciskow przestaje byc
   nakladka (position: static), wiec przyciski schodza POD zdjecie, maja pelne 58 px i 18 px jak reszta
   strony, i moga sie zawinac do drugiego rzedu bez zadnego ucinania. Przyciemniajacy gradient znika
   razem z nakladka, bo nad zdjeciem juz nic nie lezy i nie ma czego rozjasniac.
   SPRAWDZONE PRZED WDROZENIEM przez wstrzykniecie tej samej reguly na zywa strone: oba przyciski
   58 px / 18 px, pierwszy zaczyna sie PONIZEJ dolnej krawedzi zdjecia. */
@media (max-width: 700px) {
    .tenx-foto-duo {
        overflow: visible;
    }

    .tenx-foto-duo__akcje {
        position: static;
        padding: 14px 0 0;
        background: none;
    }

    .tenx-foto-duo__akcje .e-con-inner {
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }

    .tenx-foto-duo__akcje .elementor-button {
        font-size: 18px !important;
        padding: 20px 25px !important;
        box-shadow: 4px 6px 0 0 #fff !important;
    }
}

/* @admin: Franek 2026-08-11 — "w tym kolektywie dobry vibe daj mozaike i pelne logo nie tylko DV,
   mozaika pod logiem i napisem dobry vibe i na tej mozaice button do przejscia na strone".
   Uklad: pelne logo, pod nim napis, pod napisem mozaika, a przycisk lezy NA mozaice — ten sam wzorzec
   co przy zdjeciu dueta, wiec strona nie dostaje kolejnego wlasnego rozwiazania na to samo. */
/* @admin: Franek 2026-08-12 (grupa „Glor-Ja Biznes") — "wyjeb to samo DV na gorze (...) a nizej to pelne
   logo Dobry Vibe ale wieksze". Znak "DV" zostal usuniety z tresci sekcji, wiec regula ponizej nie ma juz
   czego stylowac — zostawiam ja NIEUZYWANA CELOWO i podpisana, zamiast kasowac: plik dobryvibe-logo.png
   dalej lezy w katalogu i gdyby znak wrocil w innym miejscu, ma gotowy rozmiar. Gdyby regula zniknela bez
   sladu, nastepny dopisujacy zaczynalby od zera. */
.tenx-dv-logo {
    display: block;
    margin: 0 auto 14px;
    width: clamp(120px, 14vw, 200px);
    height: auto;
}

/* @admin: Franek 2026-08-12 — logo z pelna nazwa ma byc WIEKSZE, bo po usunieciu znaku "DV" i slowa
   "DobryVibe" z naglowka to ono niesie teraz nazwe kolektywu samo. Rozmiar podniesiony z
   clamp(200px, 26vw, 380px) na clamp(280px, 40vw, 560px): dolna granica rosnie o 80 px (telefon),
   gorna o 180 px (pulpit), a srodkowa wartosc z 26vw na 40vw — czyli na telefonie logo zajmuje okolo
   40 procent szerokosci ekranu zamiast czwartej czesci. Gorny margines dodany, bo naglowek "Kolektyw"
   stoi teraz NAD logiem i bez odstepu obie rzeczy sie sklejaly. */
.tenx-dv-napis {
    display: block;
    margin: 6px auto 30px;
    width: clamp(280px, 40vw, 560px);
    height: auto;
}

.tenx-dv-mozaika {
    position: relative;
    margin: 30px auto 0;
    max-width: 900px;
    border-radius: 8px;
    overflow: hidden;
}

.tenx-dv-mozaika img {
    display: block;
    width: 100%;
    height: auto;
}

.tenx-dv-mozaika__akcje {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 18px 20px;
    background: linear-gradient(to bottom, rgba(10,5,19,0) 0%, rgba(10,5,19,.8) 60%, rgba(10,5,19,.94) 100%);
}

.tenx-dv-mozaika__akcje .e-grid {
    margin-top: 0 !important;
}

.tenx-dv-mozaika__akcje .e-con-inner {
    gap: 14px !important;
    justify-content: center;
}

/* @admin: Franek 2026-08-11 — "jak klikam po menu to nie kazda strona sie zaczyna od gory tylko od gory
   jest z 30% pustki - kazda ma byc od gory tak jak o mnie".

   ZMIERZONE, sekcja po sekcji, odleglosc od gornej krawedzi sekcji do PIERWSZEGO widocznego elementu:
   na monitorze 1440 wychodzilo STALE 220 px w kazdej sekcji, a przy Plycie 270 px — czyli 30 procent
   wysokosci widoku, dokladnie tyle, ile zglosil Franek. Roznica miedzy sekcjami nie brala sie z ustawienia,
   tylko z ILOSCI TRESCI: tam gdzie tresci duzo, jak w O mnie, te same 220 px to 22 procent i mniej razi.

   Odstep schodzi do 96 px — tyle, ile potrzeba pod przyklejony pasek nawigacji, zeby naglowek nie wchodzil
   pod menu. Sekcja pierwsza (hero) zostaje NIETKNIETA, bo tam pusty pas u gory jest kompozycja, a nie wada.
   Na telefonie motyw ma wlasne ujemne marginesy i tam luki byly juz male (43-93 px), wiec regula obejmuje
   wylacznie ekrany od 1025 px w gore. */
@media (min-width: 1025px) {
    .ptf-section:not(:first-of-type) .ptf-section__content {
        padding-top: 96px !important;
    }
}

/* @admin: Franek 2026-08-12 (grupa „Glor-Ja Biznes", z filmikiem) — "po kliku w menu nie kazda strona
   zaczyna sie od gory tylko jest 30% puste bez sensu na mobile".

   DLACZEGO REGULA WYZEJ NIE WYSTARCZYLA: obejmuje wylacznie ekrany od 1025 px, bo gdy ja pisano, na
   telefonie luki byly male (43-93 px). Ale mierzono to, GDY DZIALALO JESZCZE CENTROWANIE W PIONIE —
   po jego zdjeciu (blok wyzej) tresc siada na gornej krawedzi i dopiero wtedy widac pelny padding.

   ZMIERZONE NA ZYWO przy szerokosci 375 px, wszystkie dziewiec sekcji: padding-top wynosi wszedzie
   192,5 px, ale motyw dokłada `margin-top: -150px` TYLKO CZESCI z nich. Stad rozjazd, ktory Franek
   widzial na filmiku:
     z ujemnym marginesem (naglowek 43-93 px od gory): O mnie, Nauka wokalu, Plyta, Wystepy, Kontakt
     BEZ ujemnego marginesu (naglowek 193 px):        Jingle, Projekt Hiszpanski
   Czyli sekcje DOPISANE pozniej nie dostaly kompensacji, ktora maja stare — i to one wygladaly na
   „zaczynajace sie od 30% w dol". To nie byla wlasciwosc tresci, tylko tego, czy motyw akurat dal margines.

   ROZWIAZANIE: na waskich ekranach ustawiamy odstep JAWNIE i JEDNAKOWO dla wszystkich sekcji poza
   pierwsza, zamiast polegac na tym, ze motyw dołozy ujemny margines. 48 px jest blisko wzorca, ktory
   Franek wskazal jako dobry („tak jak o mnie" — tam bylo 53 px), i mieści sie w przedziale sekcji
   uznanych za poprawne (43-93 px). Sekcja pierwsza (hero) zostaje NIETKNIETA, bo tam pusty pas u gory
   jest kompozycja, a nie wada. Nowe sekcje dopisane w przyszlosci dostana ten odstep automatycznie. */
@media (max-width: 1024px) {
    .ptf-section:not(:first-of-type) .ptf-section__content {
        padding-top: 48px !important;
        margin-top: 0 !important;
    }
}

/* @admin: Franek 2026-08-11 ze zrzutem — w sekcji "Prowadze zajecia z wydobycia glosu" cytat stal u gory
   prawej kolumny, a podpis autora grubo nizej. ZMIERZONE: dol cytatu na 2150 px, gora podpisu na 2260 px,
   czyli 110 px pustki miedzy zdaniem a nazwiskiem tego, kto je powiedzial. Cytat i podpis maja czytac sie
   jako JEDEN blok, wiec odstep schodzi do 28 px. */
.ptf-testimonial-item__footer {
    margin-top: 28px !important;
}

/* @admin: menu gorne nachodzilo na ikony spolecznosciowe po dolozeniu pozycji "Jingle" (polecenie Franka
   2026-08-10). ZMIERZONE NA ZYWO przy dziewieciu pozycjach i domyslnym odstepie 45 px: 1589 px zapas 116 px,
   1389 px zapas 16 px, 1289 px NACHODZI o 54 px, 1139 px o 94 px, 1039 px o 144 px. Sprawdzone takze na
   ZYWEJ stronie sprzed zmiany: przy osmiu pozycjach zapas na 1271 px wynosil zaledwie 18 px, czyli pasek
   byl juz na granicy, a ponizej ~1050 px nachodzil TAKZE BEZ Jingla — wiec to nie jest wylacznie regres
   mojej zmiany, tylko wada, ktora ta zmiana ujawnila i ktora naprawiam razem z nia.
   Odstep 24 px zamiast 45 px oszczedza 21 px na kazdej z osmiu przerw, czyli 168 px — z zapasem pokrywa
   najgorszy zmierzony przypadek (144 px). Powyzej 1450 px odstep zostaje pelny, bo tam miejsca nie brakuje
   i sciesnianie pogorszyloby wyglad bez powodu. */
@media (min-width: 1201px) and (max-width: 1450px) {
  .sf-menu > li + li { margin-left: 24px !important; }
}
/* Najciasniejsze pasmo pulpitu. Zmierzone przy 1139 px: pasek menu ma 922 px szerokosci i zaczyna sie na
   105 px, a pierwsza ikona stoi na 941 px — na menu zostaje wiec 836 px. Osiem przerw po 12 px zamiast 45
   sciaga pasek do 826 px i miesci go z zapasem. Ponizej 1025 px menu przejmuje panel wysuwany i regula
   przestaje obowiazywac. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .sf-menu > li + li { margin-left: 12px !important; }
  .sf-menu > li > a { font-size: 14px !important; }
  /* pasek ma 32 px wciecia od lewej, ktore w tym pasmie jest czysta strata — przy 1039 px zapas wynosil
     bez tego zaledwie 7 px, czyli poprawka trzymala sie na wlos. */
  .sf-menu { padding-left: 0 !important; }
}

/* @admin: Franek 2026-08-12 (grupa „Glor-Ja Biznes") — "na duzym monitorze widac ze nie wszystkie sekcje
   sa rowno (...) jingle reklamowe sa dalej od lewej niz poprzedzajace zajecia z glosu" oraz "lewa i prawa
   krawedz wszedzie ma byc rowno i ma byc spojnie".

   ZMIERZONE przy 1920 px, lewa krawedz naglowka w kazdej z dziewieciu sekcji. Kontenery sa IDENTYCZNE
   (lewa 305, prawa 316, szerokosc 1300, padding 15/15) — rozjazd powstawal WEWNATRZ nich i miał TRZY
   rozne zrodla, dlatego jedna regula by go nie zamknela:
     Jingle i Kolektyw DobryVibe .. 536 px — jako jedyne siedzialy w waskiej, wysrodkowanej kolumnie
                                    (row justify-content-center + col-lg-8); poprawione w index.html
                                    na col-lg-12, czyli tak jak Projekt Hiszpanski;
     O mnie ..................... 385 px — kontener wewnetrzny Elementora ma margin-left 55px;
     Plyta ...................... 340 px — opakowanie widgetu ma padding-left 20px;
     pozostale piec ............. 320 px — wzorzec, do ktorego rownamy.

   Ponizsze dwie reguly zeruja te dwa odsuniecia. NIE ustawiam globalnego "wszystko na zero", bo te same
   klasy Elementora wystepuja w calym dokumencie i wyzerowanie ich hurtem ruszyloby takze uklady, ktore sa
   poprawne — celuje wiec w konkretne sekcje po ich kotwicy. */
[data-anchor="O mnie"] .e-con-inner {
    margin-left: 0 !important;
}

/* @admin: po wyzerowaniu marginesu zostalo jeszcze 10 px roznicy (330 zamiast 320) — bierze sie z paddingu
   na kontenerze Elementora o poziom wyzej. Zerowany osobno, bo to inny element i inna wlasciwosc; gdyby
   scalic obie reguly w jedna, nastepny czytajacy nie wiedzialby, ktora z dwoch rzeczy odsuwala tresc. */
[data-anchor="O mnie"] > .ptf-section__vertical-align .elementor > .elementor-element {
    padding-left: 0 !important;
}

/* @admin: Franek 2026-08-12, ze zrzutem z telefonu — „w boksie nagrywam plyte daj padding bo zobacz jak
   to dziala napisy sa przyklejone do bordera". MOJ WLASNY BLAD Z TEGO SAMEGO DNIA: wyrownujac lewa
   krawedz sekcji wyzerowalem tu `padding-left`, nie zauwazajac, ze TEN SAM element jest ciemnym boksem
   z tlem rgba(6,3,12,.92). Efekt: tresc wyrownala sie z reszta strony, ale przykleila do krawedzi boksu.
   PROBOWALEM NAJPIERW przesunac caly boks w lewo o te sama wartosc, zeby TEKST zostal na linii innych
   sekcji — i ODRZUCILEM to po pomiarze na zywej stronie: boks wychodzil wtedy 9 px poza lewa krawedz
   okna, czyli tracil wlasna ramke. Zostaje wersja prostsza i wlasciwa dla boksu z tlem: to KRAWEDZ
   BOKSU trzyma linie pozostalych sekcji, a tekst siedzi w srodku z odstepem. Wyrownanie, o ktore Franek
   prosil wczesniej, dotyczylo krawedzi sekcji, a nie wciecia tekstu wewnatrz kontenera z tlem. */
[data-anchor="Płyta"] .elementor-widget-wrap {
    padding-left: 24px !important;
}

/* @admin: Franek 2026-08-12 — „z wystepow wyjeb jednak to tlo i niech normalnie ta sekcia sie wyswietla
   a nie jeszcze z podwojnym tlem - oba tla wyjeb". Zmierzone na zywej stronie PRZED zmiana: sekcja miala
   TRZY warstwy jedna na drugiej — wlasne zdjecie z wp-content (strona-foto-scaled), przyciemnienie
   rgba(6,3,12,.92) na slajdzie i DRUGIE takie samo przyciemnienie w warstwie ::before tego slajdu.
   Zdejmowane sa wszystkie trzy; zostaje zwykle tlo strony. To jest DRUGIE cofniecie w tej sekcji:
   11 sierpnia zdjeta zostala mozaika, teraz reszta — czyli wracamy do stanu bez zadnej dekoracji. */
[data-anchor="Występy"],
[data-anchor="Występy"].ptf-section {
    background-image: none !important;
}

[data-anchor="Występy"] .swiper-slide,
[data-anchor="Występy"] .swiper-slide::before {
    background-color: transparent !important;
    background-image: none !important;
}

/* @admin: Franek 2026-08-12 (grupa „Glor-Ja Biznes", ze zrzutem) — "krzywo napis kolektyw nie jest na srodku".
   MOJ BLAD Z POPRZEDNIEJ POPRAWKI: wyrownujac sekcje do lewej zdjalem z tej kolumny `text-center`, ale
   logo "Dobry Vibe" centruje sie WLASNYM `margin: auto`, a nie dziedziczonym wyrownaniem tekstu. Skutek:
   logo zostalo na srodku, a naglowek "Kolektyw" pojechal do lewej krawedzi — i wlasnie ta roznica wyglada
   krzywo. Zdjecie centrowania w jednym miejscu nie zdjelo go w drugim, bo robia to DWA rozne mechanizmy.
   Naglowek wraca na srodek, do logo. Tekst opisowy ZOSTAJE do lewej — dluzszy akapit wysrodkowany czyta sie
   gorzej, a Franek pisal wylacznie o napisie. Reszta sekcji bez zmian. */
[data-anchor="Kolektyw DobryVibe"] .ptf-heading {
    text-align: center !important;
}

/* @admin: Franek 2026-08-12 — „te wystepy rowno od lewej do kontenera ta lista bo tam jest z 10-15px
   jakis padding/margin na mobile" (i prosba, zeby sprawdzic takze pulpit). ZMIERZONE na zywej stronie:
   naglowek sekcji i kontener stoja na 15 px, a pasek lat oraz zdjecie z listy na 35 px — czyli 20 px
   odsuniecia, dokladnie tyle, ile wynosi `padding: 20px` na `.swiper-slide` w tej osi czasu. Roznica
   jest ta sama na pulpicie i na telefonie, bo to staly padding, a nie regula z zapytania medialnego.
   Zdejmowana jest WYLACZNIE lewa strona — gorny i dolny odstep sa potrzebne, zeby elementy osi nie
   sklejaly sie ze soba. */
[data-anchor="Występy"] .ptf-timeline-slider .swiper-slide,
[data-anchor="Występy"] .swiper-slide {
    padding-left: 0 !important;
}

/* @admin: Franek 2026-08-12 — „te obrazki na wystepach z 2026 nie maja takiej bialej ramki i nie jest
   spojne zrob ze na wystepach wszystkie tam obrazki maja biale ramki jak te z 2025 albo ten z debiuty
   huty". ZMIERZONE: ramke 5 px bialego mial plakat „Debiuty Huty" i wszystkie piec zdjec z 2025, a NIE
   mialy jej cztery zdjecia z 2026 (balans, mandala, organic, zrodlo) — to te, ktore doszly pozniej,
   bez klasy nadawanej przez motyw. Zamiast dopisywac klase do kazdego z osobna, regula obejmuje CALA
   sekcje: kazde zdjecie w osi czasu wystepow dostaje te sama ramke, wiec kolejne dodane zdjecie tez ja
   bedzie mialo i niespojnosc nie wroci. */
/* Regula bez wymuszenia NIE dzialala mimo poprawnego selektora i wgranego pliku (sprawdzone: obrazek
   jest wewnatrz obu kontenerow, arkusz na serwerze zawiera regule, strona ladowala biezaca wersje) —
   nadpisywal ja pozniejszy styl motywu. Stad !important, tak jak w reszcie tej warstwy. */
[data-anchor="Występy"] .tenx-rok img,
[data-anchor="Występy"] .ptf-timeline-item img {
    border: 5px solid #fff !important;
}

/* @admin: Franek 2026-08-17 (na monitorze 3840x1964, ze zrzutem sekcji Home): "te strony nie sa wysrodkowane
   pionowo", "zrob zeby sie zwiekszalo podobnie jak ta oferta (...) ale na mobile ma dzialac jak dziala",
   "wysokosc kazdej podstrony musi sie obliczac na wysokosc monitora na desktopie i wysrodkowywac pionowo".
   DESKTOP (okno poziome od 1200 px): kazda sekcja to jeden ekran (min-height 100svh zostaje z regul wyzej),
   a tresc jest w nim WYSRODKOWANA W PIONIE. Sekcja jest kolumna flex, wiec pion to justify-content —
   align-items na .ptf-section__vertical-align (regula wyzej, poprawka z 2026-08-12 dla telefonu) dotyczy
   poziomu i zostaje bez zmian. Zapytanie medialne pilnuje, ze telefon (okno pionowe) NIE dostaje centrowania:
   tam Franek 2026-08-12 kazal zaczynac kazda sekcje od gory. Powiekszenie tresci (jak w ofercie duetu, ktora
   skaluje slajd do okna) robi tenx/normal-scroll.js — CSS nie zna wysokosci tresci, a skala ma byc taka,
   zeby sekcja miescila sie na jednym ekranie. */
@media (min-width: 1200px) and (orientation: landscape) {
    .ptf-section,
    .pp-section {
        justify-content: center !important;
    }
}

/* @admin: Franek 2026-08-17 — spojnosc sekcji przy wspolnym powiekszeniu (patrz blok w normal-scroll.js):
   (1) "wszystko ma byc spojne": akapity w sekcjach Jingle, Projekt Hiszpanski i Kolektyw mialy domyslne
       pismo motywu (16 px, szary #939393), a O mnie / Nauka wokalu / Plyta biale 15 px z wiersza 24 px —
       Franek: "jingle reklamowe maja opis inny kolor czcionki jakis szary". Ujednolicone do bialego 15/24
       jak w pierwotnych sekcjach strony.
   (2) zdjecie duetu w Projekt Hiszpanski (1400x1590 na cala szerokosc kontenera = 1476 px wysokosci)
       nie mieszczilo sie na zadnym ekranie i jako JEDYNE trzymalo wspolna skale przy 1x — na desktopie
       dostaje maksymalna szerokosc, przy ktorej ma okolo 700 px wysokosci; przyciski leza dalej na zdjeciu.
   (3) html.tenx-zoom: gdy dziala wspolne powiekszenie, WYLACZAMY osobne powiekszenia hero dla ekranow
       powyzej 1920 px (naglowek 7vw, przycisk, ikona) — inaczej hero roslo podwojnie (7vw z okna 3840 = 268 px,
       a potem jeszcze zoom) i wygladalo jak z innej strony niz reszta.
   (4) "tam jak jest ta opinia od Bartek to tam sa strzalki od przelaczania - ukryj strzalki bo jest tylko
       jedna opinia": nawigacja karuzeli opinii schowana. */
[data-anchor="Jingle"] .ptf-section__content p,
[data-anchor="Projekt Hiszpański"] .ptf-section__content p,
[data-anchor="Kolektyw DobryVibe"] .ptf-section__content p {
    color: #fff;
    font-size: 15px;
    line-height: 24px;
}

.ptf-testimonial-item__navigation {
    display: none !important;
}

@media (min-width: 1200px) and (orientation: landscape) {
    .tenx-foto-duo {
        max-width: 620px;
    }
}

html.tenx-zoom .elementor-77 h1.ptf-heading {
    font-size: 138px !important;
    line-height: 1.05 !important;
}
html.tenx-zoom .elementor-77 .elementor-element-6d8093e .elementor-button {
    font-size: 18px !important;
    padding: 20px 25px !important;
}
html.tenx-zoom .elementor-77 .elementor-element-d74171d .elementor-icon {
    width: 56px !important;
    height: 56px !important;
}

/* @admin: Franek 2026-08-17 — "na desktopie jak jest o mnie to po lewej opis a po prawej zdjecie ma byc
   i ma wygladac dobrze, to samo duo gloria i aleksander". Wspolny uklad dwoch kolumn (.tenx-dwie-kolumny)
   dla obu sekcji: naglowek nad calosci, nizej tekst po lewej i zdjecie po prawej, wysrodkowane wzgledem
   siebie. Na telefonie (i oknie pionowym) kolumny ida jedna pod druga, a zdjecie WRACA NAD tekst (order),
   czyli dokladnie tak, jak bylo — "na mobile ma dzialac jak dziala". Szerokosci kolumn ze zdjeciem:
   O mnie 340 px (plik zrodlowy ma 510 px, przy powiekszeniu 1,6x to niemal 1:1 — szerzej byloby rozmyte),
   duet 480 px (zdjecie 1400x1590, ostre). Wczesniejsze ograniczenie .tenx-foto-duo do 620 px zdjete
   w tym ukladzie — szerokosc trzyma kolumna. */
.tenx-dwie-kolumny {
    display: flex;
    flex-direction: column;
}
.tenx-dwie-kolumny__foto {
    order: -1;
}
/* Duet: naglowek jest wewnatrz wiersza (lewa kolumna) — na telefonie ma isc PRZED zdjeciem, jak dotad. */
.tenx-duo > .ptf-heading {
    order: -2;
}
@media (min-width: 1200px) and (orientation: landscape) {
    .tenx-dwie-kolumny {
        flex-direction: row;
        align-items: center;
        gap: 56px;
    }
    .tenx-dwie-kolumny__tekst {
        flex: 1 1 0;
        min-width: 0;
    }
    .tenx-dwie-kolumny__foto {
        order: 0;
    }
    .tenx-omnie .tenx-dwie-kolumny__foto {
        flex: 0 0 340px;
    }
    /* @admin: Franek 2026-08-17 (zrzut): "zdjecie ma sie od gory zaczynac rowno z duo gloria i aleksander
       i ten opis zaraz pod headerem bo jakis dziwny odstep". Duet jako siatka: naglowek i opis w lewej
       kolumnie jeden pod drugim, zdjecie w prawej przez oba wiersze, wyrownane DO GORY — gora zdjecia
       = gora naglowka, opis 30 px pod naglowkiem (jego wlasny margines). Centrowanie wzgledem zdjecia
       (jak w O mnie) dawalo tu pusty pas nad krotkim opisem. */
    .tenx-duo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 480px;
        /* wiersz 1 = sam naglowek, cala reszta wysokosci zdjecia idzie do wiersza 2 — bez tego siatka
           dzielila nadmiar po rowno i opis ladowal 300 px pod naglowkiem */
        grid-template-rows: max-content 1fr;
        /* gap: 0 56px, nie column-gap — wspolna regula .tenx-dwie-kolumny daje gap 56px, ktory w siatce
           dziala tez miedzy wierszami i odsuwal opis od naglowka o dodatkowe 56 px */
        gap: 0 56px;
        align-items: start;
    }
    .tenx-duo > .ptf-heading {
        grid-column: 1;
        grid-row: 1;
        order: 0;
    }
    .tenx-duo .tenx-dwie-kolumny__tekst {
        grid-column: 1;
        grid-row: 2;
    }
    .tenx-duo .tenx-dwie-kolumny__foto {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    .tenx-duo .tenx-foto-duo {
        max-width: none;
        margin: 0;
    }
    .tenx-dwie-kolumny__foto img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    [data-anchor="O mnie"] .tenx-dwie-kolumny__foto img {
        margin: 0;
    }
    /* Kontener Elementora w O mnie ma z motywu max-width 1140 px, a sekcja duetu 1300 px — zdjecie O mnie
       konczyloby sie 250 px wczesniej niz zdjecie duetu. Zdejmujemy limit i prawy padding wewnetrzny, zeby
       prawa krawedz obu zdjec byla ta sama (zmierzone: 3127 px na 3840). Lewa krawedz zostaje bez zmian. */
    [data-anchor="O mnie"] .e-con-inner {
        max-width: 100% !important;
        padding-right: 0 !important;
    }
}

/* @admin: Franek 2026-08-17 — "kolektyw dobry vibe na desktopie to tak - logo Dobry Vibe nanies na ta mozaike
   i ta mozaika ma miec szerokosc kontenera i opis pod spodem tez szerokosc kontenera".
   Desktop: .tenx-dv-scena (opakowanie logo + mozaika) jest ukladem odniesienia, logo lezy absolutnie na
   srodku mozaiki (lekko nad srodkiem, zeby nie wchodzic w przycisk u dolu) z cieniem dla czytelnosci na
   pstrym tle; mozaika bez limitu 900 px = pelna szerokosc kontenera; akapity opisu bez limitu 690 px =
   pelna szerokosc kontenera. Naglowek "Kolektyw" wraca do lewej — centrowanie z 2026-08-12 bylo po to,
   zeby stal rowno z centrowanym logo POD nim; teraz logo jest na mozaice, a Franek chce jednej lewej
   linii dla wszystkich sekcji. Telefon: bez zmian (logo nad mozaika, naglowek na srodku, tekst 690 px). */
@media (min-width: 1200px) and (orientation: landscape) {
    .tenx-dv-scena {
        position: relative;
        margin: 0 0 26px;
    }
    .tenx-dv-scena .tenx-dv-napis {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -62%);
        width: 44%;
        max-width: none;
        margin: 0;
        z-index: 2;
        pointer-events: none;
        filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .85)) drop-shadow(0 0 2px rgba(0, 0, 0, .9));
    }
    .tenx-dv-scena .tenx-dv-mozaika {
        max-width: none;
        margin: 0;
    }
    [data-anchor="Kolektyw DobryVibe"] .ptf-section__content p {
        max-width: none;
    }
    [data-anchor="Kolektyw DobryVibe"] .ptf-heading {
        text-align: left !important;
    }
}

/* @admin: Franek 2026-09-07, grupa "Landingi" — "na stronie glor-ja to menu nie jest wysrodkowane
   a do elementow instagram db itp trzeba scrollowac to ma byc na stronie od razu od gory widoczne
   to menu zeby nie trzeba bylo scrollowac".

   ZMIERZONA PRZYCZYNA (okno 1282 px, pomiar w przegladarce):
     .ptf-navbar-inner       -> flex, justify-content:space-between, troje dzieci
     .ptf-navbar-inner--left   x55-55   (szerokosc ZERO - logo puste)
     .ptf-navbar-inner--center x0-1271  position:absolute; left:0; right:0  <- menu na CALA szerokosc paska
     .ptf-navbar-inner--right  x1048-1216 (ikony: Spotify, Facebook, Instagram, YouTube)
     #menu-onepage-menu      -> display:flex, justify-content:normal (do lewej), li{margin-left:24px}, a{15px}
     tresc menu = 929 px tekstu + 10 x 24 px odstepow = 1169 px

   Skutek: blok menu jest rozciagniety na caly pasek i NIE WIE, ze po prawej stoja ikony. Ostatnia
   pozycja "Kontakt" (x1173-1231, y-8..80) NACHODZI na ikone YouTube (x1198-1216, y35-53) - menu wchodzi
   pod ikony, zamiast konczyc sie przed nimi. Ponizej ~1400 px szerokosci okna to dotyczy kazdego ekranu.

   Poprawka - trzy rzeczy, wszystkie w warstwie wlasnej:
     1) blok srodkowy dostaje wciecie z obu stron, wiec nie moze juz wejsc pod ikony ani pod logo,
     2) pozycje menu ida OD LEWEJ krawedzi tego bloku (justify-content:flex-start),
        UWAGA: pierwotnie bylo tu wysrodkowanie i to bylo NADMIAROWE — zgloszenie dotyczylo
        nachodzenia na ikony, ktore rozwiazuja same wciecia; poprawione 2026-09-08 na rozkaz Franka,
     3) odstep i stopien pisma skaluja sie plynnie przez clamp() - bez progu, ktory na jednej
        szerokosci wyglada dobrze, a 20 px obok znowu nachodzi.

   Zakres od 992 px w gore - ponizej motyw sam przechodzi na menu wysuwane (.ptf-offcanvas-menu). */

@media (min-width: 992px) {

    /* @admin: Franek 2026-09-08: "zes naprawil menu mobilne i SPIERDOLILES MENU DESKTOPOWE BO NIE JEST
       OD LEWEJ" + "Home ma byc w jednej lini od lewej pionowo razem z kontenerem". WYSRODKOWANIE POZIOME
       BYLO MOJE I BYLO NADMIAROWE: zgloszenie z 2026-09-07 dotyczylo NACHODZENIA pozycji "Kontakt" na
       ikone YouTube, a to rozwiazuja same WCIECIA bloku (left/right ponizej). Dolozone do nich
       justify-content: center przesunelo cale menu na srodek paska, czego nikt nie prosil — ten sam blad
       co przy menu mobilnym dzien wczesniej (commit efd700501), tylko na drugim koncu zakresu.
       Teraz od lewej, a wyrownanie idzie do KONTENERA tresci, nie do krawedzi okna. */
    /* @admin: WCIECIA ZDJETE 2026-09-08. Byly tu left:60px i right:200px, zeby menu nie wchodzilo pod
       ikony. Skutek uboczny, ktorego wtedy nie zmierzylem: wciecia zmieniaja szerokosc dostepna dla
       .container, a ten ma marginesy automatyczne — wiec kontener NAWIGACJI przestal stac tam, gdzie
       kontenery SEKCJI. Zmierzone przy oknie 1600: sekcje i naglowek hero zaczynaja tresc na x=165,
       a menu z wcieciami ladowalo na x=95. Franek: "Home ma byc w jednej lini od lewej pionowo razem
       z kontenerem". Po zdjeciu wciec kontener nawigacji wraca do geometrii motywu, czyli tam gdzie
       sekcje. Nachodzenie na ikony rozwiazuje juz samo wyrownanie DO LEWEJ (menu konczy sie przed
       ikonami) plus skalowanie clamp() ponizej — sprawdzone pomiarem na czterech szerokosciach. */
    .ptf-navbar-inner .ptf-navbar-inner--center {
        justify-content: flex-start !important;
        /* @admin: wypelnienie 15 px na TYM bloku (nie na nawigacji nizej — tam zdjelem je najpierw
           i to NIC nie dalo, bo winowajca byl o poziom wyzej) zwezalo kontener paska wzgledem
           kontenera tresci. Widac to WYLACZNIE w pasmie 1200-1300 px, gdzie kontener tresci idzie na
           cala szerokosc: Home stal na x=30, a naglowek hero na x=15. Powyzej 1300 px roznicy nie ma,
           bo kontener miesci sie w maksymalnej szerokosci i marginesy automatyczne i tak go centruja —
           dlatego pomiar na jednej, szerokiej rozdzielczosci tego bledu NIE POKAZUJE. */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ptf-navbar-inner--center #menu-onepage-menu {
        justify-content: flex-start !important;
    }

    /* Miedzy blokiem srodkowym a lista stoja jeszcze .container i nav.ptf-default-menu__navigation.
       To NAV (x90-1041, justify-content:normal) dosuwal liste do lewej - samo wysrodkowanie bloku
       i samej listy nic nie dawalo, bo lista jest elementem flex o szerokosci wlasnej tresci. */
    .ptf-navbar-inner--center .ptf-default-menu__navigation {
        justify-content: flex-start !important;
        /* @admin: to wypelnienie 15 px zwezalo kontener paska wzgledem kontenera tresci. Przy szerokich
           oknach roznicy nie widac, bo kontener ma marginesy automatyczne i i tak sie wysrodkowuje —
           ale w pasmie 1200-1300 px, gdzie kontener tresci idzie na CALA szerokosc, menu zostawalo
           15 px na prawo od naglowka. Zmierzone przed poprawka: przy 1250 px Home na x=30, a naglowek
           hero na x=15; przy 1600 px oba na 165, wiec goly pomiar na jednej szerokosci by tego nie
           pokazal. Zdjecie wypelnienia zrownuje oba kontenery na KAZDEJ szerokosci. */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ptf-navbar-inner--center #menu-onepage-menu {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ptf-navbar-inner--center #menu-onepage-menu > li {
        margin-left: clamp(6px, 0.8vw, 24px) !important;
    }

    .ptf-navbar-inner--center #menu-onepage-menu > li:first-child {
        margin-left: 0 !important;
    }

    .ptf-navbar-inner--center #menu-onepage-menu > li > a {
        font-size: clamp(12px, 0.9vw, 15px) !important;
        white-space: nowrap !important;
    }
}

/* @admin: Franek 2026-09-07, grupa "Landingi" — "menu jest na stronie bez sensu zduplikowane
   wywal 'Gloria & Aleksander Duo' samo Projekt Hiszpanski zostaje".

   Ta pozycja (menu-item-duo w pasku i menu-item-duo-1 w menu wysuwanym) prowadzila pod
   #Projekt%20Hiszpa%C5%84ski, czyli DOKLADNIE ten sam adres co pozostajaca pozycja "Projekt
   Hiszpanski" — byla wiec dwoma przyciskami do jednego miejsca. Usunieta z index.html.

   SKUTEK DLA POWYZSZEJ POPRAWKI, dlatego stoi to tutaj: menu skrocilo sie o ~150 px i miesci sie
   teraz w jednym rzedzie az do 1024 px (zmierzone: 1180/1100/1024 -> 0 kolizji, 4/4 ikony w kadrze,
   odstep do ikon 119/82/46 px). Wczesniejsza wersja tego pliku przelaczala pasmo 992-1199 px na
   hamburgera, bo przy 11 pozycjach menu fizycznie sie tam nie miescilo. Ten przelacznik zostal
   USUNIETY, a nie obudowany wyjatkiem: chowalby menu, ktore sie miesci. Prog regul pulpitu zszedl
   z 1200 na 992 px, czyli dokladnie tam, gdzie motyw sam przechodzi na menu wysuwane. */

/* @admin: Franek 2026-09-07, grupa "Landingi" — "mi chodzilo o menu na mobile a ty co kurwa
   poprawialem?" oraz pierwotnie: "do elementow instagram db itp trzeba scrollowac to ma byc na stronie
   od razu od gory widoczne to menu zeby nie trzeba bylo scrollowac".

   POPRZEDNIA POPRAWKA DOTYCZYLA PULPITU I BYLA ODPOWIEDZIA NA ZLE POSTAWIONE PYTANIE. Na telefonie
   menu to wysuwana szuflada .ptf-offcanvas-menu, i to w niej trzeba bylo przewijac.

   ZMIERZONE na zywej stronie (CDP, urzadzenie mobilne):
     375x667 (iPhone SE): tresc siega y=766 przy wysokosci okna 667 -> 4 odnosniki POZA EKRANEM
                          (Spotify, Facebook, INSTAGRAM, YouTube), do przewiniecia 98 px
     390x844 (iPhone 14): miesci sie, 0 px do przewiniecia
     430x932            : miesci sie, 0 px do przewiniecia
   Czyli wada dotyczy NISKICH ekranow, nie waskich - dlatego warunek ponizej jest na WYSOKOSC.

   PRZYCZYNA: naglowek szuflady ma padding-bottom 87,5 px, a stopka padding-top 87,5 px - RAZEM 175 px
   samego wypelnienia, podczas gdy rzad ikon ma 33 px wysokosci. To odstepy zaprojektowane pod duzy
   ekran, ktore nie maleja, gdy ekranu jest mniej. Nie ruszam stopnia pisma ani odstepow miedzy
   pozycjami - wystarczy oddac te wypelnienia, zeby ikony weszly nad krawedz. */

@media (max-width: 991px) and (max-height: 780px) {

    .ptf-offcanvas-menu__header {
        padding-bottom: 24px !important;
    }

    .ptf-offcanvas-menu__footer {
        padding-top: 24px !important;
    }
}

/* Drugi, ciasniejszy prog. Po pierwszej poprawce ekran 360x640 mial tresc do y=638 przy wysokosci
   640 - miesci sie, ale 2 px zapasu to nie jest zapas, tylko przypadek. Prawdziwy telefon oddaje
   jeszcze mniej wysokosci na pasek adresu, wiec na najnizszych ekranach oddajemy wypelnienia dalej. */
@media (max-width: 991px) and (max-height: 680px) {

    .ptf-offcanvas-menu__header {
        padding-bottom: 12px !important;
    }

    .ptf-offcanvas-menu__footer {
        padding-top: 12px !important;
    }
}

/* @admin: Franek 2026-09-07 — "to mialo byc wysrodkowanie PIONOWE a nie poziome, na chuj tam
   zrobiles text align center". Mial racje: text-align dotyczy poziomu. Ponizej wysrodkowanie
   w PIONIE — cala tresc szuflady (naglowek z krzyzykiem, pozycje, ikony) jest jednym blokiem
   ustawionym na srodku wysokosci ekranu, wiec luz nad nia i pod nia jest rowny.
   Zmierzone przed: tresc y35-614 przy oknie 667, luz gora 35 / dol 53 (srodek 324 wobec 334).
   Poziome wysrodkowanie zostaje, bo bylo przesuniete o 11 px i teraz jest poprawne. */
@media (max-width: 991px) {

    .ptf-offcanvas-menu {
        justify-content: center !important;
        /* Panel mial padding 35 px u gory i 52,5 px u dolu, a jego dzieci wypelnialy ten obszar
           dokladnie — dlatego samo justify-content nie mialo czego rozdzielic i tresc nie drgnela.
           Zrodlem nierownosci 35/53 bylo wlasnie to niesymetryczne wypelnienie. */
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
}

/* Na nizszych ekranach wypelnienie panelu tez musi zmalec, inaczej tresc znowu nie miesci sie
   w kadrze — wartosci dobrane tak, zeby przy 360x640 zostal realny zapas, a nie dwa piksele. */
@media (max-width: 991px) and (max-height: 780px) {

    .ptf-offcanvas-menu {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

@media (max-width: 991px) and (max-height: 680px) {

    .ptf-offcanvas-menu {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* @admin: Franek 2026-09-07 — "dlaczego dalej jest text align center na tych elementach menu, czemu
   to zmieniales, ma byc DO LEWEJ jak bylo, centrowanie tylko PIONOWE".
   Stalo tu wysrodkowanie POZIOME, ktore dodalem z wlasnej inicjatywy i zostawilem nawet po tym, jak
   Franek powiedzial, ze nie o to chodzilo. To byla zmiana jego decyzji, nie poprawka. USUNIETE —
   pozycje wracaja do wyrownania do lewej z motywu. W pionie zostaje wysrodkowanie z bloku wyzej. */