/* RESET I BAZA */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #0F0F0F;
    color: #f0f0f0;
    line-height: 1.6;
    overflow-x: hidden; /* Chroni przed paskiem przewijania przy animacjach */
}
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* KOLORY */
:root {
    --primary: #FFC107; 
    --dark: #0F0F0F;
    --dark-sec: #1A1A1A;
    --text-muted: #aaa;
}

/* UI ELEMENTS */
.container { max-width: 95%; margin: 0 auto; padding: 0 10px; }

.btn-primary {
    background: var(--primary); color: #000; padding: 12px 28px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    border-radius: 2px; display: inline-block;
}
.btn-primary:hover { background: #fff; }

.btn-outline {
    border: 2px solid #fff; color: #fff; padding: 10px 24px;
    font-weight: 600; margin-left: 10px; display: inline-block;
}
.btn-outline:hover { background: #fff; color: #000; }

.btn-login {
    font-size: 11px; color: #888; margin-right: 20px;
    box-shadow: 0 0 5px rgb(65, 65, 65); padding: 8px 15px; border-radius: 4px;
    text-transform: uppercase;
}
.btn-login:hover { border-color: var(--primary); color: var(--primary); }

.badge {
    background: var(--primary); color: #000; padding: 5px 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; border-radius: 2px; display: inline-block; margin-bottom: 20px;
}

/* HEADER & LOGO */
header {
    /* ZMIANA: Na starcie jest całkowicie przezroczysty */
    background: rgba(15, 15, 15, 0);
    /* Usuwamy border na starcie, żeby nie było kreski */
    border-bottom: none; 
    
    padding: 20px 0; /* Troszkę wyższy na starcie */
    position: fixed; 
    width: 100%;
    top: 0; 
    z-index: 100;
    transition: all 0.4s ease-in-out; /* Płynniejsze przejście */
}

/* To się dzieje jak scrollujesz (dodaje JS) */
header.scrolled { 
    background: rgba(15, 15, 15, 0.95); /* Prawie pełna czerń */
    padding: 10px 0; /* Zmniejsza się */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Cień dla głębi */
}

.nav-flex { display: flex; justify-content: space-between; align-items: center; }

/* Nowe style dla LOGO SVG */
.main-logo {
    height: 45px; /* Optymalna wysokość */
    width: auto;
    display: block;
    transition: 0.3s;
}
a:hover .main-logo { transform: scale(1.25); }

nav a { margin-left: 20px; font-size: 13px; text-transform: uppercase; font-weight: 600; }
nav a:hover { color: var(--primary); }

/* HERO - ZMIANY Z TŁEM */
.hero-bg, .overlay {
    position: fixed;
    top: 0;
    left: 0;
    /* Używamy jednostek vmin/vmax lub lvh, żeby wymusić sztywny rozmiar */
    width: 100vw;
    height: 100lvh; /* lvh = Largest Viewport Height (rozmiar przy schowanym pasku) */
    
    /* To zapobiega "pływaniu" tła przy scrollu */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    z-index: -10;
}

.hero-bg {
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) blur(3px);
    animation: heroSlide 30s infinite;
}

/* Overlay musi mieć o jeden wyższy z-index od tła, ale wciąż pod tekstem */
.overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 100%);
    z-index: -9;
}


/* Animacja zmieniająca zdjęcia w tle */
@keyframes heroSlide {
    0% { background-image: url('../img/prefabrykacja/prefabrykacja_rozdzielnicy_1.jpg'); }
    33% { background-image: url('../img/prefabrykacja/prefabrykacja_rozdzielnicy_2.jpg'); }
    66% { background-image: url('../img/prefabrykacja/prefabrykacja_rozdzielnicy_3.jpg'); }
    100% { background-image: url('../img/prefabrykacja/prefabrykacja_rozdzielnicy_1.jpg'); }
}

.overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    /* Ciemniejszy gradient, żeby tekst był czytelny na rozmytym tle */
    background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 100%);
    z-index: -5;
}

#hero {
    height: 100vh;
    height: 100dvh; 
    display: flex;
    align-items: center; /* Centruje treść w pionie */
    justify-content: flex-start; /* Trzyma treść po lewej (zgodnie z Twoim designem) */
    position: relative;
    padding-top: 80px; /* Robi miejsce na stały (fixed) header */
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 85%;
    /* Dodatkowy margines, jeśli chcesz, żeby napis był nieco niżej niż idealny środek */
    margin-top: 20px; 
}
#hero h1 { font-size: 46px; line-height: 1.2; margin-bottom: 20px; color: #fff; font-weight: 800; }
#hero p { font-size: 18px; margin-bottom: 30px; color: #ddd; max-width: 640px; }

/* ZAUFALI NAM */
/* ZAUFALI NAM */
.trust { 
    padding: 40px 0; 
    background: rgba(0, 0, 0, 0.75); 
    border-bottom: 1px solid #222; 
    border-top: 1px solid #222; 
    box-shadow: 0 0 20px rgb(65, 65, 65);
}
.section-label { 
    text-align: center; 
    font-size: 11px; 
    opacity: 0.5; 
    margin-bottom: 30px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #fff;
}

.logos { 
    overflow: hidden; /* Ważne: ukrywa to, co wystaje poza ekran przy animacji */
    width: 100%;
    padding: 20px 0;
}

.logos-track {
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 50px;
}

/* Ukrywamy kopię logo na komputerze */
.mobile-only-logos {
    display: none;
    gap: 50px;
}

.logo-img {
    height: 40px; 
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(100%) invert(1) brightness(1.2) opacity(0.6);
    transition: all 0.4s ease;
    flex-shrink: 0; /* Zapobiega ściskaniu logo w animacji */
}

/* --- LOGIKA DLA MOBIŁEK --- */
@media (max-width: 1340px) {
    .logos-track {
        justify-content: flex-start; /* Startujemy od krawędzi */
        width: max-content; /* Pozwala kontenerowi być szerszym niż ekran */
        animation: scrollLogos 20s linear infinite;
        flex-wrap: nowrap; /* Wyłączamy spadanie logotypów niżej */
    }

    .mobile-only-logos {
        display: flex; /* Pokazujemy kopię, by domknąć pętlę animacji */
    }

    .logos {
        /* Cienie po bokach, żeby loga łagodnie znikały */
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }
}

/* Animacja płynnego przesunięcia o połowę szerokości (czyli o jedną całą grupę logo) */
@keyframes scrollLogos {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Efekt po najechaniu myszką: Logo odzyskuje kolory (opcjonalnie) lub po prostu świeci */
.logo-img:hover {
    /* Opcja 1: Pełny kolor (usuwamy filtry) */
    /* filter: grayscale(0) invert(0) opacity(1); */
    
    /* Opcja 2 (LEPSZA DLA B2B): Robi się po prostu jasne białe */
    filter: grayscale(100%) invert(1) brightness(1) opacity(1);
}

/* MOBILE */
@media (max-width: 768px) {
    .logos {
        gap: 30px; /* Mniejsze odstępy na telefonie */
    }
    .logo-img {
        height: 30px; /* Mniejsze loga na telefonie */
        max-width: 100px;
    }
}

/* SEKCJE */
section { padding: 80px 0; }
.section-header { margin-bottom: 50px; }
h2 { font-size: 32px; margin-bottom: 15px; color: #fff; position: relative; display: inline-block; }
h2::after { content:''; display: block; width: 60px; height: 3px; background: var(--primary); margin-top: 10px; }

/* OFERTA */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.card {
    background: rgba(0, 0, 0, 0.75); padding: 40px 30px;
    border: 1px solid #222; transition: 0.3s;
    box-shadow: 0 0 6px rgb(65, 65, 65);
}
.card:hover { transform: translateY(-5px); border-color: var(--primary); }
.card h3 { color: #fff; margin-bottom: 15px; font-size: 20px; }
.card p { color: var(--text-muted); font-size: 15px; text-align: justify; }

/* GALERIA */
/* GALERIA */

.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* ZMIANA: Zwiększyłem trochę wysokość kafelków, żeby lepiej mieściły piony */
    grid-template-rows: 40vh 40vh; 
    gap: 15px;
    padding-left: 12.5%;
    padding-right: 12.5%;
}
.gallery-item { position: relative; overflow: hidden; border-radius: 2px; }

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%; /* Upewnij się, że rodzic (np. grid) ma ustaloną wysokość! */
    overflow: hidden; /* Ucina wszystko, co wyjdzie poza ramkę przy zoomowaniu */
    background: #000; /* Czarne tło, żeby nie mrugało na biało przy zmianie */
    
    /* WINIETA (Cień wewnętrzny): Klucz do efektu Premium w Dark Mode */
    /* inset sprawia, że cień wchodzi NA zdjęcie od krawędzi */
    box-shadow: 0 0 12px 2px #000000;
    z-index: 0;
    
    /* Zaokrąglenie rogów (opcjonalnie - jeśli reszta designu to ma) */
    /* border-radius: 8px; */
}

/* --- WYGLĄD ZDJĘCIA (Klasa dodawana przez JS) --- */
.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    object-position: center;
    z-index: 1; /* Ważne: Nowe zdjęcia muszą wchodzić na te same warstwy */
    
    will-change: transform, opacity, filter;
    
    /* To steruje szybkością przenikania (1.5s) */
    transition: opacity 1.5s ease-in-out; 
    
    /* Domyślnie 0, JS zmieni na 1 po załadowaniu */
    /* Ale usuwamy stąd "opacity: 1", żeby JS miał pełną kontrolę */

    /* Filtry i Animacje (bez zmian) */
    filter: brightness(0.7) contrast(1.1) saturate(0.9);
    animation: focusMove 20s ease-out infinite alternate;
}

/* --- DEFINICJA ANIMACJI --- */
@keyframes focusMove {
    0% {
        /* Start: Lekki zoom (1.0) i delikatne rozmycie (nieostrość) */
        transform: scale(1.0);
        filter: brightness(0.7) contrast(1.1) saturate(0.9) blur(2px);
    }
    15% {
        /* Szybkie złapanie ostrości (jak w kamerze) */
        filter: brightness(0.7) contrast(1.1) saturate(0.9) blur(0px);
    }
    100% {
        /* Koniec: Powolny zoom do 1.15 i lekkie przyciemnienie */
        transform: scale(1.15);
        filter: brightness(0.6) contrast(1.1) saturate(0.9) blur(0px);
    }
}

/* Napis (overlay) musi być zawsze na samej górze */
.g-overlay {
    z-index: 10;
}

/* Efekt zoom przy najechaniu na cały kafelek */
.gallery-item:hover img.active,
.gallery-item:hover img:not(.slideshow-container img) { 
    transform: scale(1.05); 
}
.big { grid-row: span 2; }
.g-overlay {
    position: absolute; bottom: 20px; left: 20px;
    background: var(--primary); color: #000;
    padding: 5px 15px; font-weight: 700; font-size: 12px;
}

/* KONTAKT */
.big-btn { font-size: 28px; letter-spacing: 2px; margin-bottom: 20px; }
.email-contact { color: #888; margin-bottom: 10px; text-shadow: 3px 1px 3px black;}
.footer-note { margin-top: 40px; opacity: 0.6; border-top: 1px solid #333; padding-top: 20px; display: inline-block; font-size: 14px; }
footer { border-top: 1px solid #222; padding: 30px 0; text-align: center; font-size: 12px; color: #555; text-shadow: 3px 1px 3px #000000;}

/* MOBILE */
@media (max-width: 768px) {
    #hero h1 { font-size: 32px; }
    .nav-flex { gap: 20px; }
    .split-screen { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: 80vh; }
    .hero-btns { display: flex; flex-direction: column; gap: 15px; }
    .btn-outline { margin-left: 0; text-align: center; }
    .btn-primary { text-align: center; }
    .btn-login { display: none; }
    .hero-bg, .overlay {
        position: fixed; /* Musi być fixed, żeby tło stało pod całą stroną */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100lvh !important; /* Blokada wysokości */
        
        /* MAGICZNA LINIA: Zapobiega drganiu i lagom przy zmianie paska URL */
        will-change: transform;
        transform: translateZ(0); 
    }

    .hero-bg {
        animation: none !important;
        background-image: url('../img/prefabrykacja/prefabrykacja_rozdzielnicy_1.jpg') !important;
        filter: grayscale(100%) blur(1px);
        background-attachment: scroll; /* Ważne: na mobile "fixed" w background-attachment często laguje, lepiej użyć position: fixed na kontenerze */
    }

    #hero {
        height: 100lvh;
        display: flex;
        align-items: center; /* Żeby napis INDUSTRY nie uciekał do góry */
    }
}

@media (max-width: 1000px) {
    .grid-3 {
        /* "Zapomnij o auto-fit, zrób tylko jedną kolumnę na całą szerokość" */
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 500px) {
    nav a {
        margin-left: 12px;
        font-size: 10px;
    }
    .main-logo {
        height: 34px;
    }
}