/*
 * О компании — Figma 657:6250, y 4040–4813 (паттерн baserd/about): разделитель (divider.css), абзац
 * о команде и таймлайн из шести вех. Уже 1280 колонки таймлайна сжимаются в той же пропорции; планшет и
 * телефон — кадры 846:24843 и 851:31013 (front#1045), в конце файла.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

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

/*
 * 657:6258: поля 72 и 48, абзац 40/48 500 шириной 959. Блок заходит на нижнюю половину разделителя
 * (gap −29), как заголовки секций. Вторая половина абзаца — белый 40%: выделение цветом «Contrast 40%»
 * (<mark class="has-inline-color has-contrast-40-color">), его меняют в редакторе кнопкой Highlight.
 */
.baserd-about .baserd-about__intro {
	position: relative;
	margin-top: -29px;
	padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--48);
}

.baserd-about .baserd-about__lead {
	max-width: 959px;
	margin: 0;
	font-size: var(--wp--preset--font-size--size-40);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-40);
	color: var(--wp--preset--color--contrast);
}

/*
 * 657:6260: таймлайн высотой 336 — шесть полос 64 со ступенями цвета, от правого края каждой полосы
 * линия 1px белый 30% к подписи: у нечётных вех вниз на 104, у чётных вверх на 88; подписи — у линии
 * слева, через 12 от неё. Полосы в макете 195–197 через 2 и на полпикселя левее рамки 1280, отсюда
 * колонки 195fr … 196fr и поля 47.5: полосы на тех же x, что в макете.
 */
.baserd-about .baserd-about__timeline {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(0, 195fr) minmax(0, 196fr) minmax(0, 196fr)
		minmax(0, 197fr) minmax(0, 195fr) minmax(0, 196fr);
	grid-template-rows: minmax(336px, auto);
	column-gap: 2px;
	padding: 0 47.5px;
}

/*
 * На телефоне шкала листается вбок и встаёт в фокус с клавиатуры (functions.php, configs-scroll.js). Кольцо
 * внутри: шкала там во всю ширину окна.
 */
.baserd-about .baserd-about__timeline:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}

/*
 * 657:6263–7229: сетка точек 6 px с шагом 18, белый 6% (точка 30% в группе 20%), 66 × 16 точек. Начинается
 * от левого края полос (47.5 от края таймлайна, на 1440 это x 127.5) и 30 от верха. Область обрезана сразу
 * за последней точкой: 65 × 18 + 6 = 1176 в ширину (отсюда справа 56.5) и 15 × 18 + 6 = 276 в высоту
 * (отсюда снизу 30), иначе в ряд встала бы 67-я точка. Лежит под полосами и подписями.
 */
.baserd-about__timeline::before {
	content: "";
	position: absolute;
	top: 30px;
	right: 56.5px;
	bottom: 30px;
	left: 47.5px;
	background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) 2.6px, transparent 3.4px);
	background-size: 18px 18px;
	pointer-events: none;
}

/*
 * Веха — колонка на всю высоту таймлайна: полоса 64 на y 128 — фон колонки, линия — ::before
 * (::after блока в редакторе занят рамкой выделения). Подпись у нечётных внизу (низ на 296), у чётных
 * вверху (верх на 40). Цвет полос — белый 10, 20, 30 и 40% поверх base, белый и primary; в макете
 * это сплошные цвета, точки под ними не видны. --baserd-about-label — ширина рамки подписи в макете
 * (657:7326…7341), она шире текста. Всё по номеру вехи: таймлайн рассчитан на шесть (README).
 */
.baserd-about .baserd-about__milestone {
	--baserd-about-bar: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, var(--wp--preset--color--base));
	--baserd-about-label: 149px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 40px 13px 40px 1px;
	background: linear-gradient(var(--baserd-about-bar), var(--baserd-about-bar)) 0 128px / 100% 64px no-repeat;
}

.baserd-about .baserd-about__milestone:nth-child(even) {
	justify-content: flex-start;
}

.baserd-about .baserd-about__milestone:nth-child(2) {
	--baserd-about-bar: color-mix(in srgb, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--base));
	--baserd-about-label: 182px;
}

.baserd-about .baserd-about__milestone:nth-child(3) {
	--baserd-about-bar: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, var(--wp--preset--color--base));
	--baserd-about-label: 179px;
}

.baserd-about .baserd-about__milestone:nth-child(4) {
	--baserd-about-bar: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, var(--wp--preset--color--base));
	--baserd-about-label: 138px;
}

.baserd-about .baserd-about__milestone:nth-child(5) {
	--baserd-about-bar: var(--wp--preset--color--contrast);
	--baserd-about-label: 157px;
}

.baserd-about .baserd-about__milestone:nth-child(6) {
	--baserd-about-bar: var(--wp--preset--color--primary);
	--baserd-about-label: 131px;
}

/*
 * Линия 1px у правого края полосы, её середина на полпикселя левее края — как в макете (322 при крае
 * 322.5). В рендере Figma она ложится на два пикселя по половине яркости, в браузере — на один.
 */
.baserd-about__milestone::before {
	content: "";
	position: absolute;
	top: 192px;
	right: 0;
	width: 1px;
	height: 104px;
	background-color: var(--wp--preset--color--contrast-30);
	pointer-events: none;
}

.baserd-about__milestone:nth-child(even)::before {
	top: 40px;
	height: 88px;
}

/*
 * 657:7326: подпись прижата вправо, правый край на 12 левее линии; текст в ней по левому краю. Ширина —
 * как рамка в макете, но минимальная: длиннее текст — шире подпись, до ширины колонки без 14 (1 слева
 * и 13 справа), дальше перенос, как «Infrastructure at scale» в макете. В узкой колонке (окно уже 1440)
 * подпись не шире колонки.
 */
.baserd-about .baserd-about__label {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	gap: var(--wp--preset--spacing--4);
	min-width: min(var(--baserd-about-label), 100%);
	max-width: 100%;
}

.baserd-about .baserd-about__label > * {
	margin: 0;
}

/* 657:7327: название 18/24 400 белым; 657:7328: дата Space Mono 14/20 400 muted. */
.baserd-about .baserd-about__name {
	font-size: var(--wp--preset--font-size--size-18);
	line-height: var(--wp--custom--line-height--size-18);
	color: var(--wp--preset--color--contrast);
}

.baserd-about .baserd-about__date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--muted);
}

/*
 * Планшет — кадр 846:24843 (front#1045): абзац 40/48 на всю колонку, под ним линия во всю ширину экрана. Шкала
 * встаёт столбцом: шесть полос 64 × 196 через 2 по центру (на 2 левее середины, как в макете; процент фона
 * считается от свободного места, поэтому сдвиг 2, а не 34), подпись нечётной
 * вехи слева от полосы, чётной справа, через 16; под подписью через 14 линия от её края до полосы — длиной
 * в подпись и 16. Ширина подписи — рамка из макета (--baserd-about-label), она та же, что на десктопе. Поле точек
 * на всю колонку без 6 по бокам, от 24 сверху; три звезды star.webp с искрами и свечением — по макету от
 * середины, на узком экране крайние уходят за край. Искры в макете #F0693C, в палитре такого нет: смесь primary
 * 70% и secondary (#EE6D37). Свечение в макете размыто: здесь круг вдвое шире угасает к краю.
 */
@media (max-width: 1023px) {
	.baserd-about.has-grid-lines {
		padding-bottom: 0;
	}

	.baserd-about .baserd-about__intro {
		margin-top: -24px;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24);
	}

	.baserd-about .baserd-about__intro::before {
		content: "";
		position: absolute;
		right: calc(var(--wp--style--root--padding-right) * -1);
		bottom: -0.5px;
		left: calc(var(--wp--style--root--padding-left) * -1);
		height: 1px;
		background-color: var(--wp--preset--color--contrast-10);
		pointer-events: none;
	}

	.baserd-about .baserd-about__lead {
		max-width: none;
		font-size: 40px;
		line-height: 48px;
	}

	.baserd-about .baserd-about__timeline {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 2px;
		padding: var(--wp--preset--spacing--48) 0;
	}

	.baserd-about__timeline::before {
		top: 24px;
		right: 6px;
		bottom: 9px;
		left: 6px;
	}

	/* В редакторе ::after блока занят рамкой выделения: там звёзд нет. */
	.baserd-about__timeline:not(.block-editor-block-list__block)::after {
		content: "";
		position: absolute;
		top: 0;
		left: calc(50% - 360px);
		width: 720px;
		height: 1100px;
		background:
			url("../images/features/star.webp") 569px 57px / 113px 114px no-repeat,
			url("../images/features/star.webp") 545px 932px / 137px 138px no-repeat,
			url("../images/features/star.webp") 32px 352px / 140px 142px no-repeat,
			radial-gradient(circle 4px at 571px 131px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 5.5px at 593.5px 72.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 4px at 663px 156px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 4.5px at 547.5px 1020.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 6.5px at 574.5px 950.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 4.5px at 658.5px 1051.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 4.5px at 34.5px 442.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 6.5px at 62.5px 370.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 4.5px at 148.5px 473.5px, color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary)) 99%, transparent),
			radial-gradient(circle 53px at 625.5px 113.5px, color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent), transparent),
			radial-gradient(circle 64px at 613px 1001px, color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent), transparent),
			radial-gradient(circle 65px at 101.5px 422.5px, color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent), transparent);
		pointer-events: none;
	}

	.baserd-about .baserd-about__milestone,
	.baserd-about .baserd-about__milestone:nth-child(even) {
		justify-content: flex-end;
		min-height: 196px;
		padding: 0 0 15px;
		background: linear-gradient(var(--baserd-about-bar), var(--baserd-about-bar)) calc(50% - 2px) 0 / 64px 100% no-repeat;
	}

	.baserd-about__milestone::before,
	.baserd-about__milestone:nth-child(even)::before {
		content: none;
	}

	.baserd-about .baserd-about__label {
		position: relative;
		align-self: flex-end;
		box-sizing: border-box;
		width: var(--baserd-about-label);
		min-width: 0;
		max-width: calc(50% - 50px);
		margin-right: calc(50% + 50px);
	}

	.baserd-about .baserd-about__milestone:nth-child(even) .baserd-about__label {
		align-self: flex-start;
		max-width: calc(50% - 46px);
		margin-right: 0;
		margin-left: calc(50% + 46px);
	}

	.baserd-about__label::before {
		content: "";
		position: absolute;
		right: -16px;
		bottom: -14px;
		left: 0;
		height: 1px;
		background-color: var(--wp--preset--color--contrast-30);
		pointer-events: none;
	}

	.baserd-about__milestone:nth-child(even) .baserd-about__label::before {
		right: 0;
		left: -16px;
	}
}

/*
 * Телефон — кадр 851:31013: абзац 24/32, через 24 шкала как на десктопе — шесть полос 195–197 × 64 через 2 рядом,
 * линии к подписям вниз и вверх, — но целиком на 30 выше (полосы с y 98, подписи чётных с 10) и листается вбок
 * пальцем. Ряд во всю ширину экрана, полосы с 34 от края; поле точек 1284 × 276 от 24, как в макете. Полосы
 * прокрутки 105 × 8 по центру под рядом в макете нет у нас: системная полоса на телефоне появляется только при
 * прокрутке, а свою рисовать без скрипта нечем; что ряд листается, видно по обрезанной справа вехе. Звёзд нет.
 * Ряд залит base, как кадр 864:36022: линии сетки страницы под ним не видны.
 */
@media (max-width: 639px) {
	.baserd-about .baserd-about__intro {
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	}

	.baserd-about .baserd-about__intro::before {
		content: none;
	}

	.baserd-about .baserd-about__lead {
		font-size: var(--wp--preset--font-size--size-24);
		line-height: var(--wp--custom--line-height--size-24);
	}

	.baserd-about .baserd-about__timeline {
		left: calc(var(--wp--style--root--padding-left) * -1);
		box-sizing: border-box;
		grid-template-columns: 195px 196px 196px 197px 195px 196px;
		grid-template-rows: minmax(278px, auto);
		column-gap: 2px;
		row-gap: 0;
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		max-width: none;
		margin-bottom: var(--wp--preset--spacing--48);
		padding: 0 var(--wp--preset--spacing--24) 0 34px;
		background-color: var(--wp--preset--color--base);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-color: var(--wp--preset--color--contrast) var(--wp--preset--color--surface);
		scrollbar-width: thin;
	}

	.baserd-about__timeline::before {
		top: 2px;
		right: auto;
		bottom: auto;
		left: var(--wp--preset--spacing--24);
		width: 1284px;
		height: 276px;
	}

	.baserd-about__timeline:not(.block-editor-block-list__block)::after {
		content: none;
	}

	.baserd-about .baserd-about__milestone,
	.baserd-about .baserd-about__milestone:nth-child(even) {
		min-height: 0;
		padding: 10px 13px 12px 1px;
		background: linear-gradient(var(--baserd-about-bar), var(--baserd-about-bar)) 0 98px / 100% 64px no-repeat;
	}

	.baserd-about .baserd-about__milestone:nth-child(even) {
		justify-content: flex-start;
	}

	.baserd-about__milestone::before {
		content: "";
		top: 162px;
	}

	.baserd-about__milestone:nth-child(even)::before {
		content: "";
		top: 10px;
	}

	.baserd-about .baserd-about__label,
	.baserd-about .baserd-about__milestone:nth-child(even) .baserd-about__label {
		align-self: flex-end;
		width: auto;
		min-width: min(var(--baserd-about-label), 100%);
		max-width: 100%;
		margin: 0;
	}

	.baserd-about__label::before {
		content: none;
	}
}