/* ===================================================================
   Rotator banerow producentow  (2026-08-17)
   -------------------------------------------------------------------
   Podklad 1920x560 ma ciemny panel wtopiony w obraz, a overlay musi
   trafic dokladnie w ten panel. Dotychczasowe `height:70vh` + `cover`
   przycinalo podklad o ok. 1/3 szerokosci i panel przestawal sie
   zgadzac z tekstem, dlatego karuzela przyjmuje proporcje podkladu.
   Uklad overlaya: .rot-ov (pas) > .rot-logo, .rot-h, .rot-p.
   Szerokosc pasa przychodzi z manifestu jako zmienna --rot-w.
   =================================================================== */
.carousel .carousel-inner {
    height: auto;
}

.carousel .carousel-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 560;
    object-fit: cover;
}

.carousel .carousel-item figure {
    position: relative;
    margin: 0;
    display: block;
    width: 100%;
}

.carousel .carousel-item .rot-ov {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--rot-w, 42%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.4%;
    padding: 0 2.5%;
    text-align: left;
    pointer-events: none; /* klikniecie obsluguje <a> calego slajdu */
}

.carousel .carousel-item .rot-ov--left {
    left: 0;
}

.carousel .carousel-item .rot-ov--right {
    right: 0;
}

.carousel .carousel-item .rot-ov--srodek {
    left: 50%;
    transform: translateX(-50%);
}

/* Logo na bialej plakietce - czesc logotypow jest ciemna albo zrobiona
   pod biale tlo. Specyficznosc musi byc wyzsza niz
   `.carousel .carousel-item img`, ktore ustawia proporcje podkladu. */
.carousel .carousel-item .rot-ov .rot-logo {
    width: auto;
    height: auto;
    max-width: 58%;
    max-height: 26%;
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin: 0 0 0.6% 0;
}

.carousel .carousel-item .rot-ov .rot-h {
    font-family: Jost, sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 64px);
    line-height: 1.05;
    color: #fff;
}

.carousel .carousel-item .rot-ov .rot-p {
    font-family: Jost, sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 22px);
    line-height: 1.25;
    color: #fff;
    margin: 0;
    max-width: 96%;
}

/* Na waskich ekranach pas 42% jest za waski na tekst. Overlay rozszerza
   sie i dostaje wlasne przyciemnienie w kolorze panelu, zeby tekst byl
   czytelny takze tam, gdzie wychodzi juz poza wtopiony panel. */
@media (max-width: 991px) {
    .carousel .carousel-item .rot-ov {
        width: 74%;
        padding: 0 4%;
        gap: 2%;
        background: rgba(26, 26, 26, 0.72);
    }

    .carousel .carousel-item .rot-ov--srodek {
        left: 0;
        transform: none;
    }

    .carousel .carousel-item .rot-ov .rot-logo {
        max-width: 46%;
        max-height: 22%;
        padding: 8px;
    }
}

@media (max-width: 575px) {
    .carousel .carousel-item .rot-ov {
        width: 100%;
        padding: 0 5%;
    }

    .carousel .carousel-item .rot-ov .rot-h {
        font-size: clamp(20px, 6.2vw, 32px);
    }

    .carousel .carousel-item .rot-ov .rot-p {
        font-size: clamp(12px, 3.4vw, 16px);
    }

    .carousel .carousel-item .rot-ov .rot-logo {
        max-width: 52%;
        max-height: 20%;
    }
}

/* --- POPRAWKI UKLADU ROTATORA -------------------------------------
   1. `align-items:flex-start` na .rot-ov powodowal, ze akapit opisu
      dostawal szerokosc swojej TRESCI (max-content) i wychodzil poza
      panel, przez pasek akcentu na zdjecie. Rozciagamy dzieci na pelna
      szerokosc pasa, a do lewej dosuwamy tylko logo.
   2. Twarde ograniczenie szerokosci obrazu - podklad 1920px potrafil
      wyjsc poza okno przegladarki.
   ------------------------------------------------------------------ */
.carousel .carousel-item .rot-ov {
    align-items: stretch;
}

.carousel .carousel-item .rot-ov .rot-logo {
    align-self: flex-start;
}

.carousel .carousel-item .rot-ov .rot-h,
.carousel .carousel-item .rot-ov .rot-p {
    width: 100%;
    max-width: 100%;
}

.ps-imageslider,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item figure {
    max-width: 100%;
    overflow: hidden; /* nie overflow-x - wymusza overflow-y:auto */
}

.carousel .carousel-item img {
    max-width: 100%;
}

/* --- LINK SLAJDU ---------------------------------------------------
   <a> opakowujacy slajd dopasowywal sie do tresci (1972px przy oknie
   1440px), przez co obraz z width:100% odnosil sie do niego i wracal
   do naturalnych 1920px. Nadajemy linkowi okreslona szerokosc.
   ------------------------------------------------------------------ */
.carousel .carousel-item > a {
    display: block;
    width: 100%;
    max-width: 100%;
    /* Link mial czerwone tlo motywu i wewnetrzny odstep - przy podkladzie
       wezszym niz kontener wygladalo to jak czerwona ramka wokol banera. */
    padding: 0;
    background: transparent;
}

/* --- ZAWIJANIE TEKSTU W OVERLAYU -----------------------------------
   Pudelko akapitu bylo poprawnie ograniczone do szerokosci panelu, ale
   tekst szedl jedna linia przez pasek akcentu na zdjecie - motyw
   narzuca w karuzeli white-space:nowrap. Przywracamy zawijanie.
   ------------------------------------------------------------------ */
.carousel .carousel-item .rot-ov,
.carousel .carousel-item .rot-ov .rot-h,
.carousel .carousel-item .rot-ov .rot-p {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* --- MOBILE: WYSOKOSC Z TRESCI -------------------------------------
   Przy 390px szerokosci proporcja podkladu 1920x560 daje ok. 114px
   wysokosci - logo, naglowek i opis sie tam nie miesza. Na waskich
   ekranach odwracamy zaleznosc: to overlay wyznacza wysokosc slajdu,
   a podklad wypelnia tlo pod nim (cover). Panel wtopiony w obraz
   przestaje byc wtedy istotny, bo overlay ma wlasne przyciemnienie.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .carousel .carousel-item > a {
        position: relative;
        display: block;
    }

    .carousel .carousel-item figure {
        position: relative;
        display: block;
    }

    .carousel .carousel-item img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .carousel .carousel-item .rot-ov {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        padding: 7% 6%;
        gap: 10px;
        background: rgba(26, 26, 26, 0.78);
    }

    .carousel .carousel-item .rot-ov .rot-logo {
        max-width: 46%;
        max-height: none;
        height: auto;
        padding: 8px;
    }
}

/* --- MOBILE: KOREKTA LOGO I WYSOKOSCI ------------------------------
   `max-height:none` z poprzedniego bloku pozwolilo logo urosnac do
   naturalnego rozmiaru i zaslonic naglowek. Twardy limit w px plus
   zdjecie wysokosci z kontenerow karuzeli, zeby slajd mogl urosnac
   do wysokosci tresci.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .carousel .carousel-inner,
    .carousel .carousel-item,
    .carousel .carousel-item > a,
    .carousel .carousel-item figure {
        height: auto;
        min-height: 0;
    }

    .carousel .carousel-item .rot-ov .rot-logo {
        width: auto;
        height: auto;
        max-width: 38%;
        max-height: 52px;
        margin: 0 0 4px 0;
    }

    .carousel .carousel-item .rot-ov .rot-h {
        font-size: clamp(20px, 5.6vw, 30px);
    }

    .carousel .carousel-item .rot-ov .rot-p {
        font-size: clamp(12px, 3.4vw, 15px);
    }
}

/* --- ZAPORA MOBILE (tymczasowa) ------------------------------------
   Uklad overlaya na waskich ekranach nie jest dokonczony: logo zachodzi
   na naglowek, bo style karuzeli z motywu nie pozwalaja slajdowi urosnac
   do wysokosci tresci. Do czasu dokonczenia pokazujemy na telefonie sam
   podklad - slajd nadal jest klikalny i prowadzi na strone marki.
   PO DOKONCZENIU UKLADU MOBILNEGO USUNAC TEN BLOK.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .carousel .carousel-item .rot-ov {
        display: none;
    }

    .carousel .carousel-item img {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 560;
        object-fit: cover;
    }

    .carousel .carousel-inner,
    .carousel .carousel-item,
    .carousel .carousel-item > a,
    .carousel .carousel-item figure {
        height: auto;
        min-height: 0;
    }
}

/* --- GUZIK POD OPISEM ----------------------------------------------
   To <span>, nie <a> - caly slajd jest juz linkiem, a zagniezdzony <a>
   bylby niepoprawnym HTML. `pointer-events:auto` przywraca kursor i
   podswietlenie; klikniecie i tak obsluguje link nadrzedny.
   ------------------------------------------------------------------ */
.carousel .carousel-item .rot-ov .rot-cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.8%;
    padding: 0.75em 1.6em;
    border: 2px solid #fff;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-family: Jost, sans-serif;
    font-weight: 600;
    font-size: clamp(13px, 1.15vw, 17px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.carousel .carousel-item > a:hover .rot-ov .rot-cta,
.carousel .carousel-item .rot-ov .rot-cta:hover {
    background: #fff;
    color: #1a1a1a;
}

@media (max-width: 991px) {
    .carousel .carousel-item .rot-ov .rot-cta {
        font-size: 14px;
        padding: 0.6em 1.2em;
    }
}

/* --- ODSUNIECIE OD SKOSU -------------------------------------------
   Panel wtopiony w podklad ma ukosna krawedz (skos 0.08 z manifestu,
   czyli ok. 8% szerokosci obrazu). Overlay zaczynal sie w stalym
   miejscu, wiec przy gorze slajdu logo i naglowek wchodzily na zdjecie
   (widoczne najmocniej na panelach po prawej, np. GPPH).
   Dokladamy odstep od tej strony, po ktorej biegnie ukos.
   Procenty licza sie od szerokosci obrazu, wiec 8% = tyle co skos.
   ------------------------------------------------------------------ */
.carousel .carousel-item .rot-ov--left {
    padding-right: calc(2.5% + 8%);
}

.carousel .carousel-item .rot-ov--right {
    padding-left: calc(2.5% + 8%);
}

.carousel .carousel-item .rot-ov--srodek {
    padding-left: calc(2.5% + 8%);
    padding-right: calc(2.5% + 8%);
}

/* --- KOREKTA PANELU SRODKOWEGO -------------------------------------
   Panel `srodek` jest wezszy (34%) i ma ukos po OBU stronach. Odjecie
   pelnego skosu z kazdej strony zostawialo ok. 190px na tekst, przez
   co tresc nie miescila sie w pionie. Ukos zjada pelna szerokosc tylko
   przy krawedziach slajdu - w polowie wysokosci, gdzie siedzi tekst,
   panel jest szerszy. Dlatego liczymy pol skosu i zmniejszamy krój.
   ------------------------------------------------------------------ */
.carousel .carousel-item .rot-ov--srodek {
    padding-left: calc(2.5% + 4%);
    padding-right: calc(2.5% + 4%);
}

.carousel .carousel-item .rot-ov--srodek .rot-h {
    font-size: clamp(22px, 2.5vw, 44px);
}

.carousel .carousel-item .rot-ov--srodek .rot-p {
    font-size: clamp(12px, 1.05vw, 16px);
}

.carousel .carousel-item .rot-ov--srodek .rot-logo {
    max-height: 20%;
}

.carousel .carousel-item .rot-ov--srodek .rot-cta {
    font-size: clamp(12px, 0.95vw, 14px);
    padding: 0.6em 1.2em;
}