/*** Module: Content + Media ***/

.module.content-media .container.grid {
	align-items: center;
}

/* When the image is shorter than the content beside it, pin it so it stays in
   view as the taller column scrolls past. In a grid row the media's area is as
   tall as the content, which gives sticky its travel; a taller-than-content
   image simply has no travel and sits normally. Offset clears the sticky header. */
.module.content-media .media {
	align-self: start;
	grid-column: 1 / span 6;
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-large));
}

body.admin-bar .module.content-media .media {
	top: calc(var(--header-height) + var(--wp-admin-bar-height) + var(--text-spacing-large));
}

/* "Full, without Object Cover" — show the whole image at its natural ratio,
   scaled to the column width, instead of cropping it to the 15/17 cover box. */
.module.content-media .media.natural {
	aspect-ratio: auto;
}

.module.content-media .media.natural > img,
.module.content-media .media.natural > picture > img {
	height: auto;
	object-fit: contain;
	position: static;
	width: 100%;
}

.module.content-media .content {
	grid-column: 7 / span 6;
}

.module.content-media.layout-image-left .media {
	margin-left: var(--container-breakout);
	margin-right: var(--module-spacing-small);
}

.module.content-media.layout-image-right .media {
	grid-column: 7 / span 6;
	grid-row: 1;
	margin-right: var(--container-breakout);
	margin-left: var(--module-spacing-small);
}

.module.content-media.layout-image-right .content {
	grid-column: 1 / span 6;
}

.module.content-media:not(:has(.media)) .content {
	grid-column: 1 / span 8;
	padding: 0;
}

.module.content-media .carousel {
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.module.content-media .carousel.crossfade-gallery .slide {
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 1.5s ease-in-out;
	width: 100%;
}

.module.content-media .carousel.crossfade-gallery .slide.active {
	opacity: 1;
}

.module.content-media .carousel.crossfade-gallery .slide:first-child {
	position: relative;
}

.module.content-media .carousel .slide img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.module.content-media .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	padding-block: var(--module-spacing-medium);
}

.module.content-media .content > * + * {
	margin-top: var(--text-spacing-medium);
}

.module.content-media .content > .eyebrow + *,
.module.content-media .content > .heading-2 + .large-text {
	margin-top: var(--text-spacing-xsmall);
}

.module.content-media .content > .callout {
	margin-top: var(--text-spacing-large);
}

/* Gutenberg lists reset to margin:0 and miss the unclassed-ul spacing rule.
   GenerateBlocks wraps authored lists in a .gb-container (so the list has no
   sibling paragraph to space off) — target both a directly-placed list and a
   list-wrapping container so it doesn't crowd the copy above. */
.module.content-media .content-styles * + .wp-block-list,
.module.content-media .content-styles * + .gb-container:has(> .wp-block-list) {
	margin-top: 12px;
}

.module.content-media .buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
}

/** Stat callout **/

.module.content-media .callout.stat {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-small);
}

.module.content-media .callout.stat .icon {
	flex-shrink: 0;
	height: 60px;
	width: 60px;
}

.module.content-media .callout.stat .icon img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.module.content-media .callout.stat .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.content-media .callout.stat .heading-6 {
	color: var(--electric-lavender);
}

/** Quote callout **/

.module.content-media .callout.quote {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

/** Background field **/

.module.content-media.bg-white .bg-field {
	background: var(--white);
}

.module.content-media.bg-orange .bg-field {
	background: var(--orange-gradient);
}

.module.content-media.bg-digital-blue {
	color: var(--white);
}

/* Heading reads lavender so the white .highlight phrase carries the emphasis. */
.module.content-media.bg-digital-blue :is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5) {
	color: var(--lavender);
}

.module.content-media.bg-digital-blue .highlight {
	color: var(--white);
}

/* Over-sized gradient layers give the euphoria-drift animation room to pan. */
.module.content-media.bg-digital-blue .bg-field {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
}

/* Non-standard (100px) — kept to this coloured-band variant only, not a theme token. */
.module.content-media:is(.bg-white, .bg-orange, .bg-digital-blue) .container.grid {
	padding-block: 100px;
}

.module.content-media:is(.bg-white, .bg-orange, .bg-digital-blue) .content {
	padding-block: 0;
}

/* Below 1400 the fixed 64px gutter crowds the copy. Drop the image's inner
   gutter and give the image one fewer column, the copy one more — the image
   keeps its outer breakout, the copy stays on the 12-col grid. */

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content-media .content {
		padding-block: 0;
	}

	.module.content-media.layout-image-left .media {
		grid-column: 1 / span 5;
		margin-right: var(--text-spacing-small);
	}

	/* :has(.media) preserves the no-media carve-out below, which sets .content to 1 / span 8. */
	.module.content-media.layout-image-left:has(.media) .content {
		grid-column: 6 / span 7;
	}

	.module.content-media.layout-image-right .media {
		grid-column: 8 / span 5;
		margin-left: var(--text-spacing-small);
	}

	.module.content-media.layout-image-right:has(.media) .content {
		grid-column: 1 / span 7;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content-media:is(.bg-white, .bg-orange, .bg-digital-blue) .container.grid {
		padding-block: var(--module-spacing-medium);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content-media .container.grid {
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-large);
	}

	.module.content-media.layout-image-right .container.grid {
		flex-direction: column;
	}

	/* Stacked layout — the image sits above the copy in flow, so drop the pin. */
	.module.content-media .media {
		display: block;
		position: relative;
		top: auto;
		width: 100%;
	}

	.module.content-media.layout-image-left .media,
	.module.content-media.layout-image-right .media {
		margin: 0;
		padding: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content-media .container.grid {
		gap: var(--text-spacing-medium);
	}

	.module.content-media .content > * + * {
		margin-top: var(--text-spacing-small);
	}

}

@media (prefers-reduced-motion: no-preference) {

	.module.content-media.bg-digital-blue .bg-field {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}