/**
 * ========================================================================
 * ARCHIVO: galeria.css
 * PROYECTO: MOTELWEB.VIP
 * VERSIÓN: 2.0.0
 * FECHA DE PRODUCCIÓN: 2026-09-17
 * DESCRIPCIÓN: Galería de miniaturas con estilos, espaciado y radio
 *              configurables por el motel.
 * ========================================================================
 */

/* ============================================================
   VARIABLES LOCALES (defaults)
   ============================================================ */

.vip-gallery-wrapper {
    --galeria-gap: 8px;
    --galeria-radius: 16px;
    --galeria-row-height: 150px;
    --galeria-row-height-lg: 250px;
}

/* === GAP === */
.vip-gallery-wrapper.galeria-gap-none {
    --galeria-gap: 0;
}

.vip-gallery-wrapper.galeria-gap-small {
    --galeria-gap: 4px;
}

.vip-gallery-wrapper.galeria-gap-medium {
    --galeria-gap: 8px;
}

.vip-gallery-wrapper.galeria-gap-large {
    --galeria-gap: 16px;
}

/* === RADIO === */
.vip-gallery-wrapper.galeria-radius-square {
    --galeria-radius: 0;
}

.vip-gallery-wrapper.galeria-radius-soft {
    --galeria-radius: 8px;
}

.vip-gallery-wrapper.galeria-radius-rounded {
    --galeria-radius: 16px;
}

.vip-gallery-wrapper.galeria-radius-extra {
    --galeria-radius: 24px;
}

/* ============================================================
   BASE: grid + cajas + imágenes
   ============================================================ */

.vip-gallery-wrapper .thumbnail-grid {
    display: grid;
    gap: var(--galeria-gap);
    border-radius: var(--galeria-radius);
    overflow: hidden;
}

.vip-gallery-wrapper .thumbnail-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 0;
    /* Los thumbnails no redondean. El contenedor recorta las exteriores. */
}

/* Excepción: en Carrusel cada foto es independiente y SÍ lleva su propio radius */
.vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-box {
    border-radius: var(--galeria-radius);
}

.vip-gallery-wrapper .thumbnail-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.vip-gallery-wrapper .thumbnail-box:hover .thumbnail-media {
    transform: scale(1.05);
}

/* Overlay "ver más" sobre la quinta foto */
.vip-gallery-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
    transition: background 0.3s ease;
}

.vip-gallery-wrapper .thumbnail-box:hover .vip-gallery-more-overlay {
    background: rgba(212, 175, 55, 0.8);
}

.vip-gallery-more-overlay span {
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* ============================================================
   ESTILO: BENTO (default)
   1 foto grande a la izquierda + 4 chicas
   ============================================================ */

.vip-gallery-wrapper.galeria-estilo-auto .thumbnail-grid,
.vip-gallery-wrapper.galeria-estilo-bento .thumbnail-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: var(--galeria-row-height) var(--galeria-row-height);
}

.vip-gallery-wrapper.galeria-estilo-auto .thumbnail-box:nth-child(1),
.vip-gallery-wrapper.galeria-estilo-bento .thumbnail-box:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.vip-gallery-wrapper.galeria-estilo-auto .thumbnail-box:nth-child(n+6),
.vip-gallery-wrapper.galeria-estilo-bento .thumbnail-box:nth-child(n+6) {
    display: none;
}

/* ============================================================
   ESTILO: UNIFORME
   6 fotos iguales en 3 columnas x 2 filas
   ============================================================ */

.vip-gallery-wrapper.galeria-estilo-uniforme .thumbnail-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: var(--galeria-row-height) var(--galeria-row-height);
}

.vip-gallery-wrapper.galeria-estilo-uniforme .thumbnail-box:nth-child(n+7) {
    display: none;
}

/* ============================================================
   ESTILO: DESTACADO
   1 foto ancha arriba + 4 chicas abajo
   ============================================================ */

.vip-gallery-wrapper.galeria-estilo-destacado .thumbnail-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: var(--galeria-row-height-lg) var(--galeria-row-height);
}

.vip-gallery-wrapper.galeria-estilo-destacado .thumbnail-box:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

.vip-gallery-wrapper.galeria-estilo-destacado .thumbnail-box:nth-child(n+6) {
    display: none;
}

/* ============================================================
   ESTILO: CARRUSEL
   Todas las fotos visibles en scroll horizontal
   ============================================================ */

.vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--galeria-gap);
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
}

.vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-grid::-webkit-scrollbar {
    height: 6px;
}

.vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-grid::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 3px;
}

.vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-box {
    flex: 0 0 calc(40% - var(--galeria-gap));
    scroll-snap-align: start;
    height: var(--galeria-row-height-lg);
}

/* En carrusel NINGUNA se oculta */
.vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-box:nth-child(n) {
    display: block;
}

/* En carrusel no aplica el overlay "ver más" */
.vip-gallery-wrapper.galeria-estilo-carrusel .vip-gallery-more-overlay {
    display: none;
}

/* ============================================================
   RESPONSIVE (MÓVIL)
   ============================================================ */

@media (max-width: 768px) {

    /* Bento: 2x2 con la primera ancha arriba */
    .vip-gallery-wrapper.galeria-estilo-auto .thumbnail-grid,
    .vip-gallery-wrapper.galeria-estilo-bento .thumbnail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 120px;
        gap: 6px;
    }

    .vip-gallery-wrapper.galeria-estilo-auto .thumbnail-box:nth-child(1),
    .vip-gallery-wrapper.galeria-estilo-bento .thumbnail-box:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .vip-gallery-wrapper.galeria-estilo-auto .thumbnail-box:nth-child(2),
    .vip-gallery-wrapper.galeria-estilo-auto .thumbnail-box:nth-child(3),
    .vip-gallery-wrapper.galeria-estilo-bento .thumbnail-box:nth-child(2),
    .vip-gallery-wrapper.galeria-estilo-bento .thumbnail-box:nth-child(3) {
        grid-column: auto;
        grid-row: 2 / 3;
    }

    .vip-gallery-wrapper.galeria-estilo-auto .thumbnail-box:nth-child(n+4),
    .vip-gallery-wrapper.galeria-estilo-bento .thumbnail-box:nth-child(n+4) {
        display: none;
    }

    /* Uniforme: 2 columnas x 3 filas */
    .vip-gallery-wrapper.galeria-estilo-uniforme .thumbnail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 120px);
    }

    .vip-gallery-wrapper.galeria-estilo-uniforme .thumbnail-box:nth-child(n+5) {
        display: none;
    }

    /* Destacado: 1 ancha arriba + 2 abajo */
    .vip-gallery-wrapper.galeria-estilo-destacado .thumbnail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 120px;
    }

    .vip-gallery-wrapper.galeria-estilo-destacado .thumbnail-box:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .vip-gallery-wrapper.galeria-estilo-destacado .thumbnail-box:nth-child(n+4) {
        display: none;
    }

    /* Carrusel: fotos más anchas en móvil */
    .vip-gallery-wrapper.galeria-estilo-carrusel .thumbnail-box {
        flex: 0 0 calc(75% - var(--galeria-gap));
        height: 200px;
    }
}