/*
 * The proof strip. Four to six items across on the cream ground, each a solid green disc above two
 * lines of bold green. No band behind it: the mockup lets the page carry it.
 *
 * Measured: 67px disc, 322px between centres, 49px from disc to label, labels at 24px bold.
 */

.proof {
	padding-block-start: var(--rhythm-md);
}

/* The column count follows the item count, and 14rem an item is what the measured four-up strip
   works out at, so the items keep their width however many there are. */
.proof__list {
	--proof-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--proof-cols), minmax(0, 1fr));
	gap: var(--space-3) var(--space-1);
	max-width: calc(var(--proof-cols) * 14rem);
	margin-inline: auto;
}

.proof__list[data-count="1"] { --proof-cols: 1; }
.proof__list[data-count="2"] { --proof-cols: 2; }
.proof__list[data-count="3"] { --proof-cols: 3; }
.proof__list[data-count="5"] { --proof-cols: 5; }
.proof__list[data-count="6"] { --proof-cols: 6; }

.proof__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.proof__disc {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--disc-size);
	height: var(--disc-size);
	background-color: var(--color-bg-accent);
	border-radius: var(--radius-pill);
	color: var(--bnk-cream-muted);
	color: color-mix(in srgb, var(--bnk-cream-muted) 72%, var(--bnk-green));
}

.proof__icon {
	width: 52%;
	height: 52%;
}

/* Below the scale: at six across the shared step reads crowded, so the label has its own. */
.proof__text {
	max-width: 14ch;
	margin-block-start: var(--space-2);
	color: var(--color-heading);
	font-size: clamp(0.9375rem, 0.88rem + 0.24vw, 1.0625rem);   /* 15 -> 17 */
	font-weight: var(--weight-heading);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-display);
}

/* A five or six line strip carries longer lines, which need the column rather than the 14ch
   measure the four short ones were drawn to. */
.proof__list[data-count="5"] .proof__text,
.proof__list[data-count="6"] .proof__text {
	max-width: none;
}

/* Five or six across gets too thin before the strip reaches the two-up breakpoint. */
@media (max-width: 64rem) {
	.proof__list[data-count="5"],
	.proof__list[data-count="6"] {
		--proof-cols: 3;
	}
}

@media (max-width: 46rem) {
	.proof__list[data-count] {
		--proof-cols: 2;
		max-width: none;
		gap: var(--space-4) var(--space-2);
	}
}