.text-image .section__inner {
	container-type: inline-size;
}

.text-image__stage {
	--text-image-overlay: color-mix(in srgb, var(--color-dark) 40%, transparent);
	--text-image-stage-radius: 0;
	--text-image-box-radius: 0;
	--text-image-stage-pad: 2.5rem;
	--text-image-box-pad-block: 2.5rem;
	--text-image-box-pad-inline: 2.5rem;
	--text-image-min-size: min(51.9375rem, 85vh);
	--text-image-fill: var(--color-white);
	--text-image-ink: var(--color-dark);
	--text-image-accent: var(--color-green);
	--text-image-cta-on-accent: var(--color-dark);

	border-radius: var(--text-image-stage-radius);
	isolation: isolate;
	min-block-size: var(--text-image-min-size);
	overflow: clip;
	position: relative;
}

.text-image__stage[data-box-color="white"] {
	--text-image-fill: var(--color-white);
	--text-image-ink: var(--color-dark);
	--button-auto-fill: var(--color-dark);
	--button-auto-text: var(--color-white);
	--button-auto-hover: color-mix(in srgb, white 10%, var(--color-dark));
	--button-auto-plain: var(--color-dark);
}

.text-image__stage[data-box-color="dark"] {
	--text-image-fill: var(--color-dark);
	--text-image-ink: var(--color-white);
	--button-auto-fill: var(--color-white);
	--button-auto-text: var(--color-dark);
	--button-auto-hover: color-mix(in srgb, black 10%, var(--color-white));
	--button-auto-plain: var(--color-white);
}

.text-image__stage[data-circle="white"] { --text-image-accent: var(--color-white); }
.text-image__stage[data-circle="dark"] {
	--text-image-accent: var(--color-dark);
	--text-image-cta-on-accent: var(--color-white);
}
.text-image__stage[data-circle="green"] { --text-image-accent: var(--color-green); }
.text-image__stage[data-circle="purple"] { --text-image-accent: var(--color-purple); }
.text-image__stage[data-circle="red"] { --text-image-accent: var(--color-red); }

.text-image__stage > .text-image__media,
.text-image__stage > .text-image__media-placeholder {
	inset: 0;
	/* Allow canvas clicks on exposed image; text box sits above at z-index 1. */
	pointer-events: auto;
	position: absolute;
	z-index: 0;
}

.text-image__stage > .text-image__media .media {
	aspect-ratio: auto;
	block-size: 100%;
	border-radius: 0;
	inline-size: 100%;
}

.text-image__stage > .text-image__media .media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.text-image__stage > .text-image__media::after {
	background: var(--text-image-overlay);
	content: "";
	inset: 0;
	position: absolute;
}

.text-image__media-placeholder {
	align-items: center;
	background: color-mix(in srgb, var(--section-background), var(--text-body) 12%);
	border: 2px dashed var(--border-color);
	border-radius: inherit;
	color: var(--text-muted);
	display: flex;
	justify-content: center;
	padding: 2rem;
	text-align: center;
}

.text-image__box {
	background-color: var(--text-image-fill);
	color: var(--text-image-ink);
	position: relative;
	z-index: 1;
	--text-heading: var(--text-image-ink);
	--text-body: var(--text-image-ink);
	--text-muted: var(--text-image-ink);
	--text-accent: var(--text-image-ink);
	--link-color: var(--text-image-ink);
	--link-hover-color: var(--text-image-ink);
}

.text-image__content {
	display: grid;
	gap: 1.25rem;
}

.text-image__heading {
	color: var(--text-image-ink);
	line-height: 1.3;
	margin: 0;
	max-inline-size: 18ch;
}

.text-image__body {
	color: var(--text-image-ink);
	font-weight: 300;
	line-height: 1.5;
	margin-block: 0;
	max-inline-size: 28rem;
}

.text-image__body > * {
	margin-block: 0 1em;
}

.text-image__body > :last-child {
	margin-block-end: 0;
}

.text-image__editor-placeholder {
	color: color-mix(in srgb, var(--text-image-ink) 70%, transparent);
	font-style: italic;
	margin: 0;
}

.text-image__actions {
	position: relative;
}

.text-image__action {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 1.25rem;
	text-decoration: none;
}

.text-image__action:focus-visible {
	outline: 2px solid var(--text-image-accent);
	outline-offset: 0.35rem;
}

.text-image__action-label {
	color: var(--text-image-ink);
	font-size: var(--font-size-body-lg);
	font-weight: 500;
	line-height: 1;
}

.text-image__action:hover .text-image__action-label {
	color: var(--text-image-ink);
}

.text-image__action-icon {
	align-items: center;
	background-color: var(--text-image-accent);
	block-size: 5rem;
	border-radius: var(--radius-pill);
	color: var(--text-image-cta-on-accent);
	display: inline-flex;
	flex-shrink: 0;
	inline-size: 5rem;
	justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* Card — flush bottom-right, top-left radius only                            */
/* -------------------------------------------------------------------------- */

.text-image__stage[data-section-style="card"] {
	align-items: end;
	display: flex;
	justify-content: end;
	overflow: clip;
}

.text-image__stage[data-section-style="card"] .text-image__box {
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: 0;
	border-start-start-radius: var(--text-image-box-radius);
	max-inline-size: min(38.1875rem, 100%);
	padding: var(--text-image-box-pad-block) var(--text-image-box-pad-inline);
}

.text-image__stage[data-section-style="card"] .text-image__heading {
	max-inline-size: none;
}

.text-image__stage[data-section-style="card"] .text-image__body {
	max-inline-size: none;
}

/* -------------------------------------------------------------------------- */
/* Card inset — padded inside the image, all corners rounded                  */
/* -------------------------------------------------------------------------- */

.text-image__stage[data-section-style="card-inset"] {
	align-items: end;
	display: flex;
	justify-content: end;
	padding: var(--text-image-stage-pad);
}

.text-image__stage[data-section-style="card-inset"] .text-image__box {
	border-radius: var(--text-image-box-radius);
	max-inline-size: min(38.1875rem, 100%);
	padding: var(--text-image-box-pad-block) var(--text-image-box-pad-inline);
}

.text-image__stage[data-section-style="card-inset"] .text-image__heading {
	max-inline-size: none;
}

.text-image__stage[data-section-style="card-inset"] .text-image__body {
	max-inline-size: 24.5rem;
}

/* -------------------------------------------------------------------------- */
/* Stacked — full-width image with centered card overlapping the bottom       */
/* -------------------------------------------------------------------------- */

.text-image__stage[data-section-style="stacked"] {
	--text-image-stacked-overlap: clamp(3.75rem, 8vw, 7.5rem);
	--text-image-stacked-media-radius: 0;
	--text-image-stacked-box-radius: 0;
	--text-image-stacked-pad: clamp(2rem, 5vw, 4.375rem);
	--text-image-stacked-media-size: min(36.0625rem, 70vh);

	align-items: center;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	min-block-size: 0;
	overflow: visible;
}

.text-image__stage[data-section-style="stacked"] .text-image__media,
.text-image__stage[data-section-style="stacked"] .text-image__media-placeholder {
	block-size: var(--text-image-stacked-media-size);
	border-radius: var(--text-image-stacked-media-radius);
	inline-size: 100%;
	inset: auto;
	margin-block-end: calc(var(--text-image-stacked-overlap) * -1);
	overflow: clip;
	pointer-events: auto;
	position: relative;
	z-index: 0;
}

.text-image__stage[data-section-style="stacked"] .text-image__media .media {
	border-radius: inherit;
}

.text-image__stage[data-section-style="stacked"] .text-image__media::after {
	display: none;
}

.text-image__stage[data-section-style="stacked"] .text-image__box {
	border-radius: var(--text-image-stacked-box-radius);
	inline-size: min(66.875rem, 100%);
	max-inline-size: calc(100% - clamp(1.5rem, 4vw, 3.75rem));
	padding: var(--text-image-stacked-pad);
	z-index: 1;
}

.text-image__stage[data-section-style="stacked"] .text-image__content {
	gap: 2.5rem;
}

.text-image__stage[data-section-style="stacked"] .text-image__heading,
.text-image__stage[data-section-style="stacked"] .text-image__body {
	max-inline-size: none;
}

/* -------------------------------------------------------------------------- */
/* Bar — full-width strip flush to the image bottom                           */
/* -------------------------------------------------------------------------- */

.text-image__stage[data-section-style="bar"] {
	align-items: end;
	display: flex;
}

.text-image__stage[data-section-style="bar"] .text-image__box {
	border-radius: 0;
	inline-size: 100%;
	padding-block: var(--text-image-box-pad-block);
	padding-inline: clamp(1.5rem, 4vw, 3.75rem);
}

/* -------------------------------------------------------------------------- */
/* Bar inset — full-width strip padded inside the image                       */
/* -------------------------------------------------------------------------- */

.text-image__stage[data-section-style="bar-inset"] {
	align-items: end;
	display: flex;
	padding: var(--text-image-stage-pad);
}

.text-image__stage[data-section-style="bar-inset"] .text-image__box {
	border-radius: var(--text-image-box-radius);
	inline-size: 100%;
	padding-block: var(--text-image-box-pad-block);
	padding-inline: clamp(1.5rem, 4vw, 3.75rem);
}

/* -------------------------------------------------------------------------- */
/* Bar content modes                                                          */
/* -------------------------------------------------------------------------- */

.text-image__stage[data-section-style="bar"] .text-image__content,
.text-image__stage[data-section-style="bar-inset"] .text-image__content {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	justify-content: space-between;
}

.text-image__stage[data-bar-content="copy"] .text-image__heading {
	flex: 1 1 16rem;
	max-inline-size: none;
}

.text-image__stage[data-bar-content="copy"] .text-image__body {
	flex: 0 1 33.1875rem;
	max-inline-size: 33.1875rem;
}

.text-image__stage[data-bar-content="featured"] .text-image__heading {
	flex: 1 1 16rem;
	max-inline-size: none;
}

.text-image__stage[data-bar-content="featured"] .text-image__action {
	margin-inline-start: auto;
}

/* -------------------------------------------------------------------------- */
/* Split — text and image side by side                                        */
/* -------------------------------------------------------------------------- */

.text-image[data-layout="split"] .section__inner {
	container-type: inline-size;
}

.text-image__split {
	--text-image-fill: var(--color-white);
	--text-image-ink: var(--color-dark);
	--text-image-accent: var(--color-green);
	--text-image-split-radius: 0;
	--text-image-split-gap: 0;
	--text-image-overlap: clamp(2rem, 5vw, 4.5rem);

	align-items: stretch;
	display: grid;
	gap: var(--text-image-split-gap);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	isolation: isolate;
	position: relative;
}

.text-image__split[data-box-color="white"] {
	--text-image-fill: var(--color-white);
	--text-image-ink: var(--color-dark);
}

.text-image__split[data-box-color="dark"] {
	--text-image-fill: var(--color-dark);
	--text-image-ink: var(--color-white);
}

.text-image__split[data-panel-style="filled"][data-box-color="white"] .text-image__split-copy {
	--button-auto-fill: var(--color-dark);
	--button-auto-text: var(--color-white);
	--button-auto-hover: color-mix(in srgb, white 10%, var(--color-dark));
	--button-auto-plain: var(--color-dark);
}

.text-image__split[data-panel-style="filled"][data-box-color="dark"] .text-image__split-copy {
	--button-auto-fill: var(--color-white);
	--button-auto-text: var(--color-dark);
	--button-auto-hover: color-mix(in srgb, black 10%, var(--color-white));
	--button-auto-plain: var(--color-white);
}

.text-image__split[data-media-position="right"] {
	grid-template-areas: "copy media";
}

.text-image__split[data-media-position="left"] {
	grid-template-areas: "media copy";
}

.text-image__split[data-fill-spacing="spaced"] {
	--text-image-split-gap: clamp(1.5rem, 4vw, 3.75rem);
}

.text-image__split[data-fill-spacing="flush"] {
	--text-image-split-gap: 0;
}

.text-image__split[data-panel-style="plain"] {
	--text-image-split-gap: clamp(2.5rem, 6vw, 6.25rem);
}

.text-image__split-copy {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 5rem);
	grid-area: copy;
	justify-content: center;
	min-inline-size: 0;
	padding-block: clamp(2rem, 5vw, 5rem);
	padding-inline: clamp(1.75rem, 4vw, 4.375rem);
	position: relative;
	z-index: 0;
}

/* Plain: flush text to the content edges (gap to the image remains). */
.text-image__split[data-panel-style="plain"] .text-image__split-copy {
	color: var(--text-body);
	padding-inline: 0;
}

.text-image__split[data-panel-style="plain"] .text-image__body,
.text-image__split[data-panel-style="plain"] .text-image__body > * {
	color: var(--text-body);
}

.text-image__split[data-panel-style="filled"] .text-image__split-copy {
	background-color: var(--text-image-fill);
	border-radius: var(--text-image-split-radius);
	color: var(--text-image-ink);
	--text-heading: var(--text-image-ink);
	--text-body: var(--text-image-ink);
	--text-muted: var(--text-image-ink);
	--text-accent: var(--text-image-ink);
	--link-color: var(--text-image-ink);
	--link-hover-color: var(--text-image-ink);
}

.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="right"] .text-image__split-copy {
	border-end-end-radius: 0;
	border-start-end-radius: 0;
}

.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="left"] .text-image__split-copy {
	border-end-start-radius: 0;
	border-start-start-radius: 0;
}

.text-image__split[data-panel-style="plain"] .text-image__heading {
	color: var(--text-heading);
}

.text-image__split[data-panel-style="filled"] .text-image__heading {
	color: var(--text-image-ink);
}

.text-image__split .text-image__heading {
	max-inline-size: 14ch;
}

.text-image__split .text-image__body {
	max-inline-size: 36rem;
}

/* -------------------------------------------------------------------------- */
/* Partners — Split only                                                      */
/* -------------------------------------------------------------------------- */

.text-image__partners {
	--text-image-partner-logo-height: 1.875rem;

	display: grid;
	gap: 1.25rem;
	justify-items: start;
	min-inline-size: 0;
}

.text-image__partners-label {
	color: var(--text-image-ink);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	opacity: 0.5;
	text-transform: uppercase;
}

.text-image__split[data-panel-style="plain"] .text-image__partners-label {
	color: var(--text-body);
}

.text-image__partners-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.875rem;
	list-style: none;
	margin: 0;
	max-inline-size: 38.375rem;
	padding: 0;
}

.text-image__partner {
	display: flex;
	flex: 0 0 auto;
	line-height: 0;
	margin: 0;
	max-inline-size: 100%;
}

.text-image__partner-link {
	display: inline-flex;
	line-height: 0;
	text-decoration: none;
}

.text-image__partner-link:focus-visible {
	outline: 2px solid var(--text-image-accent, var(--color-green));
	outline-offset: 0.25rem;
}

.text-image__partner-logo {
	block-size: var(--text-image-partner-logo-height);
	inline-size: auto;
	max-inline-size: 7.5rem;
	object-fit: contain;
	object-position: left center;
}

.text-image__partner-placeholder {
	color: color-mix(in srgb, var(--text-image-ink, var(--text-body)) 70%, transparent);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.4;
	margin: 0;
}

.text-image__split[data-panel-style="plain"] .text-image__partner-placeholder {
	color: color-mix(in srgb, var(--text-body) 70%, transparent);
}

.text-image__split-media {
	align-self: stretch;
	grid-area: media;
	isolation: isolate;
	min-block-size: min(28rem, 70vh);
	overflow: clip;
	position: relative;
	z-index: 1;
}

.text-image__split[data-panel-style="filled"] .text-image__split-media,
.text-image__split[data-panel-style="plain"] .text-image__split-media {
	border-radius: var(--text-image-split-radius);
}

.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="right"] .text-image__split-media {
	border-end-start-radius: 0;
	border-start-start-radius: 0;
}

.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="left"] .text-image__split-media {
	border-end-end-radius: 0;
	border-start-end-radius: 0;
}

.text-image__split-media .text-image__media,
.text-image__split-media .text-image__media-placeholder {
	border-radius: inherit;
	inset: 0;
	overflow: clip;
	pointer-events: auto;
	position: absolute;
}

/* Fill the media column (same pattern as media-box stage). */
.text-image__split-media .text-image__media .media {
	aspect-ratio: auto;
	block-size: 100%;
	border-radius: 0;
	inline-size: 100%;
}

.text-image__split-media .text-image__media .media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.text-image__split-media .text-image__media--map iframe,
.text-image__map {
	block-size: 100%;
	border: 0;
	inline-size: 100%;
	inset: 0;
	position: absolute;
}

.text-image__split-media .text-image__media::after {
	display: none;
}

/* Overlap: filled text panel sits over the image; both keep full rounded corners. */
.text-image__split[data-fill-spacing="overlap"] {
	--text-image-overlap: clamp(3.75rem, 8vw, 7.5rem);
	--text-image-split-radius: 0;
	align-items: center;
}

.text-image__split[data-fill-spacing="overlap"] .text-image__split-copy {
	align-self: center;
	padding-block: clamp(2.5rem, 6vw, 5.625rem);
	padding-inline: clamp(1.75rem, 4vw, 4.375rem);
	z-index: 2;
}

.text-image__split[data-fill-spacing="overlap"] .text-image__split-media {
	align-self: center;
	border-radius: var(--text-image-split-radius);
	block-size: min(44.875rem, 85vh);
	min-block-size: min(28rem, 70vh);
	z-index: 1;
}

/* Image extends under the text panel (negative margin toward the copy). */
.text-image__split[data-fill-spacing="overlap"][data-media-position="right"] .text-image__split-media {
	margin-inline-start: calc(var(--text-image-overlap) * -1);
}

.text-image__split[data-fill-spacing="overlap"][data-media-position="left"] .text-image__split-media {
	margin-inline-end: calc(var(--text-image-overlap) * -1);
}

@container (max-width: 48rem) {
	.text-image__stage {
		--text-image-stage-pad: 1.25rem;
		--text-image-box-pad-block: 1.5rem;
		--text-image-box-pad-inline: 1.5rem;
		--text-image-min-size: min(28rem, 70vh);
	}

	.text-image__stage[data-section-style="card"],
	.text-image__stage[data-section-style="card-inset"] {
		justify-content: stretch;
	}

	.text-image__stage[data-section-style="card"] .text-image__box,
	.text-image__stage[data-section-style="card-inset"] .text-image__box {
		max-inline-size: none;
		inline-size: 100%;
	}

	.text-image__stage[data-section-style="card"] .text-image__box {
		border-start-end-radius: var(--text-image-box-radius);
	}

	.text-image__stage[data-section-style="stacked"] {
		--text-image-stacked-overlap: clamp(2rem, 8vw, 3.75rem);
		--text-image-stacked-media-size: min(16rem, 50vh);
		--text-image-stacked-pad: 1.5rem;
	}

	.text-image__stage[data-section-style="stacked"] .text-image__box {
		max-inline-size: none;
		inline-size: 100%;
	}

	.text-image__stage[data-section-style="stacked"] .text-image__content {
		gap: 1.5rem;
	}

	.text-image__stage[data-section-style="bar"] .text-image__content,
	.text-image__stage[data-section-style="bar-inset"] .text-image__content {
		align-items: start;
		flex-direction: column;
	}

	.text-image__stage[data-bar-content="copy"] .text-image__body,
	.text-image__stage[data-bar-content="featured"] .text-image__action {
		margin-inline-start: 0;
		max-inline-size: none;
	}

	.text-image__action-icon {
		block-size: 3.5rem;
		inline-size: 3.5rem;
	}

	.text-image__split {
		gap: calc(var(--text-image-split-gap) * 2 / 3);
		grid-template-columns: minmax(0, 1fr);
	}

	.text-image__split[data-media-position="right"],
	.text-image__split[data-media-position="left"] {
		grid-template-areas:
			"media"
			"copy";
	}

	.text-image__split[data-fill-spacing="overlap"] {
		--text-image-overlap: 0;
	}

	.text-image__split[data-fill-spacing="overlap"][data-media-position="right"] .text-image__split-media,
	.text-image__split[data-fill-spacing="overlap"][data-media-position="left"] .text-image__split-media {
		margin-inline: 0;
		block-size: auto;
	}

	.text-image__split[data-fill-spacing="overlap"] .text-image__split-copy {
		align-self: stretch;
	}

	.text-image__split-copy {
		padding: 0;
	}

	.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="right"] .text-image__split-copy,
	.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="left"] .text-image__split-copy,
	.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="right"] .text-image__split-media,
	.text-image__split[data-panel-style="filled"][data-fill-spacing="flush"][data-media-position="left"] .text-image__split-media {
		border-radius: var(--text-image-split-radius);
	}

	.text-image__split-media {
		aspect-ratio: 16 / 9;
		min-block-size: 0;
	}
}
