/* ===== Galerie cu banda scroll (se adapteaza la 4 sau 20 imagini) ===== */

.gallery-wrap{
    display:flex;
    gap:12px;
    align-items:stretch;
}

/* PC: banda verticala */
.thumbs{
    width:92px;
    display:flex;
    flex-direction:column;
    gap:10px;

    /* ⭐ Se adapteaza: mica la 4 imagini, scroll la multe */
    max-height: clamp(260px, 55vh, 520px); /* min / dinamic / max */
    overflow-y:auto;
    overflow-x:hidden;

    padding-right:6px;
    scroll-behavior:smooth;
}

/* scrollbar (optional) */
.thumbs::-webkit-scrollbar{width:8px}
.thumbs::-webkit-scrollbar-thumb{background:#cfcfcf;border-radius:10px}
.thumbs::-webkit-scrollbar-thumb:hover{background:#b8b8b8}

.thumb{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:10px;
    border:2px solid #ddd;
    cursor:pointer;
    transition:.25s;
    background:#fff;
    flex:0 0 auto;
}

.thumb:hover{border-color:#ffcc00;transform:scale(1.05)}
.thumb.active{border-color:#ff9900;box-shadow:0 0 10px rgba(255,153,0,.7)}

/* Imagine mare - ia aceeasi inaltime ca banda */
.main-image{
    flex:1;
    display:flex;
    min-height: clamp(260px, 55vh, 520px); /* identic cu thumbs */
}

.main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
    border:4px solid #ddd;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Telefon: banda orizontala cu scroll stanga/dreapta */
@media(max-width:768px){
    .gallery-wrap{flex-direction:column}

    .thumbs{
        width:100%;
        flex-direction:row;

        max-height:none;
        overflow-x:auto;
        overflow-y:hidden;

        padding-right:0;
        padding-bottom:6px;
        -webkit-overflow-scrolling: touch;

        gap:10px;
        scroll-snap-type:x mandatory;
    }

    .thumb{
        width:92px;
        height:70px;
        scroll-snap-align:start;
    }

    .main-image{
        min-height:360px;
    }

    .main-image img{
        height:360px;
    }
}