/* Ustawiamy bazowy rozmiar czcionki dla całego dokumentu */
html {
    font-size: 10px; /* Bazowa jednostka dla 'rem'. 1rem = 10px */
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    overflow: hidden; /* Ukryj przewijanie dla całej strony */
}

/* Zaktualizuj te style dla paska nawigacyjnego */
.navbar {
    width: 100%;
    /* Mocniejszy i dłuższy gradient */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 40%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
    color: #333;
    padding: 0 5rem 2rem 0;
    display: flex;
    justify-content: center; /* Wracamy do centrowania */
    align-items: center; /* Wyśrodkowuje logo pionowo */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
    height: 15rem; /* Wysokość navbara */
}

/* Styl dla kontenera logo, aby wypełniał wysokość i wyśrodkował logo */
.navbar-left {
    display: flex;
    align-items: center; /* Wyśrodkuj logo w pionie w tym kontenerze */
    height: 100%;
    padding-left: 6rem; /* DODAJEMY PADDING Z LEWEJ STRONY, aby przesunąć logo w prawo */
    /* Usunęliśmy margin-right: auto; z poprzedniej próby */
}

/* Styl dla obrazka logo w nawigacji */
.navbar-left .nav-logo-img {
    height: 25rem; /* Wysokość logo: 25rem = 250px */
    width: auto; /* Zachowuje proporcje */
    display: block;
    vertical-align: middle; /* Pomaga w precyzyjnym pionowym wyrównaniu obrazu */
}

/* Styl dla kontenera linków - teraz wracamy do position: absolute */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
    
    /* Wracamy do pozycjonowania absolutnego dla linków */
    position: absolute; 
    right: 5rem; /* Odstęp od prawej krawędzi */
    top: 50%; /* Przesuń linki na środek navbara pionowo */
    transform: translateY(-50%); /* Skompensuj przesunięcie o połowę własnej wysokości */
    
    /* Zachowujemy padding-bottom z navbara */
    padding-bottom: 2rem;
    /* Usunęliśmy padding-right i margin-left: auto; z poprzedniej próby */
}

/* Styl dla poszczególnych elementów listy (linków) */
.nav-links li {
    margin-left: 4rem; /* Odstęp między linkami: 4rem = 40px */
    display: flex; /* Uczyń każdy element listy flexboxem */
    align-items: center; /* Wyśrodkuj linki w pionie w każdym li */
    height: 100%; /* Spraw, aby li zajmował całą wysokość ul */
}

/* Styl dla samych linków */
.nav-links a {
    color: #000; /* Kolor czarny */
    text-decoration: none; /* Usuwa podkreślenie */
    font-size: 2.6rem; /* Rozmiar czcionki: 2.6rem = 26px */
    padding: 0; /* Usuwamy padding z linków, kontrola na poziomie li */
    transition: color 0.3s ease; /* Płynne przejście koloru po najechaniu */
    line-height: 1.2; /* Wysokość linii dla tekstu */
}

.nav-links a:hover {
    color: #555; /* Kolor po najechaniu */
}

/* Główny kontener strony */
.container {
    display: flex;
    height: 100vh; /* Kontener zajmuje całą wysokość viewportu */
    width: 100vw; /* Kontener zajmuje całą szerokość viewportu */
    position: relative;
    overflow: hidden; /* Ukryj przewijanie dla kontenera głównego */
    box-sizing: border-box;
    /* Usunięto padding-top: 150px; aby navbar zachodził na zdjęcia */
}

.section {
    flex: 1; /* Każda sekcja zajmuje połowę dostępnej przestrzeni */
    position: relative;
    overflow: hidden; /* Zapobiega wychodzeniu label poza sekcję */
    height: 100%; /* Sekcje zajmują całą dostępną wysokość kontenera */
    width: 50%; /* Każda sekcja zajmuje 50% szerokości */
    margin: 0; /* Usuwamy marginesy */
    box-sizing: border-box;
}

.section img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dopasowuje obraz do wymiarów sekcji, zachowując proporcje */
    transition: filter 0.3s ease; /* Płynne przejście dla filtra */
    filter: grayscale(50%); /* Domyślnie wyszarzone obrazy */
}

/* Styl dla etykiet "Drewno" i "Dachy" */
.section .label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 2rem 4rem;
    font-size: 5rem; /* Zaktualizowano na 5rem (50px) */
    text-align: center;
    opacity: 1;
    transition: background-color 0.3s ease;
    border-radius: 0.5rem;
    display: flex; /* Zmieniamy na flexbox, aby łatwo ułożyć teksty w kolumnie */
    flex-direction: column; /* Układamy elementy w kolumnie */
    justify-content: center; /* Wyśrodkowujemy w pionie */
    align-items: center; /* Wyśrodkowujemy w poziomie */
}

/* Styl dla podnapisu "Profesjonalne usługi dekarskie" (pozostał, bo nie było mowy o usunięciu) */
.section .label .sub-label {
    font-size: 2.5rem; /* Około połowa rozmiaru głównego napisu (25px) */
    display: block; /* Sprawia, że tekst zajmuje całą dostępną szerokość i przechodzi do nowej linii */
    margin-top: 0.5rem; /* Mały odstęp od góry, od napisu "Dachy" */
    line-height: 1.2; /* Domyślna wysokość linii */
}


/* --- Zmiany w efekcie grayscale i hover (Symetryczne działanie dla obu kafelków) --- */

/* Gdy najedziesz na cały kontener (rodzica kafelków), wyszarz wszystkie kafelki */
.container:hover .section img {
    filter: grayscale(50%);
}

/* Gdy najedziesz na konkretny kafelek, przywróć jego kolor */
.container .section.drewno:hover img,
.container .section.dachy:hover img {
    filter: grayscale(0%);
}

/* Zmiana tła napisu po najechaniu (bez zmian) */
.drewno:hover .label {
    background-color: rgba(0, 128, 0, 0.5); /* Ciemnozielone tło po najechaniu na "Drewno" */
}

.dachy:hover .label {
    background-color: rgba(139, 0, 0, 0.6); /* Ciemnoczerwone tło (dachówka) po najechaniu na "Dachy" */
}

/* --- Responsywność dla urządzeń mobilnych --- */
@media (max-width: 900px) {
    html, body {
        overflow: hidden;
        height: 100%;
    }
    .container {
        display: flex;
        flex-direction: column; /* Układ pionowy na mniejszych ekranach */
        height: -webkit-fill-available; /* Użyj dostępnej wysokości viewportu (iOS) */
        height: 90vh; /* Kontener zajmuje 90% viewportu */
        padding-top: 0; /* Reset paddingu na mobilnych */
        justify-content: flex-start;
        align-items: flex-start;
    }
    .section {
        width: 100%; /* Pełna szerokość na mniejszych ekranach */
        height: 50%; /* Każda sekcja zajmuje 50% wysokości kontenera */
        margin: 0;
    }
    .section img {
        filter: grayscale(0%); /* Domyślnie kolorowe obrazy na mobilnych */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .section .label {
        font-size: 2.25rem; /* Dostosowano rozmiar czcionki na mobilnych */
        padding: 1.5rem 3rem;
    }
    .navbar {
        position: static; /* Nie przyklejaj na mobilnych (może być potem zmienione) */
        height: auto; /* Wysokość auto na mobilnych */
        padding: 1rem 2rem; /* Mniejszy padding na mobilnych */
    }
    .navbar-left .nav-logo-img {
        height: 6rem; /* Mniejsze logo na mobilnych (60px) */
    }
    .nav-links {
        display: none; /* Domyślnie ukryj linki na mobilnych (można dodać hamburger menu) */
    }
}

/* --- Wyłączenie efektów hover na urządzeniach dotykowych (dla precyzyjnego wskaźnika) --- */
@media (pointer: coarse) {
    .section img {
        filter: grayscale(0%); /* Domyślnie kolorowe obrazy */
    }
    .drewno:hover img {
        filter: brightness(1); /* Resetuje efekty filtra */
    }
    .dachy:hover img {
        filter: brightness(1); /* Resetuje efekty filtra */
    }
    .drewno:hover .label {
        background-color: rgba(0, 0, 0, 0.3);
    }
    .dachy:hover .label {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

/* Stopka */
.footer {
    width: 100%;
    /* Gradient: od przezroczystego na dole do kryjącego na górze (bez zmian) */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 1) 100%);
    color: #333;
    padding: 2rem 2rem 1rem 2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
    height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    
    /* USUNIĘTY BLUR */
}

/* Kontener dla informacji rejestrowych i adresu dostawy (górna część stopki) */
.footer-top {
    display: flex;
    justify-content: center; /* WAŻNE: Wyśrodkowuje sekcje (dane rejestrowe, adres, kontakt) poziomo */
    align-items: flex-start; /* Sekcje wyrównane do góry */
    width: 100%;
    
    padding: 0; 

    /* Przesunięcie całego bloku w dół o 1rem (zwiększenie wartości margin-top) */
    margin-top: 6rem; /* Zmieniono z 5rem na 6rem */
    
    margin-bottom: 2rem; /* Odstęp między footer-top a footer-bottom (copyrightem) */
}

.footer-section {
    margin: -2rem 6rem; /* Zmieniono margin na -2rem 6rem */
    text-align: left; /* Tekst wewnątrz każdej sekcji nadal wyrównany do lewej */
}

/* Nowe style dla ikon w danych kontaktowych */
.contact-item {
    display: flex; /* Użyj flexboxa, aby ikonka i tekst były w jednej linii */
    align-items: center; /* Wyśrodkowanie pionowe ikonki i tekstu */
    margin: 0; 
}

.contact-item a {
    text-decoration: none; /* Usuń podkreślenie linków */
    color: inherit; /* Dziedzicz kolor tekstu z rodzica, żeby był czarny */
    font-size: 1.5rem; /* Zmieniono czcionkę na 1.5rem */
}

.contact-item a:hover {
    color: #555; /* Kolor po najechaniu */
}

.icon {
    display: inline-block; /* Aby nadać szerokość i wysokość */
    width: 1.8rem; /* Rozmiar ikony wraca do 1.8rem (proporcjonalnie do nowej czcionki 1.5rem) */
    height: 1.8rem; /* Rozmiar ikony */
    margin-right: 0.8rem; /* Odstęp między ikoną a tekstem wraca do 0.8rem */
    background-size: contain; /* Ikona będzie skalowana, aby zmieścić się w elemencie */
    background-repeat: no-repeat; /* Ikona nie będzie się powtarzać */
    background-position: center; /* Wyśrodkowanie ikony w elemencie */
    vertical-align: middle; /* Wyrównanie ikony z tekstem */
}

/* Zmienione ścieżki do plików ikon - pominięto folder 'images' */
.phone-icon {
    background-image: url('phone.png'); /* Zmieniono na phone.png (bez images/) */
}

.email-icon {
    background-image: url('mail.png'); /* Zmieniono na mail.png (bez images/) */
}


/* Zmiana czcionki i zmniejszenie odstępów dla tekstu w stopce (poza copyrightem) */
.footer-section p {
    margin: 0.2rem 0; /* Zmniejszone marginesy między akapitami w sekcjach, żeby zmniejszyć odstępy */
    font-size: 1.5rem; /* Zmieniono czcionkę na 1.5rem */
    line-height: 1.2; /* Zmniejszono wysokość linii dla bardziej zwartego tekstu */
}

/* Kontener dla copyrightu (dolna część stopki) */
.footer-bottom {
    width: 100%;
    text-align: center; /* Wyśrodkowanie copyrightu */
    padding-bottom: 0rem; /* Twój preferowany padding-bottom dla copyrighta */
    margin-top: 0rem; /* Zerujemy margin-top, żeby nie odsuwał od footer-top */
}

/* Ważne: upewnij się, że w .footer-bottom padding-bottom jest ustawiony na 0! */
.footer-bottom {
    width: 100%;
    text-align: center;
    padding-bottom: 0rem; /* Upewnij się, że tutaj jest 0rem, bo kontrolujemy padding na rodzicu (.footer) */
    margin-top: 0rem;
}

.page-content {
    margin-top: 15rem; /* Odstęp od navbara */
    margin-bottom: 25rem; /* Odstęp od stopki */
    padding: 3rem 5rem; /* Padding wewnętrzny */
    max-width: 120rem; /* Maksymalna szerokość treści */
    margin-left: auto; /* Wyśrodkowanie */
    margin-right: auto; /* Wyśrodkowanie */
    text-align: center; /* Wyśrodkowanie tekstu */
    box-sizing: border-box;
    min-height: calc(100vh - 15rem - 25rem); /* Minimalna wysokość, aby stopka była na dole */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.page-content h1 {
    font-size: 4rem;
    color: #333;
    margin-bottom: 2rem;
}

.page-content p {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 80rem; /* Ogranicz szerokość akapitów */
}

/* Kontener na żywe kontenery */
.live-container-wrapper {
    display: flex;
    flex-wrap: wrap; /* Pozwala kontenerom zawijać się na następną linię */
    justify-content: center; /* Wyśrodkowuje kontenery */
    gap: 3rem; /* Odstęp między kontenerami */
    margin-top: 4rem;
    width: 100%;
}

/* Styl dla pojedynczego "żywego kontenera" */
.live-container {
    position: relative;
    width: 35rem; /* Szerokość pojedynczego kontenera */
    height: 25rem; /* Wysokość pojedynczego kontenera */
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.live-container:hover {
    transform: translateY(-0.5rem); /* Lekkie podniesienie po najechaniu */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.live-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: filter 0.5s ease;
}

.live-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Półprzezroczyste tło */
    color: white;
    padding: 1.5rem;
    text-align: center;
    opacity: 1; /* Domyślnie widoczny */
    transform: translateY(0); /* Domyślna pozycja */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.live-container:hover .live-overlay {
    opacity: 1; /* Zostawiamy widoczne, bo zmieniamy treść */
    transform: translateY(0); /* Zostawiamy w tej samej pozycji */
}

.live-overlay .live-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.live-overlay .live-description {
    font-size: 1.6rem;
    color: #eee;
    margin: 0;
    opacity: 0; /* Domyślnie ukryty opis */
    max-height: 0; /* Ukryj poprzez zerową wysokość */
    overflow: hidden; /* Ukryj nadmiar tekstu */
    transition: opacity 0.5s ease, max-height 0.5s ease;
}

.live-container:hover .live-overlay .live-description {
    opacity: 1; /* Pokaż opis po najechaniu */
    max-height: 10rem; /* Ustaw odpowiednią wysokość, aby pokazać tekst */
}

/* Minimalistyczny styl hover: obraz przyciemniony, tekst rozjaśniony */
.live-container:hover .live-image {
    filter: brightness(0.7); /* Przyciemnij obraz po najechaniu */
}

/* Responsywność dla stron wewnętrznych */
@media (max-width: 900px) {
    .page-content {
        margin-top: 8rem; /* Mniejszy odstęp od góry na mobilnych */
        margin-bottom: 15rem; /* Mniejszy odstęp od dołu na mobilnych */
        padding: 2rem;
        min-height: auto; /* Zresetuj min-height, jeśli zawartość jest dynamiczna */
    }

    .page-content h1 {
        font-size: 3rem;
    }

    .page-content p {
        font-size: 1.6rem;
    }

    .live-container-wrapper {
        flex-direction: column; /* Ułożenie w kolumnie na mobilnych */
        align-items: center; /* Wyśrodkowanie kontenerów */
        gap: 2rem;
    }

    .live-container {
        width: 90%; /* Większa szerokość na mobilnych */
        height: 20rem; /* Mniejsza wysokość */
    }

    .live-overlay .live-title {
        font-size: 2rem;
    }

    .live-overlay .live-description {
        font-size: 1.4rem;
        max-height: 10rem; /* Na mobilnych opis może być zawsze widoczny, lub kontrolujemy JS */
        opacity: 1;
    }

    /* Wyłącz efekty hover na dotyku (dla live-container) */
    @media (pointer: coarse) {
        .live-container:hover {
            transform: none;
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); /* Wracamy do domyślnego cienia */
        }
        .live-container:hover .live-image {
            filter: brightness(1); /* Wracamy do normalnej jasności */
        }
        .live-overlay .live-description {
            opacity: 1; /* Na dotyku opis zawsze widoczny */
            max-height: 10rem; /* Widoczny */
        }
    }
}