/**
 * Media & Content
 *
 * A landscape photo that breaks past the content grid toward the viewport, with the copy
 * stack on the six columns opposite. The default style paints nothing — it sits on the page.
 * Every style keeps that pair of columns and moves them.
 */

.module.media-content .container {
	align-items: center;
}

.module.media-content .media {
	aspect-ratio: 620 / 466;
	border-radius: 10px;
	grid-row: 1;
}

.module.media-content .content {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-row: 1;
}

/** Layout: image left (default) **/

.module.media-content.image-left .media {
	grid-column: 1 / span 6;
	margin-left: var(--container-breakout);
}

.module.media-content.image-left .content {
	grid-column: 7 / span 6;
	padding-left: var(--text-spacing-medium);
}

/** Layout: image right **/

.module.media-content.image-right .media {
	grid-column: 7 / span 6;
	margin-right: var(--container-breakout);
}

.module.media-content.image-right .content {
	grid-column: 1 / span 6;
	padding-right: var(--text-spacing-medium);
}

.module.media-content .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.module.media-content .text > * {
	margin-block: 0;
}

.module.media-content .content-styles > * {
	margin-block: 0;
}

.module.media-content .content-styles > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.media-content .content > :is(.btn, .buttons) {
	align-self: flex-start;
}

/** The sunray **/

.module.media-content .sunray {
	color: var(--pollen);
	pointer-events: none;
	position: absolute;
	top: -55px;
	width: 110px;
	z-index: 1;
}

.module.media-content .sunray svg {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

.module.media-content .media:has(.sunray) {
	overflow: visible;
}

.module.media-content .media:has(.sunray) img {
	border-radius: 10px;
}

.module.media-content.image-left .sunray {
	left: -55px;
}

.module.media-content.image-right .sunray {
	right: -55px;
}

/*** Pinned photograph — only where the copy outruns it ***/

/* Self-limiting: when the photograph is the taller of the two it defines the row's height and
   has nowhere to travel, so this is inert. It only bites where the copy is longer, which is
   the case it was asked for — and there the photograph aligning with the top of the copy is
   also the reading the comp draws. */
.module.media-content.style-default .media {
	align-self: start;
	position: sticky;
	top: calc(var(--text-spacing-xsmall) + var(--sticky-nav-height) + var(--text-spacing-small));
}

/*** Style: lists — the pinned photo with a checklist beside it ***/

.module.media-content.style-lists .media {
	align-self: start;
	border-radius: 0;
	aspect-ratio: 700 / 822;
	position: sticky;
	top: calc(var(--text-spacing-xsmall) + var(--sticky-nav-height) + var(--text-spacing-small));
}

.module.media-content.style-lists .container {
	align-items: start;
}

.module.media-content.style-lists .content {
	padding-top: var(--module-spacing-medium);
}

.module.media-content.style-lists.image-left .media {
	margin-left: var(--viewport-edge);
}

.module.media-content.style-lists.image-right .media {
	margin-right: var(--viewport-edge);
}

.module.media-content.style-lists.image-left .content {
	padding-left: var(--text-spacing-large);
}

.module.media-content.style-lists.image-right .content {
	padding-right: var(--text-spacing-large);
}

/** The copy column **/

/* A label is either a <p> carrying .eyebrow or the h3 the editor gets from the WYSIWYG's
   Heading 3 button; both take the same rhythm. */
.module.media-content.style-lists .content-styles > * + :is(p:has(> .eyebrow), h3:not([class])) {
	margin-top: var(--text-spacing-large);
}

.module.media-content.style-lists .content-styles > :is(ul, ol) + :is(p:has(> .eyebrow), h3:not([class])) {
	margin-top: var(--text-spacing-medium);
}

.module.media-content.style-lists .content-styles > :is(p:has(> .eyebrow), h3:not([class])) + :is(ul, ol) {
	margin-top: var(--text-spacing-small);
}

/* A list introduced by a sentence rather than by a label takes the same step off it — left to the
   list's own reset it began on the line under the paragraph. */
.module.media-content.style-lists .content-styles > p:not(:has(> .eyebrow)) + :is(ul, ol):not([class]) {
	margin-top: var(--text-spacing-small);
}

.module.media-content.style-lists .content-styles > * + .shortcode.notice {
	margin-top: var(--text-spacing-large);
}

/* The list labels are written as h3 in the WYSIWYG, and the comp draws them as the small
   eyebrow — 12/16 bold, tracked and upper — not as a heading. Values match `.eyebrow.small`
   rather than referencing it, because the editor cannot put a class on the tag. */
.module.media-content.style-lists .content-styles h3:not([class]) {
	color: inherit;
	font-family: var(--body-font);
	font-size: calc(12rem / 16);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: calc(16 / 12);
	text-transform: uppercase;
}

/** The two lists **/

.module.media-content.style-lists .content-styles :is(ul, ol):not([class]) {
	font-size: calc(15rem / 16);
	letter-spacing: -0.1px;
	line-height: calc(26 / 15);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.media-content.style-lists .content-styles :is(ul, ol):not([class]) > li {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	min-height: 32px;
	padding-top: 3px;
}

.module.media-content.style-lists .content-styles :is(ul, ol):not([class]) > li + li {
	margin-top: var(--text-spacing-xsmall);
}

/* position: static undoes the house bullet, which the global content-styles rule pulls out of
   flow at left: -20px to hang in the ul's padding. This list clears that padding and lays the
   marker out as a flex item instead, so left behind it the disc floated back over the copy. */
.module.media-content.style-lists .content-styles :is(ul, ol):not([class]) > li::before {
	align-items: center;
	/* The disc is a pale ground for a dark tick; --program-marker is the solid colour the
	   small bullets and the eyebrow glyph take, and is too saturated to sit a glyph on. */
	background-color: var(--program-disc, var(--program-marker, var(--tangerine)));
	border-radius: 100%;
	display: flex;
	flex: none;
	height: 32px;
	justify-content: center;
	margin-top: -3px;
	position: static;
	width: 32px;
}

.module.media-content.style-lists .content-styles ul:not([class]) > li::before {
	background-image: url('../../svgs/check.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 11px;
	content: '';
}

.module.media-content.style-lists .content-styles ol:not([class]) {
	counter-reset: requirement;
}

.module.media-content.style-lists .content-styles ol:not([class]) > li::before {
	content: counter(requirement);
	counter-increment: requirement;
	font-size: calc(12rem / 16);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: calc(16 / 12);
}

/*** Style: story — the narrower photo with a chipped label above the heading ***/

.module.media-content.style-story .media {
	aspect-ratio: 517 / 388;
}

.module.media-content.style-story .labels {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
}

.module.media-content.style-story .labels > * {
	margin-block: 0;
}

.module.media-content.style-story.image-left .media {
	grid-column: 1 / span 5;
}

.module.media-content.style-story.image-left .content {
	grid-column: 6 / span 7;
	padding-left: var(--gap);
}

.module.media-content.style-story.image-right .media {
	grid-column: 8 / span 5;
}

.module.media-content.style-story.image-right .content {
	grid-column: 1 / span 7;
	padding-right: var(--gap);
}

/** Story — the whole row is the link, and the photograph answers for it **/

.module.media-content.style-story .btn.row-link::after {
	content: '';
	inset: 0;
	position: absolute;
	z-index: 2;
}

.module.media-content.style-story .content a:not(.btn) {
	position: relative;
	z-index: 3;
}

.module.media-content.style-story .media::after {
	background: var(--overlay-nav);
	content: '';
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var(--motion-slow) var(--ease-out);
	z-index: 1;
}

.module.media-content.style-story .cue {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.module.media-content.style-story .burst {
	aspect-ratio: 990 / 434;
	bottom: 0;
	color: var(--white);
	display: block;
	left: 50%;
	opacity: 0;
	position: absolute;
	transition: opacity var(--motion-slow) var(--ease-out), translate var(--motion-slower) var(--ease-out);
	translate: -50% 24px;
	width: 76%;
}

.module.media-content.style-story .burst svg {
	display: block;
	height: 100%;
	width: 100%;
}

.module.media-content.style-story .badge {
	display: block;
	left: 50%;
	opacity: 0;
	position: absolute;
	scale: .9;
	top: 50%;
	transition: opacity var(--motion-slow) var(--ease-out) 80ms, scale var(--motion-slow) var(--ease-out) 80ms;
	translate: -50% -50%;
	width: 110px;
}

.module.media-content.style-story .badge svg {
	display: block;
	height: auto;
	width: 100%;
}

.module.media-content.style-story .container:is(:hover, :focus-within) .media::after {
	opacity: 1;
}

.module.media-content.style-story .container:is(:hover, :focus-within) .burst {
	opacity: .2;
	translate: -50% 0;
}

.module.media-content.style-story .container:is(:hover, :focus-within) .badge {
	opacity: 1;
	scale: 1;
}

.module.media-content.style-story .container:is(:hover, :focus-within) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--text-gray);
}

.module.media-content.style-story .container:is(:hover, :focus-within) .btn.primary {
	background: var(--sun-light);
	gap: 12px;
}

.module.media-content.style-story :is(h1, h2, h3, h4, h5, h6) {
	transition: color var(--motion) var(--ease-out);
}

/*** Style: video — a play facade crossing the panel the copy sits on ***/

.module.media-content.style-video .media {
	margin-block: var(--text-spacing-xlarge);
	z-index: 1;
}

.module.media-content.style-video :is(.media, .media.video) {
	aspect-ratio: 784 / 440;
}

/* On top of the disc's own 0.18em, which is tuned for the 100px disc the rest of the site draws.
   This facade's is the same size but crosses a panel rather than sitting in open picture, and the
   triangle reads left of centre against that edge without a little more. */
.module.media-content.style-video .play-icon .icon-play {
	margin-left: 5px;
}

.module.media-content.style-video .content {
	align-self: stretch;
	background: linear-gradient(color-mix(in srgb, var(--white) 20%, transparent), color-mix(in srgb, var(--white) 20%, transparent)), url('../../svgs/dot-grid.svg') var(--white);
	border-radius: 10px;
	justify-content: center;
}

.module.media-content.style-video .text {
	gap: var(--text-spacing-xxsmall);
}

.module.media-content.style-video .content-styles {
	font-weight: 600;
}

.module.media-content.style-video .text > .eyebrow + * {
	margin-top: var(--text-spacing-xxsmall);
}

.module.media-content.style-video:is(.image-left, .image-right) .content {
	padding: var(--text-spacing-xxlarge);
}

.module.media-content.style-video.image-left .media {
	grid-column: 1 / span 8;
}

.module.media-content.style-video.image-left .content {
	grid-column: 7 / span 6;
	margin-right: var(--container-breakout);
	padding-left: calc((2 * var(--one-column-width)) + var(--gap) + var(--text-spacing-xxlarge));
}

.module.media-content.style-video.image-right .media {
	grid-column: 5 / span 8;
}

.module.media-content.style-video.image-right .content {
	grid-column: 1 / span 6;
	margin-left: var(--container-breakout);
	padding-right: calc((2 * var(--one-column-width)) + var(--gap) + var(--text-spacing-xxlarge));
}

/** No video — the panel is the whole module, and the copy centers in it **/

.module.media-content.style-video .container > .content:only-child {
	align-items: center;
	grid-column: 1 / -1;
	margin-inline: 0;
	padding-inline: var(--text-spacing-xxlarge);
	text-align: center;
}

.module.media-content.style-video .container > .content:only-child .text {
	align-items: center;
}

.module.media-content.style-video .container > .content:only-child :is(.btn, .buttons) {
	align-self: center;
}

/*** Style: feature — the photo runs to the screen edge, the copy to five columns ***/

.module.media-content.style-feature .container {
	align-items: start;
}

.module.media-content.style-feature {
	overflow-x: clip;
	overflow-y: visible;
}

.module.media-content.style-feature .media {
	aspect-ratio: 773 / 660;
	isolation: isolate;
	overflow: visible;
}

.module.media-content.style-feature .content {
	padding-bottom: var(--module-spacing-large);
	position: relative;
	z-index: 1;
}

.module.media-content.style-feature .text {
	gap: var(--text-spacing-xxsmall);
}

.module.media-content.style-feature .text > .eyebrow + * {
	margin-top: var(--text-spacing-xxsmall);
}

.module.media-content.style-feature .watermark {
	color: var(--watermark-color);
	pointer-events: none;
	position: absolute;
	top: calc(103 / 660 * 100%);
	width: calc(1270 / 773 * 100%);
	z-index: -1;
}

.module.media-content.style-feature .watermark svg {
	display: block;
	height: auto;
	max-width: none;
	opacity: .05;
	width: 100%;
}

.wash.aqua .module.media-content.style-feature .watermark svg {
	opacity: .25;
}

.module.media-content.style-feature.image-left .media {
	grid-column: 1 / span 7;
	margin-left: var(--viewport-edge);
	margin-top: auto;
}

.module.media-content.style-feature.image-left .watermark {
	left: calc(-158 / 773 * 100%);
}

.module.media-content.style-feature.image-left .content {
	grid-column: 8 / span 5;
	padding-left: 0;
}

.module.media-content.style-feature.image-right .media {
	grid-column: 6 / span 7;
	margin-right: var(--viewport-edge);
}

.module.media-content.style-feature.image-right .watermark {
	right: calc(-158 / 773 * 100%);
}

.module.media-content.style-feature.image-right .content {
	grid-column: 1 / span 5;
	padding-right: 0;
}

/*** Style: report — a portrait cover standing on the module's own linen band ***/

.module.media-content.style-report .media {
	aspect-ratio: 475 / 608;
}

.module.media-content.style-report.bg-linen {
	padding-block: var(--module-spacing-small);
}

.module.media-content.style-report.image-left .media {
	grid-column: 1 / span 5;
	margin-left: 0;
}

.module.media-content.style-report.image-left .content {
	grid-column: 6 / span 6;
}

.module.media-content.style-report.image-right .media {
	grid-column: 8 / span 5;
	margin-right: 0;
}

.module.media-content.style-report.image-right .content {
	grid-column: 2 / span 6;
}

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

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

	.module.media-content.image-left .sunray {
		left: 0;
	}

	.module.media-content.image-right .sunray {
		right: 0;
	}

}

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

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

	.module.media-content.style-feature.image-left .media {
		grid-column: 1 / span 6;
	}

	.module.media-content.style-feature.image-left .content {
		grid-column: 7 / span 6;
	}

}

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

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

	.module.media-content.style-video .play-icon .icon-play {
		margin-left: 2px;
	}

	/* The scrim and the label are a hover state, and there is no hover here — a touch either plays
	   the video or does nothing, so a facade that only says "Watch video" once you have already
	   committed says it too late. Both are on at rest instead, and still off while it plays: the
	   `:not` clauses are what keep the playing state's own rules from being outranked by these. */
	.module.media-content.style-video .media.video:not(:has(.play[data-state="playing"]))::after,
	.module.media-content.style-video .media.video .play:not([data-state="playing"]) .play-label {
		opacity: 1;
	}

	/* Back on the corner rather than inside it: the mark is 110 wide, so half of it either side of
	   the photograph's edge is what centres it there. Below 1400 that was pulled in to 0 because
	   the container loses its outer margin and the overhang reaches past the screen — so the module
	   clips instead, and the mark bleeds off the edge the way the photographs around it do. */
	.module.media-content:has(.sunray) {
		overflow-x: clip;
	}

	.module.media-content.image-left .sunray {
		left: -55px;
	}

	.module.media-content.image-right .sunray {
		right: -55px;
	}

	/* Nothing to pin against on one column, and a pinned photograph above the copy would hold
	   the whole screen while it is read. */
	.module.media-content.style-default .media {
		position: relative;
		top: 0;
	}

	/* Stacked, the photograph and the copy are two rows with nothing between them — the grid's
	   gap is a column's, and there is one column here. */
	.module.media-content.style-default .container {
		row-gap: var(--text-spacing-large);
	}

	.module.media-content:is(.image-left, .image-right) .media {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.module.media-content:is(.image-left, .image-right) .content {
		grid-column: 1 / -1;
		grid-row: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.module.media-content:is(.style-lists, .style-story, .style-video, .style-feature, .style-report):is(.image-left, .image-right) .media {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-inline: var(--viewport-edge);
	}

	.module.media-content:is(.style-lists, .style-story, .style-video, .style-feature, .style-report):is(.image-left, .image-right) .content {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* Relative rather than static: the picture inside is absolutely positioned, and a static box
	   is no longer its containing block — it escaped to the module and covered the whole of it,
	   copy included. Relative drops the pinning and keeps the crop. */
	.module.media-content.style-lists:is(.image-left, .image-right) .media {
		align-self: auto;
		position: relative;
		top: auto;
	}

	.module.media-content.style-lists:is(.image-left, .image-right) .content {
		padding-top: 0;
	}

	.module.media-content.style-story:is(.image-left, .image-right) .media {
		aspect-ratio: 16 / 9;
	}

	.module.media-content.style-video .container {
		row-gap: 0;
	}

	.module.media-content.style-video:is(.image-left, .image-right) .media {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		margin-block: 0;
	}

	/* 8 more either side than above and below: stacked under the video the panel runs the full
	   width, and the copy wants holding off its edges more than off the crop. */
	.module.media-content.style-video:is(.image-left, .image-right) .content {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding: var(--text-spacing-medium) calc(var(--text-spacing-medium) + 8px);
	}

	.module.media-content.style-feature .content {
		padding-bottom: 0;
	}

	.module.media-content.style-feature:is(.image-left, .image-right) .media {
		margin-inline: calc(-1 * var(--container-outer-padding));
	}

	.module.media-content.style-feature.image-left .media {
		grid-row: 2;
	}

	.module.media-content.style-feature.image-left .content {
		grid-row: 1;
	}

	.module.media-content.style-feature .watermark {
		display: none;
	}

	.module.media-content.style-feature .container {
		align-items: center;
	}

	.module.media-content.style-report:is(.image-left, .image-right) .media {
		aspect-ratio: 475 / 608;
		margin-inline: auto;
		max-width: 380px;
		width: 100%;
	}

	.module.media-content.style-report .content {
		text-align: center;
	}

	/* The base rule pins these to the start, which leaves them off to one side under copy that
	   is now centred. */
	.module.media-content.style-report .content > :is(.btn, .buttons) {
		align-self: center;
	}

	.module.media-content.style-report .buttons {
		justify-content: center;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MIN-WIDTH 651 - Above Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	/* A pull quote is a held breath in the middle of an article, not the next paragraph: it takes
	   a step off the copy either side rather than the one line that separates paragraphs. Less
	   below than above, because what follows it is usually a heading carrying its own. */
	.module.media-content.style-default.size-large .content-styles blockquote {
		margin-bottom: var(--text-spacing-medium);
		margin-top: var(--text-spacing-large);
	}

}

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

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

	.module.media-content.style-default.size-default .content {
		gap: var(--text-spacing-small);
	}


	/* The title and the copy under it read as one block, so they sit closer than the eyebrow above
	   them does — a negative margin against the stack's gap, since a gap cannot vary per pair. */
	.module.media-content.style-report .text > :is(h1, h2, h3, h4, h5, h6) + .content-styles {
		margin-top: calc(var(--text-spacing-xxsmall) - var(--text-spacing-xsmall));
	}

	.module.media-content.style-report .content {
		gap: var(--text-spacing-small);
	}

}

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

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

	/* No optical offset at this size: the disc is 64 and the panel's edge is close enough that the
	   nudge reads as the triangle sitting off-centre rather than on it. */
	.module.media-content.style-video .play-icon .icon-play {
		margin-left: 0;
	}

	.module.media-content.style-video:is(.image-left, .image-right) .content {
		padding-inline: var(--text-spacing-small);
	}

	/* The deck and the copy under it are one thought: 8 rather than the run's own 16, that pair
	   alone. */
	.module.media-content.style-default.size-large .text > .large.bold + .content-styles {
		margin-top: calc(var(--text-spacing-xxsmall) - var(--text-spacing-xsmall));
	}

	/* A quote takes a step off the copy either side rather than the paragraph's one line. Above
	   it is measured to the top of the disc, as the shortcode measures its own — the mark hangs
	   half out of the panel, and the run's 16 to the fill put the disc into the line above. */
	.module.media-content.style-default .content-styles .shortcode.quote {
		margin-bottom: var(--text-spacing-small);
		margin-top: calc(var(--text-spacing-small) + var(--mark-overhang));
	}

}