/*** Module: Hero — Style: media_text ***/

.module.hero.style-media-text {
	isolation: isolate;
	/*margin-bottom: var(--module-spacing-medium);*/
	padding-block: calc(var(--header-clearance) + var(--module-spacing-small)) 0;
	position: relative;
}

.module.hero.style-media-text .grid {
	gap: var(--text-spacing-xsmall);
}

/* Full-width variants paint their band as a ::before that stops module-spacing-medium
   short of the section bottom, so the media's foot hangs past it over the page. The
   overhang stays inside the section box, so these drop the reserving bottom margin. */
.module.hero.style-media-text:is(.bg-parchment, .bg-parchment-inset, .bg-white, .bg-digital-blue) {
	margin-bottom: 0;
}

.module.hero.style-media-text:is(.bg-parchment, .bg-parchment-inset, .bg-white, .bg-digital-blue)::before {
	content: "";
	height: calc(100% - var(--module-spacing-medium));
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* Only the -inset variant holds the band off the viewport edges; the rest bleed full-width. */
.module.hero.style-media-text.bg-parchment-inset::before {
	inset: var(--text-spacing-small);
}

/* No media to hang past — the band fills the whole section. */
.module.hero.style-media-text:not(:has(.media)):is(.bg-parchment, .bg-parchment-inset, .bg-white, .bg-digital-blue)::before {
	height: 100%;
}

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

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

.module.hero.style-media-text:is(.bg-parchment, .bg-parchment-inset)::before {
	background: var(--parchment);
}

.module.hero.style-media-text:is(.bg-parchment, .bg-parchment-inset) {
	color: var(--black);
}

.module.hero.style-media-text.bg-white::before {
	background: var(--white);
}

.module.hero.style-media-text.bg-white {
	color: var(--black);
}

/* Off-white reads as the page, so it fills the whole section — no band to hang past. */
.module.hero.style-media-text.bg-page-default {
	background: var(--off-white);
	color: var(--black);
}

.module.hero.style-media-text.bg-page-default .media {
	align-self: center;
	margin-bottom: 0;
}

.module.hero.style-media-text.bg-page-default .content {
	padding-block: var(--module-spacing-small);
}

/* Orange keeps its inset .bg-field band + margin-based overhang. */
.module.hero.style-media-text.bg-orange {
	color: var(--black);
	padding-block: var(--module-spacing-small);
}

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

.module.hero.style-media-text.bg-orange .media {
	align-self: center;
	margin-bottom: calc(-1 * var(--module-spacing-medium));
}

.module.hero.style-media-text.bg-orange:not(:has(.media)) {
	padding-block: var(--module-spacing-large);
}

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

	.module.hero.style-media-text.bg-digital-blue::before {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

.module.hero.style-media-text .container {
	align-items: center;
}

/* align-self: end plants the image on the section's bottom edge so it hangs past the
   shorter band whichever column is taller (page-default/orange re-centre above). */
.module.hero.style-media-text .media {
	align-self: end;
	aspect-ratio: 580 / 680;
	grid-column: 1 / span 5;
	grid-row: 1 / -1;
	height: 100%;
	margin-left: var(--container-breakout);
    width: calc(100% - var(--container-breakout));
}

/* Video is squarer than the portrait image crop. Covers all three renders: the
   facade (.video), a silent embed (.video-bg), and a silent mp4. */
.module.hero.style-media-text .media:is(.video, .video-bg),
.module.hero.style-media-text .media:has(:is(video, iframe)) {
	aspect-ratio: 748 / 756;
}

.module.hero.style-media-text .content {
	grid-column: 7 / span 6;
	padding-block: var(--module-spacing-medium) calc(var(--module-spacing-medium) * 2);
}

/* Optional logo above the heading. */
.module.hero.style-media-text .content .logo {
	display: block;
	height: auto;
	margin-bottom: var(--text-spacing-small);
	max-height: calc(80rem / 16);
	max-width: calc(320rem / 16);
	width: auto;
}

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

.module.hero.style-media-text .content .xlarge-text:not(:first-child) + .buttons {
	margin-top: var(--text-spacing-small);
}

.module.hero.style-media-text .content .xlarge-text:first-child + .buttons {
	margin-top: var(--text-spacing-xxsmall);
}

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

.module.hero.style-media-text:not(:has(.media)) {
	padding-bottom: var(--module-spacing-large);
	padding-top: calc(var(--header-clearance) + var(--module-spacing-large));
	margin-bottom: 0;
}

.module.hero.style-media-text:not(:has(.media)) .content {
	grid-column: 1 / span 8;
}

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

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

	.module.hero.style-media-text .media {
		height: 100%;
		width: 100%;
	}

	.module.hero.style-media-text.bg-parchment-inset::before {
		inset: 0;
	}

	.module.hero.style-media-text .content {
		padding-block: var(--module-spacing-small) calc(var(--module-spacing-small) * 2);
	}

}

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

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

	.module.hero.style-media-text {
		padding-top: calc(var(--header-clearance) + var(--text-spacing-medium));
	}

	/* Media widens to meet the content column, so it fills the row rather than
	   holding its portrait ratio. */
	.module.hero.style-media-text .media {
		aspect-ratio: auto;
		grid-column: 1 / span 6;
		height: 100%;
		width: 100%;
	}

	/* Echo the video selectors — their base ratio out-specifies the reset above. */
	.module.hero.style-media-text .media:is(.video, .video-bg),
	.module.hero.style-media-text .media:has(:is(video, iframe)) {
		aspect-ratio: auto;
	}

	/* Intrinsic video — opts out of the global .media absolute fill, which with no
	   aspect-ratio would leave the box nothing to take its height from. */
	.module.hero.style-media-text .media video {
		/*height: auto;*/
		position: relative;
		width: 100%;
	}

	.module.hero.style-media-text .content {
		padding-left: var(--text-spacing-xlarge);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

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

	.module.hero.style-media-text {
		padding-top: calc(var(--header-clearance) + var(--text-spacing-small));
	}

}

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

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

	.module.hero.style-media-text {
		padding-top: calc(var(--header-clearance) + var(--text-spacing-xlarge));
	}

	.module.hero.style-media-text .container {
		display: flex;
		flex-direction: column;
	}

	.module.hero.style-media-text .grid {
		gap: var(--text-spacing-large);
	}

	/* Stacked: the media is last in flow, so its foot still reaches the section's
	   bottom edge — the ::before band just shortens to module-spacing-small and the
	   image hangs past it, no margin needed (same mechanic as desktop). */
	.module.hero.style-media-text .media {
		align-self: center;
		margin: 0;
	}

	.module.hero.style-media-text:is(.bg-parchment, .bg-parchment-inset, .bg-white, .bg-digital-blue)::before {
		height: calc(100% - var(--module-spacing-small));
	}

	/* Orange's band is a full-height .bg-field, so it still hangs via margin. */
	.module.hero.style-media-text.bg-orange .media {
		margin-bottom: calc(-1 * var(--module-spacing-small));
	}

	/* Intrinsic image — opts out of the global .media absolute/cover treatment. */
	.module.hero.style-media-text .media img {
		height: auto;
		position: relative;
		width: 100%;
	}

	/* Copy leads; DOM keeps the media first (it carries no focusable content). */
	.module.hero.style-media-text .content {
		order: -1;
		padding: 0;
	}

	.module.hero.style-media-text.bg-page-default .content {
		padding: 0;
	}

	.module.hero.style-media-text .buttons {
		align-items: flex-start;
		flex-direction: column;
	}

}