/**
 * Banery nagłówków listingów - style frontu.
 * Zastępuje blok <style> wiszący wcześniej inline w category-header.tpl (4,9 KB na
 * każdym listingu, nie do zacache'owania). Wartości sterowane z panelu wchodzą
 * jako zmienne CSS na sekcji, więc tu nie ma nic wpisanego na sztywno pod kategorię.
 */

/* ── logo marki na banerze (bez zmian z poprzedniego szablonu) ── */
.category-hero__logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 200px;
    max-height: 130px;
    object-fit: contain;
    padding: 8px 12px;
    border-radius: 10px;
}
@media (min-width: 992px) {
    .category-hero__logo {
        left: auto;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        max-width: 300px;
        max-height: 250px;
        padding: 16px 22px;
        border-radius: 14px;
    }
}

/* ── kadrowanie banera ── */
.category-hero--modul .category-hero__image { object-position: var(--hero-kadr, right center); }
@media (max-width: 991px) {
    .category-hero--modul .category-hero__image { object-position: var(--hero-kadr-m, right center); }
}

/* ── jednolite tło zamiast zdjęcia ── */
.category-hero--tlo { background-color: var(--hero-bg, var(--light-grey)); }

/* ── przyciemnienie banera ──
   Leży nad zdjęciem, ale pod nakładką i pod tekstem. */
.category-hero__cien {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: var(--hero-cien, 0);
    pointer-events: none;
}

/* ── nakładka: wycięty produkt na banerze ──
   Poza .category-hero__media, więc przyciemnienie jej nie dotyczy. */
.category-hero__nakladka {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--hero-nakl, 80%);
    pointer-events: none;
    z-index: 1;
}
.category-hero__nakladka img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* na telefonie zawsze na środku, w pasie ze zdjęciem */
.category-hero__nakladka {
    left: 50%;
    right: auto;
    width: 80%;
    transform: translate(-50%, -50%);
    top: 35%;
}
.category-hero--tlo .category-hero__nakladka { top: 50%; }
@media (min-width: 992px) {
    .category-hero__nakladka--right  { left: auto; right: 5%; width: 40%; transform: translateY(-50%); top: 50%; }
    .category-hero__nakladka--left   { right: auto; left: 5%; width: 40%; transform: translateY(-50%); top: 50%; }
    .category-hero__nakladka--center { left: 50%; right: auto; width: 55%; transform: translate(-50%, -50%); top: 50%; }
}

/* ── film w tle ── */
.category-hero__wideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: var(--hero-kadr, right center);
}

/* ── film z boku (dziś: diamenty) ──
   Bez z-index: tworzyłby kontekst składania i wyłączał mix-blend-mode. */
.category-hero__wideo-obok {
    position: absolute;
    right: 7rem;
    top: 0;
    width: 22%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.category-hero__wideo-obok video {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}
@media (max-width: 768px) {
    .category-hero--wideo-obok { padding-top: 0; }
    .category-hero__wideo-obok {
        position: relative;
        width: 70%;
        height: auto;
        right: auto;
        top: auto;
        margin: 0 auto;
    }
    .category-hero__wideo-obok video { object-fit: contain; }
}

/* ── zdjęcie jasnych nakładek motywu spod tekstu ── */
.category-hero--bez-plamki .category-hero__inner,
.category-hero--bez-plamki .category-hero__wrapper::before {
    background: none;
}

/* ── kolory tekstu z panelu ──
   Domyślnie tylko od 992px: na telefonie motyw stawia napisy pod zdjęciem, na jasnym
   tle, więc biała czcionka by zniknęła. Klasa --kolory-mobile włącza je wszędzie
   (sensowne, gdy tło pod napisami też jest ciemne). */
@media (min-width: 992px) {
    .category-hero--modul .category-hero__title,
    .category-hero--modul .category-additional-description,
    .category-hero--modul .category-additional-description p,
    .category-hero--modul .category-additional-description a { color: var(--hero-tekst, inherit); }
    .category-hero--modul .category-additional-description p span { color: var(--hero-tekst, inherit) !important; }
    .category-hero--modul .category-hero__count,
    #wrapper .category-hero--modul .breadcrumb li,
    #wrapper .category-hero--modul .breadcrumb li a,
    #wrapper .category-hero--modul .breadcrumb li span,
    #wrapper .category-hero--modul .breadcrumb li:last-child { color: var(--hero-bc, inherit); }
}
.category-hero--kolory-mobile .category-hero__title,
.category-hero--kolory-mobile .category-additional-description,
.category-hero--kolory-mobile .category-additional-description p,
.category-hero--kolory-mobile .category-additional-description a { color: var(--hero-tekst, inherit); }
.category-hero--kolory-mobile .category-additional-description p span { color: var(--hero-tekst, inherit) !important; }
.category-hero--kolory-mobile .category-hero__count,
#wrapper .category-hero--kolory-mobile .breadcrumb li,
#wrapper .category-hero--kolory-mobile .breadcrumb li a,
#wrapper .category-hero--kolory-mobile .breadcrumb li span,
#wrapper .category-hero--kolory-mobile .breadcrumb li:last-child { color: var(--hero-bc, inherit); }