/**
 * Hero style: Image Banner
 *
 * A contained photo with the title over its left third. The section takes its height from
 * the image's ratio, so nothing here sets one.
 */

.module.hero.style-banner .media,
.module.hero.style-banner .content {
	grid-row: 1;
	--heading-color: currentColor;
}

.module.hero.style-banner .media {
	/* Stated, or the global crop's ratio stays on the box and the tablet rung's `min-height`
	   travels back through it into the width, carrying the page past the screen. */
	aspect-ratio: auto;
	border-radius: 10px;
	grid-column: 1 / -1;
	margin-inline: var(--container-breakout);
}

/* The ratio on a pseudo rather than on the box: it sets the crop's floor and then lets the
   photograph grow with a headline that outruns it, which keeps the badge on the photograph's own
   corner instead of on the foot of a row the copy has stretched. */
.module.hero.style-banner .media::before {
	aspect-ratio: 1280 / 640;
	content: '';
	display: block;
}

.module.hero.style-banner .media::after {
	background: linear-gradient(90deg, var(--overlay-scrim-strong) 0%, var(--overlay-scrim-strong) 45%, var(--overlay-scrim) 78%, var(--overlay-scrim) 100%);
	content: '';
	inset: 0;
	position: absolute;
}

.module.hero.style-banner .content {
	align-self: center;
	color: var(--white);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	grid-column: 1 / span 8;
	padding-left: var(--text-spacing-large);
	position: relative;
	text-shadow: 0 10px 24px var(--overlay-dark);
}

.module.hero.style-banner .content > * {
	margin: 0;
}

.module.hero.style-banner .notice {
	align-items: center;
	align-self: start;
	background: var(--white);
	border-radius: 10px;
	display: flex;
	gap: var(--text-spacing-small);
	grid-column: 1 / -1;
	grid-row: 1;
	justify-content: space-between;
	margin: var(--text-spacing-small) var(--container-breakout) 0;
	min-height: 64px;
	padding: 10px var(--text-spacing-medium);
	position: relative;
}

.module.hero.style-banner .notice .text > * {
	margin: 0;
}

.module.hero.style-banner .notice .heading {
	font-size: calc(13rem / 16);
	font-weight: 600;
	line-height: calc(22 / 13);
}

.module.hero.style-banner .buttons {
	gap: var(--text-spacing-small);
}

.module.hero.style-banner .badges {
	align-self: end;
	display: flex;
	gap: var(--text-spacing-xsmall);
	grid-column: 1 / -1;
	grid-row: 1;
	justify-content: flex-end;
	list-style: none;
	margin: 0 var(--text-spacing-large) var(--text-spacing-large);
	padding: 0;
	position: relative;
}

/* The same white tile the program hero sets each mark on: 140x80, 6px corner, the mark 92 wide
   and centred, at 75%. Sized rather than shrink-wrapped to the artwork — left to the image the
   white closed onto the mark's own edges, and a logo carrying a tagline lost it to the corner. */
.module.hero.style-banner .badges li {
	align-items: center;
	background: var(--white);
	border-radius: 6px;
	display: flex;
	height: 80px;
	justify-content: center;
	width: 140px;
}

.module.hero.style-banner .badges img {
	display: block;
	height: auto;
	max-height: 40px;
	object-fit: contain;
	opacity: .75;
	width: 92px;
}

.module.hero.style-banner .content .btn.secondary {
	color: var(--white);
}

/** Copy Placement: inset — the copy drops to the foot of a wider photo **/

.module.hero.style-banner.inset {
	--photo-inset: calc(var(--viewport-edge) + var(--text-spacing-small));
}

.module.hero.style-banner.inset .media {
	margin-inline: var(--photo-inset);
}

.module.hero.style-banner.inset .media::before {
	aspect-ratio: 1392 / 640;
}

.module.hero.style-banner.inset .content {
	align-self: end;
	gap: 0;
	grid-column: 1 / span 6;
	padding-bottom: var(--module-spacing-large);
	padding-left: 0;
	padding-top: var(--module-spacing-xlarge);
}

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

.module.hero.style-banner.inset .content > * + .buttons {
	margin-top: var(--text-spacing-large);
}

.module.hero.style-banner.inset .badges {
	margin: 0 var(--photo-inset) var(--text-spacing-medium);
	padding-right: var(--text-spacing-medium);
}

.module.hero.style-banner .breadcrumbs + .container {
	margin-top: var(--text-spacing-small);
}

/** Banner Width: full-bleed — the crop reaches the screen instead of the container **/

.module.hero.style-banner.full-bleed .media {
	border-radius: 0;
	margin-inline: var(--viewport-edge);
}

.module.hero.style-banner.full-bleed .media::before {
	aspect-ratio: 16 / 7;
}

.module.hero.style-banner.full-bleed .content {
	padding-left: 0;
}

.module.hero.style-banner.full-bleed .notice,
.module.hero.style-banner.full-bleed .badges {
	margin-inline: 0;
}

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

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

	.module.hero.style-banner.inset .content {
		grid-column: 1 / span 8;
		padding-inline: var(--text-spacing-medium);
	}

}

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

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

	.module.hero.style-banner.inset .media {
		grid-row: 1 / span 2;
	}

	.module.hero.style-banner.inset .content {
		grid-column: 1 / span 10;
		grid-row: 1;
		padding-bottom: var(--module-spacing-small);
	}

	.module.hero.style-banner.inset:has(.badges) .content {
		padding-bottom: 0;
	}

	.module.hero.style-banner.inset .badges {
		align-self: start;
		grid-row: 2;
		justify-content: flex-start;
		margin: 0 0 var(--module-spacing-large);
		padding-inline: var(--text-spacing-medium);
	}

}

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

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

	/* The crop reaches the screen and drops its corners, which is what the full-bleed width does
	   on any rung — at this one the contained version is a photograph with a margin either side
	   too narrow to read as a margin. The copy still sits on the container's measure. */
	.module.hero.style-banner .media {
		border-radius: 0;
		margin-inline: var(--viewport-edge);
		min-height: 100%;
	}

	.module.hero.style-banner .media::after {
		background: var(--overlay-scrim-strong);
	}

	.module.hero.style-banner .content {
		gap: var(--text-spacing-xsmall);
		grid-column: 1 / -1;
		padding: var(--module-spacing-large) 0;
	}

	/* Under the photograph and pulled back over its foot by half its own height — the same seat
	   the sticky bar takes on a band's edge, and translate is what carries it without the height
	   having to be named. */
	.module.hero.style-banner .notice {
		align-items: flex-start;
		box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
		flex-direction: column;
		gap: var(--text-spacing-xxsmall);
		grid-row: 3;
		/* The row's gap would sit between the photograph and the notice, and the notice is meant
		   to land on that edge rather than below it. The foot keeps only the half that shows
		   below the photograph — script.js measures the notice for it, and the fallback is a
		   two-line notice at this rung. */
		margin-block: calc(-1 * var(--gap)) calc(var(--notice-height, 96px) / -2);
		margin-inline: var(--text-spacing-small);
		padding-block: var(--text-spacing-xsmall);
		translate: 0 -50%;
	}

	.module.hero.style-banner.inset .media {
		border-radius: 10px;
		margin-inline: var(--photo-inset);
	}

	.module.hero.style-banner.inset .content {
		align-self: center;
		grid-column: 1 / -1;
	}

	/* Copy alone in the band takes the same foot as its head; the rungs above trimmed it for a
	   notice or badges that are not there. */
	.module.hero.style-banner.inset:not(:has(.notice)):not(:has(.badges)) .content {
		padding-block: var(--module-spacing-large);
	}

	.module.hero.style-banner.inset .content > * + .buttons {
		margin-top: var(--text-spacing-medium);
	}

	/* The row's gap carries most of the distance from the buttons down to the badges; this is the
	   rest of it. */
	.module.hero.style-banner.inset .badges {
		margin-top: calc(var(--text-spacing-xlarge) - var(--gap));
	}

	/* With badges under it the copy already ends clear of the notice riding the photograph's foot.
	   Without them it ran straight into it, so it takes that room itself — and the photograph,
	   sized by what it holds at this rung, comes up with it. */
	.module.hero.style-banner.inset:has(.notice):not(:has(.badges)) .content {
		padding-bottom: var(--module-spacing-medium);
	}

	.module.hero.style-banner.full-bleed .content {
		padding-inline: 0;
	}

	/* Square and edge to edge at every width — the inset width's margin and corners above do not
	   apply to a crop that reaches the screen. */
	.module.hero.style-banner.full-bleed .media {
		border-radius: 0;
		margin-inline: var(--viewport-edge);
		max-width: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

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

	.module.hero.style-banner.full-bleed .content {
		padding-inline: var(--text-spacing-xsmall);
	}

}

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

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

	.module.hero.style-banner .media::before,
	.module.hero.style-banner.full-bleed .media::before {
		aspect-ratio: 4 / 3;
	}

	.module.hero.style-banner.inset .media {
		border-radius: 0;
		margin-inline: var(--viewport-edge);
	}

	.module.hero.style-banner.inset .content,
	.module.hero.style-banner.inset .badges {
		padding-inline: 0;
	}

	/* The notice is taller here, so its upper half reaches further up the photograph and the
	   badges clear that before they take their own step. */
	.module.hero.style-banner.inset:has(.notice) .badges {
		margin-block: 0 calc(var(--notice-height, 96px) / 2 + var(--text-spacing-medium));
	}

	.module.hero.style-banner .notice {
		margin-inline: 0;
		padding-inline: var(--text-spacing-small);
	}

	/* The trail is hidden here, but a hidden sibling still matches. */
	.module.hero.style-banner .breadcrumbs + .container {
		margin-top: 0;
	}

}