/**
 * Counter Row — Figma category-bar (node 475:1600).
 * Full-bleed blue band; figures sit in the 1248 container. Max 4 columns.
 */

.counter-row {
	--counter-row-min-h: 10.0625rem; /* 161px */
	--counter-row-pad-block: 2.1875rem; /* 35px */
	--counter-row-pad-inline: 0.625rem; /* 10px */
	--counter-row-cols: 4;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-brand-secondary);
	color: var(--color-bg-blue-light);
}

.counter-row__list {
	display: grid;
	grid-template-columns: repeat(var(--counter-row-cols, 4), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.counter-row__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: var(--counter-row-min-h);
	padding-block: var(--counter-row-pad-block);
	padding-inline: var(--counter-row-pad-inline);
	border-inline-end: 1px solid var(--color-bg-blue-light);
	text-align: center;
}

.counter-row__item:first-child {
	align-items: flex-start;
	padding-inline-start: 0;
	text-align: start;
}

.counter-row__item:last-child {
	align-items: flex-end;
	padding-inline-end: 0;
	border-inline-end: none;
	text-align: end;
}

.counter-row__value,
.counter-row__label {
	margin: 0;
	font-family: var(--font-sans);
	text-transform: uppercase;
	white-space: nowrap;
}

.counter-row__value {
	font-size: var(--text-display-lg-size);
	font-weight: 700;
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
	color: var(--color-bg-blue-light);
}

.counter-row__label {
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight-light);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-eyebrow-letter-spacing);
	color: var(--color-blue-200);
}

@media (max-width: 767px) {
	.counter-row {
		--counter-row-min-h: 8.5rem;
		--counter-row-pad-block: var(--space-24);
	}

	.counter-row__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.counter-row__item {
		border-block-end: 1px solid var(--color-bg-blue-light);
	}

	.counter-row__item:nth-child(odd) {
		align-items: flex-start;
		padding-inline-start: 0;
		border-inline-end: 1px solid var(--color-bg-blue-light);
		text-align: start;
	}

	.counter-row__item:nth-child(even),
	.counter-row__item:last-child {
		align-items: flex-end;
		padding-inline-end: 0;
		border-inline-end: none;
		text-align: end;
	}

	.counter-row__item:nth-last-child(-n + 2):nth-child(odd),
	.counter-row__item:last-child {
		border-block-end: none;
	}

	.counter-row__value {
		font-size: var(--text-h1-size);
		white-space: normal;
	}

	.counter-row__label {
		white-space: normal;
	}
}

@media (max-width: 479px) {
	.counter-row__list {
		grid-template-columns: 1fr;
	}

	.counter-row__item,
	.counter-row__item:first-child,
	.counter-row__item:last-child,
	.counter-row__item:nth-child(odd),
	.counter-row__item:nth-child(even) {
		align-items: center;
		padding-inline: var(--counter-row-pad-inline);
		border-inline-end: none;
		border-block-end: 1px solid var(--color-bg-blue-light);
		text-align: center;
	}

	.counter-row__item:nth-child(odd),
	.counter-row__item:nth-last-child(-n + 2):nth-child(odd) {
		border-block-end: 1px solid var(--color-bg-blue-light);
	}

	.counter-row__item:last-child {
		border-block-end: none;
	}
}