.mfb-challenges {
	/* Slides over the pinned hero like a card. */
	position: relative;
	z-index: 1;
	padding-block: var(--mfb-space-2xl);
	border-radius: var(--mfb-radius-lg) var(--mfb-radius-lg) 0 0;
	background: var(--mfb-section-bg, var(--mfb-color-paper));
	color: var(--mfb-section-text);
}

.mfb-challenges__title {
	margin-bottom: var(--mfb-space-xl);
}

.mfb-challenges__list {
	display: grid;
	gap: var(--mfb-space-2xl);
}

.mfb-challenge-card {
	display: grid;
	gap: var(--mfb-space-md);
}

.mfb-challenge-card__number {
	display: block;
	margin-bottom: var(--mfb-space-xs);
	color: var(--mfb-section-muted, var(--mfb-color-text-muted));
	font-variant-numeric: tabular-nums;
}

.mfb-challenge-card__text {
	max-width: 48ch;
	margin-top: var(--mfb-space-sm);
	font-size: var(--mfb-text-lead);
}

.mfb-challenge-card__media {
	overflow: hidden;
	border-radius: var(--mfb-radius-md);
	background: var(--mfb-color-paper);
}

.mfb-challenge-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (min-width: 48em) {
	.mfb-challenge-card {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
		align-items: center;
		gap: clamp(2rem, 6vw, 6.5rem);
	}
}

/* Scroll-driven stage, enabled by challenges.js from 48em. */

.mfb-challenges.is-enhanced {
	min-height: calc(var(--mfb-count) * 100svh);
	padding-block: 0;
}

.mfb-challenges.is-enhanced .mfb-challenges__inner {
	position: sticky;
	top: 0;
	display: grid;
	align-content: center;
	row-gap: var(--mfb-space-xl);
	height: 100svh;
	min-height: 40rem;
	padding-block: var(--mfb-space-lg);
}

.mfb-challenges.is-enhanced .mfb-challenges__title {
	margin-bottom: 0;
}

.mfb-challenges.is-enhanced .mfb-challenges__list {
	align-items: center;
	gap: 0;
}

.mfb-challenges.is-enhanced .mfb-challenges__item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity 0.15s ease-out,
		transform 0.3s var(--mfb-ease);
}

/* Leave upwards, so scrolling back brings the previous item down from where it went. */
.mfb-challenges.is-enhanced .mfb-challenges__item.is-past {
	transform: translateY(-1.25rem);
}

/* Enter only after the outgoing item has faded, so the two never overlap. */
.mfb-challenges.is-enhanced .mfb-challenges__item.is-active {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.3s ease-out 0.15s,
		transform 0.5s var(--mfb-ease) 0.15s;
}

.mfb-challenges.is-enhanced .mfb-challenge-card__image {
	transform: scale(1.08);
	transition: transform 0.5s var(--mfb-ease);
}

.mfb-challenges.is-enhanced .is-active .mfb-challenge-card__image {
	transform: scale(1.025);
}

.mfb-challenges__progress {
	height: 0.25rem;
	overflow: hidden;
	border-radius: var(--mfb-radius-pill);
	background: rgb(17 17 17 / 10%);
}

.mfb-challenges__progress::before {
	content: "";
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--mfb-color-stone);
	transform: scaleX(var(--mfb-progress, 0));
	transform-origin: left;
	transition: transform 0.45s var(--mfb-ease);
}