/* Galería · plantilla 7 (Gallery_7): texto + cinco fotos. Misma distribución que
   qe_admin_web/public/constructor-styles/galleryTemplate7.css, adaptada al marcado de la tienda y a
   sus variables --home-gallery-* (ver la explicación de container queries en galleryTemplate1.css).
     escritorio (>= 700px): texto a la izquierda (centrado en alto) y, a la derecha, dos columnas:
                 col. A: foto 1 grande (840 x 993) arriba + foto 4 (840 x 477) abajo
                 col. B: fotos 2, 3 y 5 (840 x 477) apiladas
                 texto : col. A : col. B = 2,25 : 1 : 1
     celular:    el texto arriba, a todo el ancho; debajo foto 1 grande a la izquierda y fotos 2 y 3
                 apiladas a la derecha (4 y 5 se ocultan).
   La grande ocupa dos filas de chica + la separación, así las dos columnas terminan parejas. Las
   chicas llevan el alto como mínimo: si el texto es más alto que las fotos, la sección crece en vez
   de desbordarse. */

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

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

    display: grid;
    grid-template-columns: repeat(2, 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%;
}

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

/* Área de texto: etiqueta, título y descripción. En celular va arriba de las fotos. */
.gallery__information{
    grid-column: 1 / -1;
    grid-row: 1 / 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;

    padding: 0 0 12px;
    background-color: var(--home-gallery-content-bg-color);
    border-radius: var(--home-gallery-item-radius);
}

.gallery__information :is(h2, p){
    width: 100%;
    text-align: var(--home-gallery-alignment);
    color: var(--home-gallery-txt-color);
}

/* Etiqueta (config.tag_text del bloque): arriba del título, en mayúsculas y con el color principal. */
.gallery__information .gallery__tag--build{
    color: var(--primary--build);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

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

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

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

.gallery__image-4,
.gallery__image-5,
.gallery__image-6,
.gallery__image-7{
    display: none;
}

@media screen and (min-width: 700px){
    .gallery__container{
        --gallery-gap: var(--home-gallery-gap);
        --gallery-text-share: 2.25;
        --gallery-col: calc((100cqw - 2 * var(--gallery-gap)) / (var(--gallery-text-share) + 2));
        --gallery-short: calc(var(--gallery-col) * 477 / 840);

        /* 2.25fr = --gallery-text-share (fr no admite calc/var). */
        grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .gallery__information{
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        padding: 0 clamp(16px, 3cqw, 64px) 0 0;
    }

    /* Columna A: grande (filas 1-2) + chica abajo. */
    .gallery__image-1{
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

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

    /* Columna B: tres chicas apiladas. */
    .gallery__image-2{
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

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

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