/* NAPRAWA nakładania się treści na karuzelę na małych ekranach (potwierdzone empirycznie
   bezpośrednio w żywej przeglądarce, reprodukowalne też w Chrome, nie tylko na iOS Safari):
   opakowanie widgetu wygenerowane przez Elementora (.elementor-widget-custom_carousel) jest
   elementem flex (kolumna) wewnątrz kontenera sekcji. Bez jawnie ustawionej szerokości potrafi
   dojść do "wyścigu" w silniku przeglądarki: wysokość karuzeli liczona jest na podstawie
   proporcji (aspect-ratio), która zależy od szerokości - a ta czasem nie jest jeszcze ustalona
   w momencie liczenia wysokości. Efekt: całe opakowanie (i wszyscy jego rodzice) dostaje
   wysokość 0px, mimo że sama karuzela w środku ma realną wysokość - kolejna sekcja na stronie
   "nie wie", że karuzela zajmuje miejsce, i renderuje się dokładnie w tym samym miejscu,
   nakładając się na nią wizualnie. Wymuszenie jawnej szerokości 100% eliminuje ten wyścig. */
.elementor-widget-custom_carousel {
    width: 100%;
}

.custom-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.custom-carousel-track {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}

/* Tryb "auto" - slajdy w normalnym przepływie, wysokość dopasowuje się do aktywnego zdjęcia */
.custom-carousel-track.height-mode-auto {
    height: auto;
}

.custom-carousel-track.height-mode-auto .custom-carousel-slide {
    position: relative;
    display: none;
    opacity: 1;
    transition: none;
}

.custom-carousel-track.height-mode-auto .custom-carousel-slide.is-active {
    display: block;
}

.custom-carousel-track.height-mode-auto .custom-carousel-slide img {
    height: auto;
    max-height: 100%;
}

.custom-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.custom-carousel-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.custom-carousel-track .custom-carousel-slide img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Nakładka regulująca "wyblaknięcie"/przyciemnienie zdjęcia - domyślnie niewidoczna (opacity: 0),
   sterowana suwakiem w Elementorze (Styl -> Wyblaknięcie zdjęć) */
.custom-carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ast-global-color-6, #000000);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Kontener podpisu i przycisku - odpowiada TYLKO za pozycję całego bloku (przesunięcie w górę
   o ok. 1/4 wysokości zdjęcia). Celowo NIE animujemy tu opacity - gdyby ten element miał własne
   opacity: 0, to "wygaszałoby" też wszystkie dzieci naraz i nie dałoby się osobno opóźnić
   pojawienia się przycisku względem tekstu podpisu. Każde z dzieci (tekst, przycisk) ma więc
   swoją WŁASNĄ animację opacity, niezależną od drugiego. */
.custom-carousel-caption {
    position: absolute;
    top: 75%; /* punkt startowy - ok. ćwiartka wysokości zdjęcia licząc od dołu */
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80%;
    z-index: 2;
    transform: translate(-50%, -50%);
    /* Szybki, czysty powrót do pozycji startowej przy znikaniu starego slajdu */
    transition: top 0.25s ease;
}

.custom-carousel-caption-text {
    font-weight: 300;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--ast-global-color-6, #000000) 60%, transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.custom-carousel-button,
.custom-carousel-button:hover,
.custom-carousel-button:focus,
.custom-carousel-button:active,
.custom-carousel-button:visited {
    display: inline-block;
    text-decoration: none !important;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 600;
    opacity: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.25s ease;
    /* Kształt na wyraźną prośbę klienta ("przyciski na zdjęciach głównych -
       kształt jak na całej stronie głównej") - domyślna wartość kontrolki
       "Zaokrąglenie rogów" w Elementorze to i tak już 40px (ten sam pigułkowy
       kształt co .cib-button/.ctp-button/.nlrz-cta gdzie indziej), ale na
       stronie głównej ten konkretny przycisk karuzeli miał zapisaną inną,
       niestandardową wartość. !important wymusza tu ten sam, spójny kształt
       niezależnie od tego, co zostało zapisane per-instancję w Elementorze. */
    border-radius: 40px !important;
}

/* Blok (tekst + przycisk) "wyłania się" z dołu (ok. 1/4 wysokości zdjęcia) dopiero gdy JS
   (po załadowaniu zdjęcia + opóźnieniu) doda klasę show-caption - działa zarówno przy pierwszym
   wejściu, jak i przy każdym kolejnym przełączeniu slajdu */
.custom-carousel-slide.is-active.show-caption .custom-carousel-caption {
    top: 50%;
    transition: top 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.custom-carousel-slide.is-active.show-caption .custom-carousel-caption-text {
    opacity: 1;
    transition: opacity 1.1s ease 0.1s;
}

/* Przycisk wyłania się dopiero po dodaniu osobnej klasy show-button (dla opóźnienia 0ms
   dzieje się to razem z pojawieniem się podpisu, dla większych wartości - z opóźnieniem po nim) */
.custom-carousel-slide.is-active.show-caption.show-button .custom-carousel-button {
    opacity: 1;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.9s ease;
}

.custom-carousel-prev,
.custom-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    width: auto;
    height: auto;
    padding: 8px;
    cursor: pointer;
    z-index: 3;
    text-shadow: 0 2px 8px color-mix(in srgb, var(--ast-global-color-6, #000000) 60%, transparent);
    transition: opacity 0.3s, transform 0.3s, filter 0.3s;
    opacity: 0.85;
}

.custom-carousel-prev:hover,
.custom-carousel-next:hover,
.custom-carousel-prev:active,
.custom-carousel-next:active,
.custom-carousel-prev:focus,
.custom-carousel-next:focus {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
}

/* Widoczny, ale dopasowany stylistycznie wskaźnik fokusa z klawiatury (zamiast domyślnego brzydkiego tła/obwódki przeglądarki lub motywu) */
.custom-carousel-prev:focus-visible,
.custom-carousel-next:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ast-global-color-4, #ffffff) 90%, transparent));
}

.custom-carousel-prev { left: 20px; }
.custom-carousel-next { right: 20px; }

.custom-carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.custom-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ast-global-color-4, #ffffff) 50%, transparent);
    cursor: pointer;
    outline: none;
    transition: background 0.3s, transform 0.3s;
}

.custom-carousel-dot:hover {
    background: color-mix(in srgb, var(--ast-global-color-4, #ffffff) 85%, transparent);
    transform: scale(1.2);
}

.custom-carousel-dot:focus-visible {
    background: var(--ast-global-color-4, #ffffff);
    transform: scale(1.2);
}

.custom-carousel-dot.is-active {
    background: var(--ast-global-color-4, #ffffff);
}

/* ==========================================
   Responsywność - telefony
   ========================================== */
@media (max-width: 767px) {
    /* Większe, wygodniejsze pole dotykowe strzałek, bez powiększania samej ikonki wizualnie */
    .custom-carousel-prev,
    .custom-carousel-next {
        padding: 12px;
    }

    .custom-carousel-prev { left: 6px; }
    .custom-carousel-next { right: 6px; }

    /* Kropki nawigacji - większe, wygodniejsze do trafienia palcem pole dotykowe (niewidoczny margines) */
    .custom-carousel-dots {
        bottom: 10px;
        gap: 14px;
    }

    .custom-carousel-dot {
        width: 8px;
        height: 8px;
        position: relative;
    }

    .custom-carousel-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        transform: translate(-50%, -50%);
    }

    /* Węziej niż na desktopie, żeby tekst nie wchodził pod strzałki po bokach */
    .custom-carousel-caption {
        width: 72%;
    }

    /* Rozmiar podpisu na telefonie skaluje się z szerokością ekranu (clamp: min, preferowany, maks.),
       zamiast być sztywno mały - dzięki temu jest proporcjonalnie duży/czytelny, a jednocześnie
       nie nachodzi na strzałki nawet na wąskich ekranach */
    .custom-carousel-caption-text {
        font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
        line-height: 1.25;
    }

    .custom-carousel-button {
        max-width: 90%;
        white-space: normal;
        line-height: 1.3;
    }
}