/* --- Style galerii z niezależnymi rzędami --- */
.galeria_zdjec { padding: 100px 0 40px 0; position: relative; }
.galeria_zdjec .container { position: relative; }

/* Kontener dla każdego rzędu */
.galeria_zdjec .images .row-container { margin-bottom: 10px; }
.galeria_zdjec .images .row-container:last-child { margin-bottom: 0; }

/* Każdy rząd ma teraz własny scroll */
.galeria_zdjec .images .scrollable-row { 
    overflow-x: auto; 
    -ms-overflow-style: none; 
    scrollbar-width: none;
    display: flex;
    gap: 10px;
}
.galeria_zdjec .images .scrollable-row::-webkit-scrollbar { display: none; }

.galeria_zdjec .images .row img { 
    width: calc(1340px / 3); 
    height: 320px; 
    object-fit: cover; 
    transition: 300ms; 
    cursor: pointer;
    flex-shrink: 0; /* Zapobiega kurczeniu się obrazków */
}
.galeria_zdjec .images .row img:hover { opacity: 0.8; }

/* Kontrolki dla każdego rzędu */
.galeria_zdjec .controls-row { margin-bottom: 20px; }
.galeria_zdjec .controls-row:last-child { margin-bottom: 0; }

.galeria_zdjec p.info { 
    display: flex; 
    gap: 17px; 
    align-items: center; 
    justify-content: flex-end; 
    padding: 16px 0; 
    color: #D7D7D7; 
    margin: 0; 
    font-family: 'Inter', sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    text-transform: uppercase; 
}
.galeria_zdjec p.info a { transition: 300ms; }
.galeria_zdjec p.info a:hover { filter: invert(50%); }

.galeria_zdjec p.info span {
    color: #D7D7D7;
    margin-right: 30px;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
}

/* --- STYLE POPUP (bez zmian) --- */
body.popup-open { overflow: hidden; }

.gallery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999999;
    display: none;
    flex-direction: column;
}

.gallery-popup.active { display: flex; }

.popup-images {
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}
.popup-images.active { cursor: grabbing; }
.popup-images::-webkit-scrollbar { display: none; }

.popup-row {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

.popup-row img {
    height: 80%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.popup-controls-container {
    width: 100%;
    flex-shrink: 0;
    padding: 0 0 60px 0;
}

.popup-controls-container p.info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
    padding: 0;
    margin: 0;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
}

.popup-controls-container .popup-back-btn {
    border-radius: 30px;
    border: 1px solid var(--KTI-LIGHT-GREY, #D7D7D7);
    color: var(--KTI-LIGHT-GREY, #D7D7D7);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 36px;
    transition: 300ms;
}

.popup-controls-container .popup-back-btn:hover {
    background: #D7D7D7;
    color: #fff !important;
}

.popup-controls-container .popup-drag-info { 
    margin-left: auto; 
    color: #D7D7D7;
    margin-right: 30px;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
}

.popup-controls-container a { transition: 300ms; }
.popup-controls-container a:not(.popup-back-btn):hover { filter: invert(50%); }

/* --- STYLE RESPONSIVE --- */
@media only screen and (max-width: 996px) {
    .galeria_zdjec { padding: 60px 0 30px 0; }
    
    .galeria_zdjec .images .row img { width: 60vw; height: 250px; }
    
    .galeria_zdjec p.info { 
        flex-direction: column; 
        align-items: center; 
        gap: 20px; 
        padding: 16px 20px; 
    }
    .galeria_zdjec p.info > div { align-self: flex-end; }
    
    /* Kontrolki rzędów na mobile */
    .galeria_zdjec .controls-row { margin-bottom: 15px; }
    
    .popup-controls-container p.info { padding: 0 20px; gap: 15px; }
    .popup-controls-container .popup-drag-info { display: none; }
}

/* =========================
   MOBILE TWEAKS (≤ 996px)
   ========================= */
@media (max-width: 996px) {
    .galeria_zdjec { padding: 56px 0 24px 0; }

    .popup-controls-container p.info { justify-content: center; }

    .galeria_zdjec p.info {
        flex-direction: row !important;
        align-items: center;
        gap: 20px;
        padding: 0 !important;
        margin-top: 30px;
        justify-content: center !important;
    }

    /* płynniejsze przewijanie dotykowe */
    .galeria_zdjec .images .scrollable-row,
    .popup-images {
    }

    /* siatka -> poziomy karuzelowy strumień */
    .galeria_zdjec .images .scrollable-row {
        gap: 12px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .galeria_zdjec .images .row-container { margin-bottom: 12px; }

    /* większe, czytelne kafle */
    .galeria_zdjec .images .row img {
        width: 72vw;
        max-width: 460px;
        height: 48vw;
        max-height: 320px;
        object-fit: cover;
    }

    /* pasek info – układ kolumnowy, większe tap-targety */
    .galeria_zdjec p.info {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 28px;
        padding: 12px 20px 0 20px;
    }
    .galeria_zdjec p.info span { margin-right: 0; }
    .galeria_zdjec p.info a img { width: 28px; height: 28px; }

    /* POPUP */
    .gallery-popup { background: #fff; }

    /* obrazki w popupie – ładnie mieszczą się w pionie */
    .popup-row { gap: 14px; }
    .popup-row img {
        height: 72vh;
        max-height: 78vh;
        width: auto;
        object-fit: contain;
    }

    /* dolny pasek sterowania – „przyklej" wizualnie do dołu */
    .popup-controls-container { padding: 0 0 18px 0; }
    .popup-controls-container p.info {
        padding: 0 20px;
        gap: 16px;
        flex-wrap: wrap;
    }

    /* back jako pełniejszy przycisk; strzałki obok */
    .popup-controls-container .popup-back-btn {
        padding: 12px 22px;
        font-size: 14px;
        border-radius: 26px;
    }
    .popup-controls-container .popup-drag-info { display: none; }

    /* trochę większe ikony na dotyk */
    .popup-controls-container .popup-prev-btn img,
    .popup-controls-container .popup-next-btn img {
        width: 28px; height: 28px;
    }
}

/* =========================
   VERY SMALL (≤ 600px)
   ========================= */
@media (max-width: 600px) {
    .galeria_zdjec .images .row img {
        width: 80vw;
        height: 52vw;
    }

    .popup-row img { height: 68vh; }

    /* ułatw tap – większe hit-boxy linków w paskach */
    .galeria_zdjec p.info a,
    .popup-controls-container a {
        padding: 8px;
        margin: -8px;
    }
}

/* =========================
   TINY (≤ 420px)
   ========================= */
@media (max-width: 420px) {
    .galeria_zdjec .images .row img {
        width: 86vw;
        height: 56vw;
    }
    .popup-row img { height: 64vh; }
}