/*
 * Конфигурации — Figma 748:46902, y 5470–6091 (макет 30.09, было 657:8957 с y 5466; паттерн baserd/configurations):
 * разделитель (divider.css), заголовок слева и локация справа, таблица 1183×340: семь колонок по 169, шапка 52,
 * строки по 72. Уже 1440 колонки сжимаются, а где им не хватает места — таблица прокручивается вбок; планшет и
 * телефон — кадры 846:27880 (768) и 866:37337 (375), front#1046.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

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

/*
 * 657:8965: поля 72, 48, 32 и 48; слева надзаголовок и h2 через 8, справа локация, между ними 16, оба
 * прижаты к низу. Блок заходит на нижнюю половину разделителя (gap −29), как заголовки секций.
 */
.baserd-configs .baserd-configs__heading {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--16);
	margin-top: -29px;
	padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
}

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

.baserd-configs .baserd-configs__location {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.baserd-configs .baserd-configs__title > *,
.baserd-configs .baserd-configs__location > * {
	margin: 0;
}

/* 657:8974: подпись 12/16 muted. */
.baserd-configs .baserd-configs__location-label {
	font-size: var(--wp--preset--font-size--size-12);
	line-height: var(--wp--custom--line-height--size-12);
	color: var(--wp--preset--color--muted);
}

/*
 * 657:8975: поле 36 высотой, поля 8 и 12, текст 14/20 и каретка 16 muted через 8. Рамка 1px белый 10%
 * по центру границы (outline, места не занимает). Выбора пока нет: в макете нарисовано только закрытое
 * поле, открытого нет.
 */
.baserd-configs .baserd-configs__location-value {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
	outline: 1px solid var(--wp--preset--color--contrast-10);
	outline-offset: -0.5px;
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.baserd-configs .baserd-configs__location-value::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: url("../icons/caret-down.svg") center / 16px 16px no-repeat;
	mask: url("../icons/caret-down.svg") center / 16px 16px no-repeat;
}

/*
 * 657:8979: таблица 1183 на полпикселя внутрь от полей 48, рамка 1px белый 10% снаружи: рамка — у обёртки
 * (figure), она же прокручивается вбок, и рамка остаётся на месте. Рамка ложится на последний пиксель
 * заголовка и первый пиксель поля снизу: в макете она снаружи и в высоту секции не входит. Ширина — от
 * колонки контента 1280, как у заголовка над таблицей: шире 1440 таблица не растёт.
 */
.baserd-configs .baserd-configs__table {
	box-sizing: border-box;
	max-width: calc(min(100%, var(--wp--style--global--content-size)) - 95px);
	margin-top: -1px;
	margin-bottom: -1px;
	border: 1px solid var(--wp--preset--color--contrast-10);
	overflow-x: auto;
}

/* Обёртка получает фокус с клавиатуры, чтобы таблицу можно было прокрутить стрелками (functions.php). */
.baserd-configs .baserd-configs__table:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/*
 * Колонки поровну. Уже 7 × 145 (самый длинный заголовок «Cores/threads» с полями: шапка стоит в одну
 * строку) они не сжимаются, а таблица уходит в прокрутку.
 */
.baserd-configs .baserd-configs__table table {
	min-width: 1015px;
	border-collapse: separate;
	border-spacing: 0;
}

/*
 * 657:8980…8986: ячейка 169×72, шапка 52, текст 14/20 по центру; поля 16 и 24. Линии 1px #2A1E3C справа
 * и снизу: в макете по центру границы, здесь внутри ячейки, поэтому поле справа и снизу на 1 меньше —
 * текст стоит там же. У последней колонки линии справа нет, у последней строки — снизу (рамка обёртки).
 */
.baserd-configs .baserd-configs__table :is(th, td) {
	box-sizing: border-box;
	height: 72px;
	padding: var(--wp--preset--spacing--16) 23px 15px var(--wp--preset--spacing--24);
	border: 0;
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--contrast);
	text-align: center;
	vertical-align: middle;
	word-break: normal;
	overflow-wrap: normal;
}

/* 657:8980: шапка — заливка surface, текст 500. */
.baserd-configs .baserd-configs__table thead th {
	height: 52px;
	background-color: var(--wp--preset--color--surface);
	font-weight: 500;
}

/*
 * 888:7321…7327 (front#1048): наведённая строка — заливка цвета выделения (surface #231735) во всех ячейках,
 * как шапка; линии те же. Ссылок в строке нет, состояние только для мыши. Закреплённые колонки получают ту же
 * заливку, иначе при прокрутке под ними просвечивало бы.
 */
@media (hover: hover) {
	.baserd-configs .baserd-configs__table tbody tr:hover > * {
		background-color: var(--wp--custom--highlight);
	}
}

/* 657:8986: у «Price per hour» линия снизу белая 10%, а не #2A1E3C, как у остальных заголовков. */
.baserd-configs .baserd-configs__table thead tr > :last-child {
	border-bottom-color: var(--wp--preset--color--contrast-10);
}

/*
 * 657:8985: значение в две строки («2 x 1.92 TB NVMe / Intel SSD P5520») выровнено по левому краю, а блок
 * по ширине длинной строки стоит по центру ячейки. Обёртку ставит functions.php на сайте; в редакторе её
 * нет, и там строки по центру.
 */
.baserd-configs .baserd-configs__value {
	display: inline-block;
	text-align: left;
}

.baserd-configs .baserd-configs__table tr > :last-child {
	padding-right: var(--wp--preset--spacing--24);
	border-right: 0;
}

.baserd-configs .baserd-configs__table tbody tr:last-child > * {
	padding-bottom: var(--wp--preset--spacing--16);
	border-bottom: 0;
}

/*
 * При прокрутке вбок первая колонка (название конфигурации) и последняя (цена) остаются на месте, остальные
 * листаются между ними: иначе уже 1200 цена уходит за край, и таблица выглядит законченной без неё (front#875).
 */
.baserd-configs .baserd-configs__table tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

/*
 * Линия слева у цены — её тень на пиксель левее: пока таблица помещается или долистана до конца, тень ложится
 * ровно на линию соседней колонки, а под листающимися колонками остаётся своей.
 */
.baserd-configs .baserd-configs__table tr > :last-child {
	position: sticky;
	right: 0;
	z-index: 1;
	box-shadow: -1px 0 0 var(--wp--preset--color--line);
}

/*
 * Пока за краем что-то скрыто (has-more-left, has-more-right ставит configs-scroll.js), колонки уходят под
 * закреплённую в тень 24: так видно, что таблица листается. Тень — ::after закреплённой ячейки через всю строку
 * вместе с линией под ней; у последней строки линии нет, и тень не выходит за таблицу, иначе обёртка стала бы
 * листаться и по высоте. Без скрипта тени нет, а колонки закреплены всё равно.
 */
.baserd-configs .baserd-configs__table.has-more-left tr > :first-child::after,
.baserd-configs .baserd-configs__table.has-more-right tr > :last-child::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: -1px;
	width: var(--wp--preset--spacing--24);
	pointer-events: none;
}

.baserd-configs .baserd-configs__table.has-more-left tr > :first-child::after {
	left: calc(100% + 1px);
	background: linear-gradient(to right, rgb(0 0 0 / 60%), transparent);
}

.baserd-configs .baserd-configs__table.has-more-right tr > :last-child::after {
	right: calc(100% + 1px);
	background: linear-gradient(to left, rgb(0 0 0 / 60%), transparent);
}

.baserd-configs .baserd-configs__table.has-more-left tbody tr:last-child > :first-child::after,
.baserd-configs .baserd-configs__table.has-more-right tbody tr:last-child > :last-child::after {
	bottom: 0;
}

/*
 * От 1024 до 1179 (front#808): колонки поровну по 145 не помещаются, и таблица листалась бы уже на 1024. Здесь
 * колонка шириной по своему тексту, строки не переносятся: на 1024 таблица помещается целиком. Уже 1024 — кадры
 * дизайнеров, ниже.
 */
@media (max-width: 1179px) {
	.baserd-configs .baserd-configs__table table {
		min-width: 0;
		table-layout: auto;
	}

	.baserd-configs .baserd-configs__table :is(th, td),
	.baserd-configs .baserd-configs__table tr > :last-child {
		padding-right: var(--wp--preset--spacing--16);
		padding-left: var(--wp--preset--spacing--16);
		white-space: nowrap;
	}
}

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

/*
 * Планшет — кадр 846:27880 (768), front#1046. Заголовок как у общих заголовков секций: наезд на разделитель −24, поля
 * 48 и 24, h2 32/40, локация 184 справа по центру строки; до таблицы 32. Таблица с x 48 колонками по 169 уходит под
 * правый край экрана, как в кадре: обрезанная колонка у края показывает, что таблица листается (front#875). Цена
 * поэтому не закреплена — закреплённая цена отъела бы треть ширины, а в кадре её у края нет; название закреплено, при
 * прокрутке 0 это и есть кадр. Сдвиг до края — left, а не поля: боковые поля потомков держит constrained-раскладка.
 * Рамка таблицы снаружи (в кадре OUTSIDE), поэтому сдвиг на 1 меньше поля. Под секцией линия во всю ширину.
 */
@media (max-width: 1023px) {
	.baserd-configs.has-grid-lines {
		padding-bottom: var(--wp--preset--spacing--48);
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--contrast-10);
	}

	.baserd-configs .baserd-configs__heading {
		align-items: center;
		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-configs .baserd-configs__table {
		position: relative;
		left: calc(var(--wp--preset--spacing--24) - 1px);
		width: calc(100% + 1px);
		max-width: none;
	}

	.baserd-configs .baserd-configs__table table {
		width: calc(7 * 169px);
		table-layout: fixed;
	}

	.baserd-configs .baserd-configs__table :is(th, td) {
		width: 169px;
		padding: var(--wp--preset--spacing--16) 23px 15px var(--wp--preset--spacing--24);
		white-space: normal;
	}

	.baserd-configs .baserd-configs__table tr > :last-child {
		position: static;
		padding-right: var(--wp--preset--spacing--24);
		padding-left: var(--wp--preset--spacing--24);
		box-shadow: none;
		white-space: normal;
	}

	.baserd-configs .baserd-configs__table.has-more-right tr > :last-child::after {
		content: none;
	}
}

/*
 * Телефон — кадр 866:37337 (375): заголовок в колонку, поля 12, локация под ним во всю ширину, всё через 24. Таблица
 * с x 24 до края экрана. Линия под секцией не во всю ширину, а по колонке — низ рамки линий сетки.
 */
@media (max-width: 767px) {
	.baserd-configs.has-grid-lines {
		box-shadow: none;
	}

	.baserd-configs.has-grid-lines::before {
		border-bottom: 1px solid var(--wp--preset--color--contrast-10);
	}

	.baserd-configs .baserd-configs__heading {
		flex-direction: column;
		align-items: stretch;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	}

	/* Поле во всю ширину: каретка у правого края, как в кадре. */
	.baserd-configs .baserd-configs__location-value {
		justify-content: space-between;
	}

	.baserd-configs .baserd-configs__table {
		left: calc(var(--wp--preset--spacing--12) - 1px);
	}
}