/* Omoda — Banner (Figma 82:297). Desktop: zdjęcie pełnoekranowe (90vh), treść
   nad nim (góra/środek/dół, ustawienie z wp-admin). Mobile: ten sam wzorzec
   co Hero Slider (hero-slider.css, @media max-width:767px) — zdjęcie zwykłym
   blokiem NAD treścią, treść na czarnym tle, bez gradientu. */

.omoda-banner {
    position: relative;
    width: 100%;
    height: 90vh;
    height: 90svh;
    height: calc(90svh / var(--omoda-zoom, 1));
    min-height: 480px;
    overflow: hidden;
    background: #121212;
}

/* Wejście tła — osobny data-omoda-reveal od treści (.omoda-banner__inner
   niżej), więc zdjęcie i tekst/przyciski animują się niezależnie: lekki
   zoom-out + fade na tle, stopniowane pojawianie się liter/przycisków
   na treści (nth-child niżej). Nadpisuje domyślny translateY z
   [data-omoda-reveal] w omoda-core.css — ta sama specyficzność (klasa),
   ale ten plik ładuje się PO omoda-core.css, więc wygrywa bez !important. */
.omoda-banner__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity var(--omoda-transition-slow), transform var(--omoda-transition-slow);
}

.omoda-banner__media.is-revealed {
    opacity: 1;
    transform: scale(1);
}

.omoda-banner__image {
    position: absolute;
    inset: 0;
    /* ".elementor img" (0,1,1) potrafi nadpisać samą klasę (0,1,0) — utwardzone,
       ten sam problem/rozwiązanie co .omoda-hero-slider__media-item. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: none;
}

.omoda-banner__image--desktop {
    display: block;
}

.omoda-banner__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* --omoda-banner-overlay-opacity/--omoda-banner-overlay-fade ustawiane inline z wp-admin. */
.omoda-banner__overlay--top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, var(--omoda-banner-overlay-opacity, 0.66)) 0%, rgba(0, 0, 0, 0) var(--omoda-banner-overlay-fade, 62%));
}

.omoda-banner__overlay--bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, var(--omoda-banner-overlay-opacity, 0.66)) 0%, rgba(0, 0, 0, 0) var(--omoda-banner-overlay-fade, 62%));
}

/* Treść — pozycja pionowa sterowana atrybutem data-position (góra/środek/dół z wp-admin). */
.omoda-banner__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-block: 64px;
}

.omoda-banner[data-position="center"] .omoda-banner__content {
    justify-content: center;
}

.omoda-banner[data-position="bottom"] .omoda-banner__content {
    justify-content: flex-end;
}

/* Sam wrapper zostaje zawsze widoczny (nadpisuje domyślne opacity/transform
   z [data-omoda-reveal] w omoda-core.css) — animują się jego DZIECI (nagłówek,
   treść, przyciski) osobno, ze wzrastającym opóźnieniem (nth-child niżej),
   ten sam efekt "wchodzenia po kolei" co .omoda-hero-slider__inner > *
   w hero-slider.css. */
.omoda-banner__inner[data-omoda-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

.omoda-banner__inner {
    width: 100%;
    text-align: center;
}

.omoda-banner__inner > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base);
}

.omoda-banner__inner.is-revealed > * {
    opacity: 1;
    transform: none;
}

.omoda-banner__inner > *:nth-child(1) { transition-delay: 0.05s; }
.omoda-banner__inner > *:nth-child(2) { transition-delay: 0.15s; }
.omoda-banner__inner > *:nth-child(3) { transition-delay: 0.25s; }
.omoda-banner__inner > *:nth-child(4) { transition-delay: 0.35s; }

.omoda-banner__heading {
    font-family: var(--omoda-font-base);
    font-size: var(--omoda-font-size-h1);
    font-weight: 700;
    line-height: var(--omoda-line-height-heading);
    color: var(--omoda-color-text-inverse);
    margin: 0 0 12px;
}

.omoda-banner__text {
    font-size: clamp(16px, 1vw + 10px, 20px);
    font-weight: 400;
    line-height: var(--omoda-line-height-body);
    color: var(--omoda-color-text-inverse);
    max-width: 720px;
    margin: 0 auto 28px;
}

.omoda-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Przypisy (np. 1) przy nagłówku i treści — rozmiar skaluje się do tekstu (min. 10px). */
.omoda-banner__heading sup,
.omoda-banner__text sup {
    font-size: max(10px, 0.5em);
    margin-left: 2px;
}

/* Nota prawna — link 10px, wielkie litery (styl bazowy .omoda-legal-link w omoda-core.css), jak w
   Hero: zaraz pod przyciskami, wyśrodkowany jak reszta treści. Bez przycisków stoi bliżej treści
   (opis ma własny, większy margines dolny przeznaczony pod przyciski). */
.omoda-banner__legal {
    margin: 14px auto 0 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.omoda-banner__text + .omoda-banner__legal {
    margin-top: -14px !important;
}

.omoda-banner__legal:hover,
.omoda-banner__legal:focus-visible {
    color: #ffffff !important;
}

/* Mobile: obraz nad, treść na czarnym tle pod (nie overlay) — patrz
   hero-slider.css @media max-width:767px, ta sama technika. */
@media (max-width: 767px) {
    .omoda-banner {
        height: auto;
        min-height: 0;
    }

    .omoda-banner__media {
        position: static;
        inset: auto;
        /* Zdjęcie jest tu zwykłym blokiem w normalnym przepływie (nie tłem
           na całą sekcję) — sam zoom(1.08→1) wygląda na statycznym obrazku
           dziwnie, więc zostaje tylko fade z bazowej reguły wyżej. */
        transform: none;
    }

    .omoda-banner__media.is-revealed {
        transform: none;
    }

    .omoda-banner__image {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    .omoda-banner__image--desktop {
        display: none;
    }

    .omoda-banner__image--mobile {
        display: block;
    }

    .omoda-banner__overlay {
        display: none;
    }

    .omoda-banner__content {
        position: static;
        display: block;
        background: #121212;
        padding: 32px 20px 40px;
    }

    /* Przyciski jeden pod drugim, każdy na 100% szerokości */
    .omoda-banner__buttons {
        flex-direction: column;
    }

    .omoda-banner__buttons .omoda-btn {
        width: 100%;
        text-align: center;
    }
}