.callout__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);

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

/*
	Show a Product (always) or manual mode's own "Uncropped" toggle
	(callout_image_uncropped) — matches the Product Banner's own uncropped
	treatment (.banner__media, components.css) EXACTLY, rule for rule: no
	aspect-ratio box, no object-fit, just max-width/height so the image
	renders at its own natural size instead of a hard crop.

	object-fit was tried here first (object-fit: none) and didn't work — not
	because of the earlier aspect-ratio: none typo (aspect-ratio: auto is the
	valid "reset to natural ratio" keyword, and was already corrected), but
	because object-fit only has anything to DO when width/height force a size
	that differs from the image's own intrinsic ratio. Nothing here forces
	that — max-width: 100%; height: auto; only ever shrinks the image
	proportionally, never distorts its box — so object-fit was dead weight,
	not the mechanism. .banner__media proves the same point: it gets this
	exact look with no object-fit property at all. Removed it here to match.

	width: auto is an explicit override, not redundant — the base
	.callout__media rule above (still in effect here too; this element
	carries both classes) sets width: 100% on its own img, which would
	stretch this image to fill the column even past its own natural
	resolution on a wide container. auto is what actually stops that, the
	same way omitting a width rule entirely does for .banner__media.

	overflow: visible is a real override too, not harmless like border-radius
	is here — the base rule's overflow: hidden exists to crop the 16/9 box in
	every OTHER Callout image, but a glowing image (Focal Point Image clone's
	"Add Glow" toggle, see CLAUDE.md's "Image glow") renders its glow as a
	drop-shadow filter extending past the image's own box, and hidden clips
	that filter at the box edge — confirmed live, the glow was visibly cut
	off square on its top/left/right before this override. visible lets it
	render in full, matching .banner__media, which never sets overflow at
	all. Harmless when Add Glow is off, since there's nothing extending past
	the box to reveal — which is also exactly why manual mode's own Uncropped
	toggle exists: without it, that same glow toggle on callout_image had
	nothing visible to show, cropped away by the base rule above.
*/
.callout__media--uncropped {
	aspect-ratio: auto;
	overflow: visible;
	display: flex;
	justify-content: center;

	& img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

/*
	Show a Product only — a bordered card around the whole two-column area,
	matching Accordion's own bordered-card pattern (blocks/accordion/
	accordion.css: border + border-radius, same var(--color-border)/
	var(--radius-lg) tokens). padding: var(--space-8) (48px) lands exactly on
	the spacing scale, no arbitrary value needed — and, since it's the
	shorthand, it deliberately REPLACES .container's own padding-inline
	(the page's shared side gutter) on this element rather than adding to
	it: the border is meant to sit right at the block's own edge with 48px
	of even breathing room inside on every side, image included, not inset
	further behind the normal container gutter as well. The 80px gap
	between the two columns (grid-2's own default) is untouched — only the
	border/radius/padding are new here.
*/
.callout__grid--product {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
}

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

/* Matches Options'/Benefits'/Resources' own card text size. */
.callout__text {
	font-size: var(--card-text-font-size); /* 20px */
}

/*
	32px specifically between text and button — wider than the 16px
	.callout__content > * + * gives every other pair (e.g. header-to-text).
	Specificity (.callout__text + .callout__button) beats the generic rule
	regardless of source order.
*/
.callout__text + .callout__button {
	margin-block-start: var(--space-6); /* 32px */
}

/* Room for an optional second (outline) button next to the first, matching
   .banner__buttons' own shape (components.css). */
.callout__button {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/*
	text-align does double duty here: it right-aligns the heading/subheader/
	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;
}