/**
 * Value Props style: Photo + Card Grid
 *
 * Photo + Points' layout carrying Card Grid's panel, with the photo column pinned while the
 * cards scroll past it. The card — panel, icon circle, the overhang — is shared with
 * style-grid and style-split and lives in value-props.css.
 */

.module.value-props.style-sticky-media {
	/* Half the dot's strength, as a veil over it rather than a second artwork: the grid is one
	   SVG shared with every other field that draws it. */
	--dot-veil: color-mix(in srgb, var(--white) 50%, transparent);

	padding-block: var(--module-spacing-large);
	position: relative;

	/* The comp draws this headline in the body colour (#3d443e), not the programme's heading
	   colour — IBT turned it green. */
	--heading-color: currentColor;
}

/* Three levels down, so three to climb — the path was one short and the field never painted. */
.module.value-props.style-sticky-media::before {
	background: linear-gradient(var(--dot-veil), var(--dot-veil)), url('../../../svgs/dot-grid.svg') var(--white);
	content: '';
	inset-block: 0;
	position: absolute;
}

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

.module.value-props.style-sticky-media .crossfade {
	margin-top: var(--module-spacing-medium);
	position: sticky;
	top: calc(var(--sticky-nav-height) + var(--text-spacing-large));
}

.module.value-props.style-sticky-media .intro {
	gap: var(--text-spacing-small);
	text-align: center;
}

.module.value-props.style-sticky-media .eyebrow {
	justify-content: center;
}

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

.module.value-props.style-sticky-media .text > *,
.module.value-props.style-sticky-media .description > *,
.module.value-props.style-sticky-media .fine-print > * {
	margin-block: 0;
}

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

.module.value-props.style-sticky-media .panel {
	background: var(--teal-pale);
}

.module.value-props.style-sticky-media .panel p {
	margin-block: 0;
}

.module.value-props.style-sticky-media .fine-print {
	text-align: center;
}

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

/* Rounded on the edge it stops at; the other runs off the screen and has no corner to draw. */
.module.value-props.style-sticky-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-sticky-media.image-left .crossfade {
	grid-column: 1 / span 5;
	margin-left: calc(var(--viewport-edge) + var(--text-spacing-large));
	padding-right: var(--text-spacing-large);
}

.module.value-props.style-sticky-media.image-left .content {
	grid-column: 6 / -1;
}

/** Layout: image right **/

.module.value-props.style-sticky-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-sticky-media.image-right .crossfade {
	grid-column: 8 / -1;
	margin-right: calc(var(--viewport-edge) + var(--text-spacing-large));
	padding-left: var(--text-spacing-large);
}

.module.value-props.style-sticky-media.image-right .content {
	grid-column: 1 / span 7;
}

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

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

	/* Stacked, the photographs open the module — the inset above them belongs to the run's own
	   spacing, and a second one here only pushed them down the page. */
	.module.value-props.style-sticky-media {
		padding-top: 0;
	}

	/* Both edges reach the screen at this width, so neither has a corner to draw. The field also
	   opens on the middle of the photographs rather than behind their top edge, the way it meets
	   their side on a wider screen — half a photograph, whose height is the container's width on
	   this ratio, so it is written from that width. */
	.module.value-props.style-sticky-media:is(.image-left, .image-right)::before {
		border-radius: 0;
		left: 0;
		right: 0;
		top: calc((100vw - 2 * (var(--container-outer-margin) + var(--container-outer-padding))) * 9 / 32);
	}

	.module.value-props.style-sticky-media:is(.image-left, .image-right) .crossfade {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-inline: 0;
		margin-top: 0;
		padding-inline: 0;
		position: static;
	}

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

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

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

}

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

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

	.module.value-props.style-sticky-media .props {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.value-props.style-sticky-media .props > li:last-child:nth-child(odd) {
		margin-inline: 0;
		max-width: none;
	}

}