/*
	Two Column Content's own Image columns (column_one_image/column_two_image
	— see two-column-content.php's docblock). Scoped to this block only, not
	shared with Three Column Content: the Full-Bleed treatment below assumes
	exactly two columns, one per viewport edge.
*/

/*
	When either column's image is Full-Bleed, the section becomes a band
	(.has-full-bleed-band, added by the PHP template) and is deliberately
	excluded from layout.css's own unconditional "bands get padding-block
	back" rule — restoring padding at the SECTION level would also inset
	the full-bleed image's own top/bottom (see that rule's own comment for
	why). This is what replaces it: padding on each COLUMN instead, which
	has no such conflict — a plain in-flow box, not a positioning context
	for anything. Applied to BOTH columns (not just whichever one holds
	text) and at every width, not just the 48em-and-up breakpoint the
	Full-Bleed image itself is scoped to: below that breakpoint the image
	renders contained/normal instead (this file's own earlier rule), but
	the section is still a flush band at every width, so both columns
	still need this same breathing room on mobile too. Harmless on the
	Full-Bleed image's own column at 48em and up specifically — that
	column's wrapper is empty by then (the image has already escaped it
	via position: absolute), so padding on an empty box has no visible
	effect.
*/
.flex-section--two-column.has-full-bleed-band .column-content__column {
	padding-block: var(--section-padding);
}

/*
	Base/mobile: a normal contained image, the same aspect-ratio-box + cover
	treatment Callout's own .callout__media already uses — by request,
	"normal contained" on mobile regardless of the Full-Bleed toggle. This is
	the ONLY rule that applies below the 48em breakpoint; Full-Bleed's own
	absolute-positioning rules only take effect at 48em and up.

	The actual ratio comes from one of the three modifiers below (the Aspect
	Ratio button_group field, contained mode only — hidden/ignored entirely
	once Full-Bleed is on, since that mode's height always comes from the
	other column instead of a fixed ratio).
*/
.column-content__image {
	overflow: hidden;
	border-radius: var(--radius-lg);

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

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

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

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

@media (min-width: 48em) {
	/*
		Positioning context for the Full-Bleed image below — harmless to set
		unconditionally on every Two Column Content section, used or not.
	*/
	.flex-section--two-column {
		position: relative;
	}

	/*
		Full-Bleed Image: breaks out of .container to the column's own outer
		viewport edge (left for column 1, right for column 2 — see the
		--left/--right modifiers below), spanning the section's own full
		height edge-to-edge (not just its padding box), with a 700px floor
		for when the other column's own text content is short.

		Positioned absolute relative to the SECTION (not this column's own
		grid cell) — the column's own .column-content__column wrapper stays
		in the markup only so grid-2 keeps assigning its two tracks to the
		right columns (see the PHP template's own docblock); once this
		applies, the image no longer occupies that cell's layout at all, so
		the OTHER column's text is what actually determines the row's own
		height, exactly matching the "full height of the other column's
		content" request.

		width: 50vw is literal "50% of device width," as requested — at
		viewports wider than --container-max, the container itself stops
		growing while the image's own 50vw keeps growing with the viewport,
		so the image's inner edge can end up slightly past the text column's
		own edge rather than lining up with it pixel-for-pixel. Anchoring via
		left:0/right:0 (not a negative-margin vw breakout) means this never
		causes horizontal scroll — only that one small misalignment at very
		wide viewports, accepted as the direct consequence of "50% of device
		width" being asked for literally.
	*/
	.column-content__image--full-bleed {
		position: absolute;
		inset-block: 0;
		width: 50vw;
		min-height: 43.75rem; /* 700px */
		aspect-ratio: auto;
		border-radius: 0;

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

	.column-content__image--left {
		left: 0;
	}

	.column-content__image--right {
		right: 0;
	}
}