/**
 * Story — Diagonal (full-bleed immersive backdrop with diagonal headings) and Editorial (centered heading with a left-offset portrait + right body) share the same field set but lay out differently. Both styles inherit the global .media.display-immersive treatment; Diagonal additionally overrides the radial fade so the two headings read cleanly over the top.
 */

.module.story .container.grid {
	align-items: start;
}

.module.story .heading-1,
.module.story .secondary-heading {
	color: var(--maroon);
}

.module.story .body .eyebrow {
	margin-bottom: var(--text-spacing-small);
}

.module.story .description {
	color: var(--maroon);
}

/** Diagonal **/

.module.story.display-diagonal .container.grid {
	gap: 200px 0;
	position: relative;
}

.module.story.display-diagonal .media {
	grid-column: 2 / -2;
	grid-row: 1 / span 2;
	margin: 0 calc(var(--gap) * -1);
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 0;
}

/* Headings overlay the backdrop at z-index 1; pointer-events: none lets .media:hover fire through them. */
.module.story.display-diagonal .heading-1,
.module.story.display-diagonal .secondary-heading {
	pointer-events: none;
}

/* Heavier vignette than the global immersive fade so the two headings read clearly over the dissolved backdrop. */
.module.story.display-diagonal .media::after {
	background: radial-gradient(50% 50% at 50% 50%, transparent 0%, var(--sand) 100%);
}

.module.story.display-diagonal .heading-1 {
	grid-column: 2 / span 6;
	grid-row: 1;
	position: relative;
	z-index: 1;
}

/* Lone-heading variant - reserve room for the absolutely-positioned backdrop image. */
.module.story.display-diagonal:has(.heading-1:last-child) {
	margin-bottom: 320px;
}

.module.story.display-diagonal .heading-1:not(.secondary-heading):last-child {
	grid-column: 3 / -3;
	text-align: center;
}

.module.story.display-diagonal:has(.heading-1:last-child) .media {
	top: calc(-1 * var(--module-spacing-medium));
	translate: none;
}

.module.story.display-diagonal:has(.heading-1:last-child) .media::after {
	background: linear-gradient(0deg, var(--sand) 25.76%, transparent 74.24%), radial-gradient(50% 50% at 50% 50%, transparent 0%, var(--sand) 100%)
}

.module.story.display-diagonal .secondary-heading {
	grid-column: 6 / -1;
	grid-row: 2;
	position: relative;
	text-align: left;
	z-index: 1;
}

.module.story.display-diagonal .description {
	grid-column: 3 / -3;
	grid-row: 3;
	margin-top: var(--text-spacing-large);
}

.module.story.display-diagonal .photo-caption {
	color: var(--white);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	grid-column: 3 / -3;
	margin: 0;
	position: absolute;
	top: 0;
	text-align: center;
}

/** Editorial **/

.module.story.display-editorial .heading-1 {
	grid-column: 2 / -2;
	grid-row: 1;
	text-align: center;
}

.module.story.display-editorial .media {
	grid-column: 1 / span 5;
	grid-row: 2;
	margin-left: var(--viewport-edge);
	position: sticky;
	top: var(--text-spacing-large);
	--immersive-fade-angle: -205deg;
}

.module.story.display-editorial .media img {
	object-fit: cover;
}

.module.story.display-editorial .body {
	grid-column: 5 / -2;
	grid-row: 2;
	margin-top: var(--module-spacing-medium);
}

.module.story.display-editorial .photo-caption {
	grid-column: 5 / -2;
	grid-row: 2;
	margin-top: var(--module-spacing-medium);
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

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

	.module.story.display-diagonal .heading-1:not(.secondary-heading) {
		grid-column: 1 / span 6;
		margin: 0;
	}

	.module.story.display-diagonal .secondary-heading {
		grid-column: 5 / -1;
	}

	.module.story.display-diagonal:has(.heading-1:last-child) {
		margin-bottom: var(--module-spacing-xlarge);
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

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

	.module.story {
		text-align: center;
	}

	.module.story.display-diagonal .media,
	.module.story.display-diagonal .heading-1,
	.module.story.display-diagonal .heading-1:not(.secondary-heading),
	.module.story.display-diagonal .secondary-heading,
	.module.story.display-diagonal .description,
	.module.story.display-editorial .heading-1,
	.module.story.display-editorial .media,
	.module.story.display-editorial .body,
	.module.story .photo-caption,
	.module.story.display-diagonal .heading-1:not(.secondary-heading):last-child {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-left: 0;
		margin-right: 0;
	}

	.module.story.display-editorial .body {
		margin: 0;
		text-align: left;
	}

	.module.story.display-diagonal .container.grid {
		gap: var(--text-spacing-large) 0;
	}

	/* Reservation for the desktop backdrop image is no longer needed once the image is static. */
	.module.story.display-diagonal:has(.heading-1:last-child) {
		margin-bottom: 0;
	}

	/* Diagonal interleaves heading → media → secondary-heading → description so the photo lands between the two diagonal headings instead of sinking to the bottom. */
	.module.story.display-diagonal .heading-1 {
		order: 0;
	}

	.module.story.display-diagonal .media {
		order: 1;
	}

	.module.story.display-diagonal .secondary-heading {
		order: 2;
	}

	.module.story.display-diagonal .description {
		order: 3;
	}

	.module.story.display-editorial .media {
		order: 1;
		max-width: 650px;
		margin: -120px auto;
	}

	.module.story.display-diagonal .media,
	.module.story.display-editorial .media {
		aspect-ratio: auto;
		position: relative;
		top: auto;
		translate: none;
	}

	.module.story.display-diagonal:has(.heading-1:last-child) .media {
		position: absolute;
        top: 50%;
        translate: 0 -50%;
	}

	.module.story.display-diagonal .secondary-heading {
		margin: var(--module-spacing-large) auto 0;
		text-align: center;
	}

	.module.story.display-editorial .heading-1 {
		text-align: left;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

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

	.module.story.display-diagonal:has(.heading-1:last-child) .media {
		margin: -120px auto 0;
		position: relative;
		top: 0;
		transform: none;
		translate: none;
	}

}