/*
	.grid-2 is the shared 2-column primitive (layout.css) that Two Column
	Content also renders into — this widens the gap for Callout only, scoped
	via the section's own flex-section--callout class, so Two Column Content
	isn't affected.
*/
.flex-section--callout .grid-2 {
	gap: var(--space-10);
}

/*
	At mobile .grid-2 is a single stacked column, so this gap is the space
	between image and content — tightened from the 80px desktop column gap.
	The image also always comes first when stacked: Reverse Layout swaps the
	MARKUP order (see callout.php) so desktop reading order matches the
	visual order, which would otherwise put the image second here. `order`
	only changes the visual order at this width; the image is a
	non-interactive element, so reading/tab order for the content isn't
	meaningfully affected.
*/
@media (max-width: 47.99em) {
	.flex-section--callout .grid-2 {
		gap: var(--space-6); /* 32px */
	}

	.flex-section--callout .callout__media {
		order: -1;
	}
}

/*
	586 / 430, not 16 / 9: at the reference width this ratio is tuned to —
	one column of .grid-2 at --container-max (1300px) minus --container-gutter
	on each side and this block's own 80px column gap, i.e. (1300 - 48 - 80) / 2
	= 586px wide — 16/9 rendered at 586 * 9/16 ≈ 330px tall; this ratio renders
	586 * 430/586 = 430px, 100px taller, at that same width. Still fluid (a
	ratio, not a fixed height), so the exact +100px only holds at that one
	reference width — proportionally taller at every other width, same as
	16/9 was.
*/
.callout__media {
	aspect-ratio: 586 / 430;
	overflow: hidden;
	border-radius: var(--radius-lg);

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

.callout__content > * + * {
	margin-block-start: var(--space-4);
}

/*
	text-align does double duty here: it right-aligns the heading and text,
	and — since .button is display: inline-flex — also shifts the button
	itself to the right within its <p>, so it lines up with the text above
	it rather than sitting stranded on the left.
*/
.callout__content--reversed {
	text-align: right;
}