/**
 * About Callout — heading + 2-up people + subheading + button stacked left, image spans rows on the right.
 */

.module.about-callout .container.grid {
	align-items: start;
	row-gap: var(--text-spacing-xlarge);
}

.module.about-callout .container.grid .heading-1 {
	color: var(--maroon);
	grid-column: 2 / -2;
	grid-row: 1;
}

.module.about-callout .people {
	grid-column: 2 / -2;
	grid-row: 2;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.about-callout .person {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	grid-column: span 6;
}

.module.about-callout .container.grid .secondary-content {
	grid-column: 2 / -2;
	grid-row: 3;
}

.module.about-callout .container.grid .secondary-content .btn {
	margin-top: var(--text-spacing-small);
}

.module.about-callout .container.grid .subheading {
	color: var(--maroon);
}

/* 140 + 32 overshoots the dark variant card top + bottom so the oval caps stick out (eyeballed from Figma). */
.module.about-callout .container.grid .media {
	align-self: center;
	border-radius: 50%;
	grid-column: 8 / -1;
	grid-row: 1 / span 3;
	height: calc(100% + 140px + 32px);
	margin-right: var(--viewport-edge);
	mix-blend-mode: normal;
	z-index: -1;
}

.module.about-callout .container.grid .media img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/* Paint-in overlay rests at 0.3 (not 0) so the portrait keeps a soft sand wash settled over it after the reveal. */
.module.about-callout .media.display-immersive[data-jazzy-scroll].animated-in::before {
	opacity: 0.3;
}

/** Dark Variant **/

.module.about-callout.bg-dark {
	--light-color: var(--white);
}

.module.about-callout.bg-dark .container.grid {
	color: var(--white);
	isolation: isolate;
	overflow: clip;
	padding: var(--module-spacing-small) var(--module-spacing-medium);
	position: relative;
}

.module.about-callout.bg-dark .container.grid::before {
	background: var(--crimson);
	border-radius: 16px;
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Suppress the global sand paint-in overlay - dark card is crimson, not sand. */
.module.about-callout.bg-dark .container.grid .media::before {
	display: none;
}

/* Crimson re-skin of the global sand fade gradient. */
.module.about-callout.bg-dark .container.grid .media::after {
	background:
		linear-gradient(var(--immersive-fade-angle), transparent 40.51%, var(--crimson) 66.34%),
		radial-gradient(50% 50% at 50% 50%, transparent 40.38%, var(--crimson) 100%);
}

.module.about-callout.bg-dark .container.grid .heading-1,
.module.about-callout.bg-dark .container.grid .subheading {
	color: var(--white);
}

.module.about-callout.bg-dark .person .eyebrow {
	color: var(--gold);
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.about-callout .container.grid .heading-1,
	.module.about-callout .people,
	.module.about-callout .container.grid .secondary-content {
		grid-column: 1 / -1;
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.about-callout {
		text-align: center;
	}

	.module.about-callout > .container.grid > .heading-1,
	.module.about-callout .people,
	.module.about-callout > .container.grid > .secondary-content,
	.module.about-callout > .container.grid > .media {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-left: 0;
		margin-right: 0;
	}

	.module.about-callout .person {
		grid-column: 1 / -1;
	}

	.module.about-callout > .container.grid > .media {
		height: auto;
		margin: 0 auto -240px;
		max-width: 400px;
		order: -1;
		width: 100%;
	}

	.module.about-callout .container.grid .media img {
		position: relative;
	}

}