/**
 * Impact style: Media Panel
 *
 * A statement over a photo or a muted background video, with the stat cards straddling the
 * panel's bottom edge.
 */

.module.impact.style-panel {
	--panel-overlap: 124px;
}

.module.impact.style-panel .panel {
	--focus-ring: var(--white); /* Dark band: charcoal reaches 1.1:1 on the scrim, white 12.6:1 */
	border-radius: 10px;
	margin-inline: var(--text-spacing-small);
	overflow: clip;
	padding-block: var(--module-spacing-large) calc(var(--module-spacing-medium) + var(--panel-overlap));
	position: relative;
}

.module.impact.style-panel .panel > .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
}

.module.impact.style-panel .panel > .media::after {
	background: var(--overlay-darker);
	content: '';
	inset: 0;
	position: absolute;
}

.module.impact.style-panel .panel > .container {
	position: relative;
}

.module.impact.style-panel .intro {
	align-items: flex-start;
	color: var(--white);
	grid-column: 1 / span 11;
	margin: 0;
	max-width: none;
	text-align: left;
}

.module.impact.style-panel .eyebrow {
	color: inherit;
}

.module.impact.style-panel .eyebrow .mark {
	color: var(--sun);
}

.module.impact.style-panel .btn {
	grid-column: 1 / -1;
	justify-self: start;
}

.module.impact.style-panel .panel + .container {
	margin-top: calc(var(--panel-overlap) * -1);
	position: relative;
}

.module.impact.style-panel .amounts > li {
	display: flex;
}

.module.impact.style-panel .card {
	align-items: center;
	box-shadow: var(--shadow-subtle);
	flex: 1;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-medium) 0 var(--text-spacing-large);
}

@property --emphasis-color {
	syntax: '<color>';
	inherits: true;
	initial-value: #ffffff;
}

.module.impact.style-panel .intro {
	--emphasis-color: var(--tangerine);
	transition: --emphasis-color var(--motion-slower) var(--ease-out);
}

.module.impact.style-panel .intro:has(.is-split) {
	--emphasis-color: var(--white);
	transition: none;
}

.module.impact.style-panel .emphasis.inline {
	color: var(--emphasis-color);
}

.module.impact.style-panel .icon {
	align-items: center;
	background: var(--petal-40);
	border-radius: 100%;
	display: flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.module.impact.style-panel .icon > :is(img, svg) {
	height: 24px;
	object-fit: contain;
	width: 24px;
}

.module.impact.style-panel .stat {
	text-align: center;
	width: 100%;
}

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

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

	.module.impact.style-panel {
		--panel-overlap: 0px;
	}

	.module.impact.style-panel .panel + .container {
		margin-top: var(--text-spacing-large);
	}

	.module.impact.style-panel .intro {
		grid-column: 1 / -1;
	}

	/* Left, not centred: a lone card under a two-up grid reads as the start of a third row, and a
	   row starts at the column it would have filled. */
	.module.impact.style-panel .amounts > li:last-child:nth-child(odd) {
		justify-self: start;
		margin-inline: 0;
		width: calc((100% - var(--text-spacing-xsmall)) / 2);
	}

}

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

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

	.module.impact.style-panel .panel {
		border-radius: 0;
		margin-inline: 0;
	}

	/* The card carries no side padding at all on a wide screen, where the figure never comes near
	   its edge. At this width it does. */
	.module.impact.style-panel .card {
		padding-inline: var(--text-spacing-xxsmall);
	}

}