/**
 * Metropolis Proof Strip.
 */

.proof-strip__list {
	display: grid;
	grid-template-columns: repeat(var(--items, 4), minmax(0, 1fr));
	gap: 24px clamp(24px, 3vw, 48px);
	margin: 0;
	padding: clamp(28px, 3vw, 40px) 0;
	list-style: none;
	border-top: 1px solid var(--mist-deep);
}

.proof {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

/* Figures line up across the row even when one wraps to two lines. */
.proof__text {
	padding-top: 6px;
}

/* A solid fascia tile gives each icon its weight. */
.proof__tile {
	display: grid;
	flex: none;
	place-items: center;
	width: 60px;
	height: 60px;
	background: var(--fascia);
	border-radius: 12px;
	color: var(--on-fascia);
	box-shadow: 0 10px 20px -14px rgba(12, 39, 31, 0.6);
}

.feature-icon {
	width: 38px;
	height: 38px;
}

.proof__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.proof__figure {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.375rem, 1.9vw, 1.625rem);
	line-height: 1.1;
	color: var(--fascia);
	font-variant-numeric: lining-nums;
}

.proof__label {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ink-soft);
}

/* Editor only: a slot waiting for a confirmed figure. */
.proof--missing .proof__tile {
	background: transparent;
	border: 1.5px dashed var(--mist-deep);
	color: var(--ink-soft);
	box-shadow: none;
}

.proof--missing .proof__figure {
	color: var(--ink-soft);
}

/* Tablet: icon above text, so three facts share one row (four make a 2×2). */
@media (max-width: 960px) {
	.proof-strip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.proof-strip__list--3,
	.proof-strip__list--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.proof {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.proof-strip__list,
	.proof-strip__list--3,
	.proof-strip__list--5 {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.proof {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
}

@media (max-width: 480px) {

	.proof__tile {
		width: 52px;
		height: 52px;
	}

	.feature-icon {
		width: 34px;
		height: 34px;
	}
}