/**
 * Self-contained layout for Gutenberg core/gallery.
 * The `stabilizer-gallery-smart` / `columns-N` classes are normalized
 * server-side by inc/gallery-portrait-layout.php.
 *
 * This file deliberately repeats the parts of WordPress core's block-library
 * gallery CSS that the gallery cannot live without, because that stylesheet is
 * dropped site-wide by the Archub theme option Performance > CSS > "Disable
 * Styles". Without these base rules the figures keep their intrinsic image
 * width and sit flush left inside a wider content column.
 *
 * The default is one photo per row at the full width of the content column, on
 * every screen size, with every photo keeping its own aspect ratio. Only a
 * gallery where the editor explicitly picked 2-8 columns gets a multi-column
 * grid, and that one still collapses to a single column on phones.
 */

.wp-block-gallery.stabilizer-gallery-smart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--style--unstable-gallery-gap, 16px);
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	list-style: none;
}

.wp-block-gallery.stabilizer-gallery-smart > figure.wp-block-image {
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	/* No flex-grow: a lone item on the last row keeps its slot width instead of
	   stretching to close the row. */
	flex: 0 0 auto;
	align-self: flex-start;
	margin: 0;
	/* One photo per row by default; the breakpoint below splits up galleries
	   where the editor asked for 2-8 columns. */
	width: 100%;
	max-width: 100%;
}

.wp-block-gallery.stabilizer-gallery-smart > figure.wp-block-image > a,
.wp-block-gallery.stabilizer-gallery-smart > figure.wp-block-image > img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
}

.wp-block-gallery.stabilizer-gallery-smart > figure.wp-block-image > a > img {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-gallery.stabilizer-gallery-smart > figure.wp-block-image > figcaption {
	flex-grow: 0;
	margin: 0;
	padding: 0.5em 0 0;
	font-size: 0.8em;
	line-height: 1.4;
	text-align: center;
	word-break: break-word;
}

/*
 * A single-column gallery is never cropped: the editor's "crop images" toggle
 * only exists to even out neighbours in a row, and there are none here.
 * Nothing sets aspect-ratio on the img either — the browser derives it from the
 * width/height attributes, which is what reserves the right space for a
 * lazy-loaded photo. Overriding it collapses those placeholders to zero height.
 */
.wp-block-gallery.stabilizer-gallery-smart.columns-1 > figure.wp-block-image {
	width: 100%;
}

.wp-block-gallery.stabilizer-gallery-smart.columns-1 > figure.wp-block-image > a,
.wp-block-gallery.stabilizer-gallery-smart.columns-1 > figure.wp-block-image > img,
.wp-block-gallery.stabilizer-gallery-smart.columns-1 > figure.wp-block-image > a > img {
	height: auto;
	object-fit: initial;
}

@media (min-width: 600px) {
	.wp-block-gallery.stabilizer-gallery-smart.columns-2 > figure.wp-block-image {
		width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.5));
	}

	.wp-block-gallery.stabilizer-gallery-smart.columns-3 > figure.wp-block-image {
		width: calc(33.33333% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.66667));
	}

	.wp-block-gallery.stabilizer-gallery-smart.columns-4 > figure.wp-block-image {
		width: calc(25% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.75));
	}

	.wp-block-gallery.stabilizer-gallery-smart.columns-5 > figure.wp-block-image {
		width: calc(20% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8));
	}

	.wp-block-gallery.stabilizer-gallery-smart.columns-6 > figure.wp-block-image {
		width: calc(16.66667% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.83333));
	}

	.wp-block-gallery.stabilizer-gallery-smart.columns-7 > figure.wp-block-image {
		width: calc(14.28571% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.85714));
	}

	.wp-block-gallery.stabilizer-gallery-smart.columns-8 > figure.wp-block-image {
		width: calc(12.5% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.875));
	}

	/* Cropped multi-column galleries: equalize row height, as core does. */
	.wp-block-gallery.stabilizer-gallery-smart.is-cropped:not(.columns-1):not(.stabilizer-gallery-pairs) > figure.wp-block-image {
		align-self: stretch;
	}

	.wp-block-gallery.stabilizer-gallery-smart.is-cropped:not(.columns-1):not(.stabilizer-gallery-pairs) > figure.wp-block-image > a,
	.wp-block-gallery.stabilizer-gallery-smart.is-cropped:not(.columns-1):not(.stabilizer-gallery-pairs) > figure.wp-block-image > img {
		flex: 1 0 0%;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/*
 * Leftovers from the removed orientation-grouping layout. A page served from a
 * full-page cache still carries the old markup, where the gallery root was
 * rewritten to `columns-2 stabilizer-gallery-pairs`. Force those back to one
 * per row so a cached page lays out like a freshly rendered one. Safe to delete
 * once every cache has rotated.
 */
.wp-block-gallery.stabilizer-gallery-smart.stabilizer-gallery-pairs > figure.wp-block-image {
	order: 0;
	flex-grow: 0;
	width: 100%;
}

.stabilizer-gallery-break {
	display: none;
}