/* ==========================================================================
   BEZWZGLĘDNY GLOBALNY RESET (Dodaj na samej górze pliku style.css)
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* Centruje całe body w oknie przeglądarki, blokując przesunięcia w lewo */
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
}

/* Wymuszenie poprawnego box-sizing dla każdego elementu */
*, *:before, *:after {
    box-sizing: inherit !important;
}





/* ==========================================================================
   1. RESET I BEZPIECZNE WYMIAROWANIE (Dla index.html)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Gwarantuje, że padding nie zwiększa szerokości 100% */
}

/* Blokada rozciągania całej strony na boki w smartfonach */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden; /* Ostateczna ochrona przed scrollem w bok */
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f6f7;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   2. GÓRNY BANER (Wersja PC)
   ========================================================================== */
.top-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important; /* Blokuje ewentualne przesunięcia baneru */
    height: 90px;
    flex-shrink: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #e1e1e1;
}

.top-banner .banner-img {
    width: 180px;
    height: auto;
    display: block;
}

/* ==========================================================================
   3. DOLNY UKŁAD (Wersja PC)
   ========================================================================== */
.split-container {
    display: flex;
    width: 100%;
    flex: 1;
    height: calc(100vh - 90px);
}

/* Lewy panel (Menu) - 20% szerokości */
.left-panel {
    flex: 0 0 20%;
    background-color: #2c3e50;
    color: #ffffff;
    padding: 30px;
    height: 100%;
}

.left-panel h3 { margin-bottom: 15px; font-size: 20px; }
.left-panel ul { list-style: none; }
.left-panel ul li a {
    color: #ecf0f1;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #34495e;
}
.left-panel ul li a:hover { color: #3498db; }

/* Wrapper chroniący iFrame przed błędem 30% szerokości */
.iframe-wrapper {
    flex: 1;
    height: 100%;
    position: relative;
    background-color: #ffffff;
}

/* Dopasowanie okna iFrame */
.right-panel-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
}

/* ==========================================================================
   4. PEŁNA OPTYMALIZACJA MOBILNA (Dla ekranów poniżej 768px)
   ========================================================================== */
/* ==========================================================================
   WZMOCNIONA OPTYMALIZACJA MOBILNA (Dla ekranów poniżej 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Twardy pancerz na całe okno przeglądarki */
    html, body {
        overflow-y: auto !important; 
        overflow-x: hidden !important; /* Blokuje jakikolwiek ruch na boki */
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }

    .top-banner {
        height: 80px !important;
        width: 100% !important;
    }
    
    .top-banner .banner-img {
        width: 140px !important;
    }

    /* Zamiana Flexboxa na standardowy układ blokowy (całkowicie usuwa błąd rozpychania) */
    .split-container {
        display: block !important; /* Zmiana z flex na block usuwa błędy szerokości */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Menu zajmuje całą szerokość telefonu */
    .left-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        text-align: center !important;
    }

    /* Układanie przycisków menu obok siebie na telefonie */
    .left-panel ul {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .left-panel ul li a {
        border-bottom: none !important;
        background-color: #34495e !important;
        padding: 8px 14px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
    }

    /* Bezpieczne wymiary kontenera iFrame na telefonie */
    .iframe-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 65vh !important; /* Sztywna wysokość okna treści */
        margin: 0 !important;
        padding: 0 !important;
    }

    .right-panel-frame {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
    }
}
/* ==========================================================================
   NAPRAWA: Blokada sztucznego powiększania małych miniaturek (120x140)
   ========================================================================== */

/* Kontener miniatury - nie pozwalamy mu rozciągać się ponad rozmiar zdjęcia */
.grid-item {
    display: inline-block !important; /* Zmiana z block na inline-block */
    width: auto !important;           /* Wyłącza wymuszone 100% szerokości kolumny Grid */
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;   /* Całkowite potwierdzenie braku kwadratu */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
    border-radius: 6px !important;
}

/* Sam plik graficzny wewnątrz miniatury */
.grid-item img {
    width: auto !important;           /* Używa naturalnej szerokości pliku (np. 120px) */
    max-width: 100% !important;
    height: auto !important;          /* Używa naturalnej wysokości pliku (np. 140px) */
    object-fit: normal !important;    /* Wyłącza jakiekolwiek skalowanie i dopasowywanie */
    display: block !important;
}

/* Środkowanie miniaturek wewnątrz siatki, jeśli są mniejsze niż kolumna */
.gallery-grid {
    justify-items: center !important; /* Centruje małe zdjęcia w ich strefach Grid */
    align-items: flex-start !important;
}

/* ==========================================================================
   OSTATECZNA NAPRAWA STRONY 4: MINIATURY W NATURALNEJ ROZDZIELCZOŚCI
   ========================================================================== */

/* Kontener serii zdjęć - zamieniamy Grid na swobodny potok poziomy Flexbox */
.gallery-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;       /* Pozwala zdjęciom przechodzić do nowej linii */
    justify-content: center;          /* Środkuje całą serię zdjęć na ekranie */
    align-items: flex-start !important;
    gap: 20px !important;              /* Stały odstęp między miniaturkami */
    width: 100% !important;
    margin-bottom: 40px !important;
}

/* Pojedynczy kontener miniatury - dopasowuje się ściśle do wymiarów pliku */
.grid-item {
    display: inline-block !important;
    width: auto !important;            /* Kasuje wymuszoną szerokość kolumny */
    height: auto !important;
    aspect-ratio: auto !important;     /* Całkowicie wyłącza kwadratowy format */
    overflow: hidden !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
    transition: transform 0.2s ease !important;
    cursor: zoom-in !important;
}

.grid-item:hover {
    transform: scale(1.05) !important; /* Delikatne powiększenie po najechaniu myszką */
}

/* Sam plik graficzny w miniaturze (np. Twój C130m.jpg o wymiarach 120x140) */
.grid-item img {
    width: auto !important;            /* Używa dokładnej, oryginalnej szerokości pliku */
    height: auto !important;           /* Używa dokładnej, oryginalnej wysokości pliku */
    max-width: 100% !important;        /* Bezpieczeństwo: zmniejszy się tylko na ekranie mniejszym niż samo zdjęcie */
    display: block !important;
    object-fit: none !important;       /* Blokuje jakiekolwiek skalowanie i docinanie obrazu */
}

  /* ==========================================================================
   OSTATECZNA NAPRAWA FOTO 2: CAŁKOWITA BLOKADA SZTUCZNEGO ROZCIĄGANIA
   ========================================================================== */

/* 1. Upewniamy się, że miniatury (np. Foto 2) mają swój naturalny rozmiar */
.gallery-grid .grid-item {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

.gallery-grid .grid-item img {
    width: auto !important;  /* Wymusza naturalną szerokość miniatury */
    height: auto !important; /* Wymusza naturalną wysokość miniatury */
    max-width: 100% !important;
    object-fit: none !important; /* Zakaz jakiegokolwiek skalowania */
}

/* 2. NAPRAWA DUŻEGO ZDJĘCIA PO KLIKNIĘCIU (Ochrona przed efektem odwrotnym) */
.lightbox img {
    width: auto !important;        /* Duże zdjęcie otworzy się w swojej NATURALNEJ wielkości */
    height: auto !important;       /* Zachowanie oryginalnej wysokości pliku */
    
    /* Zabezpieczenie mobilne: zdjęcie zmniejszy się TYLKO wtedy, 
       gdy fizycznie nie zmieści się na ekranie telefonu */
    max-width: 95% !important;     
    max-height: 85vh !important;   
    
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important; 
}

/* ==========================================================================
   STEROWANIE WIDOCZNOŚCIĄ STRON (PC vs MOBILE)
   ========================================================================== */

/* Domyślnie na komputerach ukrywamy elementy przeznaczone tylko na telefon */
.tylko-telefon {
    display: none !important;
}

/* Reguły dla telefonów (ekrany mniejsze niż 768px) */
@media (max-width: 768px) {
    
    /* Na telefonie UKRYWAMY strony oznaczone jako tylko-komputer */
    .tylko-komputer {
        display: none !important;
    }
    
    /* Na telefonie POKAZUJEMY strony oznaczone jako tylko-telefon */
    .tylko-telefon {
        display: block !important; /* lub inline-block w zależności od układu menu */
    }
}
 /* ==========================================================================
   BEZWZGLĘDNA BLOKADA WIDOCZNOŚCI DLA SMARTFONÓW (Ekrany poniżej 768px)
   ========================================================================== */

	/* ==========================================================================
   AGRESYWNY I PEWNY UKŁAD MOBILNY (Dla wszystkich smartfonów)
   ========================================================================== */
@media screen and (max-width: 992px) {
    
    /* 1. Resetujemy i zamieniamy całą stronę na układ pionowy (blokowy) */
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important; /* Całkowity zakaz ruchu w bok */
        height: auto !important;
        width: 100% !important;
    }

    .split-container {
        display: block !important; /* Wyłącza flexbox, który rozpychał ekran */
        width: 100% !important;
        height: auto !important;
    }

    /* 2. MENU BOCZNE: Przestaje być boczne, staje się poziomym paskiem */
    .left-panel {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        background-color: #2c3e50 !important;
    }

    /* Układamy przyciski menu poziomo obok siebie */
    .left-panel ul {
        display: grid !important;
        
        /* Magiczna linijka: automatycznie tworzy kolumny o minimalnej szerokości 100px.
           Na tablecie zmieści się np. 6 obok siebie, na telefonie stworzy układ 2 rzędy po 3 lub 4 */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        
        gap: 8px !important; /* Stały odstęp między boksami w pionie i poziomie */
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
	
	
	
       /* Wymuszamy, aby każdy element listy zajmował całą swoją kolumnę */
    .left-panel ul li {
        width: 100% !important;
        display: block !important;
    }
	   
	   
    .left-panel ul li a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 4px !important; /* Wygodna wielkość do klikania palcem */
        background-color: #34495e !important;
        color: #ffffff !important;
        border-radius: 4px !important;
        font-size: 12px !important; /* Optymalny rozmiar czcionki dla Opery/Safari */
        text-decoration: none !important;
        border-bottom: none !important;
        
        /* Ochrona przed uszkodzeniem układu przez długie słowa */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    




    /* 3. PRAWY PANEL (iFrame): Bezpieczne wymiary na smartfonie */
    .iframe-wrapper {
        display: block !important;
        width: 100% !important;
        height: 65vh !important; /* Sztywna wysokość okna podglądu na telefonie */
        margin: 0 !important;
        padding: 0 !important;
    }

    .right-panel-frame {
        width: 100% !important;
        height: 100% !important;
    }

    /* 4. BEZWZGLĘDNE UKRYWANIE I POKAZYWANIE ZAKŁADEK */
    .tylko-komputer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .tylko-telefon {
        display: inline-block !important;
        visibility: visible !important;
    }
}





/* ==========================================================================
   NOWY, SZERSZY PRÓG MOBILNY (Obejmuje duże telefony i tablety do 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    
    /* Agresywne ukrycie zakładki komputerowej na każdym telefonie */
    .left-panel ul li a.tylko-komputer,
    .tylko-komputer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Wymuszenie pokazania zakładki mobilnej */
    .left-panel ul li a.tylko-telefon,
    .tylko-telefon {
        display: inline-block !important;
        visibility: visible !important;
    }
}
/* ==========================================================================
   AWARYJNA BLOKADA DLA EKRANÓW DOTYKOWYCH (Przechwyci każdy smartfon)
   ========================================================================== */
@media (pointer: coarse) {
    
    /* Jeśli urządzenie jest dotykowe, bezwzględnie usuwamy zakładkę komputerową */
    .left-panel ul li a.tylko-komputer,
    .tylko-komputer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Pokazujemy zakładkę mobilną na dotyku */
    .left-panel ul li a.tylko-telefon,
    .tylko-telefon {
        display: inline-block !important;
        visibility: visible !important;
    }
}