/* ==========================================
   Baner ze zdjęciem na pełną szerokość ekranu ("full-bleed") - myślany jako
   "zapowiedź" wewnątrz normalnej, wyśrodkowanej strony: reszta strony ma
   marginesy boczne, a ten JEDEN moduł nagle rozciąga się od krawędzi do
   krawędzi ekranu, żeby zrobić mocniejsze wrażenie. Ten sam efekt co
   pełnoekranowe zdjęcie na wallsandfloors.com.pl (sekcja "O nas").

   Full-bleed jest zrealizowany DOKŁADNIE tą samą metodą co w
   custom-contact-form.css/.js (.ncf-wrapper) - podstawowa wersja CSS-owa
   poniżej to tylko fallback na pierwszy render; prawdziwe, precyzyjne
   dociągnięcie do krawędzi ekranu robi custom-image-banner.js (funkcja
   applyFullBleed), bo czysta matematyka CSS (calc(50% - 50vw)) zawodzi w
   niektórych zagnieżdżeniach kontenerów Elementora - patrz komentarze w
   custom-contact-form.css po pełne wyjaśnienie tego mechanizmu.
   ========================================== */

.cib-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    /* Elementor dokłada własny pionowy padding-block na kontenerze(-ach), które
       owijają ten widget (--padding-block-start/-end, patrz frontend.css), co
       przy pełnoekranowym zdjęciu wyglądałoby jak brzydkie białe pasy nad/pod
       nim. WCZEŚNIEJ zerowaliśmy ten padding wprost na kontenerze przez
       :has(.cib-wrapper) - ale :has() dopasowuje KAŻDEGO przodka, który ma
       .cib-wrapper gdziekolwiek w poddrzewie, więc jeśli cała strona (np.
       hero + ten baner + inne sekcje) jest owinięta jednym wspólnym
       kontenerem najwyższego poziomu, ta reguła zerowała padding na TYM
       współdzielonym kontenerze - a to zdejmowało odstęp między zupełnie
       innymi, niepowiązanymi sekcjami (np. hero i tekst pod nim zaczynały na
       siebie nachodzić). Zamiast tego kompensujemy padding TYLKO na samym
       .cib-wrapper przez ujemny margines: --padding-block-start/-end to CSS
       custom properties, które Elementor ustawia na kontenerze i które
       DZIEDZICZĄ się w dół do .cib-wrapper - czytamy tu dokładnie tę samą
       wartość, więc ujemny margines idealnie "wciąga" baner z powrotem pod
       krawędź ekranu, nie zmieniając samej wartości paddingu na kontenerze
       (więc inne elementy dzielące ten sam kontener nie są w ogóle
       dotykane). */
    margin-block-start: calc(-1 * var(--padding-block-start, 0px));
    margin-block-end: calc(-1 * var(--padding-block-end, 0px));
}

.cib-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: 1;
}

/* Paralaksa - dwie różne implementacje w zależności od szerokości ekranu:

   1) Szersze ekrany (>=1025px): prawdziwa CSS-owa paralaksa przez
      background-attachment: fixed (tło "stoi w miejscu", treść przewija się
      nad nim) - najprostsza i najlepiej wyglądająca opcja tam, gdzie działa
      poprawnie.

   2) Węższe ekrany (telefon/tablet, <1025px): background-attachment: fixed
      jest tu CELOWO pomijane - iOS Safari słabo/wcale go nie obsługuje (bywa
      traktowane jak zwykłe "scroll", albo powoduje glitche przy przewijaniu).
      Zamiast tego custom-image-banner.js przesuwa .cib-bg pionowo przez
      transform: translateY() w takt przewijania strony (JS nasłuchuje scroll
      i liczy przesunięcie względem pozycji banera na ekranie) - to
      "ręczna" paralaksa, która działa identycznie na wszystkich
      przeglądarkach mobilnych, bez pułapek background-attachment: fixed.
      .cib-bg musi być tu WIĘKSZE niż kontener (130% wysokości, wysunięte
      15% do góry), żeby przy przesuwaniu transformem nie odsłoniły się puste
      krawędzie zdjęcia. */
@media (min-width: 1025px) {
    .cib-wrapper.cib-parallax .cib-bg {
        background-attachment: fixed;
    }
}

@media (max-width: 1024px) {
    .cib-wrapper.cib-parallax .cib-bg {
        height: 130%;
        top: -15%;
        will-change: transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cib-wrapper.cib-parallax .cib-bg {
        height: 100%;
        top: 0;
        transform: none !important;
    }
}

.cib-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* color-mix() pozwala połączyć osobno wybierany kolor (--cib-overlay-color)
       i siłę przyciemnienia w % (--cib-overlay-opacity) bez ręcznego liczenia
       wartości rgba() - obie kontrolki Elementora ustawiają swoje zmienne
       niezależnie od siebie. */
    background-color: color-mix( in srgb, var( --cib-overlay-color, #000000 ) calc( var( --cib-overlay-opacity, 25 ) * 1% ), transparent );
}

.cib-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ------------------------------------------
   Przycisk - "szklany" (przezroczyste tło + rozmycie), pigułkowy kształt (patrz
   domyślny promień 40px w kontrolce Elementora), z tą samą strzałką
   przesuwającą się na hover co reszta przycisków na stronie (.ctp-button,
   .nlrz-cta), oraz DODATKOWO pulsującą poświatą wokół siebie - żeby "żył" na
   zdjęciu, zanim ktokolwiek go dotknie, a nie tylko reagował na hover.
   ------------------------------------------ */
.cib-button-wrap {
    position: relative;
    display: inline-flex;
    text-decoration: none !important;
    cursor: pointer;
}

.cib-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    line-height: normal;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/*
 * Wyłączenie rozmycia tła (backdrop-filter) na przycisku "Zobacz nasze
 * realizacje" na stronie głównej - dla spójności z resztą przycisków na
 * stronie (np. .chb-button w custom-hero-banner.css), z których żaden nie
 * ma tego efektu. Kształt (zaokrąglenie, obrys 1.5px) zostaje bez zmian -
 * jest już zgodny z resztą motywu. Celujemy w konkretny element po
 * unikalnym ID Elementora, a nie globalnie we wszystkie instancje widgetu
 * "Custom Image Banner", bo może on być użyty gdzie indziej z tym efektem
 * celowo.
 */
.elementor-element-f40edbe .cib-button {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.cib-button-wrap:hover .cib-button {
    transform: scale(1.04);
}

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

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

/* Pulsująca poświata - dwa identyczne pierścienie (ten sam kształt/promień co
   sam przycisk, patrz kontrolka "Zaokrąglenie rogów"), które rosną i znikają
   w pętli, przesunięte w czasie o pół cyklu (.cib-button-pulse-delay), żeby
   zawsze przynajmniej jeden był w trakcie animacji - stąd wrażenie ciągłego,
   płynnego "oddychania" zamiast urywanego mrugania. pointer-events: none, żeby
   nie przechwytywały kliknięcia/hovera zamiast przycisku pod spodem. */
.cib-button-pulse {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border: 1.5px solid var( --cib-pulse-color, #ffffff );
    opacity: 0;
    animation: cib-pulse 2.4s ease-out infinite;
}

.cib-button-pulse-delay {
    animation-delay: 1.2s;
}

@keyframes cib-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* Uszanowanie ustawień dostępności - osoby z włączonym "ogranicz animacje"
   dostają statyczny przycisk bez pulsowania i bez animacji wejścia. */
@media (prefers-reduced-motion: reduce) {
    .cib-button-pulse {
        animation: none;
        display: none;
    }
    .cib-button-wrap:hover .cib-button {
        transform: none;
    }
}

/* ------------------------------------------
   Animacja wejścia - własna, prosta (fade + lekkie przesunięcie w górę), NIE
   przez współdzielony silnik .cet-wrapper/.cet-animated (patrz
   elegant-animations.css/.js) - celowo, żeby ten widget nie dziedziczył
   paddingu/klas tamtego systemu i nie powtórzyć konfliktu opisanego w
   custom-contact-form.css (.cet-wrapper narzucający własny padding-block).
   Sterowana przez custom-image-banner.js (IntersectionObserver dodaje klasę
   .cib-in-view, gdy element wjedzie w widok).
   ------------------------------------------ */
.cib-content {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cib-wrapper.cib-in-view .cib-content {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .cib-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------
   Responsywność - na telefonie trochę mniej "powietrza" wokół przycisku i
   nieco mniejsza czcionka, żeby pigułka nie robiła się nieproporcjonalnie
   duża względem wąskiego ekranu.
   ------------------------------------------ */
@media (max-width: 767px) {
    .cib-button {
        font-size: 0.8rem !important;
    }
}