/*
 * Партнёрская программа — Figma 748:47878, y 12855–14552 (паттерн baserd/partner), секция светлой части
 * (section-light.css): разделитель (divider.css), шапка на всю ширину с линией снизу, схема, две кнопки и
 * четыре преимущества сеткой 2×2. Планшет — front#808, телефон — кадр 875:53461 (front#1047).
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

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

/*
 * 748:47879: шапка заходит на нижнюю половину разделителя (gap −29), как заголовки секций, и кончается линией
 * 1px light-line по центру границы на всю ширину страницы, места она не занимает. ::before, потому что ::after
 * блока в редакторе занят рамкой выделения.
 */
.baserd-partner .baserd-partner__head {
	position: relative;
	margin-top: -29px;
}

.baserd-partner__head::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.5px;
	left: 0;
	height: 1px;
	background-color: var(--wp--preset--color--line);
	pointer-events: none;
}

/*
 * Поля 72 и 48; слева надзаголовок и h2 через 8, справа текст 20/28 muted, колонки по 568 через 48, обе по
 * центру по высоте.
 */
.baserd-partner .baserd-partner__heading {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--48);
	padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--48);
}

.baserd-partner .baserd-partner__title {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	min-width: 0;
}

.baserd-partner .baserd-partner__title > * {
	margin: 0;
}

.baserd-partner .baserd-partner__lead {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--size-20);
	line-height: var(--wp--custom--line-height--size-20);
	color: var(--wp--preset--color--muted);
}

/*
 * Схема — Group 43: поле точек 1280×464 (Frame 155) и поверх него рисунок 1186×464 по центру (748:50260, в
 * макете растр с зашитыми подписями). Здесь рисунок собран заново по геометрии растра: подписи — два списка
 * блоков, линии — маска scheme-lines.svg (левая половина, правая — она же зеркально), точки и свечение — CSS.
 * Все длины в единицах --u: 1px, пока колонка не у́же 1218 (рисунок 1186 и по 16 до линий сетки), дальше схема
 * уменьшается целиком вместе с текстом и полями (правило front#808 для композиций в пикселях макета): крайние
 * плашки не встают на линию сетки. --u считается там, где её читают: 100cqw — ширина колонки (контейнер
 * .baserd-partner__scheme).
 */
.baserd-partner .baserd-partner__scheme {
	--u: min(1px, 100cqw / 1218);
	container-type: inline-size;
}

/*
 * Свечение вокруг маскота: secondary 4% в центре, к радиусу 345 сходит на нет почти линейно (по растру: 9/255
 * у краёв маскота, 1/255 на 310).
 */
.baserd-partner .baserd-partner__stage {
	position: relative;
	width: calc(1186 * var(--u));
	height: calc(464 * var(--u));
	margin: 0 auto;
	background-image: radial-gradient(circle calc(345 * var(--u)) at 50% 49.8%, color-mix(in srgb, var(--wp--preset--color--secondary) 4%, transparent), transparent);
}

/*
 * Поле точек на всю колонку: круги 6 с шагом 18, первый центр в (8.5, 6.5) от угла, чёрный 9% — на белом это
 * contrast светлой секции (#171717) 10%. Как в схеме industries, цвет — фон, форма — маска.
 */
.baserd-partner__stage::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50cqw);
	width: 100cqw;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	-webkit-mask: radial-gradient(circle at calc(9 * var(--u)) calc(9 * var(--u)), #000 calc(3 * var(--u)), transparent calc(3 * var(--u) + 0.5px)) calc(-0.5 * var(--u)) calc(-2.5 * var(--u)) / calc(18 * var(--u)) calc(18 * var(--u));
	mask: radial-gradient(circle at calc(9 * var(--u)) calc(9 * var(--u)), #000 calc(3 * var(--u)), transparent calc(3 * var(--u) + 0.5px)) calc(-0.5 * var(--u)) calc(-2.5 * var(--u)) / calc(18 * var(--u)) calc(18 * var(--u));
	pointer-events: none;
}

/* Половины схемы: слева что делает партнёр, справа что даёт Baserd. Линии 2 primary к стрелкам у маскота. */
.baserd-partner .baserd-partner__steps {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(593 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.baserd-partner .baserd-partner__steps.is-from {
	left: 0;
}

.baserd-partner .baserd-partner__steps.is-to {
	right: 0;
}

.baserd-partner__steps::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("../images/partner/scheme-lines.svg") 0 0 / 100% 100% no-repeat;
	mask: url("../images/partner/scheme-lines.svg") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

.baserd-partner__steps.is-to::before {
	transform: scaleX(-1);
}

/*
 * Плашка: заливка surface, обводка 1.7 line, текст 28/36 contrast, от края до букв ~30.5, высота 97.1. Центры
 * плашек на линиях (y 80.2, 230.8, 381.5); левые прижаты правым краем к x 309.9, правые — левым к 876.1, так
 * что длинный перевод растёт наружу до края схемы (309.9 от точки — ширина самой широкой подписи макета,
 * «Technical expertise»), дальше переносится, и плашка растёт по высоте от центра. Шире нельзя: плашка
 * вышла бы за край рисунка в поле 16u до линии сетки.
 * В растре подписи ужаты по ширине на ~5% при той же высоте заглавных (19.0), оси ширины у шрифта нет —
 * ближе всего межбуквенный −0.75: ширина всех шести подписей сходится с растром в пределах 1 px. Обводка —
 * тень внутрь, а не border: рамку 1.7 браузер округляет до 1, тень — нет.
 */
.baserd-partner .baserd-partner__steps > li {
	position: absolute;
	top: calc(80.2 * var(--u));
	box-sizing: border-box;
	width: max-content;
	max-width: calc(309.9 * var(--u));
	margin: 0;
	padding: calc(30.55 * var(--u)) calc(29.3 * var(--u));
	background-color: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 calc(1.7 * var(--u)) var(--wp--preset--color--line);
	font-size: calc(28 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(-0.75 * var(--u));
	color: var(--wp--preset--color--contrast);
	transform: translateY(-50%);
}

.baserd-partner .baserd-partner__steps > li:nth-child(2) {
	top: calc(230.8 * var(--u));
}

.baserd-partner .baserd-partner__steps > li:nth-child(3) {
	top: calc(381.5 * var(--u));
}

.baserd-partner .baserd-partner__steps.is-from > li {
	right: calc(283.1 * var(--u));
}

.baserd-partner .baserd-partner__steps.is-to > li {
	left: calc(283.1 * var(--u));
}

/*
 * Точка на краю плашки, откуда идёт линия: 6.7, сердцевина contrast, кольцо 1.7 primary — градиентом, по той же
 * причине, что обводка.
 */
.baserd-partner__steps > li::before {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(6.7 * var(--u));
	height: calc(6.7 * var(--u));
	margin-top: calc(-3.35 * var(--u));
	border-radius: 50%;
	background-image: radial-gradient(circle closest-side, var(--wp--preset--color--contrast) calc(1.65 * var(--u)), var(--wp--preset--color--primary) calc(1.65 * var(--u) + 0.4px));
}

.baserd-partner__steps.is-from > li::before {
	right: calc(-3.35 * var(--u));
}

.baserd-partner__steps.is-to > li::before {
	left: calc(-3.35 * var(--u));
}

/* Маскот 134×134 по центру схемы (x 526, y 164). */
.baserd-partner .baserd-partner__mascot {
	position: absolute;
	top: calc(164 * var(--u));
	left: calc(526 * var(--u));
	width: calc(134 * var(--u));
	margin: 0;
}

.baserd-partner__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Frame 141: две строки по 378 из двух ячеек 640. Линии 1px light-line по центру границ ячеек, как в макете
 * (обводки CENTER): у соседних ячеек они совпадают, крайние ложатся на линии сетки страницы, места не
 * занимают. В ячейке поля 48, по центру иллюстрация 150, через 24 заголовок 24/32 500 и через 4 текст 16/24
 * muted; короткая ячейка центрируется по высоте строки.
 */
.baserd-partner .baserd-partner__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(378px, auto);
	/* Кнопки макета (Frame 153) между схемой и сеткой убраны (#963): на лендинге нет контакта, куда им вести.
	 * Сетка держит от схемы тот же отступ, что держали кнопки. */
	margin-top: var(--wp--preset--spacing--48);
}

.baserd-partner .baserd-partner__benefit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--24);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--48);
	text-align: center;
}

.baserd-partner__grid > .baserd-partner__benefit::before {
	content: "";
	position: absolute;
	inset: -0.5px;
	border: 1px solid var(--wp--preset--color--line);
	pointer-events: none;
}

.baserd-partner .baserd-partner__art {
	margin: 0;
}

.baserd-partner__art img {
	display: block;
	width: 150px;
	height: 150px;
}

.baserd-partner .baserd-partner__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.baserd-partner .baserd-partner__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-24);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-24);
	color: var(--wp--preset--color--contrast);
}

.baserd-partner .baserd-partner__about {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--muted);
}

/*
 * 888:10677 (front#1048): наведённая ячейка — заливка цвета выделения (light-panel #FAFAFA), текст цвета
 * заголовка (888:10687). Ссылок в ячейке нет, состояние только для мыши.
 */
@media (hover: hover) {
	.baserd-partner .baserd-partner__benefit:hover {
		background-color: var(--wp--custom--highlight);
	}

	.baserd-partner .baserd-partner__benefit:hover .baserd-partner__about {
		color: var(--wp--preset--color--contrast);
	}
}

@media (forced-colors: active) {
	.baserd-partner__steps::before,
	.baserd-partner__steps > li::before {
		forced-color-adjust: none;
		background: CanvasText;
	}

	.baserd-partner .baserd-partner__steps > li {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}

/*
 * Телефон — кадр 875:53461 и 875:53631 (375, front#1047): текст под заголовком через 24, 16/24, поля 48, 24
 * и 24 от края экрана; кнопки по одной во всю ширину через 24; преимущества столбцом, поля 20, иллюстрация 150
 * и имя 24/32, как на 1440. Схема в кадре — картинка 375 × 136 с подписями около 5 px; здесь она уменьшается
 * сама (--u), а на 640 и уже встаёт столбцом (ниже, front#940) — подписи 14 и крупнее.
 */
@media (max-width: 767px) {
	.baserd-partner.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--48);
	}

	.baserd-partner .baserd-partner__heading {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--24);
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	}

	.baserd-partner .baserd-partner__lead {
		font-size: var(--wp--preset--font-size--size-16);
		line-height: var(--wp--custom--line-height--size-16);
	}

	.baserd-partner .baserd-partner__title,
	.baserd-partner .baserd-partner__lead {
		flex: none;
	}

	.baserd-partner .baserd-partner__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		margin-top: var(--wp--preset--spacing--24);
	}

	.baserd-partner .baserd-partner__benefit {
		padding: 20px;
	}
}

@media (max-width: 640px) {
	/*
	 * Схема столбцом (front#940) на 640 и уже: уменьшенная целиком, там она даёт подписи мельче 14 (на 640 — 13.98,
	 * с 641 — 14, на 320 — 6.6). Сверху что делает партнёр, посередине маскот, снизу что даёт Baserd — порядок разметки.
	 * Линия primary идёт за плашками через середину к маскоту, точка — на краю плашки со стороны маскота,
	 * как на 1440. Стрелки зашиты в scheme-lines.svg и в столбце не показываются. Длины в --u здесь в пикселях
	 * макета: поле точек, свечение и маскот в натуральную величину.
	 */
	.baserd-partner .baserd-partner__scheme {
		--u: 1px;
	}

	.baserd-partner .baserd-partner__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--24);
		width: auto;
		height: auto;
		padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--16);
	}

	.baserd-partner .baserd-partner__steps {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--8);
		width: auto;
		max-width: 100%;
	}

	/* Линия выходит за край списка на зазор до маскота. */
	.baserd-partner__steps::before {
		right: auto;
		left: calc(50% - 1px);
		width: 2px;
		-webkit-mask: none;
		mask: none;
	}

	.baserd-partner__steps.is-from::before {
		bottom: calc(-1 * var(--wp--preset--spacing--24));
	}

	.baserd-partner__steps.is-to::before {
		top: calc(-1 * var(--wp--preset--spacing--24));
		transform: none;
	}

	/* Вес (0,4,1): перебивает и строки плашек (nth-child), и их края по сторонам (is-from, is-to). */
	.baserd-partner .baserd-partner__steps:is(.is-from, .is-to) > li:nth-child(n) {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		max-width: 100%;
		padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
		font-size: var(--wp--preset--font-size--size-16);
		line-height: var(--wp--custom--line-height--size-16);
		letter-spacing: normal;
		text-align: center;
		transform: none;
	}

	.baserd-partner__steps:is(.is-from, .is-to) > li::before {
		right: auto;
		left: 50%;
		margin: 0 0 0 calc(-3.35 * var(--u));
	}

	.baserd-partner__steps.is-from > li::before {
		top: auto;
		bottom: calc(-3.35 * var(--u));
	}

	.baserd-partner__steps.is-to > li::before {
		top: calc(-3.35 * var(--u));
	}

	.baserd-partner .baserd-partner__mascot {
		position: relative;
		top: auto;
		left: auto;
	}
}