/* Omoda — Hero Slider (Figma 65:191). Desktop: obraz/wideo pełnoekranowe (90vh),
   treść zakotwiczona do dołu. Mobile: obraz nad, treść na czarnym tle pod. */

.omoda-hero-slider {
    position: relative;
    width: 100%;
    height: 90vh;
    height: calc(90vh / var(--omoda-zoom, 1));
    min-height: 480px;
    overflow: hidden;
    background: #121212;
    /* pozwól przeglądarce scrollować pionowo, poziomy swipe łapie JS */
    touch-action: pan-y;
}

.omoda-hero-slider__track {
    position: relative;
    height: 100%;
}

.omoda-hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    /* visibility zmienia się dopiero PO dopełnieniu fade-out, żeby realnie było widać przenikanie */
    transition: opacity var(--omoda-transition-slow), visibility 0s var(--omoda-duration-slow);
}

.omoda-hero-slider__slide.is-active {
    position: relative;
    height: 100%;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity var(--omoda-transition-slow), visibility 0s;
}

/* Media (desktop: pełne tło; mobile: box o proporcji, patrz media query) */
.omoda-hero-slider__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.omoda-hero-slider__media-item {
    position: absolute;
    inset: 0;
    /* ".elementor img" (0,1,1) potrafi nadpisać samą klasę (0,1,0) — utwardzone */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: none;
    transform: scale(1.07);
    transition: transform var(--omoda-transition-slow);
}

.omoda-hero-slider__media-item--desktop {
    display: block;
}

.omoda-hero-slider__slide.is-active .omoda-hero-slider__media-item {
    transform: scale(1);
}

.omoda-hero-slider__overlay {
    position: absolute;
    inset: 0;
    /* --omoda-overlay-opacity/--omoda-overlay-position ustawiane inline per slajd z wp-admin */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, var(--omoda-overlay-opacity, 0.55)) var(--omoda-overlay-position, 100%));
    pointer-events: none;
}

/* Nawigacja — te same ikony (obrót 180° dla "wstecz"), disabled na skrajnych slajdach */
.omoda-hero-slider__arrow {
    position: absolute;
    top: 50%;
    /* Elementor Pro / motyw narzucają globalny border/tło/padding na button z tą samą lub wyższą specyficznością */
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 2;
    /* Karuzela jest zapętlona (bez końca), więc strzałki nigdy nie są disabled —
       domyślnie przygaszone, pełna biel dopiero po najechaniu. */
    opacity: 0.5;
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base);
}

.omoda-hero-slider__arrow img {
    /* ".elementor img" ma tę samą specyficzność (0,1,1) — bez !important wygrywałby
       zależnie od kolejności ładowania arkuszy, więc utwardzamy na sztywno */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
}

.omoda-hero-slider__arrow--prev {
    left: 30px;
    transform: translateY(-50%) rotate(180deg);
}

.omoda-hero-slider__arrow--next {
    right: 30px;
    transform: translateY(-50%);
}

.omoda-hero-slider__arrow:hover:not([disabled]) {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

.omoda-hero-slider__arrow--prev:hover:not([disabled]) {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg) scale(1.08);
}

/* Tylko skrajny przypadek: jeden slajd, nawigacja donikąd — JS ustawia disabled */
.omoda-hero-slider__arrow[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Paginacja — linie, jak w Figmie */
.omoda-hero-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.omoda-hero-slider__dot {
    /* motyw (reset.css) narzuca padding/width na button/[type=submit] z tą samą
       lub wyższą specyficznością — utwardzone, jak inne konflikty w tym pliku */
    width: 28px !important;
    height: 2px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent;
    /* subtelna obwódka, żeby nieaktywna (przezroczysta) kreska była w ogóle widoczna */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-base);
}

.omoda-hero-slider__dot:hover,
.omoda-hero-slider__dot.is-active {
    background: #ffffff;
    box-shadow: none !important;
}

/* Galeria dodatkowych zdjęć — stała wysokość, szerokość auto. .gallery jest
   dzieckiem .slide (pełna szerokość ekranu), NIE .inner (1280px) — dlatego
   "right" liczymy tym samym wzorem co obcięcie .omoda-container, żeby obrazek
   mieścił się w siatce 1280px zamiast wisieć przy realnej krawędzi ekranu.
   "bottom" = padding-bottom .inner (64px), żeby wyrównać do dołu przycisków. */
.omoda-hero-slider__gallery {
    position: absolute;
    right: max(20px, calc((100% - var(--omoda-container-width, 1280px)) / 2 + var(--omoda-container-padding, 20px)));
    bottom: 64px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.omoda-hero-slider__gallery-img {
    /* Elementor: ".elementor img" (0,1,1) bije pojedynczą klasę (0,1,0).
       Wysokość ustawiana per slajd z wp-admin (--omoda-gallery-size-desktop na .gallery). */
    height: var(--omoda-gallery-size-desktop, 94px) !important;
    width: auto !important;
    max-width: none !important;
    display: block;
    border-radius: 2px;
}

/* Treść — zakotwiczona do dołu, wyrównana do siatki 1280px */
.omoda-hero-slider__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.omoda-hero-slider__inner {
    /* Sam tekst NIE łapie kliknięć — przy dłuższej treści (badge + 2 linijki
       dodatków) wizualnie sięga do wysokości strzałek i kradłby im klik.
       pointer-events wraca tylko na realnie klikalne przyciski poniżej. */
    width: 100%;
    padding-top: 40px;
    padding-bottom: 64px;
}

.omoda-hero-slider__inner > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.omoda-hero-slider__slide.is-active .omoda-hero-slider__inner > * {
    opacity: 1;
    transform: none;
}

.omoda-hero-slider__inner > *:nth-child(1) { transition-delay: 0.05s; }
.omoda-hero-slider__inner > *:nth-child(2) { transition-delay: 0.12s; }
.omoda-hero-slider__inner > *:nth-child(3) { transition-delay: 0.19s; }
.omoda-hero-slider__inner > *:nth-child(4) { transition-delay: 0.26s; }
.omoda-hero-slider__inner > *:nth-child(5) { transition-delay: 0.33s; }
.omoda-hero-slider__inner > *:nth-child(6) { transition-delay: 0.4s; }
.omoda-hero-slider__inner > *:nth-child(7) { transition-delay: 0.47s; }

.omoda-hero-slider__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.omoda-hero-slider__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.omoda-hero-slider__title {
    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 6px;
}

.omoda-hero-slider__subtitle {
    font-size: clamp(16px, 1vw + 10px, 24px);
    font-weight: 400;
    color: var(--omoda-color-text-inverse);
    margin: 0 0 20px;
}

.omoda-hero-slider__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Małe — omnibus (zaraz pod spodem) ma być WIZUALNIE przyklejony do ceny
       promocyjnej, nie oddzielony akapitem (user: "przybliż omnibus"). */
    margin: 0 0 4px;
}

.omoda-hero-slider__price-num {
    text-decoration: line-through;
}

.omoda-hero-slider__price-regular {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
}

.omoda-hero-slider__price-sale {
    font-size: var(--omoda-font-size-h2);
    font-weight: 700;
    /* Domyślny line-height (dziedziczony, ~1.6) na tak dużym foncie dokłada
       sporo "powietrza" nad/pod literami — stąd wrażenie "za dużej przerwy"
       między ceną regularną a promocyjną (user). 1.1 trzyma tylko tyle miejsca,
       ile faktycznie potrzebują znaki diakrytyczne/zejścia liter. */
    line-height: 1.1;
    color: var(--omoda-color-text-inverse);
}

.omoda-hero-slider__omnibus {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 16px;
}

.omoda-hero-slider__perks {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
}

.omoda-hero-slider__perk {
    display: block;
}

.omoda-hero-slider__perk sup {
    font-size: 10px;
    margin-left: 1px;
}

.omoda-hero-slider__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    pointer-events: auto;
    /* Stały odstęp nad przyciskami (bez "perków" cena/omnibus/podtytuł miały za mały margines dolny);
       marginesy sąsiednich bloków się zlewają (max), więc przy perkach (24px) bez zmian. */
    margin-top: 24px;
}

/* Nota prawna zaraz pod przyciskami: 10px, wielkie litery, do lewej (desktop), z
   delikatnym odstępem od przycisków; na mobile wyśrodkowana (patrz @media niżej). */
.omoda-hero-slider__legal {
    margin: 14px 0 0 !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.7) !important;
    pointer-events: auto;
}

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

/* Mobile: obraz nad, treść na czarnym tle pod (nie overlay).
   .slide staje się "display:contents" — jego dzieci (.media, .content) wchodzą
   bezpośrednio do grida .track jako współdzielone rzędy "media"/"content".
   Dzięki temu WSZYSTKIE slajdy (też nieaktywne, ale visibility:hidden — nadal
   liczone do auto-wysokości) mają rząd "content" wysoki jak najdłuższa treść,
   więc czarne tło ma zawsze tę samą wysokość niezależnie od slajdu, a tekst
   (zwykły block layout, bez flex/center) siedzi naturalnie u góry tego pola. */
@media (max-width: 767px) {
    .omoda-hero-slider {
        height: auto;
        min-height: 0;
    }

    .omoda-hero-slider__track {
        display: grid;
        grid-template-areas: "media" "content";
        grid-template-rows: auto auto;
    }

    .omoda-hero-slider__slide {
        display: contents;
    }

    .omoda-hero-slider__media {
        grid-area: media;
        position: relative;
        inset: auto;
        aspect-ratio: 4 / 3;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--omoda-transition-slow), visibility 0s var(--omoda-duration-slow);
    }

    .omoda-hero-slider__content {
        grid-area: content;
        position: static;
        display: block;
        background: #121212;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--omoda-transition-slow), visibility 0s var(--omoda-duration-slow);
    }

    /* .gallery jest bezpośrednim dzieckiem .slide (jak .media/.content), a nie
       potomkiem .inner — bez własnego opacity/visibility zostawałby widoczny
       na stałe po przejściu na slajd bez galerii ("brzydko znika" / zostaje). */
    .omoda-hero-slider__gallery {
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--omoda-transition-slow), visibility 0s var(--omoda-duration-slow);
    }

    .omoda-hero-slider__slide.is-active .omoda-hero-slider__media,
    .omoda-hero-slider__slide.is-active .omoda-hero-slider__content,
    .omoda-hero-slider__slide.is-active .omoda-hero-slider__gallery {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--omoda-transition-slow), visibility 0s;
    }

    .omoda-hero-slider__media-item--desktop {
        display: none;
    }

    .omoda-hero-slider__media-item--mobile {
        display: block;
    }

    .omoda-hero-slider__overlay {
        display: none;
    }

    .omoda-hero-slider__inner {
        padding: 28px 20px 36px;
    }

    /* Badge: lewy górny róg zdjęcia (nie w bloku treści). Offset o wysokość fixed
       headera (mobile) — inaczej header zasłania badge na górze zdjęcia. */
    .omoda-hero-slider__badges {
        position: absolute;
        top: calc(var(--omoda-header-height-mobile, 64px) + 12px);
        left: 12px;
        z-index: 2;
        margin: 0;
    }

    /* Galeria: ten sam obrazek co desktop (prawy dół), na mobile prawy górny róg
       zdjęcia — ten sam offset pod headerem co badge. */
    .omoda-hero-slider__gallery {
        position: absolute;
        top: calc(var(--omoda-header-height-mobile, 64px) + 12px);
        right: 12px;
        bottom: auto;
        left: auto;
        display: flex;
    }

    .omoda-hero-slider__gallery-img {
        height: var(--omoda-gallery-size-mobile, 48px) !important;
    }

    /* Strzałki: z pionowego środka do dolnych rogów zdjęcia, o połowę mniejsze —
       na mobile środek zasłaniałby treść/obrazek, a header nachodzi na górę. */
    .omoda-hero-slider__arrow {
        top: auto !important;
        bottom: 12px;
        width: 23px !important;
        height: 23px !important;
    }

    .omoda-hero-slider__arrow--prev {
        left: 12px;
        transform: rotate(180deg);
    }

    .omoda-hero-slider__arrow--next {
        right: 12px;
        transform: none;
    }

    .omoda-hero-slider__arrow:hover:not([disabled]) {
        transform: scale(1.08);
    }

    .omoda-hero-slider__arrow--prev:hover:not([disabled]) {
        transform: rotate(180deg) scale(1.08);
    }

    .omoda-hero-slider__dots {
        position: static;
        transform: none;
        justify-content: flex-start;
        margin: 0 0 16px;
        padding: 16px 20px 0;
    }

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

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

    /* Mobile: nota prawna wyśrodkowana pod przyciskami. */
    .omoda-hero-slider__legal {
        margin: 14px auto 0 !important;
        text-align: center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .omoda-hero-slider__slide,
    .omoda-hero-slider__media-item,
    .omoda-hero-slider__inner > * {
        transition: none !important;
        transform: none !important;
    }
}

/* Odnośnik (np. 1) przy "Dodatkowym opisie" — ten sam wygląd co przy korzyściach. */
.omoda-hero-slider__subtitle sup {
    font-size: 10px;
    margin-left: 1px;
}