/* Spójny box model */
.custom-gallery *,
.custom-gallery *::before,
.custom-gallery *::after {
    box-sizing: border-box;
}

/* — Rozmiary — */
:root {
    --thumb-size: 140px;
    /* desktop */
    --thumb-size-mobile: 110px;
    /* mobile */
    --main-min-h: 560px;
    /* referencyjna wysokosc podgladu (opcjonalnie) */
}

/* Kontener: precyzyjne centrowanie w pionie */
.custom-gallery {
    display: flex;
    gap: 24px;
    align-items: center;
    /* CENTRUJE elementy względem siebie po osi poprzecznej */
}

/* [align-items] */

/* Kolumna miniaturek – pozwalamy jej „siąść” idealnie po środku */
.custom-thumbs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: var(--thumb-size);
    margin-block: auto;
    /* dociąga kolumnę dokładnie do środka dostępnej wysokości */
    position: sticky;
    top: 8px;
    max-height: min(680px, 80vh);
    overflow: auto;
    padding-right: 4px;
}

/* [aligning items in flex] */

/* Miniatury — większe */
.custom-thumbs img,
.custom-thumbs video {
    display: block;
    width: var(--thumb-size);
    height: var(--thumb-size);
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
}

/* Aktywna + fokus dostępnościowy (bez podwójnych ramek) */
.custom-thumbs .active-thumb {
    border-color: #1f6feb;
    box-shadow: 0 0 0 2px #1f6feb inset;
}

.custom-thumbs img:focus,
.custom-thumbs video:focus {
    outline: none;
}

.custom-thumbs img:focus-visible,
.custom-thumbs video:focus-visible {
    outline: 2px solid #1f6feb;
    outline-offset: 2px;
}

/* [focus-visible] */

/* Obszar główny – stały punkt odniesienia do centrowania */
.custom-main {
    flex: 1;
    min-width: 320px;
    position: relative;
    display: flex;
}

.main-image-wrapper {
    position: relative;
    margin: auto;
    min-height: var(--main-min-h);
    display: flex;
    align-items: center;
}

/* zapewnia przewidywalny środek */
.main-image-wrapper img,
.main-image-wrapper video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
}

/* Przycisk powiększania */
.zoom-button {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s;
}

.custom-main:hover .zoom-button {
    opacity: 1;
    transform: none;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .85);
    z-index: 9999;
}

.lightbox-overlay.active {
    display: grid;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-content img,
.lightbox-content video {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    border-radius: 8px;
}

/* —— Grubsze, większe ikony nawigacji w lightboxie —— */
#lightboxClose,
#lightboxPrev,
#lightboxNext {
    position: absolute;
    z-index: 10002;
    display: grid;
    place-items: center;
    width: 60px;
    /* większy obszar dotykowy */
    height: 60px;
    background: transparent;
    /* brak tła */
    border: none;
    box-shadow: none;
    cursor: pointer;
    outline: none;
}

/* Ikony: większe i „grubsze” przez text-stroke + cień konturu */
#lightboxClose,
#lightboxPrev,
#lightboxNext {
    color: #423c3c !important;
    /* Ustawienie koloru ikon na biały dla lepszej widoczności */
    font-size: 38px;
    line-height: 1;
}

/* Hover: odrobinę więcej kontrastu */
#lightboxClose:hover,
#lightboxPrev:hover,
#lightboxNext:hover {
    color: #ccc;
}

/* Focus klawiaturą: subtelny znacznik bez obramowań przycisku */
#lightboxClose:focus-visible,
#lightboxPrev:focus-visible,
#lightboxNext:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Pozycjonowanie */
#lightboxClose {
    top: 10px;
    right: 10px;
}

#lightboxPrev {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

#lightboxNext {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* Mobile: również większe, ale ciut mniejsze niż desktop */
@media (max-width: 768px) {

    #lightboxClose,
    #lightboxPrev,
    #lightboxNext {
        width: 64px;
        height: 64px;
    }

    #lightboxClose,
    #lightboxPrev,
    #lightboxNext {
        font-size: 34px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .custom-gallery {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
    }

    .custom-thumbs {
        /* ZMIANA: Konfiguracja dla przewijanej listy */
        flex-direction: row;
        flex-wrap: nowrap;
        /* KLUCZOWE: Zapobiega zawijaniu się miniaturek */
        overflow-x: auto;
        /* KLUCZOWE: Włącza poziome przewijanie */
        justify-content: flex-start;
        /* Układa miniaturki od lewej */

        width: 100%;
        padding-block: 8px;
        /* Dodaje trochę oddechu w pionie */
        margin-block: 0;

        /* Ulepszenie przewijania na urządzeniach dotykowych */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        /* Stylizuje pasek przewijania */
        scroll-snap-type: x mandatory;
        /* Sprawia, że przewijanie "przykleja się" do miniaturek */
    }

    /* Styl paska przewijania dla estetyki */
    .custom-thumbs::-webkit-scrollbar {
        height: 4px;
    }

    .custom-thumbs::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .custom-thumbs img,
    .custom-thumbs video {
        width: var(--thumb-size-mobile);
        height: var(--thumb-size-mobile);
        border-radius: 8px;
        flex-shrink: 0;
        /* Zapobiega kurczeniu się miniaturek */
        scroll-snap-align: start;
        /* Współpracuje ze scroll-snap-type */
    }

    .main-image-wrapper {
        min-height: auto;
        width: 100%;
    }
}