/*
 * Compliance — Figma 748:54781 (макет 30.09), y 4813–5470 (паттерн baserd/compliance): разделитель (divider.css),
 * заголовок секции (section-heading.css) и пять карточек в рамке 1280×336. Уже 1280 карточки сжимаются
 * поровну; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

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

/*
 * 748:54796: рамка 1px белый 10% внутрь, заливка base — закрывает линии сетки страницы, иначе на краях
 * рамки линия была бы вдвое ярче. Пять карточек по 255.6.
 */
.baserd-compliance .baserd-compliance__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--contrast-10);
	background-color: var(--wp--preset--color--base);
}

/*
 * 748:54797: картинка 150×150, через 24 название и статус через 8, всё по центру; поля 48. Справа у всех,
 * кроме последней, линия 1px белый 10% по центру границы, места не занимает. Линия — ::before (::after
 * блока в редакторе занят рамкой выделения) и есть у карточки, за которой идёт ещё одна: в редакторе за
 * последней встаёт кнопка добавления блока.
 */
.baserd-compliance .baserd-compliance__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--48);
	text-align: center;
}

.baserd-compliance__card:has(+ .baserd-compliance__card)::before {
	content: "";
	position: absolute;
	top: 0;
	right: -0.5px;
	bottom: 0;
	width: 1px;
	background-color: var(--wp--preset--color--contrast-10);
	pointer-events: none;
}

/*
 * 888:15233 (front#1048): наведённая карточка — заливка цвета выделения (surface #231735). Ссылок в карточке
 * нет, состояние только для мыши. Вес (0,3,0) выше заливки base у карточки на планшете.
 */
@media (hover: hover) {
	.baserd-compliance .baserd-compliance__card:hover {
		background-color: var(--wp--custom--highlight);
	}
}

.baserd-compliance .baserd-compliance__art {
	margin: 0;
}

/*
 * Уже 1440 карточка может стать уже 150 (окно 1280, холст редактора): значок уменьшается пропорционально.
 * Пока SVG не загрузился, у картинки нет своих пропорций: место держит квадрат, после загрузки — пропорции
 * самой картинки.
 */
.baserd-compliance__art img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	aspect-ratio: auto 1 / 1;
}

/* 748:54827: название 24/32 500 белым (h3), статус 16/24 400 muted через 8 (в макете до 30.09 — через 4). */
.baserd-compliance .baserd-compliance__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.baserd-compliance .baserd-compliance__text > * {
	margin: 0;
}

.baserd-compliance .baserd-compliance__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);
}

.baserd-compliance .baserd-compliance__status {
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--muted);
}

/*
 * Планшет — кадр 846:27764 (768), front#1046. Карточки 2 × 2 по 360 × 334 с полями 48, ISO ниже во всю
 * колонку. Линии: сверху над рядами, снизу под каждой карточкой и одна вертикальная посередине. По краям
 * колонки своих линий нет: там видны линии сетки страницы, у контейнера и карточек заливки нет.
 *
 * Линии — внутренние тени, а не рамки: в кадре они стоят по центру границы и места не занимают, а рамка
 * добавила бы по пикселю к каждому ряду, и секция вышла бы на 4 выше кадра. Цвет полупрозрачный, две
 * линии на одном пикселе дали бы вдвое ярче, поэтому под ISO на 768 линию даёт сама секция — во всю
 * ширину экрана, как в кадре, — а вертикальная кончается над нижней линией своей карточки.
 */
@media (max-width: 1023px) {
	.baserd-compliance.has-grid-lines {
		padding-bottom: 0;
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--contrast-10);
	}

	.baserd-compliance .baserd-compliance__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border: 0;
		background-color: transparent;
		box-shadow: inset 0 1px 0 var(--wp--preset--color--contrast-10);
	}

	.baserd-compliance .baserd-compliance__card {
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--contrast-10);
	}

	.baserd-compliance .baserd-compliance__card:nth-child(odd):last-child {
		grid-column: 1 / -1;
		box-shadow: none;
	}

	.baserd-compliance__card:has(+ .baserd-compliance__card)::before {
		content: none;
	}

	.baserd-compliance__card:nth-child(odd):not(:last-child)::before {
		content: "";
		position: absolute;
		top: 0;
		right: -0.5px;
		bottom: 1px;
		width: 1px;
		background-color: var(--wp--preset--color--contrast-10);
		pointer-events: none;
	}
}

/*
 * Телефон — кадр 866:37336 (375): карточки 176 × 302, поля 32 и 16, картинка та же 150 — она шире места
 * внутри полей (143.5), поэтому боковые поля карточки отданы ей. На узком телефоне картинка сжимается до
 * ширины карточки. Под ISO линия своя, под секцией поле 48 без линии.
 */
@media (max-width: 767px) {
	.baserd-compliance.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--48);
		box-shadow: none;
	}

	.baserd-compliance .baserd-compliance__card {
		padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--16);
	}

	.baserd-compliance .baserd-compliance__card:nth-child(odd):last-child {
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--contrast-10);
	}

	.baserd-compliance .baserd-compliance__art {
		align-self: stretch;
		margin-inline: calc(var(--wp--preset--spacing--16) * -1);
	}

	.baserd-compliance__art img {
		margin-inline: auto;
	}
}