/**
 * Featured Impact Stat
 */

.module.featured-impact-stat {
	isolation: isolate;
	overflow-x: clip;
	position: relative;
}

/*** Container ***/

.module.featured-impact-stat .container {
	align-items: start;
}

.module.featured-impact-stat.background-appaloosa-beige,
.module.featured-impact-stat.background-russian-blue {
	margin-bottom: calc(-1 * var(--module-spacing-large));
}

.module.featured-impact-stat.background-appaloosa-beige .container,
.module.featured-impact-stat.background-russian-blue .container {
	padding-top: 0;
}

.module.featured-impact-stat.background-appaloosa-beige .container::before,
.module.featured-impact-stat.background-russian-blue .container::before {
	bottom: calc(157px + 5.834vw);
	height: auto;
}

/*** Content ***/

.module.featured-impact-stat .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 1 / 6;
	min-width: 0;
	padding-top: var(--module-spacing-medium);
}

.module.featured-impact-stat .content .big-stat {
	overflow-wrap: break-word;
	max-width: 100%;
}

.module.featured-impact-stat .content .eyebrow {
	margin: 0 0 var(--text-spacing-medium);
}

.module.featured-impact-stat .content > * + * {
	margin-top: var(--text-spacing-medium);
}

.module.featured-impact-stat .jazzy-pause {
	opacity: 0;
}

/*** Stats ***/

.module.featured-impact-stat .stats {
	margin: 0;
}

.module.featured-impact-stat .stat-item > p {
	margin: var(--text-spacing-small) 0 0;
}

body.no-js .module.featured-impact-stat .stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
}

body.no-js .module.featured-impact-stat .btn.refresh.see-another {
	display: none;
}

/*** Image ***/

.module.featured-impact-stat .image-column {
	grid-column: 6 / -1;
	position: relative;
	width: calc(100% + var(--container-outer-padding) + var(--text-spacing-medium));
	z-index: 2;
}

.module.featured-impact-stat > .background-shape.shape-outside {
	bottom: 160px;
	left: 0;
	position: absolute;
	width: 100%;
}

.module.featured-impact-stat .media {
	aspect-ratio: 763 / 641;
	border-radius: var(--border-radius-large);
}

.module.featured-impact-stat .media[data-sync-mode="fade"] img {
	opacity: 0;
	transition: opacity .5s ease;
}

.module.featured-impact-stat .media[data-sync-mode="fade"] img.is-active,
body.no-js .module.featured-impact-stat .media[data-sync-mode="fade"] img {
	opacity: 1;
}

/*** Dots ***/

.module.featured-impact-stat .image-column .jazzy-dots {
	bottom: 32px;
	left: 32px;
	position: absolute;
	z-index: 1;
}

/** No Image **/

.module.featured-impact-stat.no-image .content {
	grid-column: 1 / 9;
}

/** Dark Background (Russian Blue) **/

.module.featured-impact-stat.background-russian-blue .eyebrow {
	color: var(--samoyed-white);
}

.module.featured-impact-stat.background-russian-blue .big-stat.russian-blue,
.module.featured-impact-stat.background-russian-blue .big-stat {
	color: var(--samoyed-white) !important;
}

.module.featured-impact-stat.background-russian-blue .stat-item p {
	color: var(--samoyed-white);
}

.module.featured-impact-stat.background-russian-blue .btn.refresh {
	color: var(--samoyed-white);
}

.module.featured-impact-stat.background-russian-blue .jazzy-dots button:before {
	background: rgba(255, 255, 255, 0.4);
}

.module.featured-impact-stat.background-russian-blue .jazzy-dots .is-active button:before,
.module.featured-impact-stat.background-russian-blue .jazzy-dots button:hover:before {
	background: var(--samoyed-white);
}

/*
 * ====================================================================== *
 * MQ 951px–1366px — iPad Pro range
 * ====================================================================== *
 *
 * In this range the container is shorter than wide-desktop, so the
 * desktop calc(157px + 5.834vw) leaves the bg ending well above the
 * buttons and the curve floating mid-section. Drop both down so the
 * bg covers the button row and the curve sits at the section's
 * bottom edge.
 */

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

	.module.featured-impact-stat.background-appaloosa-beige .container::before,
	.module.featured-impact-stat.background-russian-blue .container::before {
		bottom: 0;
	}

	.module.featured-impact-stat > .background-shape.shape-outside {
		bottom: var(--module-spacing-large);
	}

}

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

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

	.module.featured-impact-stat .image-column {
		width: calc(100% + var(--container-outer-padding));
	}

	.module.featured-impact-stat .content {
		padding-right: var(--text-spacing-medium);
	}

	.module.featured-impact-stat .content .big-stat {
		font-size: calc(96rem / 16);
		line-height: calc(82 / 96);
	}

}

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

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

	.module.featured-impact-stat .bg-fill {
		height: 60%;
	}

	.module.featured-impact-stat .container {
		display: block;
	}

	.module.featured-impact-stat .content {
		align-items: center;
		padding-top: 0;
		text-align: center;
	}

	.module.featured-impact-stat .buttons {
		justify-content: center;
	}

	.module.featured-impact-stat .content .eyebrow {
		margin-bottom: var(--text-spacing-small);
	}

	.module.featured-impact-stat .content > * + * {
		margin-top: var(--text-spacing-small);
	}

	.module.featured-impact-stat .content .stats {
		margin: 0;
	}

	.module.featured-impact-stat .image-column {
		margin: var(--text-spacing-medium) auto 0;
		max-width: 600px;
		width: 100%;
	}

	.module.featured-impact-stat.no-image .content {
		margin: 0 auto;
		max-width: 700px;
	}

}

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

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

	.module.featured-impact-stat .container {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.module.featured-impact-stat .content,
	.module.featured-impact-stat .content > .buttons {
		display: contents;
	}

	.module.featured-impact-stat .content .big-stat {
		font-size: calc(80rem / 16);
		line-height: calc(72 / 80);
	}

	.module.featured-impact-stat .stat-item > p {
		margin-top: var(--text-spacing-xsmall);
	}

	.module.featured-impact-stat .content > .buttons > .btn.refresh {
		margin-top: var(--text-spacing-small);
	}

	.module.featured-impact-stat .image-column {
		margin-top: var(--text-spacing-medium);
	}

	.module.featured-impact-stat .content > .buttons > .btn.primary {
		margin-top: var(--text-spacing-medium);
		order: 1;
	}

}