/*
 * Сетка продуктов — Figma 748:43382, y 10234–11255 (паттерн baserd/bento): разделитель (divider.css),
 * заголовок слева и текст справа, сетка 748:43399 1280×700 по линиям страницы: три колонки по 426.7 и две
 * строки по 350 встык, первая карточка на обе строки. Уже 1440 карточки сжимаются поровну; телефон и
 * планшет — front#808. До 30.09 — 657:5850: сетка 1184×545 с зазорами 12 и заливкой карточек (front#854).
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

/* Линии сетки страницы (748:42095, 748:42096) идут через всю секцию, до самого низа. */
.baserd-bento.has-grid-lines {
	padding-bottom: var(--wp--preset--spacing--72);
}

/*
 * 748:43390: поля 72 и 48; слева надзаголовок и h2 через 8, справа текст 508 (в макете он тянется,
 * заголовок по содержимому), между ними 48, оба прижаты к низу. Блок заходит на нижнюю половину
 * разделителя (gap −29), как заголовки секций. Длинный заголовок другого языка сначала забирает место
 * у текста, пока тот не у́же 336 (три строки английского), дальше переносятся оба.
 */
.baserd-bento .baserd-bento__heading {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--48);
	margin-top: -29px;
	padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--48);
}

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

.baserd-bento .baserd-bento__title > * {
	margin: 0;
}

/* 748:43398: 20/28 400 muted. */
.baserd-bento .baserd-bento__lead {
	flex: 1 1 336px;
	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);
}

/*
 * 748:43399: сетка во всю колонку контента, от линии до линии страницы, без зазоров. Строки парами: шапка
 * карточки и тело (254 = 350 − 96). Карточка берёт пару строк через subgrid, высокая — две пары: так линии
 * под шапками одной строки сетки идут на одной высоте, даже когда название или метка переносятся.
 */
.baserd-bento .baserd-bento__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: auto minmax(254px, auto);
}

/*
 * Линии 748:43400…: у карточек обводка 1 #2A1E3C (line) по центру края, соседние карточки делят одну линию.
 * Здесь каждая линия рисуется один раз: верх и левый край — у сетки, место в раскладке не занимают и лежат на
 * пикселях линий страницы; правый и нижний край — у каждой карточки.
 */
.baserd-bento .baserd-bento__grid::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 1px solid var(--wp--preset--color--line);
	pointer-events: none;
}

/* В макете карточка обрезает содержимое: свечение не выходит за её край. */
.baserd-bento .baserd-bento__card {
	position: relative;
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	box-sizing: border-box;
	overflow: hidden;
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.baserd-bento__grid > .baserd-bento__card:first-child {
	grid-row: span 4;
}

.baserd-bento__grid > .baserd-bento__card:first-child > .baserd-bento__art {
	grid-row: 2 / -1;
}

/*
 * Шапка 748:43402…: 96 с линией снизу (последний пиксель шапки), поля 32 и 48, название 24/32 500 белым,
 * справа от него через 8 метка, оба по центру строки.
 */
.baserd-bento .baserd-bento__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--48) calc(var(--wp--preset--spacing--32) - 1px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * 888:3796 (front#1048): наведённая карточка — заливка цвета выделения (surface #231735), линия под шапкой
 * белая 10% вместо line (888:3798): линия line #2A1E3C на заливке #231735 почти не видна. Верхняя и левая
 * линии сетки (::before сетки) лежат поверх заливки. Ссылок в карточке нет, состояние только
 * для мыши.
 */
@media (hover: hover) {
	.baserd-bento .baserd-bento__card:hover {
		background-color: var(--wp--custom--highlight);
	}

	.baserd-bento .baserd-bento__card:hover > .baserd-bento__head {
		border-bottom-color: var(--wp--preset--color--contrast-10);
	}
}

/*
 * Слово длиннее поля шапки переносится внутри него: карточка обрезает содержимое, и без переноса край
 * названия пропал бы. На 375 и шире все названия помещаются целыми словами (front#877).
 * Строки ровные (balance): иначе браузер рвёт по дефису, когда в первую строку влезает его половина, —
 * «Geschäftliche E- / Mail» вместо «Geschäftliche / E-Mail».
 */
.baserd-bento .baserd-bento__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);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/*
 * Метка 748:43429: 12/16 500 primary заглавными (в макете регистр — стиль текста, сам текст «Best value») на
 * подложке #2E0D05, поля 8 и 4, скругление 4. Шире шапки не бывает: перевод длиннее колонки (на 320 и 390 у fr и de)
 * переносится внутри подложки, и строка сетки растёт целиком, как при переносе названия (ревью Baser в PR #867).
 */
.baserd-bento .baserd-bento__label {
	flex: 0 1 auto;
	max-width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--badge--radius);
	background-color: var(--wp--custom--badge--background);
	font-size: var(--wp--preset--font-size--size-12);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-12);
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
}

/*
 * Иллюстрация по центру тела карточки (всё под шапкой), как в макете: отклонение центров не больше 1 px.
 * position у картинки — чтобы она лежала над свечением.
 */
.baserd-bento .baserd-bento__art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
}

.baserd-bento__art img {
	position: relative;
	display: block;
	max-width: 100%;
}

/*
 * Свечение 748:43401, 748:43431…: круг secondary 10% с размытием 166.44 в Figma (в CSS радиус вдвое меньше,
 * 83.2); 182 в маленькой карточке и 285 в высокой, центр — центр тела карточки. У картинки, а не у карточки:
 * так оно само встаёт по центру тела, какой бы высоты ни была шапка. ::before, потому что ::after блока в
 * редакторе занят рамкой выделения.
 */
.baserd-bento__art::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 182px;
	height: 182px;
	margin: -91px 0 0 -91px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	opacity: 0.1;
	filter: blur(83.2px);
	pointer-events: none;
}

.baserd-bento__grid > .baserd-bento__card:first-child > .baserd-bento__art::before {
	width: 285px;
	height: 285px;
	margin: -142.5px 0 0 -142.5px;
}

/*
 * Метка 14/20, а не 12/16, как в макете 1440: на телефоне и планшете текст не мельче 14 (эпик backend#1586).
 * Уже 1440: iPad Pro в альбоме — 1366, а ноутбукам той же ширины 14 не мешает (front#949).
 */
@media (max-width: 1439px) {
	.baserd-bento .baserd-bento__label {
		font-size: var(--wp--preset--font-size--size-14);
		line-height: var(--wp--custom--line-height--size-14);
	}
}

/*
 * Планшет — кадр 846:29236 (768). Заголовок столбиком: надзаголовок и h2 через 8, подводка 16/24 во всю ширину
 * через 24; поля 48 сверху, 24 по бокам (48 от края окна), до сетки 32. Сетка в две колонки, карточки как
 * на 1440 — шапка 96 с полями 32 и 48, тело 254: слева Cloud VPS на две пары строк, справа Servers и Domains,
 * ниже Corporate email слева и Vibe hosting AI справа. В DOM Vibe идёт раньше Corporate — порядок меняет order,
 * ссылок в карточках нет, обход клавиатурой он не трогает. Под сеткой поле 24: разделитель следующей секции
 * заходит сюда на 24, и его линия встаёт в 48 под сеткой (кадр 375; в кадре 768 — в 40, неточность макета).
 */
@media (max-width: 1023px) {
	.baserd-bento.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--24);
	}

	.baserd-bento .baserd-bento__heading {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--24);
		margin-top: -24px;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
	}

	.baserd-bento .baserd-bento__lead {
		flex: none;
		font-size: var(--wp--preset--font-size--size-16);
		line-height: var(--wp--custom--line-height--size-16);
	}

	.baserd-bento .baserd-bento__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.baserd-bento__grid > .baserd-bento__card:nth-child(4) {
		order: 1;
	}

	.baserd-bento__art img {
		height: auto;
	}
}

/*
 * Телефон — кадр 875:38097 (375): поля 12 в колонке (24 от края экрана), до сетки 24. Карточки одна под другой
 * во всю колонку, каждая 350: шапка 80 с полями 24, название 24/32, тело 270 с картинкой по центру. Картинки —
 * свои у каждой карточки, в размерах 1440 (в кадре у всех одна заглушка). Порядок тот же, что на планшете:
 * Corporate email перед Vibe hosting AI.
 */
@media (max-width: 767px) {
	.baserd-bento .baserd-bento__heading {
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	}

	.baserd-bento .baserd-bento__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto minmax(270px, auto);
	}

	.baserd-bento__grid > .baserd-bento__card:first-child {
		grid-row: span 2;
	}

	.baserd-bento .baserd-bento__head {
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) calc(var(--wp--preset--spacing--24) - 1px);
	}
}