/**
 * 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.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); }

/* ── gotowy baner dostawcy ──
   Grafika ma już w sobie logo, nazwę i hasła. Pokazujemy ją w całości: wysokość
   nagłówka bierze się z obrazka, więc nic nie jest przycinane ani nie zostają pasy.
   Nasze napisy chowamy wizualnie, ale zostają w kodzie dla wyszukiwarek. */
.category-hero.category-hero--gotowy,
.category-hero.category-hero--ramka-gotowa {
    /* Listing owija naglowek w DRUGA, zewnetrzna sekcje .category-hero (product-list.tpl).
       Obie dostaja z motywu sztywne 41/52rem i szare tlo - obie trzeba z tego zwolnic. */
    height: auto;
    background: none;
}
.category-hero--gotowy .category-hero__media {
    position: static;
    height: auto;
    width: 100%;
    display: block;
}
.category-hero--gotowy .category-hero__media::before { display: none; }
.category-hero--gotowy .category-hero__media { text-align: center; }
/* Baner zachowuje wlasne proporcje. max-height pilnuje, zeby kwadratowa kreacja
   nie urosla na szerokiej stronie do pelnego ekranu - wtedy po prostu maleje,
   zamiast byc przycinana albo obudowana pasami. */
.category-hero.category-hero--gotowy .category-hero__image {
    /* Pelna szerokosc, od krawedzi do krawedzi, zawsze na srodku. Kadrowanie motywu
       (object-position: right) dosuwalo zwezony baner do prawej i zostawialo puste
       pole po lewej. */
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}
/* Limit wysokosci tylko od tabletu w gore: chroni przed kwadratem rozdetym na caly
   ekran desktopu. Na telefonie kwadrat to wlasciwa kreacja i ma wypelnic szerokosc -
   z limitem zwezal sie od ~587 px i zostawial puste pole. */
@media (min-width: 768px) {
    .category-hero.category-hero--gotowy .category-hero__image { max-height: 62vh; }
}
/* wrapper nie może już przykrywać banera */
.category-hero--gotowy .category-hero__wrapper {
    position: static;
    height: auto;
    width: auto;
}
.category-hero--gotowy .category-hero__wrapper::before { display: none; }
.category-hero--gotowy .category-hero__inner {
    height: auto;
    padding: 0;
    background: none;
    display: block;
    width: auto;
    max-width: none;
}
/* tytuł i opis zostają dla Google, znikają dla oka */
.category-hero--gotowy .category-hero__content {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* breadcrumb pod banerem, w normalnym rytmie strony */
/* Pasek pod banerem: breadcrumb wyśrodkowany w pionie, nie przyklejony do zdjęcia.
   Motyw daje breadcrumbowi 1rem na telefonie - w zwykłym nagłówku leży on na zdjęciu
   i to uchodzi, ale tutaj jest jedynym tekstem, więc podnosimy go do czytelnego rozmiaru.
   Dwie klasy w selektorze, bo custom.css motywu ładuje się po tym arkuszu. */
.category-hero__breadcrumb-pod {
    display: flex;
    align-items: center;
    min-height: 4.2rem;
}
.category-hero__breadcrumb-pod .breadcrumb { margin-bottom: 0 !important; }
.category-hero__breadcrumb-pod .breadcrumb__item,
.category-hero__breadcrumb-pod .breadcrumb li,
.category-hero__breadcrumb-pod .breadcrumb li a,
.category-hero__breadcrumb-pod .breadcrumb li span { font-size: 1.3rem; }

/* Pasek sortowania i filtrow stoi zaraz za zewnetrzna sekcja naglowka i ma z motywu
   margin-top 1rem. Pod gotowym banerem breadcrumb ma juz wlasny odstep - ten margines
   tylko dokladal pustke. Dwie klasy, bo custom.css laduje sie po tym arkuszu. */
.category-hero--ramka-gotowa + .product-list-top-sticky { margin-top: 0; }

/* Na desktopie zostawiamy rozmiar motywowi - ma wlasne stopnie na szerszych ekranach. */
@media (min-width: 992px) {
    .category-hero__breadcrumb-pod { min-height: 4.8rem; }
    .category-hero__breadcrumb-pod .breadcrumb__item,
    .category-hero__breadcrumb-pod .breadcrumb li,
    .category-hero__breadcrumb-pod .breadcrumb li a,
    .category-hero__breadcrumb-pod .breadcrumb li span { font-size: inherit; }
}

/* ── gdzie położyć przyciemnienie ──
   Napisy siedzą po lewej na dole, więc zamiast gasić cały kadr można przygasić sam pas
   pod nimi. Gradienty mają stałe alfy, a suwak z panelu skaluje je przez `opacity`.
   Na telefonie motyw stawia napisy POD zdjęciem, nie na nim - tam zostaje płaskie
   przyciemnienie, bo kierunkowy gradient nie miałby czego chronić. */
@media (min-width: 992px) {
    .category-hero--cien-lewo .category-hero__cien {
        background: linear-gradient(95deg,
            #000 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.8) 40%, rgba(0,0,0,.3) 58%, transparent 75%);
    }
    .category-hero--cien-dol .category-hero__cien {
        background: linear-gradient(0deg,
            #000 0%, rgba(0,0,0,.6) 35%, transparent 70%);
    }
}

/* sam cień liter - zdjęcie zostaje bez żadnej nakładki */
.category-hero--cien-tekst .category-hero__cien { display: none; }
@media (min-width: 992px) {
    .category-hero--cien-tekst .category-hero__title,
    .category-hero--cien-tekst .category-additional-description,
    .category-hero--cien-tekst .category-additional-description p,
    .category-hero--cien-tekst .category-hero__count,
    #wrapper .category-hero--cien-tekst .breadcrumb li,
    #wrapper .category-hero--cien-tekst .breadcrumb li a,
    #wrapper .category-hero--cien-tekst .breadcrumb li span {
        text-shadow: 0 2px 14px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .5);
    }
}