/**
 * Value Props — shared, plus the Photo + Points style
 *
 * A crossfading photo beside a statement and a two-up grid of points, over a pale panel that
 * starts at column four and bleeds off the screen. Every other style is in value-props/.
 *
 * The style class is `style-grid`, never a bare `grid` — that is the global 12-column layout
 * utility and the collision would be silent.
 */

.module.value-props.bg-linen {
	padding-block: var(--module-spacing-large);
}

.module.value-props.style-media {
	--media-band: #f0f4e1;
	padding-block: var(--module-spacing-large);
	position: relative;
}

.module.value-props.style-media .container {
	align-items: center;
}

/* The band's own colour at half strength over the tile is what sets the pattern back — a
   background image has no opacity of its own to turn down. */
.module.value-props.style-media::before {
	background: linear-gradient(color-mix(in srgb, var(--media-band) 50%, transparent), color-mix(in srgb, var(--media-band) 50%, transparent)), url('../../svgs/dot-grid.svg') var(--media-band);
	content: '';
	inset-block: 0;
	position: absolute;
}

.module.value-props .crossfade {
	display: grid;
	grid-row: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.module.value-props.style-media.image-left::before {
	border-radius: 10px 0 0 10px;
	left: calc(var(--container-outer-margin) + var(--container-outer-padding) + 3 * (var(--one-column-width) + var(--gap)));
	right: 0;
}

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

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

/** Layout: image right **/

.module.value-props.style-media.image-right::before {
	border-radius: 0 10px 10px 0;
	left: 0;
	right: calc(var(--container-outer-margin) + var(--container-outer-padding) + 3 * (var(--one-column-width) + var(--gap)));
}

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

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

/** Crossfade **/

.module.value-props .crossfade > li {
	aspect-ratio: 620 / 685;
	border-radius: 10px;
	grid-column: 1;
	grid-row: 1;
}

.module.value-props .crossfade:not(.jazzy-carousel) > li + li {
	opacity: 0;
}

.module.value-props .crossfade > .jazzy-pause-item {
	align-self: end;
	justify-self: end;
	margin: var(--text-spacing-xsmall);
}

.module.value-props .crossfade .jazzy-pause {
	background: var(--white);
	border-radius: 100%;
	color: var(--charcoal);
	height: 44px;
	opacity: 0;
	transition: opacity var(--motion) var(--ease-out);
	width: 44px;
}

/* It cannot go: the images fade on their own, so this is the only way to stop them (WCAG 2.2.2).
   It no longer answers the pointer, which can leave the images; the keyboard, which cannot,
   still brings it back. */
.module.value-props .crossfade .jazzy-pause:focus-visible {
	opacity: 1;
}

.module.value-props .crossfade .jazzy-pause:focus-visible {
	box-shadow: 0 0 0 2px var(--focus-halo);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/** Copy **/

.module.value-props .intro {
	display: flex;
	flex-direction: column;
}

.module.value-props.style-media .intro {
	gap: var(--text-spacing-xsmall);
}

.module.value-props .intro > * {
	margin-block: 0;
}

.module.value-props .props {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.value-props.style-media .props {
	column-gap: var(--text-spacing-small);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: var(--text-spacing-medium);
}

.module.value-props.style-media .props > li {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.module.value-props .props p {
	margin-block: 0;
}

/** Panel cards — shared by style-grid, style-split and style-sticky-media **/

.module.value-props.style-grid .props > li,
.module.value-props.style-split .props > li,
.module.value-props.style-sticky-media .props > li {
	display: grid;
}

.module.value-props.style-grid .props > li > *,
.module.value-props.style-split .props > li > *,
.module.value-props.style-sticky-media .props > li > * {
	grid-area: 1 / 1;
}

.module.value-props.style-grid li > .icon,
.module.value-props.style-split li > .icon,
.module.value-props.style-sticky-media li > .icon {
	align-self: start;
	background: var(--petal-40);
	justify-self: start;
	z-index: 1;
}

/* Under a programme the circle takes its band colour and the glyph reverses onto it; with no
   programme it stays the house petal, so an unbranded page is unchanged. */
.module.value-props:is(.style-grid, .style-split, .style-sticky-media)[data-brand] li > .icon {
	background: var(--program-band, var(--petal-40));
	color: var(--white);
}

.module.value-props.style-grid .panel,
.module.value-props.style-split .panel,
.module.value-props.style-sticky-media .panel {
	background: var(--white);
	border-radius: 10px;
	margin: var(--text-spacing-small) 0 0 var(--text-spacing-small);
	padding: var(--text-spacing-small) var(--text-spacing-medium);
}

/* The margin clears the icon overhanging the top-left corner. A list where no row carries one
   has nothing to clear, and the panels sit flush; one icon anywhere keeps the whole list aligned. */
.module.value-props.style-grid:not(:has(.props > li > .icon)) .panel,
.module.value-props.style-split:not(:has(.props > li > .icon)) .panel,
.module.value-props.style-sticky-media:not(:has(.props > li > .icon)) .panel {
	margin: 0;
}

/* Branded, the split card is the same card the sticky-media style already fills; white panels
   on a white page were only ever the unbranded reading. */
.module.value-props.style-split[data-brand] .panel {
	background: var(--teal-pale);
}

.module.value-props.style-grid .eyebrow,
.module.value-props.style-split .eyebrow {
	color: var(--storm);
}

.module.value-props li > .icon {
	align-items: center;
	/* The pale disc a glyph sits on, which a programme sets separately from the solid colour
	   its small bullets take. */
	background: var(--program-disc, var(--tangerine));
	border-radius: 100%;
	display: flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.module.value-props li > .icon > :is(img, svg) {
	height: 24px;
	object-fit: contain;
	width: 24px;
}

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

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

	/* The band starts half-way down the photograph instead of above it, so the picture crosses
	   the band's edge the way it does on desktop — there it breaks the band sideways, here, stacked,
	   it breaks it from above.

	   A margin rather than `top`, because a top percentage resolves against the section's height
	   and the photograph's is a share of its width: an absolutely-placed box's margins resolve
	   against the width. That is the module's padding, then half the crop's 16:9 height taken off
	   the container's measure. */
	.module.value-props.style-media:is(.image-left, .image-right)::before {
		border-radius: 0;
		left: 0;
		margin-top: calc(var(--module-spacing-large) + (100% - 2 * (var(--container-outer-margin, 0px) + var(--container-outer-padding))) * 9 / 32);
		right: 0;
	}

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

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

	.module.value-props.style-media .crossfade > li {
		aspect-ratio: 16 / 9;
	}

}

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

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

	/* The band's own inset, not a second helping of the step above it: the module already arrives
	   on whatever Top Spacing the editor set, and a band-sized padding under that read as two gaps
	   where the page wanted one. */
	.module.value-props.style-media {
		padding-block: var(--text-spacing-xsmall) var(--text-spacing-medium);
	}

	.module.value-props.style-media .props > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		margin-inline: auto;
		max-width: calc((100% - var(--text-spacing-small)) / 2);
	}

	.module.value-props.style-grid .panel,
	.module.value-props.style-split .panel,
	.module.value-props.style-sticky-media .panel {
		padding-inline: var(--text-spacing-small);
	}

}