/*
 * Stats section: three trust-number cards.
 *
 * Same row geometry as the impact section - 368 / 368 / 496 wide on a 24px
 * gutter, 366 tall. A brand fill, a magenta-to-orange gradient and a photo,
 * each with an outlined icon at the head and the figure at the foot.
 */

.stats {
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

.stats__grid {
	display: grid;
	grid-template-columns: 23fr 23fr 31fr;
	gap: var(--space-24);
	container-type: inline-size;
}

/* --- Card ----------------------------------------------------------------- */

.stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-32);
	margin: 0;
	padding: var(--space-42) var(--space-32) var(--space-32);
	overflow: hidden;
	border-radius: var(--radius-lg);
	color: var(--color-text-inverse);
}

/* Only the first card sets the ratio; the others stretch to the row, so the
   wider third card stays the same height instead of driving it. */
.stat-card:first-child {
	aspect-ratio: 368 / 366;
}

.stat-card--solid {
	background: var(--color-primary);
}

.stat-card--gradient {
	background: linear-gradient(135deg, #6c2c8d 0%, #a34560 55%, #cf5842 100%);
}

.stat-card--photo {
	background: var(--color-surface-dark);
}

.stat-card__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* The photo is dark under the copy already; only the foot needs a lift. */
.stat-card--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(6 6 12 / 0%) 50%, rgb(6 6 12 / 45%) 100%);
}

/* Above the photo and its scrim. Scoped to the two real children so the
   absolutely positioned <img> keeps its own stacking. */
.stat-card__icon,
.stat-card__body {
	position: relative;
	z-index: 2;
}

/* A bare glyph in the design - no ring around it. */
.stat-card__icon {
	display: flex;
	flex: none;
	color: var(--color-text-inverse);
}

.stat-card__glyph {
	width: 46px;
	height: 46px;
}

/* Card three has no icon, so the caption has to hold the foot on its own. */
.stat-card__body {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* 64px and 20px at the design's 1280 row; below that they track the row so the
   cards keep the design's proportions instead of crowding. */
.stat-card__value {
	font-family: var(--font-display);
	font-size: clamp(40px, 5cqw, 64px);
	font-weight: 400;
	line-height: 1.05;
}

.stat-card__label {
	font-family: var(--font-display);
	font-size: clamp(16px, 1.6cqw, 21px);
	font-weight: 400;
	line-height: 1.3;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	.stats__grid {
		grid-template-columns: 1fr 1fr;
	}

	.stat-card:first-child {
		aspect-ratio: 1 / 1;
	}

	.stat-card__value {
		font-size: clamp(40px, 8.5cqw, 64px);
	}

	.stat-card__label {
		font-size: clamp(16px, 2.7cqw, 21px);
	}
}

@media (max-width: 767px) {
	/* Mobile keeps the first two side by side at the design's 203 : 139 and
	   drops the photo card to full width beneath them. */
	.stats__grid {
		grid-template-columns: 203fr 139fr;
		gap: var(--space-16);
	}

	.stat-card:first-child {
		aspect-ratio: auto;
	}

	.stat-card--photo {
		grid-column: 1 / -1;
		min-height: 118px;
	}

	.stat-card {
		min-height: 260px;
		padding: var(--space-32) var(--space-24) var(--space-24);
	}

	.stat-card__value {
		font-size: clamp(40px, 14cqw, 56px);
	}

	.stat-card__label {
		font-size: clamp(16px, 5cqw, 20px);
	}
}