/**
 * Hero style: Cutout
 *
 * The section's height comes from the cut-out, not from the copy: the media and the container
 * share one grid cell, the media offset from the section top and flush to its bottom.
 */

.module.hero.style-cutout {
	--cutout-pad-top: 280px;
	background-image: linear-gradient(180deg, rgb(from var(--off-white) r g b / 0) 0%, rgb(from var(--ray) r g b / .5) 100%);
	display: grid;
	isolation: isolate;
	overflow: clip;
}

.module.hero.style-cutout > * {
	grid-area: 1 / 1;
}

.module.hero.style-cutout .media {
	align-self: end;
	aspect-ratio: 1440 / 775;
	margin-top: 185px;
	pointer-events: none;
	transform: translate3d(0, calc((1 - var(--jazzy-progress, 1)) * 48px), 0);
	z-index: 1;
}

/* A margin percentage resolves against the container's width, so the editor's share of the
   plate's own height is converted through the ratio above rather than used directly. */
.module.hero.style-cutout.has-image-position .media {
	margin-top: calc(var(--cutout-image-position) / 100 * (775 / 1440) * 100%);
}

.module.hero.style-cutout .container {
	align-content: start;
	padding-top: var(--cutout-pad-top);
	position: relative;
}

.module.hero.style-cutout .breadcrumbs {
	align-self: start;
	margin-top: calc(var(--header-height) + var(--text-spacing-xsmall));
}

.module.hero.style-cutout :is(h1, h2, h3, h4, h5, h6) {
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
}

.module.hero.style-cutout .watermark {
	aspect-ratio: 1202 / 527;
	color: var(--charcoal);
	left: var(--container-outer-padding);
	opacity: .05;
	pointer-events: none;
	position: absolute;
	right: var(--container-outer-padding);
	top: calc(var(--cutout-pad-top) + var(--text-spacing-small));
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * -64px), 0);
	z-index: -1;
}

.module.hero.style-cutout .watermark svg {
	display: block;
	height: 100%;
	width: 100%;
}

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

/* From here down the plate gets a row of its own instead of sharing the copy's cell. Overlaid, it
   is placed by a share of the section's own height — an instrument for a headline whose length is
   known, and this is an editor's field on a module used across the site. In its own row it starts
   where the copy ends, so two lines or four push it down rather than it covering them. The wide
   rungs keep the percentage, where the overlap is the design and the headline has room to be one
   line.

   Flush, then 5% of the plate's own height back over the copy, which is about the overlap the wide
   rungs carry. Converted through the ratio the way the editor's field is, because a margin
   percentage resolves against width and the 5 is a share of the height. */
@media only screen and (max-width: calc(1200rem/16)) {

	.module.hero.style-cutout > .media,
	.module.hero.style-cutout.has-image-position > .media {
		grid-area: 2 / 1;
		margin-top: calc(-5 / 100 * (775 / 1440) * 100%);
		transform: none;
	}

	/* Both halves lose the parallax float. On the plate it meant there was no flush position to
	   hit — the offset ran 20 to 48px depending on how far the section had been scrolled. On the
	   mark it ran the wrong way entirely, lifting it 64 off a plate that had settled down the
	   screen and opening a band of plain gradient between the burst and the panel exactly where
	   the two should meet. The mark still sits on the copy's own offset, so a longer headline
	   carries it down with the plate. */
	.module.hero.style-cutout .watermark {
		transform: none;
	}

}

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

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

	.module.hero.style-cutout {
		--cutout-pad-top: calc(var(--header-height) + var(--module-spacing-medium));
	}

	/* The trail sits under a header that is shorter here, and the run the desktop leaves between
	   the two is most of the space above the headline. */
	.module.hero.style-cutout .breadcrumbs {
		margin-top: calc(var(--header-height) + var(--text-spacing-xxsmall));
	}

}