/**
 * Key Numbers — «we are in numbers» страницы «О нас» (page-about.php).
 *
 * Значения — из макета Figma: desktop узлы 10300:2709/2711/2715/2716,
 * mobile узлы 10300:4814/4815/4819/4820. Таблица значений — в
 * _workflow/tasks/step-about-key-numbers.md, §3.
 *
 * @package AJ1MOTO.COM
 */

.key-numbers {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	/* Фирменный градиент (эталон из Figma, base --gradient-brand-stops). */
	background: linear-gradient(80.06deg, var(--gradient-brand-stops));
}

/* Заголовочная группа: надзаголовок + H2. */
.key-numbers__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.key-numbers__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-white-85);
}

.key-numbers__title {
	margin-top: var(--space-20);
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-white);
}

/* Ряд из 4 показателей: равные ячейки с вертикальными разделителями. */
.key-numbers__grid {
	display: flex;
}

.key-numbers__stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/*
	 * Макет: gap число→подпись 10 при боксе числа h76. Khand не заполняет бокс
	 * до низа (глиф «сидит» выше нижней кромки) → визуальный зазор больше
	 * макетного. Компенсировано уменьшением gap (визуальная сверка со скрином).
	 */
	gap: calc(4 / var(--vw-base) * 100vw);
	padding-left: calc(36 / var(--vw-base) * 100vw);
	border-right: calc(1 / var(--vw-base) * 100vw) solid var(--color-white-10);
}

.key-numbers__stat:last-child {
	border-right: 0;
}

.key-numbers__value {
	font-family: var(--font-display);
	font-size: var(--fs-84);
	font-weight: var(--fw-display);
	line-height: var(--lh-090);
	color: var(--color-white);
}

/* Завершающий «+» — акцентным цветом. */
.key-numbers__plus {
	font-style: normal;
	color: var(--color-accent);
}

.key-numbers__caption {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-light);
}

@media (max-width: 767px) {
	.key-numbers {
		gap: var(--space-30);
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
		/* Фирменный градиент (эталон из Figma), угол мобильного макета. */
		background: linear-gradient(78.73deg, var(--gradient-brand-stops));
	}

	/* Надзаголовок → H2: 15 (макет узел 10300:4815). */
	.key-numbers__title {
		margin-top: var(--space-15);
		font-size: var(--fs-30);
	}

	.key-numbers__eyebrow {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	/* Сетка 2×2: gap-x 33, gap-y 20 (макет узел 10300:4819). */
	.key-numbers__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: calc(33 / var(--vw-base) * 100vw);
		row-gap: var(--space-20);
	}

	/* Ячейка: число → подпись (макет 8, уменьшено под Khand); без разделителя. */
	.key-numbers__stat {
		gap: calc(4 / var(--vw-base) * 100vw);
		padding-left: 0;
		border-right: 0;
	}

	.key-numbers__value {
		font-size: var(--fs-52);
	}

	.key-numbers__caption {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}
}