.wp-block-rou-split-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	/* A plain min-height is the right tool here: it's a genuine floor, but
	 * still lets the row grow automatically to fit taller content. The image
	 * no longer contributes its own size to this calculation at all (it's
	 * taken out of flow below), so this can't be pushed around by the photo
	 * the way it was before. */
	min-height: var( --sb-min-height, 420px );
}

/* Which side the media sits on (controlled by the "Image / colour side" setting) */
.wp-block-rou-split-banner.sb-media-right .sb-content {
	order: 1;
}
.wp-block-rou-split-banner.sb-media-right .sb-media {
	order: 2;
}
.wp-block-rou-split-banner.sb-media-left .sb-content {
	order: 2;
}
.wp-block-rou-split-banner.sb-media-left .sb-media {
	order: 1;
}

.wp-block-rou-split-banner .sb-media {
	position: relative;
	overflow: hidden;
}

.wp-block-rou-split-banner .sb-media__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wp-block-rou-split-banner .sb-media__controls {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	display: flex;
	gap: 8px;
}

.wp-block-rou-split-banner .sb-content {
	display: flex;
	align-items: center;
}

.wp-block-rou-split-banner .sb-content__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

/*
 * The content side's outer padding is calculated from the site's global
 * content width (theme.json settings.layout.contentSize, exposed automatically
 * as --wp--style--global--content-size), so it always lines up with the rest
 * of the page's content, no matter the viewport size. clamp() both stops it
 * going negative on narrow screens and caps it on ultra-wide monitors.
 * The inner side (next to the media) gets a fixed gutter so text never
 * touches the image seam.
 */
.wp-block-rou-split-banner.sb-media-right .sb-content__inner {
	padding-left: clamp( var( --wp--style--root--padding-left, 24px ), calc( ( 100vw - var( --sb-content-size, 1400px ) ) / 2 ), 480px );
	padding-right: clamp( 24px, 5%, 64px );
}

.wp-block-rou-split-banner.sb-media-left .sb-content__inner {
	padding-right: clamp( var( --wp--style--root--padding-right, 24px ), calc( ( 100vw - var( --sb-content-size, 1400px ) ) / 2 ), 480px );
	padding-left: clamp( 24px, 5%, 64px );
}

/* Stack on mobile (only applied when "Stack on mobile" is enabled) */
@media ( max-width: 600px ) {
	.wp-block-rou-split-banner.sb-stack {
		grid-template-columns: 1fr;
		/* Reset the floor so the desktop banner height doesn't also apply to
		 * the content row now that media and content are separate rows. */
		min-height: 0;
	}

	/* Image above content (default) */
	.wp-block-rou-split-banner.sb-stack.sb-mobile-media-top .sb-media {
		order: 1;
	}
	.wp-block-rou-split-banner.sb-stack.sb-mobile-media-top .sb-content {
		order: 2;
	}

	/* Image below content */
	.wp-block-rou-split-banner.sb-stack.sb-mobile-media-bottom .sb-media {
		order: 2;
	}
	.wp-block-rou-split-banner.sb-stack.sb-mobile-media-bottom .sb-content {
		order: 1;
	}

	.wp-block-rou-split-banner.sb-stack .sb-media {
		/* Fixed (not min) height so the image has a definite size to cover,
		 * same fix as the desktop version, just a shorter default for mobile. */
		height: 220px;
	}
	.wp-block-rou-split-banner.sb-stack .sb-content__inner {
		padding-top: 32px;
		padding-bottom: 32px;
		padding-left: max( var( --wp--style--root--padding-left, 24px ), calc( ( 100vw - var( --sb-content-size, 1400px ) ) / 2 ) );
		padding-right: max( var( --wp--style--root--padding-right, 24px ), calc( ( 100vw - var( --sb-content-size, 1400px ) ) / 2 ) );
	}
}