/**
 * Gallery: a grid of images and nothing else.
 *
 * Every arrangement decision is a custom property, so the inspector sets a
 * value rather than rewriting a rule, and a site that wants different defaults
 * changes them once on `.gallery` in the class manager instead of on every
 * gallery it has. The three layouts are attribute selectors for the same
 * reason: `data-gallery-layout` is one attribute on the element, readable in
 * the exported HTML, and it cannot collide with a class the user added.
 *
 * No lightbox script ships with it. A lightbox is a decision about behaviour
 * that belongs to the site, not to the element, and every visitor pays for it
 * in bytes whether or not they click an image. `data-gallery-lightbox` marks
 * the intent so a site's own script — or a plugin — can act on it.
 */

.gallery{
	--gallery-columns: 3;
	--gallery-gap: var(--space-sm, 1rem);
	--gallery-ratio: 1;

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

.gallery__item{
	display: block;
	margin: 0;
	min-width: 0;
}

.gallery__image{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: var(--gallery-ratio);
	border-radius: var(--radius, 8px);
}

/*
 * Masonry without JavaScript.
 *
 * CSS columns are the one layout that packs images of different heights with
 * no measuring pass, and an image gallery is exactly the case where their
 * usual drawback — reading order runs down each column — does not matter.
 */
.gallery[data-gallery-layout="masonry"]{
	display: block;
	column-count: var(--gallery-columns);
	column-gap: var(--gallery-gap);
}

.gallery[data-gallery-layout="masonry"] .gallery__item{
	break-inside: avoid;
	margin-bottom: var(--gallery-gap);
}

.gallery[data-gallery-layout="masonry"] .gallery__image{
	height: auto;
	aspect-ratio: auto;
}

/*
 * Justified: rows of whole images, each keeping its own proportions, the row
 * filled edge to edge. `flex-grow` on an item sized by its aspect ratio is what
 * makes a row justify — no script, and it reflows at any width.
 */
.gallery[data-gallery-layout="justified"]{
	display: flex;
	flex-wrap: wrap;
}

.gallery[data-gallery-layout="justified"] .gallery__item{
	flex: 1 1 12rem;
}

.gallery[data-gallery-layout="justified"] .gallery__image{
	height: 12rem;
	aspect-ratio: auto;
}

.gallery[data-gallery-lightbox="true"] .gallery__item{
	cursor: zoom-in;
}

@media (max-width: 767px){
	.gallery{
		--gallery-columns: 2;
	}
}