/*
 * Foundation — Figma 748:51275, y 15257–16142 (паттерн baserd/foundation), последняя секция светлой части главной:
 * стоит в группе Light section (section-light.css), поэтому цвета текста и линий светлые без правил здесь.
 * Разделитель (divider.css), заголовок слева с приглушёнными словами (748:51283) и полоса 748:51285 через всю
 * страницу: слева подводка и четыре преимущества (748:51286), справа глобус на светлой панели (748:51299).
 * Уже 1440 колонки сжимаются в пропорции макета; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

/*
 * 748:51283: заходит на нижнюю половину разделителя (gap −29), поля 72 сверху и 48 по бокам колонки (x 128),
 * h2 40/48 по левому краю в две строки. «global infrastructure,», «applications» и «business» — чёрный 40%,
 * выделение цвета «Contrast 40%». До полосы 48.
 */
.wp-block-group.baserd-foundation__heading {
	margin-top: -29px;
	padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--48) 0;
}

.wp-block-group.baserd-foundation__heading > * {
	margin: 0;
}

/*
 * Полоса 748:51285: линии сверху и снизу через всю ширину экрана (#EEEEEE, в макете по центру края), внутри
 * колонка 1280: текст 712 и панель 568. Линии — ::before, места не занимают; ::after блока в редакторе занят
 * рамкой выделения.
 */
.baserd-foundation .baserd-foundation__band {
	position: relative;
	margin-top: var(--wp--preset--spacing--48);
}

.baserd-foundation .baserd-foundation__band::before,
.baserd-foundation .baserd-foundation__item::before,
.baserd-foundation .baserd-foundation__globe::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 0 solid var(--wp--preset--color--line);
	pointer-events: none;
}

/* Линии полосы поверх преимуществ: заливка наведённого последнего (front#1048) иначе закрыла бы нижнюю. */
.baserd-foundation .baserd-foundation__band::before {
	z-index: 1;
	border-block-width: 1px;
}

.baserd-foundation .baserd-foundation__row {
	display: grid;
	grid-template-columns: minmax(0, 712fr) minmax(0, 568fr);
}

/* 748:51286: подводка сверху, список внизу колонки (SPACE_BETWEEN), между ними не меньше 48. */
.baserd-foundation .baserd-foundation__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--48);
}

.baserd-foundation .baserd-foundation__text > *,
.baserd-foundation .baserd-foundation__list > * {
	margin: 0;
}

/* 748:51288: поля 48 сверху и по бокам, 20/28. */
.baserd-foundation .baserd-foundation__lead {
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--48) 0;
	font-size: var(--wp--preset--font-size--size-20);
	line-height: var(--wp--custom--line-height--size-20);
}

/*
 * Преимущество (748:51290…51297): поля 20 и 48, название 24/32 500 и через 8 текст 16/24 серым; линия сверху
 * у каждого, низ последнего — линия полосы. Серые названия — цвет абзаца Muted из редактора.
 */
.baserd-foundation .baserd-foundation__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: 20px var(--wp--preset--spacing--48);
	color: var(--wp--preset--color--muted);
}

.baserd-foundation .baserd-foundation__item::before {
	border-top-width: 1px;
}

.baserd-foundation .baserd-foundation__item > * {
	margin: 0;
}

.baserd-foundation .baserd-foundation__item .baserd-foundation__name {
	font-size: var(--wp--preset--font-size--size-24);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-24);
}

.baserd-foundation .baserd-foundation__item .baserd-foundation__name:not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

/*
 * 888:11695 (front#1048): у первого преимущества — того, что раскрыто подписью, — сверху слева оранжевая черта
 * 178×2 по центру верхней линии, как у наведённой гарантии в security. Черта — ::after (в редакторе он занят
 * рамкой выделения, там черты нет).
 */
.baserd-foundation__list > .baserd-foundation__item:first-child:not(.block-editor-block-list__block)::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 178px;
	max-width: 100%;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	pointer-events: none;
}

/*
 * 888:11698 (front#1048): наведённое преимущество — заливка цвета выделения (light-panel #FAFAFA), серое имя
 * цвета текста (888:11699). Класс цвета Muted из редактора идёт с !important, поэтому у имени подменён сам
 * токен muted. Ссылок нет, состояние только для мыши.
 */
@media (hover: hover) {
	.baserd-foundation .baserd-foundation__item:hover {
		background-color: var(--wp--custom--highlight);
	}

	.baserd-foundation .baserd-foundation__item:hover .baserd-foundation__name {
		--wp--preset--color--muted: var(--wp--preset--color--contrast);
	}
}

/*
 * Панель 748:51299: квадрат 568, фон #FAFAFA, рамка 1 px; глобус 360 (748:51300) по центру. Картинка — рендер узла
 * 2x на фоне панели, WebP; украшение, alt пустой.
 */
.baserd-foundation .baserd-foundation__globe {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0;
	background-color: var(--wp--preset--color--light-panel);
}

.baserd-foundation .baserd-foundation__globe::before {
	border-width: 1px;
}

.baserd-foundation .baserd-foundation__globe img {
	display: block;
	width: 360px;
	max-width: 100%;
	height: auto;
}

/*
 * Планшет — front#808, мобильного макета нет. На экране меньше 1280 панель уже не квадрат, а высотой со строку:
 * текст слева переносится и становится выше панели. Планшет: панель с глобусом под списком на всю ширину колонки,
 * высотой 400. Телефон — кадр 881:54551 (375, front#1047): заголовок от линии разделителя, поля 48, 12 и 24;
 * панель квадратом над подводкой (не выше 400, как на планшете), глобус 274; подводка и преимущества с полями
 * 24 и 12, строка 80.
 */
@media (max-width: 1279px) {
	.baserd-foundation .baserd-foundation__globe {
		aspect-ratio: auto;
	}
}

@media (max-width: 1023px) {
	.baserd-foundation .baserd-foundation__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.baserd-foundation .baserd-foundation__globe {
		height: 400px;
	}
}

@media (max-width: 767px) {
	.baserd-foundation.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--48);
	}

	/* От линии разделителя, а не на 5 выше неё, как у десктопа (-29); поле 12 плюс поле страницы 12 — 24 от края. */
	.wp-block-group.baserd-foundation__heading {
		margin-top: -24px;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	}

	.baserd-foundation .baserd-foundation__band {
		margin-top: 0;
	}

	.baserd-foundation .baserd-foundation__text {
		gap: 0;
	}

	.baserd-foundation .baserd-foundation__lead {
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--12);
	}

	.baserd-foundation .baserd-foundation__item {
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--12);
	}

	.baserd-foundation .baserd-foundation__globe {
		order: -1;
		/* Ширина явно: иначе max-height через aspect-ratio сужает и её, и панель не доходит до края колонки. */
		width: 100%;
		height: auto;
		max-height: 400px;
		aspect-ratio: 1;
	}

	.baserd-foundation .baserd-foundation__globe img {
		width: 274px;
	}
}