/* Omoda — Hero modelu (Figma 101:211). Layout 1:1 jak pojedynczy slajd Sliderа
   (hero-slider.css) — pełnoekranowe tło, treść zakotwiczona do dołu na desktopie
   / pod zdjęciem na czarnym tle na mobile. Różnica: statyczny, bez karuzeli
   (bez dotów/strzałek/wielu slajdów/animacji przejścia między slajdami). */

.omoda-model-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    height: calc(90vh / var(--omoda-zoom, 1));
    min-height: 480px;
    /* NIE overflow:hidden — ucinał rozwijaną listę przycisku-dropdownu ("Pobierz
       cennik"), która wychodzi poza dolną krawędź hero. Tło/zdjęcie i tak
       przycina własny .omoda-model-hero__media (overflow:hidden). `clip`
       na osi X chroni przed poziomym przewijaniem strony. */
    overflow-x: clip;
    overflow-y: visible;
    background: #121212;
}

.omoda-model-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.omoda-model-hero__media-item {
    position: absolute;
    inset: 0;
    /* ".elementor img" (0,1,1) potrafi nadpisać samą klasę (0,1,0) — utwardzone, jak w Sliderze */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: none;
}

.omoda-model-hero__media-item--desktop {
    display: block;
}

.omoda-model-hero__overlay {
    position: absolute;
    inset: 0;
    /* --omoda-overlay-opacity/--omoda-overlay-position ustawiane inline 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;
    z-index: 1;
}

/* Jedyny obrazek w rogu Hero — pole "hero_badge_image" (zakładka "Hero" → "Etykieta"),
   NIEZALEŻNE od "corner_image" (karta/siatka/mega menu/Cennik — ten się w Hero
   celowo NIE pojawia, user: ma być wyłącznie tam, nie tutaj).
   "right" liczony tym samym wzorem co obcięcie .omoda-container (Slider), żeby
   mieścił się w siatce 1280px zamiast wisieć przy realnej krawędzi ekranu. */
.omoda-model-hero__corner-images {
    position: absolute;
    right: max(20px, calc((100% - var(--omoda-container-width, 1280px)) / 2 + var(--omoda-container-padding, 20px)));
    bottom: 64px;
    z-index: 2;
}

/* --omoda-badge-image-size-desktop/mobile ustawiane inline z wp-admin (zakładka
   "Hero" → "Etykieta" → "Wielkość"), ten sam mechanizm co
   --omoda-gallery-size-desktop/mobile w Sliderze. */
.omoda-model-hero__badge-image {
    height: var(--omoda-badge-image-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-model-hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.omoda-model-hero__inner {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 64px;
}

.omoda-model-hero__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-model-hero__slogan {
    font-size: clamp(16px, 1vw + 10px, 24px);
    font-weight: 400;
    color: var(--omoda-color-text-inverse);
    margin: 0 0 20px;
}

.omoda-model-hero__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-model-hero__price-num {
    text-decoration: line-through;
}

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

.omoda-model-hero__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-models__omnibus (Omoda_Models_Section::omnibus_html(), reużyte tu bez
   zmian) domyślnie jest wyśrodkowany i szary — myślany pod białe tło karty.
   Tu, na ciemnym tle Hero, wyrównanie do lewej (jak reszta treści) i biały,
   półprzezroczysty tekst (ta sama tonacja co .benefits/.price-regular). */
.omoda-model-hero .omoda-models__omnibus {
    text-align: left;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px;
}

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

.omoda-model-hero__benefit {
    display: block;
}

.omoda-model-hero__benefit sup {
    font-size: 10px;
    margin-left: 1px;
}

/* Landing: "Dłuższy opis" (rich text) w miejscu, gdzie na Modelach są
   "Korzyści pod ceną" — patrz komentarz przy hero_long_description w
   Omoda_Models_Section::define_hero_and_sections_fields(). Szerszy blok tekstu
   niż .benefits (akapity, nie pojedyncze linie pigułek), stąd max-width. */
.omoda-model-hero__long-description {
    max-width: 640px;
    font-size: 15px;
    line-height: var(--omoda-line-height-body);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
}

.omoda-model-hero__long-description p {
    margin: 0 0 10px;
}

.omoda-model-hero__long-description p:last-child {
    margin-bottom: 0;
}

.omoda-model-hero__long-description a {
    color: inherit;
    text-decoration: underline;
}

/* Przyciski Hero renderowane przez Omoda_Models_Section::buttons_html() (wariant
   "hero") — ta sama metoda co karta/panel "wybrany model", więc dropdown (rozwijana
   lista linków) działa tu za darmo (te same klasy .omoda-models__dropdown-*,
   łapane przez globalny, delegowany JS w models-section.js). Wielkość przycisku
   mirroruje .omoda-models__featured-buttons (models-section.css). */
/* Nota prawna pod przyciskami Hero: 10px, wielkie litery, do lewej (desktop) z
   delikatnym odstępem od przycisków; na mobile wyśrodkowana. Styl bazowy
   (.omoda-legal-link) w omoda-core.css. */
.omoda-model-hero__legal {
    /* .omoda-model-hero__content ma pointer-events:none (żeby nie blokować tła) —
       klikalne elementy (przyciski, ten link) muszą to jawnie przywrócić. */
    pointer-events: auto;
    margin: 14px 0 0 !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

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

.omoda-models__hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    pointer-events: auto;
    /* Stały odstęp nad przyciskami: bez "Korzyści" element przed nimi (cena 4px, omnibus 16px,
       slogan 20px) dawał za mało miejsca. Marginesy sąsiednich bloków się zlewają (max), więc
       gdy korzyści są (24px), nic się nie zmienia. */
    margin-top: 24px;
}

.omoda-models__hero-buttons .omoda-btn {
    padding: 0 32px !important;
    height: 44px;
    box-shadow: none !important;
}

.omoda-models__hero-buttons .omoda-models__dropdown-caret {
    right: 32px;
}

.omoda-models__hero-buttons .omoda-models__dropdown-toggle {
    padding: 0 54px !important;
}

/* Mobile: obraz nad, treść na czarnym tle pod (nie overlay) — ten sam wzorzec co Slider. */
@media (max-width: 767px) {
    .omoda-model-hero {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-areas: "media" "content";
    }

    .omoda-model-hero__media {
        grid-area: media;
        position: relative;
        inset: auto;
        aspect-ratio: 4 / 3;
    }

    .omoda-model-hero__content {
        grid-area: content;
        position: static;
        display: block;
        background: #121212;
    }

    .omoda-model-hero__media-item--desktop {
        display: none;
    }

    .omoda-model-hero__media-item--mobile {
        display: block;
    }

    .omoda-model-hero__overlay {
        display: none;
    }

    .omoda-model-hero__inner {
        padding: 28px 20px 36px;
    }

    /* Te same obrazki co desktop (prawy dół), na mobile prawy górny róg zdjęcia —
       offset pod fixed headerem (mobile), jak badge/galeria w Sliderze. */
    .omoda-model-hero__corner-images {
        top: calc(var(--omoda-header-height-mobile, 64px) + 12px);
        right: 12px;
        bottom: auto;
        left: auto;
    }

    .omoda-model-hero__badge-image {
        height: var(--omoda-badge-image-size-mobile, 48px) !important;
    }

    .omoda-model-hero__legal {
        margin: 14px auto 0 !important;
        text-align: center !important;
    }

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

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

/* Położenie tekstu na desktopie (Landing: pola "Tekst w Hero — pion/poziom"). Domyślnie dół/lewa
   (jak dotąd). Na mobile tekst jest pod zdjęciem — te reguły tylko od 768px. */
@media (min-width: 768px) {
    .omoda-model-hero[data-text-v="top"] .omoda-model-hero__content {
        align-items: flex-start;
    }

    .omoda-model-hero[data-text-v="center"] .omoda-model-hero__content {
        align-items: center;
    }

    /* Hero jest pod fixed headerem — przy "Góra" tekst nie może wejść pod niego. */
    .omoda-model-hero[data-text-v="top"] .omoda-model-hero__inner {
        padding-top: calc(var(--omoda-header-height, 80px) + 72px);
    }

    .omoda-model-hero[data-text-v="center"] .omoda-model-hero__inner {
        padding-top: calc(var(--omoda-header-height, 80px) / 2 + 20px);
        padding-bottom: calc(var(--omoda-header-height, 80px) / 2 + 20px);
    }

    /* Przyciemnienie idzie za tekstem: tekst u góry = gradient od góry, na środku = równomierne
       (dół zostaje jak dotąd). Te same suwaki "Nasycenie"/"Gdzie kończy się przejście". */
    .omoda-model-hero[data-text-v="top"] .omoda-model-hero__overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, var(--omoda-overlay-opacity, 0.55)) var(--omoda-overlay-position, 100%));
    }

    .omoda-model-hero[data-text-v="center"] .omoda-model-hero__overlay {
        background: rgba(0, 0, 0, calc(var(--omoda-overlay-opacity, 0.55) * 0.7));
    }

    .omoda-model-hero[data-text-h="center"] .omoda-model-hero__inner {
        text-align: center;
    }

    .omoda-model-hero[data-text-h="right"] .omoda-model-hero__inner {
        text-align: right;
    }

    .omoda-model-hero[data-text-h="center"] .omoda-model-hero__long-description {
        margin-left: auto;
        margin-right: auto;
    }

    .omoda-model-hero[data-text-h="right"] .omoda-model-hero__long-description {
        margin-left: auto;
    }

    .omoda-model-hero[data-text-h="center"] .omoda-models__hero-buttons,
    .omoda-model-hero[data-text-h="center"] .omoda-models__badges {
        justify-content: center;
    }

    .omoda-model-hero[data-text-h="right"] .omoda-models__hero-buttons,
    .omoda-model-hero[data-text-h="right"] .omoda-models__badges {
        justify-content: flex-end;
    }

    .omoda-model-hero[data-text-h="center"] .omoda-model-hero__price {
        align-items: center;
    }

    .omoda-model-hero[data-text-h="right"] .omoda-model-hero__price {
        align-items: flex-end;
    }

    .omoda-model-hero[data-text-h="center"] .omoda-models__omnibus,
    .omoda-model-hero[data-text-h="center"] .omoda-model-hero__legal {
        text-align: center !important;
    }

    .omoda-model-hero[data-text-h="right"] .omoda-models__omnibus,
    .omoda-model-hero[data-text-h="right"] .omoda-model-hero__legal {
        text-align: right !important;
    }
}

/* Style tekstu (Landing: pole "Styl tekstu w Hero"). Tylko desktop — na mobile tekst jest pod zdjęciem
   na czarnym tle, bez ramki. .omoda-model-hero__box owija całą treść (tytuł, opis, przyciski). */
@media (min-width: 768px) {
    .omoda-model-hero[data-text-style="panel_dark"] .omoda-model-hero__box,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__box {
        width: fit-content;
        max-width: min(var(--omoda-hero-box-width, 560px), 100%);
        padding: 32px 36px;
        border-radius: 6px;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        pointer-events: auto;
    }

    /* Poziome położenie ramki (pole "poziom") — przy "Bez ramki"/pasku box i tak zajmuje całą szerokość. */
    .omoda-model-hero[data-text-style^="panel"][data-text-h="center"] .omoda-model-hero__box {
        margin-inline: auto;
    }

    .omoda-model-hero[data-text-style^="panel"][data-text-h="right"] .omoda-model-hero__box {
        margin-left: auto;
    }

    /* W ramce slogan o 4px mniejszy (user) — bazowo clamp(16px, 1vw + 10px, 24px). */
    .omoda-model-hero[data-text-style^="panel"] .omoda-model-hero__slogan {
        font-size: calc(clamp(16px, 1vw + 10px, 24px) - 4px);
    }

    /* Wąska ramka nie potrzebuje szerokiego bloku opisu (640px) — dopasowuje się do ramki. */
    .omoda-model-hero[data-text-style^="panel"] .omoda-model-hero__long-description {
        max-width: none;
    }

    .omoda-model-hero[data-text-style="panel_dark"] .omoda-model-hero__box {
        background: rgba(18, 18, 18, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__box {
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.6);
        /* Jasne tło: tekst i przyciski odwrócone (jak na białych kartach modeli). */
        --omoda-btn-primary-bg: #121212;
        --omoda-btn-primary-bg-hover: #2b2b2b;
        --omoda-btn-primary-text: #ffffff;
        --omoda-btn-primary-border: #121212;
        --omoda-btn-outline-bg: transparent;
        --omoda-btn-outline-bg-hover: rgba(18, 18, 18, 0.06);
        --omoda-btn-outline-text: #121212;
        --omoda-btn-outline-border: rgba(18, 18, 18, 0.3);
        --omoda-btn-outline-border-hover: #121212;
    }

    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__title,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__slogan,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__price-sale,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__long-description,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__benefits,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-models__omnibus,
    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__legal {
        color: #121212 !important;
    }

    .omoda-model-hero[data-text-style="panel_light"] .omoda-model-hero__price-regular {
        color: rgba(18, 18, 18, 0.55);
    }

    .omoda-model-hero[data-text-style="panel_light"] .omoda-btn--outline {
        box-shadow: none;
    }

    /* Pasek: półprzezroczyste ciemne tło rozciągnięte na całą szerokość hero, treść w siatce 1280px. */
    .omoda-model-hero[data-text-style="band"] .omoda-model-hero__inner {
        position: relative;
        pointer-events: auto;
    }

    .omoda-model-hero[data-text-style="band"] .omoda-model-hero__inner::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
        background: rgba(18, 18, 18, 0.55);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        z-index: 0;
    }

    .omoda-model-hero[data-text-style="band"] .omoda-model-hero__box {
        position: relative;
        z-index: 1;
    }

    .omoda-model-hero[data-text-style="band"] {
        --omoda-hero-band-pad: 40px;
    }

    .omoda-model-hero[data-text-style="band"] .omoda-model-hero__inner {
        padding-top: var(--omoda-hero-band-pad);
        padding-bottom: var(--omoda-hero-band-pad);
    }

    /* Pasek na samym dole zdjęcia — bez dodatkowego odstępu pod nim; u góry pod headerem. */
    .omoda-model-hero[data-text-style="band"][data-text-v="top"] .omoda-model-hero__inner {
        margin-top: var(--omoda-header-height, 80px);
        padding-top: var(--omoda-hero-band-pad);
    }
}

/* Układ 50/50 (Landing: "Układ Hero" = split): po lewej tekst na jednolitym tle (czarne/białe), po prawej
   zdjęcie; tekst w pionie wg pola "pion" (góra/środek/dół). Mobile: jak zawsze — zdjęcie nad tekstem. */
@media (min-width: 768px) {
    .omoda-model-hero[data-layout="split"] .omoda-model-hero__media {
        left: 50%;
    }

    .omoda-model-hero[data-layout="split"] .omoda-model-hero__overlay {
        display: none;
    }

    .omoda-model-hero[data-layout="split"] .omoda-model-hero__content {
        right: 50%;
        background: #121212;
        pointer-events: auto;
    }

    .omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__content {
        background: #ffffff;
    }

    /* Etykieta (hero_badge_image) w układzie 50/50: prawy GÓRNY róg całego hero (przy krawędzi ekranu, 100% szerokości),
       nie wyrównana do siatki 1280px jak w trybie pełnym. Górny odstęp = pod fixed headerem. */
    .omoda-model-hero[data-layout="split"] .omoda-model-hero__corner-images {
        top: calc(var(--omoda-header-height, 80px) + 24px);
        right: 24px;
        bottom: auto;
    }

    /* Treść zaczyna się na linii siatki 1280px (jak w trybie pełnym), a kończy z oddechem przed zdjęciem. */
    .omoda-model-hero[data-layout="split"] .omoda-model-hero__inner {
        max-width: none;
        margin: 0;
        padding-left: max(20px, calc((100vw - var(--omoda-container-width, 1280px)) / 2 + var(--omoda-container-padding, 20px)));
        padding-right: 56px;
    }
}

/* Białe tło strony tekstu (split) — tekst i przyciski odwrócone; także na mobile (tam tekst jest pod zdjęciem). */
.omoda-model-hero[data-layout="split"][data-split-bg="light"] {
    --omoda-btn-primary-bg: #121212;
    --omoda-btn-primary-bg-hover: #2b2b2b;
    --omoda-btn-primary-text: #ffffff;
    --omoda-btn-primary-border: #121212;
    --omoda-btn-outline-bg: transparent;
    --omoda-btn-outline-bg-hover: rgba(18, 18, 18, 0.06);
    --omoda-btn-outline-text: #121212;
    --omoda-btn-outline-border: rgba(18, 18, 18, 0.3);
    --omoda-btn-outline-border-hover: #121212;
}

.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__content {
    background: #ffffff;
}

.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__title,
.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__slogan,
.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__price-sale,
.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__long-description,
.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__benefits,
.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-models__omnibus,
.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__legal {
    color: #121212 !important;
}

.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-model-hero__price-regular {
    color: rgba(18, 18, 18, 0.55);
}

.omoda-model-hero[data-layout="split"][data-split-bg="light"] .omoda-btn--outline {
    box-shadow: none;
}

/* Odnośnik (np. 1) przy sloganie — jak przy korzyściach. */
.omoda-model-hero__slogan sup {
    font-size: 10px;
    margin-left: 1px;
}