/**
 * Hero style: Program
 *
 * A brand band carrying the page title, with the photograph as a strip across the band's foot,
 * on the columns beside the copy, or filling the band behind it. The band takes its height from
 * the copy, except behind a photograph, where the photograph sets a floor.
 */

.module.hero.style-program {
	background: var(--program-band);
	border-radius: 10px;
	color: var(--white);
	margin-inline: var(--band-inset);
	position: relative;
	width: auto;
	--band-inset: var(--text-spacing-small);
	--band-edge: calc(var(--viewport-edge) + min(var(--band-inset), var(--container-outer-margin)));
	/* Past the band, all the way to the browser edge. Not --viewport-edge: below 1400 the
	   container's outer margin collapses to zero, and that value then stops at the band. */
	--band-bleed: calc(var(--band-edge) - var(--band-inset));
	--focus-ring: var(--white); /* Dark band: charcoal reaches 1.2:1 here, white 12.3:1 */
	--heading-color: currentColor;
}

.module.hero.style-program .container {
	padding-block: var(--text-spacing-large) calc(var(--module-spacing-small) + var(--text-spacing-large));
	/* Rows are named below and a placement can leave one empty — no photograph, no trail. A
	   row gap would still open around it, so every step here is a margin on the item that takes
	   it, and an empty row costs nothing. */
	row-gap: 0;
}

.module.hero.style-program .breadcrumbs {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0 0 var(--module-spacing-small);
	margin-left: min(calc(var(--band-edge) + var(--text-spacing-xxlarge)), 0px);
	padding: 0;
}

.module.hero.style-program .breadcrumbs ol {
	color: inherit;
}

.module.hero.style-program .content {
	grid-row: 2;
}

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

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

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

.module.hero.style-program .location .icon {
	display: inline-flex;
	font-size: calc(12rem / 16);
}

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

.module.hero.style-program .content > p + .location {
	margin-top: var(--text-spacing-small);
}

.module.hero.style-program .content picture {
	display: contents;
}

.module.hero.style-program .content img {
	display: block;
	max-height: 56px;
	opacity: .5;
	width: auto;
}

/* One link, so the chip is decoration and the label carries the destination. */
.module.hero.style-program .content > .back {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: var(--text-spacing-xsmall);
	transition: gap var(--motion) var(--ease-out);
	width: fit-content;
}

.module.hero.style-program .content > .back .btn.chip {
	flex: none;
	height: 24px;
	padding: 0;
	pointer-events: none;
	scale: -1 1;
	width: 32px;
}

.module.hero.style-program .content > .back .btn.chip svg {
	height: 11px;
	width: 13px;
}

/* The chip's own hover cannot fire — it is inert so the whole row is one target — so the row
   lights it, and the label travels the way it does off every other arrow in the theme. */
.module.hero.style-program .content > .back:is(:hover, :focus-visible) {
	gap: 20px;
}

.module.hero.style-program .content > .back:is(:hover, :focus-visible) .btn.chip {
	background: var(--sun-light);
}

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

.module.hero.style-program .badges {
	display: flex;
	gap: var(--text-spacing-xsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The comp sets each mark on its own white tile rather than straight onto the photograph:
   140x80, 6px corner, the mark 92 wide and centred, at 75%. */
.module.hero.style-program .badges li {
	align-items: center;
	background: var(--white);
	border-radius: 6px;
	display: flex;
	height: 80px;
	justify-content: center;
	width: 140px;
}

.module.hero.style-program .badges a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

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

.module.hero.style-program .facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-large) var(--text-spacing-xlarge);
	grid-column: 1 / -1;
	grid-row: 4;
	list-style: none;
	margin: var(--module-spacing-small) 0 0;
	padding: 0;
}

.module.hero.style-program .facts p {
	color: var(--white-60);
	margin: 0;
}

.module.hero.style-program .facts p + p {
	color: var(--program-highlight);
	margin-top: var(--text-spacing-xxsmall);
}

/* `position` because the reveal declares `relative` and the mark is placed against the band's
   own edges; the rise it brings is what the mark arrives on, and it ends where it is drawn. */
.module.hero.style-program .watermark {
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.module.hero.style-program .watermark svg {
	color: var(--white);
	display: block;
	height: 100%;
	max-width: none;
	opacity: .05;
	width: auto;
}

/** Photo Placement: photo-band — the photograph as a strip across the band's foot **/

.module.hero.style-program.photo-band .facts {
	margin-top: var(--text-spacing-small);
}

/* The photograph is what closes the band, so it is only there that the base padding is dead. */
.module.hero.style-program.photo-band:has(.media) .container {
	padding-bottom: 0;
}

.module.hero.style-program.photo-band .content {
	grid-column: 1 / span 9;
}

.module.hero.style-program.photo-band :is(.content, .badges) {
	position: relative;
	z-index: 1;
}

.module.hero.style-program.photo-band .content > p {
	padding-right: calc(2 * (var(--one-column-width) + var(--gap)));
}

.module.hero.style-program.photo-band .media {
	aspect-ratio: 1440 / 338;
	border-radius: 0 0 0 10px;
	grid-column: 1 / -1;
	grid-row: 3;
	margin-left: var(--band-edge);
	margin-right: var(--viewport-edge);
	margin-top: calc(var(--text-spacing-large) * -1);
}

.module.hero.style-program.photo-band .badges {
	align-self: end;
	grid-column: 1 / -1;
	grid-row: 3;
	justify-content: flex-end;
	margin: 0 var(--band-edge) var(--text-spacing-small);
	padding-right: var(--text-spacing-small);
}

/* Anchored to the band's foot, not its head: the mark's job is to sit behind the photograph
   that closes the band, and the band grows with the copy above it. The window is the comp's
   crop; the artwork runs wider than it and is cut off at the band's edge. */
.module.hero.style-program.photo-band .watermark {
	aspect-ratio: 573 / 435;
	bottom: var(--sunburst-position, 27%);
	left: calc(843 / 1440 * 100%);
}

.module.hero.style-program.photo-band .watermark svg {
	height: auto;
	width: calc(908 / 573 * 100%);
}

/* The mark is placed as a share of the band's height, but what hides its cut foot is the
   photograph, whose height follows the screen's width instead. The two drift apart as the screen
   narrows until the cut clears the photograph, so the mark is carried back down by the difference.
   Below the tablet rung it is not drawn at all. */
@media only screen and (min-width: calc(951rem/16)) {

	.module.hero.style-program.photo-band .watermark {
		translate: 0 clamp(0px, (1480px - 100vw) * .148, 80px);
	}

}

/** Photo Placement: photo-beside — the photograph on the columns opposite the copy **/

/* Beside opens with the photograph rather than with the copy, so the trail sits against the
   crop's top edge and wants half the run it takes over a band's first line. */
.module.hero.style-program.photo-beside .breadcrumbs {
	margin-bottom: var(--text-spacing-xxlarge);
}

/* With no photograph the trail sits over the copy instead, a module step above it. */
.module.hero.style-program.photo-beside:not(:has(.media)) .breadcrumbs {
	margin-bottom: var(--module-spacing-medium);
}

/* The copy carries the marks here, so it is the one box the photograph can be centred against —
   spanning both of the rows the photograph does rather than sitting in the first of them. */
.module.hero.style-program.photo-beside .content {
	align-self: center;
	grid-column: 1 / span 7;
	grid-row: 2 / span 2;
	padding-right: var(--text-spacing-xlarge);
}

.module.hero.style-program.photo-beside .content > .badges {
	margin-top: var(--text-spacing-large);
}

.module.hero.style-program.photo-beside .media {
	align-self: start;
	aspect-ratio: 597 / 480;
	border-radius: 10px 0 0 10px;
	grid-column: 8 / -1;
	grid-row: 2 / span 2;
	margin-right: var(--band-bleed);
}

.module.hero.style-program.photo-beside .watermark {
	aspect-ratio: 700 / 397;
	bottom: 0;
	left: calc(740 / 1440 * 100%);
}

/** Photo Placement: photo-behind — the photograph fills the band, the copy sits on it **/

/* The photograph is the band here, so the brand fill only shows while it loads, and the copy
   needs a scrim of its own — heaviest where the copy starts, lifting across to the far edge. */
.module.hero.style-program.photo-behind {
	isolation: isolate;
	overflow: hidden;
}

.module.hero.style-program.photo-behind .container {
	min-height: 640px;
	padding-block: var(--text-spacing-large) var(--module-spacing-small);
}

/* Stretched by the grid and pushed out to the band's own edges rather than positioned against
   it — the container is the offset parent, so `inset: 0` would stop at its padding. The picture
   is taken out of flow inside it so the photograph's own height never sizes the row: the copy
   does, and the container's min-height holds the floor. */
.module.hero.style-program.photo-behind .media {
	/* The global .media carries 16/9; here the band's height is the copy's, not the photo's. */
	aspect-ratio: auto;
	/* Positioned against the container, which is the offset parent, and pushed back out over
	   its padding — a grid item cannot fill the band, because the rows only add up to the copy
	   and the min-height's slack is not theirs to take. */
	bottom: calc(-1 * var(--module-spacing-small));
	left: var(--band-edge);
	position: absolute;
	right: var(--viewport-edge);
	top: calc(-1 * var(--text-spacing-large));
	z-index: -1;
}

.module.hero.style-program.photo-behind .media::after {
	background: linear-gradient(90deg, var(--overlay-scrim-strong) 0%, var(--overlay-scrim-copy) 50%, var(--overlay-scrim-soft) 100%);
	content: '';
	inset: 0;
	position: absolute;
}

.module.hero.style-program.photo-behind .media :is(img, picture) {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.module.hero.style-program.photo-behind .content {
	align-self: center;
	grid-column: 1 / span 7;
	grid-row: 2;
}

.module.hero.style-program.photo-behind .badges {
	align-self: end;
	grid-column: 8 / -1;
	grid-row: 2;
	justify-content: flex-end;
}

.module.hero.style-program.photo-behind .watermark {
	display: none;
}

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

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

	.module.hero.style-program.photo-band .media {
		border-radius: 0 0 10px 10px;
	}

}

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

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

	.module.hero.style-program.photo-band .content > p {
		padding-right: 0;
	}

}

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

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

	.module.hero.style-program.photo-beside .container {
		padding-bottom: var(--module-spacing-medium);
	}

	.module.hero.style-program.photo-band .content,
	.module.hero.style-program.photo-beside .content,
	.module.hero.style-program.photo-behind .content {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	/* Stacked, the photograph is below rather than beside, so the copy has no second row to
	   span — left spanning one, the empty row's gap would open under it. */
	.module.hero.style-program.photo-beside .content {
		grid-row: 2;
	}

	/* Under the copy rather than beside it, the photograph keeps the crop it has there and the
	   measure the copy sits on — run to the band's edges it became a letterbox strip of itself. */
	.module.hero.style-program.photo-beside .media {
		border-radius: 10px;
		grid-column: 1 / -1;
		grid-row: 3;
		margin-inline: 0;
		margin-top: var(--module-spacing-medium);
	}

	.module.hero.style-program.photo-beside .facts {
		grid-row: 4;
	}

	/* The photograph is pulled up under the copy on a wide screen, where there is a column of
	   empty band beside it to climb into. Stacked there is none, and the pull only closed it on
	   the button above. */
	.module.hero.style-program.photo-band .media {
		margin-top: 0;
	}

	.module.hero.style-program .watermark {
		display: none;
	}

}

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

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

	/* The jump bar rides this band's foot at these widths, so the marks take a step of their own
	   off it rather than meeting it. */
	.module.hero.style-program.photo-beside .facts {
		margin-bottom: var(--text-spacing-medium);
	}

	/* Stacked at the container's full width the crop stands 550 and more at the top of this band,
	   which is most of what the band has for copy the photograph is there to follow. The width is
	   stated alongside the cap, or the ratio carries the cap back into it and the band narrows
	   instead. */
	.module.hero.style-program.photo-beside .media {
		max-height: 400px;
		width: 100%;
	}

}

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

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

	.module.hero.style-program.photo-band .media {
		aspect-ratio: 4 / 3;
		border-radius: 0;
		margin-inline: var(--viewport-edge);
	}

	.module.hero.style-program.photo-band .badges {
		align-self: start;
		justify-content: flex-start;
		margin: var(--text-spacing-large) 0 0;
		padding-right: 0;
	}

	.module.hero.style-program.photo-beside .media {
		aspect-ratio: 4 / 3;
		margin-top: var(--module-spacing-medium);
	}

	.module.hero.style-program.photo-beside .content > .badges {
		margin-top: var(--text-spacing-medium);
	}

	.module.hero.style-program {
		--band-inset: 0px;
		border-radius: 0;
	}

	/* The trail is hidden at this rung and its own step went with it, so the band buys part of it
	   back: the eyebrow started 20 under the header, which is the inset, not a step. */
	.module.hero.style-program .container {
		padding-top: var(--text-spacing-large);
	}

	.module.hero.style-program.photo-behind .container {
		min-height: auto;
	}

	/* The trail is hidden here, and a row left empty for it would still open a gap above the
	   copy, so everything moves up one. */
	.module.hero.style-program:is(.photo-band, .photo-beside, .photo-behind) .content {
		grid-row: 1;
	}

	.module.hero.style-program.photo-band .media,
	.module.hero.style-program.photo-band .badges,
	.module.hero.style-program.photo-beside .media,
	.module.hero.style-program.photo-behind .badges {
		grid-row: 2;
	}

	/* Two to a row rather than one: five short facts stacked singly ran most of a screen of band
	   before the page began. */
	.module.hero.style-program:is(.photo-band, .photo-beside, .photo-behind) .facts {
		display: grid;
		gap: var(--text-spacing-small);
		grid-row: 3;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-bottom: var(--text-spacing-xsmall);
		margin-top: var(--text-spacing-xxlarge);
	}

	.module.hero.style-program.photo-band .facts {
		margin-top: var(--text-spacing-xsmall);
	}

}