/*= 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;
    /*= Square tiles set each row's height (aspect-square); wide tiles carry no aspect
        of their own and stretch to match, so a 2-column tile is exactly as tall as the
        1-column squares beside it (no +gap/2 mismatch). */
    align-items: stretch;
}


@media (min-width: 1024px) {
    .gallery__mosaic {
        gap: 24px;
        grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
    }
}

/*~ 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);
    }
}