/**
 * Hero style: Photo Cutout
 *
 * Two full-bleed media layers and the title on one grid cell, so the section's height falls out
 * of the artwork rather than a literal. The two layers take different multipliers of the same
 * --jazzy-progress, which is what separates them as the page scrolls.
 */

/* Both plates are anchored — the backdrop to the top, the photograph to the foot — so what sits
   between the title and the photograph is the section's own height. Taking a percentage off that
   height is what lifts the photograph toward the title, and it lifts the foot with it, which is
   why nothing opens up underneath. */
.module.hero.style-photo-cutout {
	--photo-cutout-pad-top: 272px;
	aspect-ratio: 1440 / calc(1250 * (1 - var(--photo-cutout-lift, 0) / 100));
	display: grid;
	isolation: isolate;
	overflow: clip;
	position: relative;
}

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

.module.hero.style-photo-cutout .media {
	align-self: end;
	aspect-ratio: var(--plate-ratio, 1440 / 506);
	z-index: -1;
}

.module.hero.style-photo-cutout .media.backdrop {
	align-self: start;
	aspect-ratio: var(--plate-ratio, 1440 / 942);
	margin-top: var(--text-spacing-large);
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * -40px), 0);
	z-index: -3;
}

.module.hero.style-photo-cutout .media:not(.backdrop) {
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * 24px), 0);
}

.module.hero.style-photo-cutout .container {
	align-content: start;
	padding-block: var(--photo-cutout-pad-top) var(--module-spacing-large);
	row-gap: 0;
}

/* Three selectors rather than one `:is()` holding all of them. A selector list is weighed branch
   by branch, but `:is()` takes the weight of its heaviest argument for every match — so with
   `p.heading-6` inside it, this rule outweighed the two below and silently ate their margins. */
.module.hero.style-photo-cutout .eyebrow,
.module.hero.style-photo-cutout :is(h1, h2, h3, h4, h5, h6),
.module.hero.style-photo-cutout p.heading-6 {
	color: var(--white);
	grid-column: 2 / span 10;
	margin: 0;
	text-align: center;
	text-shadow: 0 4px 28px var(--overlay-dim);
}

/* Only under an eyebrow: with nothing above it the title sits on the section's own padding. */
.module.hero.style-photo-cutout .eyebrow + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--text-spacing-small);
}

.module.hero.style-photo-cutout p.heading-6 {
	margin-top: var(--text-spacing-medium);
}

.module.hero.style-photo-cutout .watermark {
	aspect-ratio: 1202 / 527;
	/* The per-page position, less whatever a breakpoint wants to drop it by — the position arrives
	   inline per hero, so a media query can only subtract from it, not restate it. */
	bottom: calc(var(--sunburst-position, 22%) - var(--sunburst-drop, 0px));
	color: var(--white);
	left: 0;
	margin-inline: auto;
	opacity: .12;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * -24%), 0);
	width: 69%;
	z-index: -2;
}

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

.module.hero.style-photo-cutout .prompt {
	align-items: center;
	bottom: var(--text-spacing-small);
	color: var(--charcoal);
	display: flex;
	flex-direction: row;
	gap: var(--text-spacing-xxsmall);
	min-height: 70px;
	padding: 12px var(--text-spacing-xxsmall) 14px var(--text-spacing-small);
	position: absolute;
	right: var(--text-spacing-small);
	width: 280px;
}

/* A bar that straddles the hero's foot crosses the card's corner: it is centred on that foot, so
   half of it is inside the hero wherever it reaches. The card climbs clear of it — only where
   there is such a bar, since a hero ending on nothing has nothing to climb over. */
.module.hero.style-photo-cutout:has(+ .module.sticky-navigation.margin-overlap) .prompt {
	bottom: var(--text-spacing-xlarge);
}

.module.hero.style-photo-cutout .prompt p {
	margin: 0;
}

.module.hero.style-photo-cutout .prompt .arrow {
	align-self: flex-end;
	flex: none;
	margin-bottom: calc(var(--text-spacing-xxsmall) - 14px);
}

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

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

	.module.hero.style-photo-cutout .media.backdrop {
		margin-top: 0;
	}

}

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

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

	/* Narrower than this the cutout is taller than the desktop ratio leaves room for, and it is
	   anchored to the foot, so what overflows comes off the subject's head. Height from the
	   contents instead — which parks the lift, whose whole mechanic is a percentage off that
	   ratio. */
	.module.hero.style-photo-cutout {
		--photo-cutout-pad-top: calc(var(--header-height) + var(--module-spacing-medium));
		aspect-ratio: auto;
	}

	/* Every layer shares one grid cell, so the photograph contributes no height and, anchored to
	   the foot of a section the copy alone is sizing, it rides straight up over that copy. The drop
	   is bought as padding under the copy rather than as a transform on the plate: it makes the
	   section taller, so the photograph moves down with the foot instead of off the bottom of it. */
	.module.hero.style-photo-cutout {
		--photo-cutout-drop: 220px;
	}

	.module.hero.style-photo-cutout .container {
		padding-bottom: calc(var(--module-spacing-large) + var(--photo-cutout-drop));
	}

	.module.hero.style-photo-cutout p.heading-6 {
		margin-top: var(--text-spacing-small);
	}

	.module.hero.style-photo-cutout .media.backdrop {
		align-self: stretch;
		aspect-ratio: auto;
		margin-top: 0;
		transform: none;
	}

}

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

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

	/* Less than tablet takes, not more: the plate is half as tall at this width, so it needs half
	   the room to clear the copy — and the block already pays 144 of its own. */
	.module.hero.style-photo-cutout {
		--photo-cutout-drop: 90px;
	}

	.module.hero.style-photo-cutout .container {
		padding-bottom: calc(var(--module-spacing-xlarge) + var(--text-spacing-small) + var(--photo-cutout-drop));
	}

	.module.hero.style-photo-cutout .watermark {
		--sunburst-drop: 60px;
	}

	.module.hero.style-photo-cutout .eyebrow,
	.module.hero.style-photo-cutout :is(h1, h2, h3, h4, h5, h6, p.heading-6) {
		grid-column: 1 / -1;
	}

	.module.hero.style-photo-cutout p.heading-6 {
		margin-top: var(--text-spacing-xxsmall);
	}

}