/*
 * Security — Figma 748:50373, y 14552–15257 (паттерн baserd/security), секция светлой части главной: стоит в группе
 * Light section (section-light.css), поэтому цвета текста и линий светлые без правил здесь. Разделитель (divider.css),
 * заголовок секции (section-heading.css) и рамка 1280 × 384 (748:50389): три гарантии слева (748:50390), поле
 * звёзд вокруг шестиугольника посередине (748:50400) и три справа (748:51265). Уже 1440 колонки сжимаются
 * в пропорции макета; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

/*
 * Колонки 390, 500 и 390, три строки по 128. Гарантии идут в разметке по порядку — левая колонка, поле, правая, —
 * и встают по колонкам сверху вниз. Линии рамки, колонок и строк в макете по центру границ (#EEEEEE, 1 px);
 * здесь они в ::before, места не занимают и не сдвигают текст: рамка по краю 1280 совпадает с линиями
 * сетки страницы. ::after блока в редакторе занят рамкой выделения.
 */
.baserd-security .baserd-security__body {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 390fr) minmax(0, 500fr) minmax(0, 390fr);
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
}

.baserd-security .baserd-security__body::before,
.baserd-security .baserd-security__item::before,
.baserd-security .baserd-security__field::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 0 solid var(--wp--preset--color--line);
	pointer-events: none;
}

/* Рамка поверх гарантий: заливка наведённой (front#1048) иначе закрыла бы её по краю. */
.baserd-security .baserd-security__body::before {
	z-index: 1;
	border-width: 1px;
}

/* Средняя строка (748:50394, 748:51269): линии сверху и снизу. */
.baserd-security__body > .baserd-security__item:is(:nth-child(2), :nth-child(6))::before {
	border-block-width: 1px;
}

/*
 * Гарантия (748:50391): поля 32 и 48, имя 24/32 500 и через 8 подпись 16/24 серым. Строка 128, как в макете;
 * длинная подпись на узком экране переносится, и строка растёт вместе с соседними.
 */
.baserd-security .baserd-security__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--48);
	color: var(--wp--preset--color--muted);
}

.baserd-security .baserd-security__item > * {
	margin: 0;
}

.baserd-security .baserd-security__item .baserd-security__name {
	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);
}

/*
 * 888:11667 (front#1048): наведённая гарантия — заливка цвета выделения (light-panel #FAFAFA), подпись цвета
 * имени (888:11669) и сверху слева оранжевая черта 178×2 (888:11676) по центру верхней линии. Черта — ::after
 * (в редакторе он занят рамкой выделения, там черты нет), над линией ::before. Ссылок в гарантии нет, состояние
 * только для мыши.
 */
@media (hover: hover) {
	.baserd-security .baserd-security__item:hover {
		background-color: var(--wp--custom--highlight);
		color: var(--wp--preset--color--contrast);
	}

	.baserd-security .baserd-security__item:not(.block-editor-block-list__block):hover::after {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		width: 178px;
		max-width: 100%;
		z-index: 2;
		height: 2px;
		background-color: var(--wp--preset--color--primary);
		pointer-events: none;
	}
}

/*
 * Поле 748:50400, 500 × 384 между колонками, линии слева и справа — края колонок гарантий. Звёзды 8 px #E5E5E5
 * (часть с прозрачностью 0.4) и шестиугольник из шести штрихов чёрным 10% — одна картинка field.svg из узлов
 * макета, по центру клетки. Картинка — украшение, alt пустой.
 */
.baserd-security .baserd-security__field {
	position: relative;
	grid-row: span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.baserd-security .baserd-security__field::before {
	border-inline-width: 1px;
}

.baserd-security .baserd-security__field img {
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
}

/*
 * Планшет — front#808, front#940, мобильного макета нет. На экране меньше 1280 колонка гарантий меньше 390,
 * поэтому поля по бокам 32, а не 48: иначе подписи переносятся. Планшет: гарантии в две колонки, как слева и справа
 * от поля в макете, поле звёзд — полосой во всю ширину под ними, картинка не выше 240. Телефон — кадр 875:53632
 * (375, front#1047): под заголовком (поле снизу 24) поле звёзд 384 в натуральную величину, обрезанное по бокам,
 * под ним гарантии столбцом через линию, поля 24.
 */
@media (max-width: 1279px) {
	.baserd-security .baserd-security__item {
		padding-inline: var(--wp--preset--spacing--32);
	}
}

@media (max-width: 1023px) {
	.baserd-security .baserd-security__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Строка 4 явно: гарантии по-прежнему встают по колонкам в три строки (grid-auto-flow: column). */
	.baserd-security .baserd-security__field {
		grid-row: 4;
		grid-column: 1 / -1;
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
	}

	.baserd-security .baserd-security__field::before {
		border-width: 1px 0 0;
	}

	.baserd-security .baserd-security__field img {
		width: auto;
		max-width: 100%;
		max-height: 240px;
	}

	.baserd-security__body > .baserd-security__item:nth-child(-n + 3)::before {
		border-inline-end-width: 1px;
	}
}

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

	.baserd-security .wp-block-group.baserd-section-heading {
		padding-bottom: var(--wp--preset--spacing--24);
	}

	.baserd-security .baserd-security__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	.baserd-security__body > .baserd-security__item:nth-child(n)::before {
		border-width: 0;
	}

	.baserd-security__body > .baserd-security__item:not(:first-child)::before {
		border-top-width: 1px;
	}

	.baserd-security .baserd-security__item {
		padding: var(--wp--preset--spacing--24);
	}

	.baserd-security .baserd-security__field {
		grid-row: auto;
		grid-column: auto;
		order: -1;
		height: 384px;
		padding: 0;
		overflow: hidden;
	}

	.baserd-security .baserd-security__field img {
		width: auto;
		max-width: none;
		height: 100%;
		max-height: none;
	}
}