/* ==========================================
   Custom Text + Image - elegancki blok: tekst (nadnagłówek, nagłówek, treść,
   przycisk) po jednej stronie, zdjęcie po drugiej.
   Typografia nagłówka/treści (.cet-heading / .cet-content) oraz animacja
   (.cet-wrapper / .cet-animated / .cet-item) są WSPÓLNE z widgetem
   "Elegancki Blok Tekstowy" - patrz custom-text-block.css i elegant-animations.css.
   ========================================== */

.ctp-wrapper {
    padding: clamp(24px, 5vw, 64px) 0;
}

.ctp-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* Domyślnie "stretch" - kolumna tekstowa rozciąga się na całą wysokość zdjęcia
       (patrz "Rozmieszczenie tekstu w pionie" w panelu Elementora). */
    align-items: var( --ctp-align-items, stretch );
    gap: 60px;
    width: 100%;
}

/* Kolejność kolumn sterowana JEDNĄ zmienną (--ctp-text-order, ustawianą przez przełącznik
   "Zamień miejscami" w panelu Elementora) - dzięki "order" (zamiast flex-direction) ta sama
   wartość poprawnie odwraca układ zarówno przy zdjęciu obok tekstu (desktop),
   jak i przy kolumnach ułożonych jedna pod drugą (telefon/tablet). */
.ctp-text-col {
    display: flex;
    flex-direction: column;
    /* Domyślnie "space-between" - nadnagłówek, nagłówek, treść i przycisk rozkładają się
       równomiernie na całej (rozciągniętej) wysokości kolumny, żeby tekst wizualnie
       "wypełniał" tyle samo miejsca co zdjęcie obok. */
    justify-content: var( --ctp-justify-content, space-between );
    flex: 0 1 42%;
    max-width: 42%;
    /* Minimalna sensowna szerokość, zanim kolumna zacznie "łamać" wiersz (patrz flex-wrap
       na .ctp-row) zamiast kurczyć się w nieskończoność razem ze zdjęciem. */
    min-width: min(280px, 100%);
    order: var( --ctp-text-order, 1 );
}

.ctp-text-col .cet-heading,
.ctp-text-col .cet-content {
    max-width: 100%;
}

/* Nagłówek - ładniejsze, bardziej "wyważone" zawijanie linii (nowoczesne przeglądarki;
   w starszych po prostu zawija się normalnie, bez żadnego efektu ujemnego). */
.ctp-text-col .cet-heading {
    text-wrap: balance;
}

/* Treść - eleganckie wyjustowanie: równe prawe I lewe brzegi akapitu, jak w prasie/książkach.
   - text-align-last: left, żeby ostatnia linijka NIE była rozciągana na całą szerokość
     (wyglądałoby to nienaturalnie przy krótkim ostatnim wyrazie/dwóch).
   - hyphens: auto dzieli długie słowa przy justowaniu, żeby uniknąć dużych,
     "dziurawych" odstępów między wyrazami w wąskiej kolumnie.
   Wymaga poprawnie ustawionego atrybutu lang na stronie (WordPress robi to domyślnie),
   żeby przeglądarka dzieliła wyrazy według polskich reguł. */
.ctp-text-col .cet-content {
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Gdy elementy są rozkładane przez justify-content: space-between, dodatkowe marginesy
   (ustawiane w stylach nagłówka/treści/przycisku) mają nadal działać jako MINIMALNE odstępy,
   a nie się dublować z wolną przestrzenią - stąd zerujemy tu ewentualny "doklejony" odstęp
   na samej górze/dole kolumny. */
.ctp-text-col > .cet-item:first-child {
    margin-top: 0;
}

.ctp-text-col > .cet-item:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------
   Nadnagłówek: tekst + krótka, elegancka linia obok
   ------------------------------------------ */
.ctp-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.ctp-eyebrow-text {
    white-space: nowrap;
}

.ctp-eyebrow-line {
    display: inline-block;
    height: 1px;
    width: 40px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* ------------------------------------------
   Przycisk - prawdziwy, elegancki "obrys" (border) z wypełnieniem po najechaniu
   + animacja strzałki. Kolory/padding/obramowanie sterowane z panelu Elementora
   (sekcja Styl -> Przycisk); tu tylko "szkielet" zachowania.
   ------------------------------------------ */
.ctp-button,
.ctp-button:hover,
.ctp-button:focus,
.ctp-button:active,
.ctp-button:visited {
    /* !important na strukturalnych właściwościach - zabezpieczenie przed nadpisaniem przez
       ogólne style linków z motywu/Elementora (np. wymuszające display/szerokość na "a"),
       przez co tekst potrafił wyglądać na "zsunięty" w lewo zamiast być wyśrodkowany. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    gap: 10px;
    box-sizing: border-box;
    text-decoration: none !important;
    cursor: pointer;
    line-height: normal;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Przycisk ma "przylegać" do własnej treści (tekst + strzałka wyśrodkowane w środku),
   a NIE rozciągać się na całą szerokość kolumny - stąd width dopasowana do zawartości
   i align-self:flex-start (element flex domyślnie rozciąga dzieci na całą szerokość). */
.ctp-button {
    align-self: flex-start !important;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

.ctp-button-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctp-button:hover .ctp-button-arrow {
    transform: translateX(6px);
}

/* ------------------------------------------
   Kolumna ze zdjęciem
   ------------------------------------------ */
.ctp-image-col {
    flex: 1 1 260px;
    min-width: min(260px, 100%);
    height: 520px;
    overflow: hidden;
    position: relative;
    /* perspective - żeby "przechył" 3D zdjęcia przy paralaksie (patrz .cet-parallax
       niżej i elegant-animations.js) miał realną głębię, a nie tylko płasko się spłaszczał. */
    perspective: 1000px;
    /* Odwrotność --ctp-text-order (1<->2), żeby zawsze zajmować "drugie" miejsce względem tekstu */
    order: calc( 3 - var( --ctp-text-order, 1 ) );
}

/* Wewnętrzny kontener zdjęcia - to on faktycznie się porusza (paralaksa, patrz JS).
   WAŻNE: ma DOKŁADNIE taki sam rozmiar jak widoczne okno (.ctp-image-col) - dzięki temu
   "object-fit: cover" na obrazku w środku liczy kadrowanie tak samo, jak bez paralaksy
   (żadnych "uciętych" zdjęć). Zapas potrzebny na sam ruch dostaje przez subtelne,
   automatyczne przeskalowanie w transformacji (ustawiane przez JS na podstawie realnej
   wysokości i wybranej "Siły efektu") - a nie przez powiększanie samego pudełka. */
.ctp-image-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    /* Neutralne, ciemne tło "pod spodem" - na wypadek ułamka sekundy zanim
       załaduje się pierwsza klatka wideo (gdy nie ustawiono miniatury/poster)
       lub samo zdjęcie - lepsze niż domyślny biały błysk. */
    background-color: #111;
}

.ctp-image-col img,
.ctp-image-col video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctp-image-hover-zoom:hover img,
.ctp-image-hover-zoom:hover video {
    transform: scale(1.04);
}

/* ------------------------------------------
   Wideo w tle ("ambient", bez dźwięku, w pętli) - patrz widget PHP (tryb
   "Wideo" w sekcji Zdjęcie/wideo) i custom-text-image.js (odtwarzanie
   sterowane widocznością na ekranie). Celowo BEZ atrybutu "controls" w HTML,
   ale dodatkowo blokujemy tu wszystko, co mogłoby "wyskoczyć" mimo to -
   pointer-events: none, żeby najechanie/kliknięcie nigdy nie pokazało żadnej
   natywnej nakładki (np. przycisku Picture-in-Picture w Chrome), oraz
   jawne ukrycie natywnych kontrolek w przeglądarkach webkit jako druga
   warstwa zabezpieczenia (na wypadek, gdyby jakieś rozszerzenie/przeglądarka
   mimo wszystko spróbowało je narysować). */
.ctp-video {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.ctp-video::-webkit-media-controls,
.ctp-video::-webkit-media-controls-panel,
.ctp-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Osoby preferujące ograniczony ruch na ekranie - zdjęcie zostaje nieruchome
   (elegant-animations.js i tak nie uruchamia dla nich paralaksy, to dodatkowe
   zabezpieczenie na wypadek, gdyby JS z jakiegoś powodu się nie załadował). */
@media (prefers-reduced-motion: reduce) {
    .ctp-image-inner {
        transform: none !important;
    }
}

/* ------------------------------------------
   Responsywność - kolumny zawsze jedna pod drugą, gdy naprawdę brakuje miejsca.

   Wcześniej były tu DWA mechanizmy naraz: container query (@container ctp ...)
   ORAZ zwykły media query poniżej - celowo zdublowane. Container query zostało
   CAŁKOWICIE USUNIĘTE, bo w połączeniu z głęboko zagnieżdżoną strukturą flexboksów
   Elementora (kontenery "e-con" w kontenerach) powodowało realny błąd renderowania
   przeglądarki: całemu widgetowi (.elementor-widget) "urywała się" wysokość do
   kilku-kilkunastu TYSIĘCY pikseli (mimo że jego widoczna treść miała kilkaset px),
   co widać było jako ogromne, puste odstępy między sekcjami na wąskich ekranach.
   Wyłączenie "container-type: inline-size" na .ctp-wrapper natychmiast to naprawiało -
   dlatego usuwamy container query całkowicie i zostajemy tylko przy zwykłym,
   sprawdzonym media query (reaguje na szerokość okna, nie widgetu - w tym układzie
   to wystarczające, bo widget i tak niemal zawsze zajmuje pełną szerokość ekranu).
   Kolejność pionowa nadal sterowana tym samym przełącznikiem "Zamień miejscami" (patrz "order" wyżej).
   ------------------------------------------ */
@media (max-width: 991px) {
    .ctp-row {
        flex-direction: column !important;
        align-items: stretch !important;
        /* Mniejszy odstęp między tekstem a zdjęciem niż na desktopie (tam 60px robi
           robotę, oddzielając dwie kolumny OBOK siebie) - w układzie kolumnowym ta
           sama wartość wygląda na oddzielne, luźno rzucone bloki zamiast jednej,
           spójnej całości (nadtytuł + tytuł + treść + przycisk + zdjęcie). */
        gap: 20px;
    }

    /* WAŻNE: gdy .ctp-row zmienia się na flex-direction: column, oś "główna" flexboksa
       staje się PIONOWA - a "flex-basis" (część skrótu "flex") działa właśnie na osi głównej.
       Ustawienie tu np. "flex: 0 0 100%" ustawiłoby więc flex-basis:100% jako WYSOKOŚĆ,
       co całkowicie nadpisuje jawną wysokość zdjęcia (.ctp-image-col { height: ... } -
       również tę ustawianą responsywnie z panelu Elementora) - licząc 100% względem
       wysokości .ctp-row, która nie jest tu jawnie ustawiona (auto), więc przeglądarka
       liczy to jako 0. W połączeniu z "overflow: hidden" na .ctp-image-col zdjęcie
       całkowicie znikało (tekst był widoczny mimo to, bo .ctp-text-col nie ma overflow:hidden,
       więc jego treść "wylewała się" poza zerowe pudełko i nadal była widoczna).
       Dlatego tutaj: flex-basis zostaje "auto" (żeby nie kolidować z wysokością),
       a pełną szerokość w układzie kolumnowym daje "width: 100%" (szerokość to teraz oś
       PRZECIWNA, sterowana przez width/align-items, a nie przez flex-basis). */
    .ctp-text-col,
    .ctp-image-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100% !important;
        min-width: 0;
    }

    /* Na desktopie "justify-content: space-between" (patrz .ctp-text-col wyżej) celowo
       rozkłada nadnagłówek/nagłówek/treść/przycisk równomiernie na całą wysokość
       kolumny, żeby wizualnie "wypełniała" tyle samo miejsca co zdjęcie obok. Na wąskim
       ekranie kolumny są już jedna pod drugą (nie obok siebie) - nie ma więc powodu,
       żeby tekstowa kolumna miała jakąkolwiek dodatkową wysokość do rozprowadzenia,
       ale gdyby ją skądś dostała (np. z odziedziczonego stylu kontenera Elementora),
       "space-between" rozciągnąłby elementy z dziwnie dużymi odstępami między nimi.
       Wymuszamy więc na mobile/tablecie zwykły, bliski układ z jednym stałym odstępem. */
    .ctp-text-col {
        justify-content: flex-start !important;
        /* Ciaśniejszy odstęp niż domyślne 20px - na wąskim ekranie eyebrow/nagłówek/
           treść/przycisk mają sprawiać wrażenie jednego, zwartego bloku tekstu,
           a nie osobnych, porozrzucanych elementów. */
        gap: 10px;
    }

    /* Nadtytuł + linijka obok niego (patrz .ctp-eyebrow-row) mają też mniejszy odstęp
       od nagłówka poniżej niż na desktopie (tam 18px, tu ciaśniej - ta sama logika
       "jeden spójny blok" co przy .ctp-text-col wyżej). */
    .ctp-eyebrow-row {
        margin-bottom: 6px;
    }

    /* Na wąskim ekranie kolejność "Zamień miejscami" (--ctp-text-order, patrz .ctp-text-col
       i .ctp-image-col wyżej) jest CAŁKOWICIE IGNOROWANA - tekst zawsze na górze,
       zdjęcie zawsze na dole, niezależnie od ustawienia przełącznika w panelu Elementora.
       Bez tego, przy kilku takich widgetach ułożonych jeden pod drugim, "odwrócony"
       widget dawał zdjęcie NA GÓRZE - a jeśli poprzedni widget kończył się swoim
       (nieodwróconym) zdjęciem NA DOLE, dwa zdjęcia lądowały bezpośrednio jedno pod
       drugim, bez tekstu między nimi, co wyglądało jak przypadkowa "para" obrazków. */
    .ctp-text-col {
        order: 1 !important;
    }

    .ctp-image-col {
        order: 2 !important;
    }

    /* Paralaksa (JS) jest na tej szerokości całkowicie wyłączona (patrz elegant-animations.js) -
       tu dodatkowo wyłączamy sam kontekst 3D (perspective/preserve-3d), bo w połączeniu
       z overflow: hidden potrafił on powodować, że zdjęcie w ogóle się nie renderowało
       na niektórych przeglądarkach mobilnych. Zdjęcie zostaje zwykłym, statycznym obrazkiem. */
    .ctp-image-col {
        perspective: none;
    }

    .ctp-image-inner {
        transform: none !important;
        transform-style: flat;
    }
}