/*
 * Masonry layout for uncropped galleries.
 *
 * WordPress's gallery block is a flex row: every image in a row is stretched to
 * a matching height. With "Crop images" on that works, because the images are
 * cut to fit. With it off — which is what we want, so photographs keep their
 * true proportions — rows end ragged and leave gaps beneath the shorter images.
 *
 * CSS multi-column fixes it with no JavaScript and no plugin: images flow into
 * columns of equal width, each at whatever height it naturally is.
 *
 * Scoped to :not(.is-cropped), so a gallery still set to crop keeps the tidy
 * grid the editor intends. Turning cropping off is what opts a gallery in.
 *
 * On specificity: the block sets figure geometry with
 *   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
 *     { margin: 0; width: calc(50% - …) }
 * where :not(#individual-image) is a deliberate hack giving the rule an ID's
 * weight (1,3,0). No class-based selector can beat that, so BOTH margin and
 * width are overridden with !important below. Overriding only the width — as a
 * first attempt here did — leaves margin:0 winning, and the columns come out
 * with no vertical spacing at all.
 *
 * Trade-off worth knowing: multi-column reads DOWN each column, not across
 * rows. Fine for a loosely chronological photo set; wrong for a sequence where
 * order carries meaning.
 */

:root {
	--tergar-gallery-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (min-width: 782px) {
	.wp-block-gallery.has-nested-images:not(.is-cropped) {
		display: block;
		column-count: 3;
		column-gap: var(--tergar-gallery-gap);
	}

	/* 0,4,1 — beats the block's own 0,3,1 display:flex on the same element. */
	.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image {
		display: block;
		margin: 0 0 var(--tergar-gallery-gap) !important;
		/* Beats the block's :not(#individual-image) width rule. */
		width: 100% !important;
		max-width: 100% !important;
		/* Never split an image across a column boundary. */
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image > img,
	.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image > a > img {
		display: block;
		width: 100%;
		height: auto;
		/* The cropped layout stretches images to fill; undo that. */
		object-fit: initial;
	}
}

/* Two columns between tablet and desktop. Below 782px the block already
   stacks to a single column, which is right on a phone. */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-gallery.has-nested-images:not(.is-cropped) {
		display: block;
		column-count: 2;
		column-gap: var(--tergar-gallery-gap);
	}

	.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image {
		display: block;
		margin: 0 0 var(--tergar-gallery-gap) !important;
		width: 100% !important;
		max-width: 100% !important;
		break-inside: avoid;
	}
}

/*
 * Captions sit under the image rather than overlaying it. The overlay is the
 * cropped-gallery treatment and reads badly at natural proportions.
 */
.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image figcaption {
	position: static;
	background: none;
	padding: 0.4rem 0 0;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	opacity: 0.75;
	text-align: left;
	max-height: none;
	overflow: visible;
}