/*= Mosaic grid. A dense CSS grid: "wide" tiles span 2 columns (col-span-2 in
/*= module.html) for landscape photos, "standard" tiles are square, and
/*= grid-auto-flow: dense packs them to fill the gaps. Column count is responsive;
/*= the desktop count comes from the --gallery-columns var (Style field). Cropping,
/*= radius and aspect are Tailwind utilities on the tiles. */

.gallery__mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 12px;
    /*= Mobile: each tile sizes to its own aspect (square or 16:9), so DON'T stretch.
        On iOS Safari (and iOS Chrome — also WebKit) a stretched grid item whose height
        comes only from aspect-ratio, with no in-flow content (the image is absolute),
        collapses to 0 height and the whole grid blanks. `start` lets each tile keep its
        aspect-ratio height, which iOS honors. Wide/square matching isn't needed here
        (every mobile tile already carries its own aspect); it only matters at ≥1024. */
    align-items: start;
}


@media (min-width: 1024px) {
    .gallery__mosaic {
        gap: 24px;
        grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
        /*= Desktop: wide tiles (lg:aspect-auto) stretch to match the square tiles' row
            height, so a 2-column tile is exactly as tall as the squares beside it. */
        align-items: stretch;
    }
}

/*~ Initial visibility — two independent thresholds so mobile and desktop can show
    different amounts before "Load more". module.js reveals items in batches (and only
    shows the button when there are still-hidden items on the current viewport). */
@media (max-width: 1023px) {
    .gallery__item--over-mobile {
        display: none;
    }
}

@media (min-width: 1024px) {
    .gallery__item--over-desktop {
        display: none;
    }
}

/*+ Reveal transition — module.js shows a batch with --enter (invisible, nudged down),
/*= then removes it on the next frame so each tile fades + slides up (staggered). */
.gallery__item {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gallery__item--enter {
    opacity: 0;
    transform: translateY(16px);
}

/*~ Respect reduced-motion — reveal instantly, no fade/slide. */
@media (prefers-reduced-motion: reduce) {
    .gallery__item {
        transition: none;
    }

    .gallery__item--enter {
        opacity: 1;
        transform: none;
    }
}

/*- Optional per-element max-width, desktop only (>=1024px). The px value comes from
    the Style-tab fields as inline --gallery-*-mw custom properties; unset falls back
    to `none` (full width). */
@media (min-width: 1024px) {
    .gallery__title {
        max-width: var(--gallery-title-mw, none);
    }

    .gallery__copy {
        max-width: var(--gallery-content-mw, none);
    }
}