/* ====================================================================== */
/* СТОИМОСТЬ ЗАПУСКА                                                      */
/* Макет: output/design/landing-v2/all-screens/11-pricing.png.            */
/*                                                                        */
/* КОМПОЗИЦИЯ. Блок оформлен как прайс-регистр: линейки сверху и снизу,   */
/* слева заголовок с пояснением, справа кнопка в скобках обреза, ниже     */
/* три тарифа в общей рамке.                                              */
/*                                                                        */
/* СТРОКИ ТАРИФОВ ВЫРОВНЕНЫ ПО СОСЕДЯМ ЧЕРЕЗ subgrid. Названия тарифов    */
/* разной длины («Интернет-магазин» в одну строку, «Сайт + Яндекс Директ» */
/* в две), и без общей сетки строк состав работ и цены разъезжались бы    */
/* по вертикали, а разделители переставали быть сплошными через всю       */
/* таблицу. Браузер без subgrid отдаст каждому столбцу собственные строки */
/* — таблица останется читаемой, просто линии сойдутся не идеально.       */
/* ====================================================================== */

.lp .lp-pricing {
	position: relative;
	overflow: clip;
	background: var(--lp-field);
}

.lp .lp-pricing__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* ---------------------------------------------------------------------- */
/* Линейки регистра                                                       */
/* ---------------------------------------------------------------------- */

.lp .lp-pricing__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem clamp(0.85rem, 2vw, 2rem);
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-pricing__rail--top {
	justify-content: space-between;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--lp-line);
}

.lp .lp-pricing__rail--bottom {
	padding-top: 0.85rem;
	border-top: 1px solid var(--lp-line);
}

.lp .lp-pricing__note-rule {
	width: clamp(1.5rem, 4vw, 3.5rem);
	height: 1px;
	background: var(--lp-crimson);
}

.lp .lp-pricing__note {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--lp-text-sm);
	color: var(--lp-ink-muted);
}

/* Учётный номер прижат к правому краю — так в макете. */
.lp .lp-pricing__rail-code {
	margin-left: auto;
	color: var(--lp-crimson);
}

/* ---------------------------------------------------------------------- */
/* Заголовок и кнопка                                                     */
/* ---------------------------------------------------------------------- */

.lp .lp-pricing__head {
	position: relative;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.lp .lp-pricing__intro {
	display: grid;
	gap: var(--lp-space-sm);
	min-width: 0;
}

.lp .lp-pricing__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
}

.lp .lp-pricing__eyebrow-num {
	font-family: var(--lp-font-display);
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
	font-weight: var(--lp-display-weight);
	line-height: 1;
}

.lp .lp-pricing__eyebrow-rule {
	width: clamp(1.5rem, 4vw, 3.5rem);
	height: 1px;
	background: var(--lp-crimson);
}

.lp .lp-pricing__title {
	max-width: none;
	font-size: clamp(2.3rem, 1.2rem + 3.6vw, 5rem);
	line-height: 0.92;
	text-wrap: initial; /* переносы задаёт редактор в ACF */
}

.lp .lp-pricing__title-line {
	display: block;
}

.lp .lp-pricing__text {
	max-width: 30em;
}

/*
 * Кнопка в скобках обреза. Скобки нарисованы фоном псевдоэлемента, а не
 * рамкой: рамка обвела бы кнопку целиком, а в макете это четыре уголка,
 * отступившие от неё наружу.
 */
/*
 * Ряд кнопки под таблицей. Кнопка стоит по центру: таблица занимает всю
 * ширину блока, и прижатая к краю кнопка читалась бы продолжением крайнего
 * тарифа, а не общим действием для всех трёх.
 */
.lp .lp-pricing__action {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 1rem + 2.4vw, 3.5rem);
}

.lp .lp-pricing__cta {
	position: relative;
}

.lp .lp-pricing__cta::after {
	--lp-corner: 1rem;

	position: absolute;
	inset: -0.6rem;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson));
	background-repeat: no-repeat;
	background-position:
		0 0, 0 0,
		100% 0, 100% 0,
		0 100%, 0 100%,
		100% 100%, 100% 100%;
	background-size:
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px;
}

/* Огромный знак рубля за кнопкой. Виден только на широком экране. */
.lp .lp-pricing__ghost {
	display: none;
}

/* ---------------------------------------------------------------------- */
/* Тарифы                                                                 */
/* ---------------------------------------------------------------------- */

.lp .lp-pricing__plans {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--lp-line-strong);
}

.lp .lp-pricing__plan {
	display: grid;
	align-content: start;
	background: var(--lp-field);
}

/*
 * Выделенный тариф. Заливка замешана из токенов, новой краски в палитре
 * не появляется. Она же и есть весь приём: в макете средний столбец не
 * крупнее соседей и не обведён — он просто темнее-краснее.
 */
.lp .lp-pricing__plan.is-featured {
	background: color-mix(in srgb, var(--lp-burgundy-panel) 38%, var(--lp-field));
}

.lp .lp-pricing__plan + .lp-pricing__plan {
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-pricing__plan-head {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2vw, 1.75rem);
	padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
	border-bottom: 1px solid var(--lp-line-strong);
}

.lp .lp-pricing__plan-num {
	font-family: var(--lp-font-display);
	font-size: clamp(2.25rem, 1.5rem + 2.4vw, 4rem);
	font-weight: var(--lp-display-weight);
	line-height: 0.85;
	color: var(--lp-crimson);
}

.lp .lp-pricing__plan-title {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
	letter-spacing: var(--lp-tracking-label);
}

.lp .lp-pricing__plan-title-line {
	display: block;
}

/* Состав работ ---------------------------------------------------------- */

.lp .lp-pricing__plan-items {
	display: grid;
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Строка состава. Разделители пунктирные и идут МЕЖДУ строками, а не под
 * каждой: под последней строкой уже есть сплошная граница ценового ряда,
 * и две линии подряд читались бы как ошибка.
 */
.lp .lp-pricing__plan-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 3.5rem;
	padding: 0.75rem clamp(1rem, 2vw, 1.75rem);
	font-size: var(--lp-text-sm);
	color: var(--lp-ink-muted);
}

.lp .lp-pricing__plan-item + .lp-pricing__plan-item {
	border-top: 1px dashed var(--lp-line);
}

/* Прицельная метка пункта — тот же знак координаты, что в соседних блоках. */
.lp .lp-pricing__plan-mark {
	position: relative;
	flex: none;
	display: grid;
	width: 0.9rem;
	height: 0.9rem;
	place-items: center;
	background:
		linear-gradient(var(--lp-line-control), var(--lp-line-control)) 50% 50% / 100% 1px no-repeat,
		linear-gradient(var(--lp-line-control), var(--lp-line-control)) 50% 50% / 1px 100% no-repeat;
}

.lp .lp-pricing__plan-mark::before {
	width: 0.45rem;
	height: 0.45rem;
	content: '';
	border: 1px solid var(--lp-line-control);
	border-radius: 50%;
	background: var(--lp-field);
}

/* Цена ------------------------------------------------------------------ */

.lp .lp-pricing__plan-price {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-pricing__price-from {
	font-family: var(--lp-font-display);
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);
	font-weight: var(--lp-display-weight);
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lp-crimson);
}

.lp .lp-pricing__price-value,
.lp .lp-pricing__price-unit {
	font-family: var(--lp-font-display);
	font-size: clamp(1.85rem, 1.1rem + 2.4vw, 3.5rem);
	font-weight: var(--lp-display-weight);
	line-height: 0.9;
	color: var(--lp-ink);
}

/*
 * Прочерк вместо несогласованной суммы. Это подчёркнутый пробел ровно той
 * высоты, что и цифры рядом, — иначе ряд с прочерком просел бы по высоте
 * относительно соседей с числами.
 */
.lp .lp-pricing__price-blank {
	width: clamp(3.5rem, 8vw, 6rem);
	height: clamp(1.85rem, 1.1rem + 2.4vw, 3.5rem);
	border-bottom: 0.28em solid var(--lp-ink);
}

/* ---------------------------------------------------------------------- */
/* Широкий экран                                                          */
/* ---------------------------------------------------------------------- */

@media (min-width: 64em) {

	/*
	 * Шапка осталась в одну колонку: кнопка ушла под таблицу, и делить
	 * ширину больше не с кем. Пояснение при этом не растягивается на весь
	 * блок — предел ширины у него свой, см. .lp-pricing__text.
	 */
	.lp .lp-pricing__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
	}

	/*
	 * Знак рубля стоит в правом поле шапки и подрезается краем секции — так
	 * в макете. Он настолько тёмный, что читается как фактура поля, а не как
	 * символ: ярче он спорил бы с ценами в таблице, ради которых блок сделан.
	 */
	.lp .lp-pricing__ghost {
		position: absolute;
		top: 50%;
		right: clamp(-4rem, -3vw, -1rem);
		z-index: -1;
		display: block;
		font-family: var(--lp-font-display);
		font-size: clamp(14rem, 22vw, 26rem);
		font-weight: var(--lp-display-weight);
		line-height: 0.75;
		color: color-mix(in srgb, var(--lp-ink) 4%, transparent);
		transform: translateY(-50%);
	}

	/*
	 * Три столбца одной сеткой, строки общие. Тариф занимает все три строки
	 * и наследует их через subgrid — тогда шапки, составы и цены соседей
	 * стоят на одних линиях, а разделители идут через всю таблицу.
	 */
	.lp .lp-pricing__plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto 1fr auto;
	}

	.lp .lp-pricing__plan {
		grid-row: span 3;
		grid-template-rows: subgrid;
	}

	/* Между столбцами вертикальная линия вместо горизонтальной. */
	.lp .lp-pricing__plan + .lp-pricing__plan {
		border-top: 0;
		border-left: 1px solid var(--lp-line-strong);
	}

	/* Четвёртый тариф и дальше уезжают на вторую строку сетки. */
	.lp .lp-pricing__plan:nth-child(n + 4) {
		border-top: 1px solid var(--lp-line-strong);
	}

	.lp .lp-pricing__plan:nth-child(3n + 1) {
		border-left: 0;
	}
}

/* Появление ------------------------------------------------------------ */

/*
 * Блок собирается СВЕРХУ ВНИЗ, в порядке чтения: линейка регистра, шапка,
 * тарифы один за другим, кнопка и подпись под таблицей. Кнопка приходит
 * последней намеренно — она предлагает действие, и предлагать его раньше,
 * чем показана хоть одна цена, значит торопить читателя.
 *
 * Прячет только тот, кто умеет показать обратно: весь раздел висит на
 * `.lp-js`, и без скрипта или при просьбе меньше движения блок просто стоит
 * на месте видимым.
 *
 * Цены НЕ «накручиваются». Число, бегущее от нуля к сумме, здесь было бы
 * не эффектом, а помехой: его нельзя прочитать, пока оно не остановится,
 * а прочитать цену — единственное, зачем в этот блок приходят.
 */

@media (prefers-reduced-motion: no-preference) {

	.lp-js .lp-pricing__rail--top,
	.lp-js .lp-pricing__intro,
	.lp-js .lp-pricing__plan,
	.lp-js .lp-pricing__action,
	.lp-js .lp-pricing__rail--bottom {
		opacity: 0;
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-step-delay, 0ms),
			translate var(--lp-duration-slow) var(--lp-ease-out) var(--lp-step-delay, 0ms);
		translate: 0 0.9rem;
	}

	.lp-js .lp-pricing__intro {
		--lp-step-delay: 90ms;
	}

	/*
	 * Задержка тарифа считается из его номера: тарифов может быть и два, и
	 * четыре, а :nth-child дал бы жёсткую тройку.
	 */
	.lp-js .lp-pricing__plan {
		--lp-step-delay: calc(200ms + var(--lp-i, 0) * 120ms);
	}

	.lp-js .lp-pricing__action {
		--lp-step-delay: 640ms;
	}

	.lp-js .lp-pricing__rail--bottom {
		--lp-step-delay: 740ms;
	}

	.lp-js .lp-pricing.is-visible .lp-pricing__rail--top,
	.lp-js .lp-pricing.is-visible .lp-pricing__intro,
	.lp-js .lp-pricing.is-visible .lp-pricing__plan,
	.lp-js .lp-pricing.is-visible .lp-pricing__action,
	.lp-js .lp-pricing.is-visible .lp-pricing__rail--bottom {
		opacity: 1;
		translate: none;
	}
}

/*
 * Скобки обреза на кнопке расходятся под курсором. Реакция живёт вне гейта
 * `.lp-js`: это ответ на действие, а не самостоятельное движение, и по
 * фокусу она обязана работать так же, как по наведению.
 */
.lp .lp-pricing__cta::after {
	transition: inset var(--lp-duration) var(--lp-ease-out);
}

.lp .lp-pricing__cta:hover::after,
.lp .lp-pricing__cta:focus-visible::after {
	inset: -0.95rem;
}