/*
	.grid-2 is the shared 2-column primitive (layout.css), also used by
	Three Column Content's own .grid-3 sibling rule and several other
	blocks (Callout, Locations List, Team Carousel Side by Side, …) — this
	widens the gap for Two Column Content only, scoped via the section's
	own flex-section--two-column class, same pattern Callout's own
	.flex-section--callout .grid-2 override already uses (callout.css).
	Three Column Content is untouched — .grid-3 isn't targeted at all.
*/
.flex-section--two-column .grid-2 {
	gap: var(--space-9); /* 64px */
}

/*
	.two-column-content__column--empty (two-column-content.php's own
	$render_column) is a genuinely empty placeholder div, printed instead
	of nothing when a column has neither real content nor a button — see
	that file's own comment for why an empty column still needs to print
	SOMETHING (holding its own position in .grid-2 so the other column's
	real content lands in the correct left/right track, not wherever the
	first non-empty child happens to be).

	It's already empty, so it costs nothing on desktop (0 height, no
	visible box) — the grid's own two explicit column tracks reserve the
	width regardless of whether the item they contain has any content.
	Below 48em, though, where .grid-2 stacks to a single column
	(layout.css), that same 0-height placeholder becomes just another row
	in the stack, and the grid's own row gap still applies next to it —
	turning into a blank gap with nothing to show for it. Hidden here
	instead, at the same breakpoint boundary .grid-2 itself uses.
*/
@media (max-width: 47.99em) {
	.two-column-content__column--empty {
		display: none;
	}
}

/*
	The Image column type (two-column-content.php) — a fixed-ratio box, same
	aspect-ratio + overflow:hidden + border-radius:var(--radius-lg) +
	object-fit:cover shape blocks/callout/callout.css's own .callout__media
	uses, just with the ratio itself picked per-image via the Image Ratio
	field rather than one fixed value. Gives a consistent frame regardless
	of the uploaded photo's own aspect ratio, and (unlike a registered WP
	image size) still lets the editor pick a focal point per image rather
	than a blind center-crop. Portrait exists specifically for the tall
	photos that started this — its own upright box instead of forcing a
	landscape crop onto them.
*/
.two-column-content__image {
	overflow: hidden;
	border-radius: var(--radius-lg);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.two-column-content__image--landscape {
	aspect-ratio: 3 / 2;
}

.two-column-content__image--square {
	aspect-ratio: 1 / 1;
}

.two-column-content__image--portrait {
	aspect-ratio: 2 / 3;
}