/**
 * Gallery: a grid of equal image tiles that open in the theme's lightbox, or
 * a horizontally scrolling strip.
 *
 * globalClass: gallery   (the row; the images are GB image blocks inside it)
 *
 * Variants:
 *   gallery--2, gallery--4    tiles per row from 990px (default 3)
 *   gallery--wide             4:3 tiles instead of squares
 *   gallery--scroller         one horizontally scrolling row that bleeds to
 *                             the viewport edge; uses the cards carousel
 *                             engine (cards.css + cards.js)
 *   gallery--no-lightbox      tiles are not clickable
 *
 * Structure:
 *   .gallery.gb-container [.gallery--4]
 *     figure.gb-block-image > img       one GB image per tile; the figure
 *                                       owns the box, the image fills it
 *
 * Lightbox: js/applari-js/gallery-lightbox.js opens every image of the row
 * in the lightbox with prev/next, using the full-size URL from srcset.
 *
 * Tuning: --gallery-gap (12px), --gallery-ratio (1 / 1), --gallery-radius (8px)
 *
 * Chain animations: the row is the chain, tiles animate in order (fadeIn).
 *
 * Editor: the row's grid is repeated on GB's editor layout element.
 */

:root {
    --gallery-gap: 12px;
    --gallery-ratio: 1 / 1;
    --gallery-radius: 8px;
}

/* Grid */
.gallery,
.gallery > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gallery-gap);
}

.gallery > .block-editor-inner-blocks {
    width: 100%;
    display: block;
}

/* Tile */
.gallery figure.gb-block-image,
.gallery [data-type="generateblocks/image"] {
    margin: 0;
    min-width: 0;
}

.gallery figure.gb-block-image {
    position: relative;
    aspect-ratio: var(--gallery-ratio);
    border-radius: var(--gallery-radius);
    overflow: hidden;
}

.gallery figure.gb-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) var(--transition-timing-function);
}

.gallery:not(.gallery--no-lightbox) figure.gb-block-image img {
    cursor: zoom-in;
}

@media (hover: hover) {
    .gallery:not(.gallery--no-lightbox) figure.gb-block-image:hover img {
        transform: scale(1.04);
    }
}

.gallery--wide {
    --gallery-ratio: 4 / 3;
}

/* Scroller: tiles in one row, sized by the cards engine's card width */
.gallery--scroller {
    --cards-card-width: min(70vw, 320px);
    display: flex;
}

.gallery--scroller > figure.gb-block-image {
    aspect-ratio: var(--gallery-ratio);
}

@media only screen and (min-width: 768px) {
    .gallery,
    .gallery > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery--2,
    .gallery--2 > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 990px) {
    .gallery--4,
    .gallery--4 > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(4, 1fr);
    }
}