/* Cuadricula publica de fotos compartida por la galeria y los resultados
   de busqueda (dorsal, selfie, mascotas). Cada .gallery-item declara su
   proporcion via --ar y las clases --wide/--tall; el acomodo movil de
   horizontales lo completa static/js/gallery_grid.js. */

.gallery-container {
    max-width: var(--gallery-grid-max-width, 1400px);
    margin: 24px auto 0;
    padding: 0 var(--page-padding, 1rem) 4rem;
}

/* Renglones justificados (estilo Google Photos): cada foto declara su
   proporcion nativa via --ar (inline, desde thumb_width/thumb_height) y
   crece proporcional a ella, de modo que todas las fotos de un renglon
   comparten exactamente la misma altura sin recortarse. */
.gallery-masonry {
    /* Altura visual del renglon. La fuente permanece limitada a 150px de lado
       largo; el navegador puede ampliarla ligeramente para conservar el ritmo
       actual del grid sin solicitar una variante de mayor resolucion. */
    --row-h: 160px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-item {
    --ar: 1.5;
    position: relative;
    aspect-ratio: var(--ar);
    flex-grow: calc(var(--ar) * 100);
    flex-basis: calc(var(--row-h) * var(--ar));
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--gray-200, #E5E5E5);
}

/* Relleno invisible: absorbe el espacio sobrante del ultimo renglon para
   que sus fotos no se estiren de mas. */
.gallery-masonry::after {
    content: "";
    flex-grow: 1000000;
    flex-basis: 0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Con --ar conocido el cover no recorta (proporciones identicas). El
       sesgo al tercio superior solo aplica al fallback 3:2 de fotos sin
       dimensiones registradas, para conservar caras en vez del torso. */
    object-position: 50% 35%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .gallery-item:hover img {
        transform: scale(1.04);
    }
}

@media (max-width: 768px) {
    .gallery-masonry {
        --row-h: 130px;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    /* Seis unidades internas conservan tres verticales por renglon y permiten
       alternar horizontales aisladas, parejas y cierres de renglon completo. */
    .gallery-masonry {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: calc((100vw - 2 * var(--page-padding, 1rem) - 40px) / 6);
        grid-auto-flow: dense;
        gap: 8px;
    }

    .gallery-item {
        aspect-ratio: auto;
        grid-column: span 2;
        grid-row: span 3;
    }

    .gallery-item.gallery-item--wide {
        grid-column: span 4;
        grid-row: span 3;
    }

    .gallery-item.gallery-item--wide-paired {
        grid-column: span 3;
        grid-row: span 2;
    }

    .gallery-item.gallery-item--wide-full {
        grid-column: 1 / -1;
        grid-row: span 4;
    }

    /* El relleno del layout justificado seria una celda fantasma en grid. */
    .gallery-masonry::after {
        content: none;
    }
}

.gallery-item.is-in-cart {
    outline: 2px solid var(--gallery-accent, #1d4ed8);
    outline-offset: -2px;
}

@keyframes cartSelectionPulse {
    0% { transform: scale(0.97); }
    60% { transform: scale(1.015); }
    100% { transform: scale(1); }
}

.gallery-item.is-in-cart.is-cart-animating {
    animation: cartSelectionPulse 320ms cubic-bezier(.22, 1, .36, 1);
}

.in-cart-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gallery-accent, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.22, 1, .36, 1);
}

.gallery-item.is-in-cart .in-cart-badge {
    opacity: 1;
    transform: scale(1);
}