/* Galería · plantilla 1 (Gallery_1) -- diseño "Cortado". Misma distribución que
   qe_admin_web/public/constructor-styles/galleryTemplate1.css, adaptada al marcado de la tienda
   (GalleryComponent.vue: la foto va directo en cada hueco) y a sus variables --home-gallery-*.
     escritorio (>= 700px): 3 columnas   col 1: 1 alta + 4 baja | col 2: 2 baja + 5 alta | col 3: 3 alta + 6 baja
     celular:               2 columnas   col 1: 1 alta + 4 baja | col 2: 2 baja + 5 alta   (3 y 6 se ocultan)
   Alta = 840 x 1080 px, baja = 840 x 909 px. Sin área de texto ni foto 7.

   Los altos salen del ancho real de la grilla con container queries. A diferencia del admin, el
   contenedor de la consulta es la propia grilla (.gallery__container) y no .gallery: en la tienda la
   grilla es además .section-main--build, con ancho máximo y relleno lateral, así que 100cqw de
   .gallery no sería su ancho. Como una unidad cqw no puede medir al propio contenedor, los altos no
   van en grid-template-rows sino como alto mínimo de cada foto (las variables de abajo se resuelven
   en cada foto, que sí mide a la grilla). Con filas auto -- baja, (alta - baja - separación), baja --
   cada columna suma "alta + separación + baja": las fotos conservan su proporción y las columnas
   terminan a la misma altura. */

.gallery{
    position: relative;
    background-color: var(--home-gallery-bg-color);
    padding: var(--section-padding-y, 25px) 0;
}

.gallery__container{
    container-type: inline-size;
    --gallery-cols: 2;
    --gallery-gap: var(--home-gallery-mobile-gap);
    --gallery-col: calc((100cqw - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols));
    --gallery-short: calc(var(--gallery-col) * 909 / 840);
    --gallery-tall: calc(var(--gallery-col) * 1080 / 840);

    display: grid;
    grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: var(--gallery-gap);
}

[class^="gallery__image"]{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: none;
    border-radius: var(--home-gallery-item-radius);
    overflow: hidden;
}

[class^="gallery__image"] > img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Altas: 1, 3 y 5. Bajas: 2, 4 y 6. */
.gallery__image-1,
.gallery__image-3,
.gallery__image-5{
    min-height: var(--gallery-tall);
}

.gallery__image-2,
.gallery__image-4,
.gallery__image-6{
    min-height: var(--gallery-short);
}

/* Columna 1: alta arriba, baja abajo. */
.gallery__image-1{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.gallery__image-4{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

/* Columna 2: baja arriba, alta abajo. */
.gallery__image-2{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.gallery__image-5{
    grid-column: 2 / 3;
    grid-row: 2 / 4;
}

/* En celular sólo quedan las dos primeras columnas. */
.gallery__information,
.gallery__image-3,
.gallery__image-6,
.gallery__image-7{
    display: none;
}

@media screen and (min-width: 700px){
    .gallery__container{
        --gallery-cols: 3;
        --gallery-gap: var(--home-gallery-gap);
    }

    /* Columna 3: alta arriba, baja abajo. */
    .gallery__image-3{
        display: block;
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }

    .gallery__image-6{
        display: block;
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
}