/**
 * Experience Gallery CSS - Galeria de fotos del detalle de experiencia y su lightbox
 *
 * La clase .gallery-thumb no tenia estilos en ningun archivo del tema: todo iba inline
 * en el blade. Aqui se le dan estilos reales y se convierte cada miniatura en un boton
 * accesible que abre el lightbox.
 *
 * @author One2Travel Development Team
 * @version 1.0
 */

/* ============================================
   FIX CRÍTICO: Modal Z-Index
   ============================================ */
/*
 * El header del sitio es .sticky-top con z-index 1050, por encima del backdrop por
 * defecto de Bootstrap. Sin esto el modal aparece por debajo del menu.
 * Mismos valores que category-hero-modal.css, que resolvio el caso del modal de video.
 * - Sticky header: 1050
 * - Modal backdrop: 1055
 * - Modal: 1060
 */
.modal-backdrop,
.modal-backdrop.show {
    z-index: 1055 !important;
}

.modal {
    z-index: 1060 !important;
}

/* ============================================
   MINIATURAS DE LA GALERÍA
   ============================================ */

.gallery-thumb {
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: #f1f3f5;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-thumb img {
    transition: transform 0.35s ease;
}

.gallery-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.gallery-thumb:hover img {
    transform: scale(1.04);
}

/* Foco visible por teclado: la miniatura es un <button> */
.gallery-thumb:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* Icono de lupa que aparece al pasar el raton */
.gallery-thumb::after {
    content: "\F52A"; /* bi-zoom-in */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.gallery-thumb:hover::after,
.gallery-thumb:focus-visible::after {
    opacity: 1;
}

/* ============================================
   LIGHTBOX
   ============================================ */

#experienceGalleryModal .modal-content {
    position: relative;
    background: transparent;
    border: 0;
}

#experienceGalleryModal .modal-body {
    padding: 0;
}

/*
 * El contenedor del slide es mas alto que la imagen (object-fit: contain), asi que el
 * boton de cerrar y el contador se anclan DENTRO de el. Con offsets negativos acababan
 * sobre el navbar y por debajo del modal respectivamente.
 */
/*
 * z-index 20, no 3: los controles del carrusel de Bootstrap llevan z-index 11 y ocupan
 * el 12% derecho a TODA la altura, asi que tapaban esta esquina. El boton se pintaba por
 * debajo y el clic del usuario caia en "siguiente foto" en lugar de cerrar el visor.
 */
#experienceGalleryModal .btn-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
    padding: 0.85rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}

#experienceGalleryModal .btn-close:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/*
 * El escenario se ajusta a la imagen (max-height, no height): con una altura fija, una
 * foto apaisada dejaba franjas vacias enormes arriba y abajo, y el contador quedaba
 * flotando lejos de la foto. El tope evita que una foto vertical se salga de pantalla.
 */
.gallery-lightbox-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: min(78vh, 900px);
}

.gallery-lightbox-slide img {
    max-width: 100%;
    max-height: min(78vh, 900px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #000;
}

/* Contador "3 / 12" */
.gallery-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    z-index: 3;
    transform: translateX(-50%);
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.85rem;
}

/* Los controles del carrusel de Bootstrap son casi invisibles sobre fondo claro */
#experienceGalleryModal .carousel-control-prev,
#experienceGalleryModal .carousel-control-next {
    width: 12%;
    opacity: 0.85;
}

#experienceGalleryModal .carousel-control-prev-icon,
#experienceGalleryModal .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.75rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    background-size: 45% 45%;
}

@media (max-width: 575.98px) {
    .gallery-lightbox-slide,
    .gallery-lightbox-slide img {
        max-height: 70vh;
    }

    #experienceGalleryModal .carousel-control-prev,
    #experienceGalleryModal .carousel-control-next {
        width: 18%;
    }
}