/*
 * "Impact stats" section: three cards in a row.
 *
 * Measured off the 1440px frame: 1280 container, cards 368 / 368 / 496 wide on
 * a 24px gutter and 366 tall, 16px radius, 42px of head room over 24px sides
 * and foot. Each card carries a 54px circular arrow icon top-left and a figure
 * plus caption anchored to the bottom. Card one is solid --color-primary, card
 * two a magenta-to-orange diagonal gradient, card three a city-at-sunset photo.
 */

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

/* The third card is wider than the first two - 368 : 368 : 496 in the design.
   The grid is the query container, not the card: the design sets one type size
   across all three, so the copy has to scale with the row, not with each card,
   or the wider third card would set its own. */
.impact__grid {
	display: grid;
	grid-template-columns: 23fr 23fr 31fr;
	gap: var(--space-24);
	container-type: inline-size;
}

.impact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-32);
	padding: var(--space-42) var(--space-24) var(--space-24);
	border-radius: var(--radius-lg);
	overflow: hidden;
	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. */
.impact-card:first-child {
	aspect-ratio: 368 / 366;
}

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

/* Diagonal magenta (top-left) to orange (bottom-right), sampled off the frame. */
.impact-card--gradient {
	background: linear-gradient(135deg, #6C2C8D 0%, #A34560 55%, #CF5842 100%);
}

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

/* --- Photo + overlay ------------------------------------------------------ */

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

/* The photo is already dark below the horizon, so only the foot needs help; a
   full-card scrim would flatten the sunset the design leans on. */
.impact-card--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(10 8 12 / 0%) 45%, rgb(10 8 12 / 42%) 100%);
}

/* --- Icon ----------------------------------------------------------------- */

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

.impact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1.5px solid rgb(255 255 255 / 85%);
	border-radius: var(--radius-full);
	color: var(--color-text-inverse);
	flex: 0 0 auto;
}

.impact-card__arrow {
	width: 20px;
	height: auto;
}

/* --- Figure + caption ----------------------------------------------------- */

.impact-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

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

/* The max-width, not the padding, sets where each caption breaks - the design
   wraps all three over two lines well short of the card edge. */
.impact-card__caption {
	margin: 0;
	max-width: max(240px, 24cqw);
	font-family: var(--font-display);
	font-size: clamp(17px, 1.95cqw, 25px);
	font-weight: 400;
	line-height: 1.25;
}

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

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

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

	/* Fewer columns means each card is a bigger share of the row, so the
	   row-relative sizes above have to be rescaled to keep the design's ratio
	   of type to card. */
	.impact-card__figure {
		font-size: clamp(40px, 8.5cqw, 64px);
	}

	/* Cards are wide enough here that the padding alone gives a good measure. */
	.impact-card__caption {
		max-width: none;
		font-size: clamp(17px, 3.2cqw, 25px);
	}
}

@media (max-width: 767px) {
	/* Same as the stats row: two cards abreast, the photo full width below. */
	.impact__grid {
		grid-template-columns: 168fr 142fr;
		gap: var(--space-16);
	}

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

	.impact-card--photo {
		grid-column: 1 / -1;
		min-height: 213px;
	}

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

	.impact-card__figure {
		font-size: clamp(26px, 9cqw, 40px);
	}

	.impact-card__caption {
		font-size: clamp(14px, 4cqw, 17px);
	}

	.impact-card {
		padding: var(--space-20);
	}
}