/* =========================================
   FIX: ELIMINACJA PASKA PRZEWIJANIA POZIOMEGO
   ========================================= */

/* 1. GŁÓWNA BLOKADA DLA CAŁEJ STRONY */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. KOREKTA SZEROKOŚCI DLA ELEMENTÓW */
/* Zmieniamy 100.5% z poprzedniego kodu na bezpieczne 100% */
.moja-galeria img, 
.moja-galeria .zpPhotoAlbum-item,
.moj-hero {
    max-width: 100vw !important; /* Szerokość viewportu, ani piksela więcej */
    box-sizing: border-box !important;
}

/* 3. WYMUSZENIE BOX-SIZING */
/* Dzięki temu paddingi nie powiększają pudełek */
* {
    box-sizing: border-box !important;
}





/* =========================================
   1. BANER - TRZYMAMY WYSOKOŚĆ (55vh)
   ========================================= */
.moj-hero, 
.moj-hero .zs-hero-section, 
.moj-hero .zs-hero-content, 
.moj-hero .zs-hero-slide, 
.moj-hero .zs-hero-slide-inner {
    height: 55vh !important; 
    min-height: 480px !important;
    max-height: 650px !important;
    position: relative !important;
    
    /* SKOS */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%) !important;
    /* --- FIX KLIKALNOŚCI --- */
    /* To pozwala klikać w elementy pod banerem (tam gdzie jest "wycięte") */
    pointer-events: none !important; 
    
    border: none !important;
}

/* WAŻNE: Przywracamy klikalność dla tekstu i przycisku wewnątrz banera */
.napis-hero-para, 
.moj-guzik-hero, 
.moj-guzik-hero a {
    pointer-events: auto !important;
}

/* Fix dla czystego przejścia */
.zs-content-wrapper {
    margin-top: -50px !important; /* Podciągamy sekcję pod spodem wyżej, żeby "weszła" pod skos */
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================
   2. BIAŁY SKOS
   ========================================= */
.moj-skos {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: -120px !important; 
    min-height: 120px !important;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%) !important;
}

/* =========================================
   3. KAFELKI USŁUG (TWOJA DZIAŁAJĄCA BAZA)
   ========================================= */
.kafelek-usluga {
    width: 85% !important; 
    margin: 15px auto !important; 
    aspect-ratio: 1 / 1 !important; 
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: center !important;
    transition: all 0.4s ease !important;
}

.kafelek-usluga:hover { transform: translateY(-10px) scale(1.03) !important; }

.napis-kafelek {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background: rgba(20, 20, 20, 0.95) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    overflow: visible !important;
    transition: background-color 0.3s ease !important;
}

.kafelek-usluga:hover .napis-kafelek { background-color: #FE5000 !important; }

.napis-kafelek a::after {
    content: "" !important;
    position: absolute !important;
    top: -500px !important; 
    left: 0 !important;
    width: 100% !important;
    height: 600px !important; 
    z-index: 999 !important;
}

.napis-kafelek, .napis-kafelek * {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* 4. POPRAWKA NA TELEFONY */
@media screen and (max-width: 768px) {
    .moj-hero, .moj-hero .zs-hero-content { height: 40vh !important; }
    .moj-hero .zs-hero-content-inner { padding-top: 120px !important; }
    .napis-hero-para {
        font-size: 28px !important;
        margin-left: 20px !important;
        white-space: normal !important;
    }
}
/* =========================================
   1. NAPIS - MARGINES ZAMIAST SPACERÓW
   ========================================= */
.napis-hero-para, 
.napis-hero-para h1, 
.napis-hero-para h2, 
.napis-hero-para h3 {
    /* To zastępuje Twoje dwa klocki. 
       Jeśli jest za wysoko - daj 250px lub 300px. */
    margin-top: 120px !important; 
    
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #ffffff;
    font-size: clamp(32px, 5.5vw, 65px) !important;
    line-height: 0.9 !important;
    text-shadow: 2px 2px 12px rgba(0,0,0,0.6) !important;
    text-align: center !important;
    
    /* Resetujemy poprzednie metody spychaczy */
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    display: block !important;
}

/* =========================================
   2. GUZIK - ODSTĘP POD NAPISEM
   ========================================= */
.moj-guzik-hero {
    /* Odstęp między tekstem a guzikiem */
    margin-top: 40px !important; 
    
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
}

.moj-guzik-hero a {
    background-color: #fe5000 !important;
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 16px 45px !important;
    font-size: 18px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease-in-out !important;
}

/* HOVER */
.moj-guzik-hero a:hover {
    background-color: #222222 !important;
    color: #fe5000 !important;
}

/* =========================================
   3. INTELIGENTNY ODSTĘP NA TELEFONIE
   ========================================= */
@media screen and (max-width: 768px) {
    .napis-hero-para, .napis-hero-para h1 {
        /* Tutaj kod automatycznie skraca Twój spacer 
           z 220px na 50px, żeby napis nie uciekł z ekranu */
        margin-top: 50px !important; 
        font-size: 26px !important;
    }
    .moj-guzik-hero {
        margin-top: 25px !important;
    }
}
/* =========================================
   USUWANIE CZARNEGO PASKA I LINII
   ========================================= */

/* 1. Kasujemy obramowania wszystkich sekcji */
section, .zs-section, [data-section-id] {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Zabijamy poziome linie (HR), które Zoho lubi dodawać */
hr, .zpSeparator {
    display: none !important;
    height: 0 !important;
    border: none !important;
}

/* 3. Czyścimy tło kontenera pod banerem, jeśli tam coś zostało */
.zs-content-wrapper {
    border: none !important;
}

/* 4. Resetujemy marginesy nad nagłówkiem "This is a Heading" */
.zs-section:first-of-type {
    padding-top: 20px !important; /* Dajemy trochę oddechu, ale bez paska */
}
/* =========================================
   V83: PROSTA I CZYSTA GALERIA (STABILNA)
   ========================================= */

/* 1. USUWANIE PRZERW MIĘDZY ZDJĘCIAMI */
.moja-galeria .zpPhotoAlbum-container,
.moja-galeria .zpMasonry-col,
.moja-galeria .zpPhotoAlbum-item {
    padding: 0 !important;
    margin: 0 !important;
    /* Usuwamy szare obramowanie, które czasem zostaje */
    border: none !important;
}

/* 2. ZDJĘCIE - TYLKO PODSTAWOWE USTAWIENIA */
.moja-galeria img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transition: transform 0.4s ease-in-out, filter 0.3s ease !important;
    /* Fix na "uciekanie do rogu" */
    transform-origin: center center !important;
}

/* 3. WYŁĄCZENIE CZARNYCH NAKŁADEK ZOHO */
/* To likwiduje ten czarny kwadrat, który widziałeś przy hoverze */
.moja-galeria .zpPhotoAlbum-item::before,
.moja-galeria .zpPhotoAlbum-item::after,
.moja-galeria [class*="overlay"],
.moja-galeria [class*="caption"] {
    display: none !important;
}

/* 4. BEZPIECZNY EFEKT HOVER */
.moja-galeria .zpPhotoAlbum-item:hover img {
    /* Tylko delikatne powiększenie, bez przesuwania kontenerów */
    transform: scale(1.05) !important;
    filter: brightness(1.1) contrast(1.1) !important;
    z-index: 5 !important;
}

/* 5. OPCJONALNA RAMKA POMARAŃCZOWA */
.moja-galeria .zpPhotoAlbum-item:hover {
    outline: 2px solid #ff6600 !important;
    outline-offset: -2px;
}
/*PODSTRONY sobota 31.01.26 */
/* =========================================
   BANER LUSTRZANY (DLA PODSTRON)
   ========================================= */

.moj-hero-lustro, 
.moj-hero-lustro .zs-hero-section, 
.moj-hero-lustro .zs-hero-content, 
.moj-hero-lustro .zs-hero-slide, 
.moj-hero-lustro .zs-hero-slide-inner {
    height: 55vh !important; 
    min-height: 480px !important;
    max-height: 650px !important;
    position: relative !important;
    


    /* Wyłączamy klikanie w baner (żeby skos działał) */
    pointer-events: none !important; 
    border: none !important;
}

/* ODBLOKOWANIE KLIKANIA DLA TREŚCI W LUSTRZE */
/* To zadziała na wszystko, co ma Twoją klasę napisu lub guzik */
.moj-hero-lustro .napis-hero-para, 
.moj-hero-lustro .moj-guzik-hero,
.moj-hero-lustro [class*="content"] * {
    pointer-events: auto !important;
}

/* Fix dla menu na podstronach */
.moj-hero-lustro + header, .zs-header-container {
    pointer-events: auto !important;
    z-index: 9999 !important;
}
/* =========================================
   V95: FIX DLA SZABLONOWEGO HEADERA (OM OSS)
   ========================================= */

.napis-om-oss, 
.napis-om-oss * {
    /* 1. CZCIONKA I INTERLINIA */
    font-family: 'Oswald', sans-serif !important;
    line-height: 0.95 !important; /* To naprawia za duże odstępy */
    text-transform: uppercase !important;
    font-weight: 400 !important;
    
    /* 2. PŁYNNA WIELKOŚĆ (MacBook vs Telefon) */
    /* Tekst sam się skaluje: min 30px, max 60px */
    font-size: clamp(30px, 5vw, 60px) !important;
    
    /* 3. POZYCJA */
    text-align: left !important;
    padding-left: 0 !important; /* Szablon ma własny kontener, więc dajemy 0 */
}

/* 4. POPRAWKA NA MOBILE */
@media screen and (max-width: 768px) {
    .napis-om-oss, 
    .napis-om-oss * {
        font-size: 28px !important; /* Zmniejszamy na telefonie */
        line-height: 1.1 !important; /* Na mobile ciut więcej oddechu */
        text-align: center !important; /* Opcjonalnie: na mobile do środka wygląda lepiej */
    }
}