/*
 * Тарифы — Figma 657:4456, y 2318–3267 (паттерн baserd/pricing): разделитель (divider.css), заголовок
 * секции (section-heading.css) и три карточки 427×700. В макете карточки по 427, вместе 1281 при рамке
 * 1280; здесь последняя 426, как у продуктов. Уже 1280 колонки сжимаются в той же пропорции;
 * планшет и телефон — кадры 846:23621 и 881:59204 (front#1045), в конце файла.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора и отступы потока.
 */

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

/* 657:4471: три карточки в ряд. */
.baserd-pricing .baserd-pricing__plans {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 427fr) minmax(0, 427fr) minmax(0, 426fr);
}

/*
 * Линии как в макете: сверху над карточками (657:4471) и справа у первых двух карточек (657:4472,
 * 657:4501; у третьей обводки нет) — 1px #F0F0F0 10% по центру границы, места не занимают. Лежат под
 * содержимым карточек: картинки закрывают свою половину линии, как в макете. Токен contrast-10
 * (белый 10%) отличается от макета на 1.5 из 255. Линия карточки — ::before: ::after блока занят
 * рамкой выделения в редакторе. Линия есть у карточки, за которой идёт ещё одна, а не «не последней»:
 * в редакторе за последней карточкой встаёт кнопка добавления блока. Правила отдельные: где нет
 * :has, выпадет только линия карточек.
 */
.baserd-pricing__plans::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -0.5px;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--wp--preset--color--contrast-10);
	pointer-events: none;
}

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

/*
 * 888:2589 (front#1048): наведённая карточка — белый 5% поверх фона (#1C1130 на base), фокус с клавиатуры на
 * кнопке карточки показывает то же. Заливка полупрозрачная, линии между карточками под ней видны.
 */
@media (hover: hover) {
	.baserd-pricing .baserd-pricing__plan:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
	}
}

.baserd-pricing .baserd-pricing__plan:has(:focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

/* 657:4472: картинка 200, через 40 название и свойства, внизу цена и кнопка (не ближе 80). */
.baserd-pricing .baserd-pricing__plan {
	position: relative;
	display: flex;
	flex-direction: column;
}

/*
 * Последняя карточка на 1 px уже, её поле справа 47: название, свойства и кнопка той же ширины 331.
 * «Последняя» — та, за которой нет карточки (кнопка добавления блока в редакторе не в счёт).
 */
.baserd-pricing .baserd-pricing__plan:not(:has(+ .baserd-pricing__plan)) > :is(.baserd-pricing__about, .baserd-pricing__buy) {
	padding-right: calc(var(--wp--preset--spacing--48) - 1px);
}

/*
 * 657:4474: картинка 427×200 — выгрузка всего кадра из Figma: заливка, свечение и кристалл вместе.
 * Уже 1280 кадр обрезается по бокам, высота остаётся 200. Высота и обрезка стоят и в атрибутах блока
 * (height, scale): редактор ставит картинке свою высоту стилем в разметке, и без них в холсте она 156.
 */
.baserd-pricing .baserd-pricing__art {
	margin: 0;
}

.baserd-pricing__art img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

/* 657:4477: поля 48, название 32/40 700, через 24 список. */
.baserd-pricing .baserd-pricing__about {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--48) 0;
}

.baserd-pricing .baserd-pricing__name {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/*
 * 657:4479: свойства 16/24 белым через 16, перед каждым галочка 24×24 цвета primary (Phosphor Check,
 * инстанс 657:4481) и зазор 16. Галочка — маска, пункт остаётся обычным текстом: длинный перенесётся
 * под текст, а не под галочку.
 */
/* Строка-описание под названием есть только в кадре телефона (949:12102, front#1266): шире 639 её нет. */
.baserd-pricing .baserd-pricing__description {
	display: none;
}

.baserd-pricing .baserd-pricing__features {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--contrast);
}

.baserd-pricing .baserd-pricing__features li {
	position: relative;
	margin: 0;
	padding-left: calc(24px + var(--wp--preset--spacing--16));
}

.baserd-pricing__features li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("../icons/check.svg") center / 24px 24px no-repeat;
	mask: url("../icons/check.svg") center / 24px 24px no-repeat;
}

/*
 * 657:4489: цена и кнопка прижаты к низу карточки, от свойств не ближе 80; поля 48, между ценой и
 * кнопкой 24. Кнопка — Primary из UI kit на всю ширину (331×60).
 */
.baserd-pricing .baserd-pricing__buy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	margin-top: auto;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--48) var(--wp--preset--spacing--48);
}

/*
 * 657:4490: «starting from» 16 500 заглавными muted, через 4 цена. Межстрочный в макете «auto»
 * (20.416 и 56.144), но блоки в макете стоят по округлённым высотам текста — 20 и 56: высоты строк
 * здесь такие же, иначе секция выше макета на 0.56 и следующие за ней съезжают. Глифы — на 0.2 px выше.
 */
.baserd-pricing .baserd-pricing__cost {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.baserd-pricing .baserd-pricing__from {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-16);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--price-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/*
 * 657:4492: цена 700 белым — в макете целая часть 44, знак валюты и копейки 32; через 4 «max/mo.»
 * 14 400 muted на той же базовой линии. Целая часть — span baserd-pricing__major в тексте абзаца,
 * в редакторе это формат baserd/price-major.
 * Высоту строки (56) задаёт целая часть; у абзаца межстрочный 1, чтобы строка 32 не добавила
 * высоты снизу: с общим межстрочным 56 разные размеры на одной базовой линии дают строку 60.
 */
.baserd-pricing .baserd-pricing__price {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--4);
}

.baserd-pricing .baserd-pricing__amount {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-32);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.baserd-pricing__amount .baserd-pricing__major {
	font-size: var(--wp--preset--font-size--size-44);
	line-height: var(--wp--custom--line-height--size-44);
}

/*
 * Цену перепечатали целиком и span пропал: строка всё равно 56, иначе «starting from» съедет на 24
 * вниз. Вернуть крупную целую часть — кнопка «Whole part of the price» в редакторе (assets/js/editor.js).
 */
.baserd-pricing .baserd-pricing__amount:not(:has(.baserd-pricing__major)) {
	line-height: var(--wp--custom--line-height--size-44);
}

.baserd-pricing .baserd-pricing__period {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--muted);
}

/*
 * Цена не переносится посреди числа, даже набранная в редакторе с пробелом («5,99 €»). «max/mo.» уходит под
 * цену целиком, если рядом ему не хватает места (front#938).
 */
.baserd-pricing .baserd-pricing__amount {
	white-space: nowrap;
}

.baserd-pricing .baserd-pricing__price {
	flex-wrap: wrap;
}

/*
 * Уже 1280 — front#808 и front#938, кадров этих ширин у дизайнеров нет. Кнопка во всю ширину карточки, поэтому её поля видны, только когда текст переносится: на узкой карточке они
 * у́же, и «Explore this plan» стоит в одну строку.
 */
@media (max-width: 1279px) {
	.baserd-pricing .baserd-pricing__buy .wp-block-button__link {
		padding-right: var(--wp--preset--spacing--24);
		padding-left: var(--wp--preset--spacing--24);
	}
}

/* Три в ряд уже 1280: поля карточки 32, иначе на 1024 «Cost-Optimized» рвётся по дефису, а кнопка встаёт в две строки. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.baserd-pricing .baserd-pricing__about,
	.baserd-pricing .baserd-pricing__plan:not(:has(+ .baserd-pricing__plan)) > .baserd-pricing__about {
		padding-right: var(--wp--preset--spacing--32);
		padding-left: var(--wp--preset--spacing--32);
	}

	.baserd-pricing .baserd-pricing__buy,
	.baserd-pricing .baserd-pricing__plan:not(:has(+ .baserd-pricing__plan)) > .baserd-pricing__buy {
		padding-right: var(--wp--preset--spacing--32);
		padding-left: var(--wp--preset--spacing--32);
	}
}

/*
 * Планшет — кадр 846:23621, front#1045: карточки друг под другом во всю ширину экрана, через 24, над
 * второй и третьей — линия во всю ширину. Содержимое — колонка 480 по центру: картинка 480×200, через 40
 * название 32/40 и свойства, через 40 цена и кнопка; поля карточки 24 сверху и снизу, под последней 48.
 * По бокам колонки — поля точек 78×618 (шаг 18, как в FAQ) и две звезды 113×114 (star.webp из Features):
 * левая на 150 ниже верха карточки от края кадра, правая на 431 ниже, в 245 правее центра. Картинка тарифа
 * выгружена под 427×200 и на 480 обрезается сверху и снизу: кристалл крупнее, чем в кадре, на 12%.
 */
@media (max-width: 1023px) {
	.baserd-pricing {
		padding-bottom: var(--wp--preset--spacing--48);
	}

	/* Ядро ставит ряду поля auto с !important, поэтому во всю ширину — через left. */
	.baserd-pricing .baserd-pricing__plans {
		left: calc(var(--wp--style--root--padding-left) * -1);
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--24);
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		max-width: none;
	}

	.baserd-pricing .baserd-pricing__plan {
		padding: var(--wp--preset--spacing--24) 0;
	}

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

	.baserd-pricing .baserd-pricing__plan > *,
	.baserd-pricing .baserd-pricing__plan:not(:has(+ .baserd-pricing__plan)) > :is(.baserd-pricing__about, .baserd-pricing__buy) {
		box-sizing: border-box;
		width: 480px;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-right: 0;
		padding-left: 0;
	}

	.baserd-pricing .baserd-pricing__about {
		padding-top: var(--wp--preset--spacing--40);
	}

	.baserd-pricing .baserd-pricing__name {
		font-size: 32px;
		line-height: 40px;
	}

	.baserd-pricing .baserd-pricing__buy {
		margin-top: 0;
		padding: var(--wp--preset--spacing--40) 0 0;
	}

	/*
	 * Цена в кадрах планшета и телефона та же, что на десктопе: целая часть 44/56, знак и копейки 32. Шкала
	 * layout.css её не сжимает.
	 */
	.baserd-pricing .baserd-pricing__amount {
		font-size: 32px;
	}

	.baserd-pricing__amount .baserd-pricing__major {
		font-size: 44px;
		line-height: 56px;
	}

	.baserd-pricing .baserd-pricing__amount:not(:has(.baserd-pricing__major)) {
		line-height: 56px;
	}

	.baserd-pricing .baserd-pricing__plan::before,
	.baserd-pricing .baserd-pricing__plan:has(+ .baserd-pricing__plan)::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 21px;
		right: auto;
		bottom: auto;
		left: calc(50% - 339px);
		width: 678px;
		height: 618px;
		background-color: transparent;
		background-image: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent) 2.6px, transparent 3.4px);
		background-size: 18px 18px;
		-webkit-mask: linear-gradient(90deg, #000 78px, transparent 78px calc(100% - 78px), #000 calc(100% - 78px));
		mask: linear-gradient(90deg, #000 78px, transparent 78px calc(100% - 78px), #000 calc(100% - 78px));
	}

	/* Свечение под звездой — круг 53 цвета #FDA74B 20% по её центру (846:24015), в макете размыт: здесь угасает
	 * к краю круга вдвое шире. */
	/* В редакторе ::after блока занят рамкой выделения: там звёзд нет. */
	.baserd-pricing .baserd-pricing__plan:not(.block-editor-block-list__block)::after {
		content: "";
		position: absolute;
		z-index: -1;
		top: 150px;
		left: calc(50% - 384px);
		width: 742px;
		height: 395px;
		background:
			url("../images/features/star.webp") left top / 113px 114px no-repeat,
			url("../images/features/star.webp") right bottom / 113px 114px no-repeat,
			radial-gradient(circle 53px at 56px 57px, color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent), transparent),
			radial-gradient(circle 53px at calc(100% - 57px) calc(100% - 57px), color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent), transparent);
		pointer-events: none;
	}
}

/*
 * Телефон — кадр 949:12102 (refined, front#1266; было 881:59204): три карточки-плашки столбиком через 16, по
 * 12 от краёв экрана (ширина 351), заливка surface и обводка line (949:12116). Иллюстрации нет совсем. Внутри
 * три блока во всю ширину карточки, каждый с полями 16 и линией line снизу: название 24/32 500 и под ним через
 * 4 строка-описание muted (949:12117; только у первых двух карточек — у General Purpose выделенные ядра, а не
 * общие, и подпись «за счёт общих ресурсов» была бы неправдой), свойства с полями 24 сверху и снизу
 * (949:12120), цена и кнопка через 24 с полями 24 (949:12130). Под карточками 48 до конца секции. Без точек и
 * звёзд. Уже 640 колонке 480 с полями точек не хватает места.
 */
@media (max-width: 639px) {
	.baserd-pricing {
		padding-bottom: var(--wp--preset--spacing--48);
	}

	.baserd-pricing .baserd-pricing__plans {
		left: 0;
		gap: var(--wp--preset--spacing--16);
		width: 100%;
	}

	/* Линия под заголовком — во всю ширину экрана, как в кадре 851:29792. */
	.baserd-pricing__plans::before {
		right: calc(var(--wp--style--root--padding-right) * -1);
		left: calc(var(--wp--style--root--padding-left) * -1);
	}

	.baserd-pricing .baserd-pricing__plan,
	.baserd-pricing .baserd-pricing__plan + .baserd-pricing__plan {
		--baserd-pricing-rule: var(--wp--preset--color--line);
		padding: 0;
		background-color: var(--wp--preset--color--surface);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	}

	/* 949:12102: иллюстрации у карточек на телефоне нет совсем. */
	.baserd-pricing .baserd-pricing__plan > .baserd-pricing__art {
		display: none;
	}

	.baserd-pricing .baserd-pricing__plan > :is(.baserd-pricing__about, .baserd-pricing__buy),
	.baserd-pricing .baserd-pricing__plan:not(:has(+ .baserd-pricing__plan)) > :is(.baserd-pricing__about, .baserd-pricing__buy) {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}

	.baserd-pricing .baserd-pricing__about {
		gap: 0;
		padding-top: 0;
	}

	.baserd-pricing .baserd-pricing__name {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) 0;
		font-size: var(--wp--preset--font-size--size-24);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--size-24);
	}

	.baserd-pricing .baserd-pricing__name:not(:has(+ .baserd-pricing__description)) {
		padding-bottom: var(--wp--preset--spacing--16);
		box-shadow: inset 0 -1px 0 var(--baserd-pricing-rule);
	}

	/* 949:12119: 16/24 muted, через 4 под названием. */
	.baserd-pricing .baserd-pricing__description {
		display: block;
		margin: 0;
		padding: 4px var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
		box-shadow: inset 0 -1px 0 var(--baserd-pricing-rule);
		font-size: var(--wp--preset--font-size--size-16);
		line-height: var(--wp--custom--line-height--size-16);
		color: var(--wp--preset--color--muted);
	}

	.baserd-pricing .baserd-pricing__features {
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
		box-shadow: inset 0 -1px 0 var(--baserd-pricing-rule);
	}

	/* Тот же вес селектора, что у сброса полей выше: блоку цены поля 16 по бокам возвращаются. */
	.baserd-pricing .baserd-pricing__plan > .baserd-pricing__buy,
	.baserd-pricing .baserd-pricing__plan:not(:has(+ .baserd-pricing__plan)) > .baserd-pricing__buy {
		gap: var(--wp--preset--spacing--24);
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
	}

	.baserd-pricing .baserd-pricing__plan::before,
	.baserd-pricing .baserd-pricing__plan:has(+ .baserd-pricing__plan)::before,
	.baserd-pricing .baserd-pricing__plan:not(.block-editor-block-list__block)::after {
		content: none;
	}

	/*
	 * Средняя карточка выделена (949:12142): радиальный градиент от фиолетового #621CCF в центре верхнего края
	 * к surface на половине радиуса; радиус по горизонтали 176% ширины, по вертикали во всю высоту. Такого
	 * фиолетового в палитре нет (accent #A06FEC светлее), цвет из макета. Линии внутри белые 10% (949:12143):
	 * line на градиенте не видна. Кнопка остаётся primary; у крайних карточек она белая с тёмным текстом
	 * (949:12136, 949:12190).
	 */
	.baserd-pricing .baserd-pricing__plan:nth-child(2) {
		--baserd-pricing-rule: var(--wp--preset--color--contrast-10);
		background-image: radial-gradient(176% 100% at 50% 0%, #621ccf, var(--wp--preset--color--surface) 50%);
	}

	.baserd-pricing .baserd-pricing__plan:not(:nth-child(2)) .baserd-pricing__buy .wp-block-button__link {
		background-color: var(--wp--preset--color--contrast);
		color: var(--wp--custom--button--ink);
	}
}