/*
 * Our result in numbers — Figma 748:47023, y 11255–12152 (паттерн baserd/numbers): разделитель (divider.css), ряд
 * из четырёх цифр, разделитель, заголовок секции (section-heading.css) и столбики выручки за месяц между двумя
 * полями точек со звездой, как в FAQ. До макета 30.09 цифры и выручка были в конце секции инфраструктуры
 * (657:9087, 657:9078), с картой точками под цифрами и суммой выручки вместо заголовка.
 * Координаты ниже — от узлов макета. Уже 1440 ряд сжимается целиком; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора, ядра и отступы потока.
 */

.baserd-numbers {
	overflow-x: clip;
}

.baserd-numbers.has-grid-lines {
	padding-bottom: var(--wp--preset--spacing--72);
}

/*
 * 748:47032: ряд 1280 из четырёх равных колонок, заходит на нижние 9 разделителя. В колонке поля 48, снизу 40:
 * цифра 48/56 500 белым и через 8 подпись 16/24 muted. Подпись в макете шире поля колонки (data centers around
 * the world, 236 при 224) и заходит в её правое поле 48 одной строкой. Поэтому справа поля у колонки нет: подпись
 * занимает колонку до края и переносится, только когда иначе вышла бы за него: на / и /pl/ уже 1200, на /fr/
 * уже 1366 (centres de données dans le monde на 1024 наезжала на соседнюю на 32, front#874). На 1366 и шире — в
 * одну строку, как в макете.
 */
.baserd-numbers .baserd-numbers__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: -9px;
}

.baserd-numbers .baserd-numbers__stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--48) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--48);
}

.baserd-numbers .baserd-numbers__stat > * {
	margin: 0;
}

.baserd-numbers .baserd-numbers__stat p {
	color: var(--wp--preset--color--muted);
}

.baserd-numbers .baserd-numbers__stat .baserd-numbers__value {
	font-size: var(--wp--preset--font-size--size-48);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-48);
	color: var(--wp--preset--color--contrast);
}

/* Заголовок 748:47049: поле снизу 48, а не 72, как у заголовка секции; «numbers.» — белый 40%, как выделение в редакторе. */
.wp-block-group.baserd-section-heading.baserd-numbers__heading {
	padding-bottom: var(--wp--preset--spacing--48);
}

/*
 * Ряд 1280 через 28 под заголовком: столбики 621 × 375 (748:47058), слева и справа поля точек 240 (748:47463,
 * 748:47112) на 11 ниже верха столбиков, 48 от краёв ряда. Между полем и столбиками по 19, а слева ещё 45: сетка
 * столбиков 577 стоит по центру секции, шкала сумм справа выходит за неё. Уже 1440 поля точек сжимаются.
 */
.baserd-numbers .baserd-numbers__body {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 19px;
	margin-top: 28px;
	padding: 0 var(--wp--preset--spacing--48);
}

/*
 * 748:47463 и 748:47112: точки 6 px с шагом 18, белый 9% (точка 30% при прозрачности слоя 30%), видны 14 × 20
 * точек. Сдвиг — top, а не margin: отступ первого блока в потоке редактор обнуляет правилом того же веса, что здесь.
 * Точки — ::before (::after блока в редакторе занят рамкой выделения); ширина слоя — целое число столбцов, поэтому
 * в сжатом поле обрезанного столбца нет. У правого поля точки прижаты к правому краю, как в макете.
 */
.baserd-numbers .baserd-numbers__decor {
	position: relative;
	top: 11px;
	flex: 0 1 240px;
	min-width: 0;
	height: 348px;
}

.baserd-numbers__decor::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	width: calc(round(down, 100% - 6px, 18px) + 6px);
	background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent) 2.6px, transparent 3.4px);
	background-size: 18px 18px;
	pointer-events: none;
}

.baserd-numbers__decor--right::before {
	right: 0;
	left: auto;
}

/*
 * 748:47814 и 748:47817: та же звезда, что в FAQ (star.webp, тот же размер и поворот) и то же свечение secondary 20%
 * под ней. Левая — 3 правее и 188 ниже угла поля, правая выходит за поле на 17 вправо и на 72 вверх.
 */
.baserd-numbers .baserd-numbers__star {
	position: absolute;
	isolation: isolate;
	margin: 0;
}

.baserd-numbers .baserd-numbers__decor--left .baserd-numbers__star {
	--baserd-glow: 139.8px;
	top: 188px;
	left: 3px;
	width: 193.56px;
}

.baserd-numbers .baserd-numbers__decor--right .baserd-numbers__star {
	--baserd-glow: 97px;
	top: -72.19px;
	right: -17.1px;
	width: 199.81px;
	rotate: 5.9deg;
}

.baserd-numbers__star::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: var(--baserd-glow);
	height: var(--baserd-glow);
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	opacity: 0.2;
	filter: blur(83px);
	translate: -50% -50%;
	pointer-events: none;
}

.baserd-numbers__star img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto 486 / 494;
}

/*
 * Столбики 748:47058–748:47111: блок 621 × 375. Сетка 577 × 336 цвета line: вертикальные линии через 48 от 16,
 * горизонтальные через 48 от 15, последняя — основание столбиков; справа через 8 подписи 36 по центру. Столбики 72
 * через 40 от 85, подпись 12/16 muted через 8 под столбиком; последний — primary.
 */
.baserd-numbers .baserd-numbers__revenue {
	position: relative;
	flex: none;
	width: 621px;
	height: 375px;
	margin-left: 45px;
}

.baserd-numbers .baserd-numbers__revenue::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 577px;
	height: 337px;
	background:
		linear-gradient(var(--wp--preset--color--line) 0 1px, transparent 1px) 0 0 / 100% 48px repeat-y,
		linear-gradient(90deg, var(--wp--preset--color--line) 0 1px, transparent 1px) 0 1px / 48px calc(100% - 1px) repeat-x;
	pointer-events: none;
}

.baserd-numbers .baserd-numbers__revenue p {
	margin: 0;
}

/* Шкала сумм Space Mono 12/16 muted: столбец 36 по центру, подписи через 32 от 7. */
.baserd-numbers .baserd-numbers__money {
	position: absolute;
	top: 7px;
	left: 585px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
	width: 36px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--size-12);
	line-height: var(--wp--custom--line-height--size-12);
	text-align: center;
	color: var(--wp--preset--color--muted);
}

.baserd-numbers .baserd-numbers__bars {
	position: absolute;
	bottom: 0;
	left: 85px;
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--40);
}

.baserd-numbers .baserd-numbers__bar {
	--bar: var(--wp--preset--color--contrast);
	position: relative;
	width: 72px;
	padding-top: calc(var(--height) + 8px);
	font-size: var(--wp--preset--font-size--size-12);
	line-height: var(--wp--custom--line-height--size-12);
	text-align: center;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
}

.baserd-numbers .baserd-numbers__bar::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--height);
	background-color: var(--bar);
}

.baserd-numbers .baserd-numbers__bar:nth-child(1) {
	--height: 221px;
}

.baserd-numbers .baserd-numbers__bar:nth-child(2) {
	--height: 176px;
}

.baserd-numbers .baserd-numbers__bar:nth-child(3) {
	--height: 250px;
}

.baserd-numbers .baserd-numbers__bar:nth-child(4) {
	--height: 311px;
	--bar: var(--wp--preset--color--primary);
}

/*
 * Последний месяц (888:7511, 888:7512; front#1048) — тот, над которым подсказка: снаружи обводка 1 px primary
 * 20%, подпись белым. Наведённый столбик (888:7508, 888:7509) — обводка 3 px белым 20% снаружи, подпись белым.
 * Подсказку с суммой над наведённым столбиком макет показывает той же суммой, что у последнего месяца: сумм по
 * месяцам на странице нет, а выдуманные цифры выручки показывать нельзя, поэтому подсказка одна.
 */
.baserd-numbers .baserd-numbers__bar:nth-child(4) {
	color: var(--wp--preset--color--contrast);
}

.baserd-numbers .baserd-numbers__bar:nth-child(4)::before {
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}

@media (hover: hover) {
	.baserd-numbers .baserd-numbers__bar:hover {
		color: var(--wp--preset--color--contrast);
	}

	.baserd-numbers .baserd-numbers__bar:not(:nth-child(4)):hover::before {
		outline: 3px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	}
}

/* Подсказка 748:47095 над последним столбиком: 12/16 белым на surface, поля 8 и 12, снизу ромб-указатель. */
.baserd-numbers .baserd-numbers__tip {
	position: absolute;
	top: 0;
	left: 457px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
	transform: translateX(-50%);
	font-size: var(--wp--preset--font-size--size-12);
	line-height: var(--wp--custom--line-height--size-12);
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
}

.baserd-numbers .baserd-numbers__tip::before {
	content: "";
	position: absolute;
	top: calc(100% - 3.389px);
	left: calc(50% - 3.389px);
	width: 6.778px;
	height: 6.778px;
	transform: rotate(45deg);
	background-color: var(--wp--preset--color--surface);
}

/* Режим высокой контрастности: столбики браузер закрасил бы цветом фона — они системного цвета текста. */
@media (forced-colors: active) {
	.baserd-numbers .baserd-numbers__bar::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/*
 * Уже 1200 правая звезда заходила бы на шкалу сумм, а левая — на сетку: поля точек не показываются, столбики
 * по центру.
 */
@media (max-width: 1199px) {
	.baserd-numbers .baserd-numbers__decor {
		display: none;
	}
}

/*
 * Уже 1440 подписи столбиков 14/20, а не 12/16, как в макете: на планшете текст не мельче 14 (эпик
 * backend#1586), а iPad Pro в альбоме — 1366; ноутбукам той же ширины 14 не мешает (front#949). Шкала сумм
 * шагом 48 по линиям сетки (20 + 28), блок выше на 4, чтобы основание столбиков осталось на последней линии
 * (351), подсказка выше на 4, чтобы не легла на последний столбик.
 */
@media (max-width: 1439px) {
	.baserd-numbers .baserd-numbers__revenue {
		height: 379px;
	}

	.baserd-numbers .baserd-numbers__money {
		top: 5px;
		gap: 28px;
	}

	.baserd-numbers :is(.baserd-numbers__money, .baserd-numbers__bar, .baserd-numbers__tip) {
		font-size: var(--wp--preset--font-size--size-14);
		line-height: var(--wp--custom--line-height--size-14);
	}

	.baserd-numbers .baserd-numbers__tip {
		top: -4px;
	}
}

/*
 * Кадры 846:29391 (768) и 851:35561 (375): цифры сеткой 2 × 2 в линиях. Ряд начинается на линии разделителя
 * (заходит на нижние 24 его полосы), линия между колонками и между рядами — рамками плиток, края — линии сетки
 * страницы. Полоса разделителя непрозрачная и сама positioned, поэтому ряд поднят над ней: иначе линия между
 * колонками пряталась бы под полосой. На 768 нижняя линия ряда — линия следующего разделителя, он заходит
 * на ряд на 24. Плитка 360 × 176, поля 48/48/40/48; цифра 48/56 — пресет size-48 здесь 40/48 (layout.css),
 * поэтому размер задан прямо. Столбики на планшете — рисунок макета 621 × 375 как есть.
 */
@media (max-width: 1023px) {
	.baserd-numbers .baserd-numbers__stats {
		position: relative;
		z-index: 1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: -24px;
		margin-bottom: -24px;
	}

	.baserd-numbers .baserd-numbers__stat {
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--48) var(--wp--preset--spacing--40);
	}

	.baserd-numbers .baserd-numbers__stat:nth-child(odd) {
		border-right: 1px solid var(--wp--preset--color--line);
	}

	/* Рамка в макете внутри плитки: верхнее поле нижнего ряда меньше на её пиксель, и ряд — те же 176. */
	.baserd-numbers .baserd-numbers__stat:nth-child(n + 3) {
		padding-top: calc(var(--wp--preset--spacing--48) - 1px);
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.baserd-numbers .baserd-numbers__stat .baserd-numbers__value {
		font-size: 48px;
		line-height: 56px;
	}
}

/*
 * Телефон, кадр 875:38277 (375): заголовок, через 24 график 327 в полях 24, под ним 48; график вдвое ниже планшетного.
 * В кадре график — рисунок планшета, сжатый до 327 × 171, подписи в нём ~5 px; поэтому, как с front#937, столбики
 * свёрстаны, а не уменьшены: шаг сетки 24 вместо 48, столбики вдвое ниже, подписи 14/20. Сетка с 32 — чтобы
 * подсказка над последним столбиком (через 8) не выходила за блок; нижняя линия на 200. Шкала сумм справа в 40,
 * через 8 от сетки, подписи по линиям (20 + 4). Столбик по центру своей четверти, не шире 72 и с зазором 16,
 * растёт вверх от нижней линии, подпись месяца под ней: на 320 четверть 56, и «Jun 2026» переносится по пробелу,
 * не сдвигая столбик. Блок высотой под две строки подписи.
 */
@media (max-width: 767px) {
	/*
	 * Кадр 851:35561 (375): плитка 176 × 136, поля 24, цифра 32/40 (пресет size-48 здесь 32/40), подпись 14/20.
	 * Нижняя линия ряда своя, и до линии следующего разделителя 48: 24 поля и 24 его полосы.
	 */
	.baserd-numbers .baserd-numbers__stats {
		margin-bottom: var(--wp--preset--spacing--24);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.baserd-numbers .baserd-numbers__stat {
		padding: var(--wp--preset--spacing--24);
	}

	.baserd-numbers .baserd-numbers__stat:nth-child(n + 3) {
		padding-top: calc(var(--wp--preset--spacing--24) - 1px);
	}

	.baserd-numbers .baserd-numbers__stat p {
		font-size: var(--wp--preset--font-size--size-14);
		line-height: var(--wp--custom--line-height--size-14);
	}

	.baserd-numbers .baserd-numbers__stat .baserd-numbers__value {
		font-size: var(--wp--preset--font-size--size-48);
		line-height: var(--wp--custom--line-height--size-48);
	}

	.baserd-numbers.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--48);
	}

	.wp-block-group.baserd-section-heading.baserd-numbers__heading {
		padding-bottom: 0;
	}

	/* Поле 12 плюс поле страницы 12 — те же 24 от края экрана, что в кадре: график 327 на 375. */
	.baserd-numbers .baserd-numbers__body {
		margin-top: var(--wp--preset--spacing--24);
		padding: 0 var(--wp--preset--spacing--12);
	}

	.baserd-numbers .baserd-numbers__revenue {
		flex: 1 1 auto;
		width: auto;
		max-width: 621px;
		height: 248px;
		margin-left: 0;
	}

	.baserd-numbers .baserd-numbers__revenue::before {
		top: 32px;
		width: calc(100% - 48px);
		height: 169px;
		background-size: 100% 24px, 24px calc(100% - 1px);
	}

	.baserd-numbers .baserd-numbers__money {
		top: 22px;
		right: 0;
		left: auto;
		gap: var(--wp--preset--spacing--4);
		width: 40px;
		font-size: var(--wp--preset--font-size--size-14);
		line-height: var(--wp--custom--line-height--size-14);
	}

	.baserd-numbers .baserd-numbers__bars {
		top: 200px;
		right: 48px;
		bottom: auto;
		left: 0;
		align-items: flex-start;
		gap: 0;
	}

	.baserd-numbers .baserd-numbers__bar {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-top: var(--wp--preset--spacing--8);
		font-size: var(--wp--preset--font-size--size-14);
		line-height: var(--wp--custom--line-height--size-14);
		white-space: normal;
	}

	.baserd-numbers .baserd-numbers__bar::before {
		top: auto;
		bottom: 100%;
		width: min(72px, 100% - 16px);
		height: calc(var(--height) / 2);
		margin: 0 auto;
	}

	.baserd-numbers .baserd-numbers__tip {
		top: 0;
		left: calc((100% - 48px) * 0.875);
		font-size: var(--wp--preset--font-size--size-14);
		line-height: var(--wp--custom--line-height--size-14);
	}
}