/* css/components/gallery.css — Galería fotográfica inmersiva (Grid + cinemática) */

/* ─── Matriz de Grilla para Galería ─────────────────────────────────────── */
.gallery-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    column-gap: 30px;
    row-gap: 18px;
    align-items: center;
    justify-items: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

/* ─── Track: Bounding Box para proporciones fotográficas ─────────────────── */
.gallery-grid__track {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 90%;
    max-width: 1200px;
    height: auto;
}

@media (min-width: 768px) {
    .gallery-grid__track {
        gap: 32px;
    }
}

/* ─── Desktop: la galería respeta la franja del nav fijo ──────────────────
 * `.layout-split__gallery` mide 100vh completos, pero `.comic-controls` es
 * fixed con `bottom: 12px` y botones de 64px: ocupa los últimos 76px del
 * viewport. Con pantalla ancha y baja (p. ej. 1759×622) el track crecía por
 * ancho hasta meterse detrás del nav, porque su alto sale de su ancho
 * (slides con aspect-ratio 3/2) y nadie miraba el alto disponible.
 * Dos reservas, ninguna por monitor:
 *   - la fila inferior de la grilla nunca baja de --venue-nav-safe;
 *   - el ancho del track se topea por el alto que queda libre:
 *     altoTrack = (ancho - 32px) / 1.5 + 32px  →  ancho = alto * 1.5 - 16px
 * El 36px descontado son los dos row-gap de 18px de .gallery-grid.
 * ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .gallery-grid {
        --venue-top: 16px;
        --venue-nav-safe: 92px;
        grid-template-rows: minmax(var(--venue-top), 1fr) auto minmax(var(--venue-nav-safe), 1fr);
    }

    .gallery-grid__track {
        width: min(
            90%,
            calc((100dvh - var(--venue-top) - var(--venue-nav-safe) - 36px) * 1.5 - 16px)
        );
    }
}

/* ─── Cinemática de Extrusión y Desplazamiento ───────────────────────────── */
.gallery-grid__slide {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
    position: relative;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

/* ─── Controles Proyectados en Grilla ────────────────────────────────────── */
.gallery-grid__controls {
    display: contents;
}

#btn-back-to-last-comic {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    margin: 16px;
    position: absolute;
    z-index: 100;
}

.gallery-grid__zoom {
    position: absolute;
    inset: 0;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-grid__zoom.is-visible {
    opacity: 1;
}

.gallery-grid__zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.gallery-grid__zoom.is-visible .gallery-grid__zoom-img {
    transform: scale(1);
}

.gallery-grid__zoom-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(60, 60, 60, 0.75);
    border-radius: 4px;
    z-index: 210;
    cursor: pointer;
    transition: transform var(--transition-smooth);
}

.gallery-grid__zoom-close:hover,
.gallery-grid__zoom-close:focus-visible {
    transform: scale(1.1);
    outline: none;
}

.gallery-grid__zoom-close-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ─── Portrait mobile/tablet: presupuesto vertical del venue ──────────────
 * Todo el reparto de alto vive acá para que se lea de una sola pasada.
 * De arriba hacia abajo:
 *   --venue-top       margen superior seguro (la galería nunca pega arriba)
 *   [track]           la galería: el ÚNICO bloque que cede tamaño
 *   --venue-block-h   logo + dirección + actions. El gap galería→logo es el
 *                     margin-top: 12px del logo-wrapper, ya contado acá.
 *   --venue-nav-safe  franja del nav fijo .comic-controls (bottom: 85px +
 *                     64px de alto = 149px) + aire de separación.
 *
 * El alto del track sale de su ancho (slides con aspect-ratio 3/2), así que
 * se lo topea con el alto que sobra después de las reservas:
 *   altoTrack = (ancho - 16px) / 1.5 + 16px  →  ancho = alto * 1.5 - 8px
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) and (orientation: portrait) {
    .layout-split {
        --venue-top: 16px;
        --venue-block-h: 344px;
        --venue-nav-safe: 168px;
        padding-top: var(--venue-top);
        padding-bottom: var(--venue-nav-safe);
    }

    /* Sin flex-grow: al crecer, la caja se inflaba, el track quedaba pegado
     * arriba y el bloque inferior terminaba empujado detrás del nav. */
    .layout-split__gallery {
        height: auto;
        flex: 0 0 auto;
    }

    /* Los gaps de la grilla envolvente restaban alto y ancho reales al track */
    .gallery-grid {
        column-gap: 0;
        row-gap: 0;
    }

    .gallery-grid__track {
        gap: 16px;
        width: min(
            calc(100vw - 24px),
            calc((100dvh - var(--venue-top) - var(--venue-block-h) - var(--venue-nav-safe)) * 1.5 - 8px)
        );
    }
}

/* Poca altura: el bloque inferior ya se compacta en info-panel.css (logo
 * 110px, dirección 0.78rem, actions sin margen superior), así que la galería
 * recupera esa reserva. Reutiliza el breakpoint existente, no agrega uno. */
@media (max-width: 1023px) and (max-height: 700px) and (orientation: portrait) {
    .layout-split {
        --venue-block-h: 270px;
    }
}

@media (orientation: landscape) and (max-width: 1023px) {
    .gallery-grid__track {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 98%;
    }

    .gallery-grid__slide {
        height: clamp(70px, 22vh, 130px);
        object-fit: cover;
    }

    /* ─── Zoom del venue como overlay fullscreen (:not(.comic-zoom) excluye
     * el zoom de las viñetas, que reutiliza estas mismas clases) ────────── */
    .gallery-grid__zoom:not(.comic-zoom) {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6vh 6vw;
        background-color: rgba(20, 14, 8, 0.78);
    }

    .gallery-grid__zoom:not(.comic-zoom) .gallery-grid__zoom-img {
        width: auto;
        height: auto;
        max-width: 92vw;
        max-height: 84vh;
        object-fit: contain;
        transform: scale(1);
    }

    .gallery-grid__zoom:not(.comic-zoom) .gallery-grid__zoom-close {
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
        z-index: 1010;
    }

    /* El nav .comic-controls es hermano de #app-state-main y `body > *` deja
     * a cada uno en su propio stacking context; con z-index: 999 contra el 1
     * de #app-state-main, ningún z-index interno del overlay puede superarlo.
     * Por eso se lo neutraliza mientras el zoom del venue está abierto: se
     * recupera al cerrar la foto. `:not(.comic-zoom)` mantiene intacto el
     * zoom de las viñetas. */
    body:has(.gallery-grid__zoom:not(.comic-zoom):not(.is-hidden)) .comic-controls {
        visibility: hidden;
        pointer-events: none;
    }
}