/* --- Główny Kontener --- */

.mka-container {

    position: relative;

    max-width: 1920px;

    margin: 0 auto;

    line-height: 0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}



.mka-container .mka-bg {

    width: 100%;

    height: auto;

    display: block;

}



/* --- STYL KAFLI --- */

.mka-okienko {

    position: absolute;

    width: 7%;  

    height: 10%; 

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255, 255, 255, 0.4);

    border-radius: 12px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: all 0.3s ease;

    padding: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 2.2vw; 

    color: #fff;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.mka-okienko:hover {

    background: rgba(255, 255, 255, 0.35);

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);

    border-color: #fff;

}



.mka-okienko.zablokowane {

    background: rgba(0, 0, 0, 0.2);

    border-color: rgba(255,255,255,0.1);

    filter: grayscale(100%);

    opacity: 0.8;

    cursor: default;

}



.mka-okienko.zablokowane:hover {

    transform: none;

    box-shadow: none;

    background: rgba(0, 0, 0, 0.2);

}



.mka-okienko.aktywne {}



/* --- POZYCJONOWANIE --- */

.mka-okienko-14 { top: 5%;  left: 3%; }

.mka-okienko-5  { top: 20%; left: 3%; }

.mka-okienko-23 { top: 35%; left: 3%; }

.mka-okienko-9  { top: 50%; left: 3%; }

.mka-okienko-2  { top: 65%; left: 3%; }

.mka-okienko-18 { top: 80%; left: 3%; }



.mka-okienko-21 { top: 8%;  left: 14%; }

.mka-okienko-7  { top: 23%; left: 14%; }

.mka-okienko-1  { top: 38%; left: 14%; }

.mka-okienko-12 { top: 53%; left: 14%; }

.mka-okienko-19 { top: 68%; left: 14%; }

.mka-okienko-4  { top: 83%; left: 14%; }



.mka-okienko-11 { top: 4%;  left: 25%; }

.mka-okienko-24 { top: 19%; left: 25%; }

.mka-okienko-16 { top: 34%; left: 25%; }

.mka-okienko-8  { top: 49%; left: 25%; }

.mka-okienko-20 { top: 64%; left: 25%; }

.mka-okienko-6  { top: 79%; left: 25%; }



.mka-okienko-3  { top: 9%;  left: 36%; }

.mka-okienko-15 { top: 24%; left: 36%; }

.mka-okienko-22 { top: 39%; left: 36%; }

.mka-okienko-10 { top: 54%; left: 36%; }

.mka-okienko-17 { top: 69%; left: 36%; }

.mka-okienko-13 { top: 84%; left: 36%; }



/* --- MODAL (Okno z treścią) --- */

.mka-modal-overlay {

    display: none;

    position: fixed;

    z-index: 9999;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85); 

    overflow-y: auto; 

    padding: 15px 0; 

}



.mka-modal-content {

    background-color: #2f3541;

    color: #a0a7ab;

    font-family: 'Montserrat', sans-serif;

    width: 90%;         

    max-width: 800px;   

    margin: 5% auto;    

    max-height: 85vh; 

    overflow-y: auto; 

    position: relative;

    padding: 25px;

    border-radius: 8px;

    border: 1px solid #555;

    box-shadow: 0 5px 25px rgba(0,0,0,0.5);

    box-sizing: border-box; 

}



.mka-modal-close {

    position: absolute;

    top: 15px;

    right: 20px;

    color: #a0a7ab;

    font-size: 30px;

    font-weight: bold;

    line-height: 1; 

    cursor: pointer;

    transition: color 0.2s ease;

}



.mka-modal-close:hover {

    color: #ffffff; 

}



#mka-modal-body { padding-top: 15px; line-height: 1.7; }

#mka-modal-body p { margin-top: 0; margin-bottom: 1em; }

#mka-modal-body a { color: #fff; text-decoration: underline; }

#mka-modal-body strong { color: #fff; }



/* Styl obrazków wewnątrz modala (aby ładnie wyglądały) */

#mka-modal-body img {

    max-width: 100%;

    height: auto;

    border-radius: 4px;

    margin: 10px 0;

    box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}



/* =====================================================

   NOWOŚĆ: STYLE DLA LIGHTBOXA (Powiększenie obrazka)

===================================================== */

.mka-lightbox-overlay {

    display: none; /* Domyślnie ukryty */

    position: fixed;

    /* Musi być wyżej niż modal (9999) */

    z-index: 20000; 

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.95); /* Bardzo ciemne tło */

    justify-content: center;

    align-items: center;

    cursor: pointer; /* Kliknięcie w tło zamyka */

}



/* Obrazek w lightboxie */

#mka-lightbox-img {

    max-width: 95%;

    max-height: 95%;

    border: 2px solid #fff;

    border-radius: 4px;

    box-shadow: 0 0 20px rgba(255,255,255,0.2);

    cursor: default; /* Kliknięcie w obrazek NIE zamyka */

}



/* Krzyżyk Lightboxa */

.mka-lightbox-close {

    position: absolute;

    top: 20px;

    right: 30px;

    color: #fff;

    font-size: 40px;

    font-weight: bold;

    cursor: pointer;

    transition: transform 0.2s;

}



.mka-lightbox-close:hover {

    transform: scale(1.2);

    color: #ffd700;

}



/* =====================================================

   STYLE GALERII (POPRAWIONE)

===================================================== */

.mka-galeria {

    display: grid;

    /* KLUCZOWA ZMIANA: Zwiększamy minimalną szerokość kolumny z 120px na 220px.

       Dzięki temu przeglądarka zmieści tylko 2 lub 3 obrazki w rzędzie 

       (zależnie od szerokości ekranu), a resztę przeniesie niżej. */

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    

    gap: 15px; /* Trochę większy odstęp między kafelkami dla estetyki */

    margin-top: 25px; /* Większy odstęp od tekstu powyżej */

}



.mka-galeria a {

    display: block;

    overflow: hidden;

    border-radius: 6px; /* Trochę bardziej zaokrąglone rogi */

    border: 2px solid transparent; /* Przezroczysta ramka bazowa */

    transition: all 0.3s ease;

    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Lekki cień pod kafelkiem */

}



.mka-galeria a:hover {

    border-color: #ffd700; /* Złota ramka po najechaniu */

    transform: translateY(-3px); /* Lekkie uniesienie w górę */

    box-shadow: 0 8px 15px rgba(0,0,0,0.5); /* Mocniejszy cień po najechaniu */

}



.mka-galeria img {

    width: 100%;

    /* ZMIANA: Zwiększamy wysokość miniaturki, żeby pasowała do szerszych kolumn. 

       Wcześniej było 100px, teraz dajemy 160px. */

    height: 160px; 

    object-fit: cover; /* Obrazek wypełni kafelek bez zniekształceń */

    display: block;

    margin: 0 !important; 

    border-radius: 0 !important;

    box-shadow: none !important;

    transition: transform 0.5s ease; /* Płynne powiększenie obrazka wewnątrz ramki */

}



/* Dodatkowy efekt: lekkie przybliżenie samego zdjęcia wewnątrz ramki po najechaniu */

.mka-galeria a:hover img {

    transform: scale(1.05);

}



.mka-okienko.otwarte {

    background: rgb(4 148 37 / 78%);

filter: none;

transform: none;

     box-shadow: none;

     border: none;

border-color: none;

}

.mka-okienko.otwarte:hover {

    background: rgb(4 148 37 / 78%);

filter: none;

transform: none;

     box-shadow: none;

     border: none;

border-color: none;

}

#mka-modal-body iframe,
#mka-modal-body video {
    /* Wymuszamy pełną szerokość dostępną w modalu */
    width: 100% !important; 
    
    /* Nowoczesna metoda utrzymania proporcji 16:9 */
    aspect-ratio: 16 / 9; 
    
    /* Resetujemy wysokość, aby aspect-ratio zadziałało */
    height: auto !important; 
    
    display: block;
    margin: 15px auto; /* Centrowanie i odstęp */
    border-radius: 8px; /* Ładne zaokrąglenie rogów wideo */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}