/*
 * ПОСАДОЧНАЯ, БЛОК 5 — КЕЙСЫ.
 * Макет: output/design/landing-v2/all-screens/05-cases.png.
 * Зависит от landing/tokens.css и landing/base.css.
 *
 * КОМПОЗИЦИЯ. Три полосы: чертёжная линейка у обреза, колонка с заголовком
 * и перечнем проектов, стопка экранов внахлёст справа.
 *
 * КОЛОДА СОБРАНА ОТ ОДНОГО ЧИСЛА — --lp-slot, места экрана в колоде.
 * Ноль — передний, дальше вглубь. Сдвиг, ширина, глубина, поворот и
 * приглушённость считаются от него формулами, поэтому проектов может быть
 * два или пять, а правил по-прежнему одно.
 *
 * Скрипт меняет ТОЛЬКО это число (см. landing.js). Отсюда и плавность:
 * браузер сам доводит трансформацию, а вид колоды правится здесь, в стилях,
 * а не в коде.
 *
 * ЭКРАНЫ УХОДЯТ ВГЛУБЬ ПО-НАСТОЯЩЕМУ. Не масштабом, а translateZ в общей
 * перспективе: дальний экран не «нарисован меньше», он стоит дальше, и
 * поворот вокруг вертикали у него сильнее — как у листа, отодвинутого
 * по столу. Масштабом это не подделывается: пропадает схождение к точке.
 */

.lp .lp-cases {
	position: relative;
	overflow: hidden;
}

.lp .lp-cases__draft {
	--lp-draft-line-y: 9%;
	--lp-draft-line-x: 52%;
	--lp-draft-line-w: min(30%, 30rem);
	--lp-draft-cross-x: 95%;
	--lp-draft-cross-y: 8%;
}

.lp .lp-cases__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

/* ---------------------------------------------------------------------- */
/* Чертёжная линейка                                                      */
/* ---------------------------------------------------------------------- */

.lp .lp-cases__rail {
	display: none;
}

/* ---------------------------------------------------------------------- */
/* Заголовок, перечень, кнопка                                            */
/* ---------------------------------------------------------------------- */

.lp .lp-cases__copy {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: clamp(1.25rem, 2vw, 2rem);
	min-width: 0;
}

.lp .lp-cases__title {
	max-width: none;
	font-size: clamp(2.1rem, 1.25rem + 2.9vw, 4rem);
	line-height: 0.94;
	text-wrap: initial; /* переносы задаёт редактор в ACF */
}

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

.lp .lp-cases__text {
	max-width: 26em;
}

.lp .lp-cases__list {
	display: grid;
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
	width: 100%;
}

/*
 * Проект: крупный алый номер, название прописными, пояснение приглушённым.
 * Номер вынесен в отдельную колонку сетки — так названия всех проектов
 * стоят по одной вертикали, сколько бы их ни было.
 */
.lp .lp-cases__item {
	display: grid;
	grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr);
	gap: 0.25rem clamp(0.85rem, 1.5vw, 1.5rem);
	max-width: 32rem;
}

.lp .lp-cases__item-num {
	grid-row: span 2;
	font-family: var(--lp-font-display);
	font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.4rem);
	font-weight: var(--lp-display-weight);
	line-height: 0.9;
	color: var(--lp-crimson);
}

.lp .lp-cases__name {
	font-size: clamp(1rem, 0.92rem + 0.3vw, 1.2rem);
	letter-spacing: var(--lp-tracking-label);
}

.lp .lp-cases__desc {
	font-size: var(--lp-text-sm);
	line-height: 1.55;
	color: var(--lp-ink-muted);
}

/* ---------------------------------------------------------------------- */
/* Стопка экранов                                                         */
/* ---------------------------------------------------------------------- */

.lp .lp-cases__stack {
	position: relative;
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	min-width: 0;
}

/*
 * Экран без браузерной рамы: в макете это отпечаток работы на чертёжном
 * столе, а не окно операционной системы. Отсюда тонкая светлая кромка
 * и физическая тень — единственная тень системы по DESIGN.md.
 */
.lp .lp-cases__shot {
	position: relative;
	margin: 0;
	border: 1px solid var(--lp-line-strong);
	background: var(--lp-field-deep);
	box-shadow: var(--lp-frame-shadow);
}

.lp .lp-cases__shot-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Номер на экране — та же метка, что у подписи слева: они связаны им. */
.lp .lp-cases__shot-num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 0.3rem 0.65rem;
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-display-weight);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--lp-ink);
	background: var(--lp-burgundy);
}

@media (min-width: 64em) {
	/* Название и описание образуют одну вертикальную подпись проекта.
	   Явные ячейки не дают описанию занять строку справа от заголовка. */
	.lp .lp-cases__name {
		grid-column: 2;
		grid-row: 1;
	}

	.lp .lp-cases__desc {
		grid-column: 2;
		grid-row: 2;
		max-width: 27rem;
	}

	.lp .lp-cases__inner {
		grid-template-columns: minmax(0, 4.5rem) minmax(21rem, 0.95fr) minmax(28rem, 1.45fr);
		align-items: center;
		gap: clamp(1.5rem, 2.5vw, 3.5rem);
	}

	/* Линейка ------------------------------------------------------------ */

	.lp .lp-cases__rail {
		position: relative;
		display: grid;
		align-content: space-between;
		justify-items: center;
		gap: 1.5rem;
		align-self: stretch;
		padding-block: 0.5rem;
		border-right: 1px solid var(--lp-line);
		font-size: var(--lp-text-micro);
		letter-spacing: var(--lp-tracking-label);
		text-transform: uppercase;
		color: var(--lp-ink-muted);
	}

	.lp .lp-cases__rail-num {
		font-family: var(--lp-font-display);
		font-size: 1.5rem;
		font-weight: var(--lp-display-weight);
		line-height: 1;
		color: var(--lp-crimson);
	}

	/*
	 * Вертикальные подписи. writing-mode вместо rotate: строка так остаётся
	 * настоящей строкой — её высота участвует в раскладке, и линейка не
	 * налезает на колонку с заголовком.
	 */
	.lp .lp-cases__rail-word,
	.lp .lp-cases__rail-note {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	.lp .lp-cases__rail-word {
		font-weight: var(--lp-weight-medium);
		color: var(--lp-crimson);
	}

	/* Стопка ------------------------------------------------------------- */

	.lp .lp-cases__stack {
		display: block;
		min-height: clamp(26rem, 34vw, 36rem);
		/*
		 * Перспектива задана на стопке, а не на каждом экране: тогда оба
		 * лежат в ОДНОМ пространстве и сходятся к общей точке схода, как
		 * предметы на одном столе. Перспектива у каждого по отдельности
		 * дала бы два разных стола.
		 */
		perspective: 1400px;
		perspective-origin: 62% 42%;
	}

	/*
	 * Место в колоде решает всё: чем дальше экран, тем выше и правее он
	 * стоит, тем дальше уходит по оси Z и тем сильнее развёрнут. Передний
	 * (--lp-slot: 0) лежит внизу слева и показан целиком — так в макете.
	 */
	.lp .lp-cases__shot {
		/*
		 * ШАГ КОЛОДЫ СЧИТАЕТСЯ ОТ ЧИСЛА ПРОЕКТОВ, а не задан константой.
		 * Разброс колоды постоянный — она всегда занимает один и тот же
		 * прямоугольник, — а вот шаг между экранами делится на число
		 * промежутков. Двум проектам достаётся весь разброс, и задний
		 * виден больше чем наполовину, как в макете; пяти — шаг вчетверо
		 * мельче, и колода не уезжает за край. Константа не умеет ни того,
		 * ни другого: при шаге под пятерых пара почти совпадала, а при шаге
		 * под пару пятый экран улетал из блока.
		 *
		 * --lp-count проставляет скрипт: число экранов известно только ему.
		 * Запасная двойка — на случай, если скрипт не поднялся.
		 */
		--lp-gaps: max(1, var(--lp-count, 2) - 1);

		position: absolute;
		top: calc(46% - var(--lp-slot, 0) * 46% / var(--lp-gaps));
		left: calc(var(--lp-slot, 0) * 34% / var(--lp-gaps));
		width: 66%;
		z-index: calc(20 - var(--lp-slot, 0));
		transform:
			translateZ(calc(var(--lp-slot, 0) * -95px))
			rotateY(calc(-13deg - var(--lp-slot, 0) * 2deg))
			rotateX(4deg)
			rotate(-3.2deg);
		transform-origin: center;
	}

	/*
	 * ДАЛЬНИЙ ЭКРАН ПРИТУШЕН ВУАЛЬЮ, А НЕ ФИЛЬТРОМ.
	 *
	 * По смыслу это одно и то же: дальше от лампы — темнее, иначе пять
	 * одинаково ярких экранов сливаются в мешанину и передний перестаёт
	 * читаться как главный. Но filter: brightness() на картинке в полтысячи
	 * пикселей заставляет браузер перерисовывать её заново на КАЖДОМ кадре
	 * переукладки — вместе с поворотом и перспективой это уже заметная
	 * работа, и колода начинает дёргаться. Полупрозрачный слой поля поверх
	 * картинки даёт тот же результат одной композицией слоёв.
	 */
	.lp .lp-cases__shot::after {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		content: '';
		background: var(--lp-field);
		opacity: calc(var(--lp-slot, 0) * 0.14);
	}

	/*
	 * Передний экран несёт всю тень колоды — он и есть предмет на столе.
	 * Тень усилена ПОВТОРОМ той же --lp-frame-shadow, а не новым значением:
	 * по DESIGN.md физическая тень в системе одна, и заводить рядом вторую,
	 * отличающуюся только глубиной, значило бы разводить палитру теней.
	 */
	.lp .lp-cases__shot.is-front {
		box-shadow: var(--lp-frame-shadow), var(--lp-frame-shadow);
	}
}

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

/*
 * ПОЯВЛЕНИЕ И ПЕРЕУКЛАДКА — ОДНО ОБЪЯВЛЕНИЕ transition НА ЭКРАН.
 *
 * Два отдельных правила здесь не живут: у них одинаковая специфичность,
 * и то, что стоит ниже, целиком затирает первое — переход появления просто
 * пропадал бы, стоило добавить переход колоды. Поэтому все свойства
 * перечислены разом, а задержка «по очереди» оставлена только появлению:
 * переукладка колоды обязана начинаться сразу по щелчку.
 *
 * Подписей здесь нет намеренно: их прозрачностью распоряжается колода
 * (см. .is-deck выше), и двух владельцев у одного свойства быть не может —
 * тот, кто объявлен ниже, просто отменил бы первого.
 *
 * Всё это внутри prefers-reduced-motion: колода — самое крупное движение
 * страницы, и тому, кому оно противопоказано, экран встаёт вперёд сразу.
 * Само действие при этом не пропадает.
 */
@media (prefers-reduced-motion: no-preference) {
	.lp-js .lp-cases__shot {
		--lp-case-delay: calc(var(--lp-slot, 0) * 130ms);

		opacity: 0;
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-case-delay),
			translate var(--lp-duration-slow) var(--lp-ease-out) var(--lp-case-delay),
			transform 620ms var(--lp-ease-out),
			top 620ms var(--lp-ease-out),
			left 620ms var(--lp-ease-out),
			box-shadow 620ms var(--lp-ease-out);
		translate: 0 1rem;
	}

	.lp-js .lp-cases.is-visible .lp-cases__shot {
		opacity: 1;
		translate: none;
	}

	/* Вуаль догоняет экран: она часть его глубины, а не отдельный эффект. */
	.lp .lp-cases__shot::after {
		transition: opacity 620ms var(--lp-ease-out);
	}
}


/* ---------------------------------------------------------------------- */
/* Стол с ручкой и линейкой                                               */
/* ---------------------------------------------------------------------- */

/*
 * Снимок стола из макета лежит под стопкой в правом нижнем углу секции.
 * Кромки растворены маской: у файла прямоугольный обрез, а в макете стол
 * уходит в поле без границы. Без маски по краям читалась бы рамка картинки.
 */
.lp .lp-cases__desk {
	display: none;
}

@media (min-width: 64em) {
	.lp .lp-cases__desk {
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 0;
		display: block;
		width: clamp(18rem, 27vw, 30rem);
		height: auto;
		pointer-events: none;
		-webkit-mask-image: radial-gradient(120% 120% at 85% 90%, #000 42%, transparent 78%);
		mask-image: radial-gradient(120% 120% at 85% 90%, #000 42%, transparent 78%);
	}
}

/* ---------------------------------------------------------------------- */
/* Листание                                                               */
/* ---------------------------------------------------------------------- */

.lp .lp-cases__controls {
	display: flex;
	align-items: center;
	gap: var(--lp-space-md);
}

.lp .lp-cases__arrow {
	display: grid;
	width: var(--lp-tap-min);
	height: var(--lp-tap-min);
	place-items: center;
	border: 1px solid var(--lp-line-control);
	background: transparent;
	color: var(--lp-ink);
	cursor: pointer;
	transition:
		border-color var(--lp-duration) var(--lp-ease),
		color var(--lp-duration) var(--lp-ease);
}

.lp .lp-cases__arrow:hover:not(:disabled) {
	border-color: var(--lp-crimson);
	color: var(--lp-crimson);
}

/*
 * Кнопка на краю списка выключается, а не прячется: исчезающая кнопка
 * сдвигает счётчик и уводит фокус, а выключенная остаётся на месте и
 * честно сообщает читалке, что дальше листать некуда.
 */
.lp .lp-cases__arrow:disabled {
	color: var(--lp-line-control);
	cursor: default;
}

/* Стрелка нарисована двумя гранями рамки — отдельного знака ей не нужно. */
.lp .lp-cases__arrow-glyph {
	width: 0.6rem;
	height: 0.6rem;
	border-bottom: 1px solid currentcolor;
	border-left: 1px solid currentcolor;
	transform: translateX(0.15rem) rotate(45deg);
}

.lp .lp-cases__arrow--next .lp-cases__arrow-glyph {
	transform: translateX(-0.15rem) rotate(-135deg);
}

.lp .lp-cases__counter {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	color: var(--lp-ink-muted);
}

/* ---------------------------------------------------------------------- */
/* Экран как кнопка                                                       */
/* ---------------------------------------------------------------------- */

/*
 * Кнопка сбрасывается до голого блока: рисунок кнопки здесь — сам экран.
 * Указатель появляется только у включённой кнопки, то есть когда скрипт
 * поднял колоду и щёлкать действительно есть по чему.
 */
.lp .lp-cases__shot-face {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: default;
}

.lp .lp-cases__shot-face:not(:disabled) {
	cursor: pointer;
}

/*
 * Ховер у экрана — это приглашение открыть следующий проект. Рамка получает
 * алый контур, а сам скриншот чуть приближается: действие заметно, но стопка
 * не распадается и не меняет размер занимаемого места.
 */
@media (hover: hover) and (pointer: fine) {
	.lp .lp-cases__shot {
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-case-delay, 0ms),
			translate var(--lp-duration-slow) var(--lp-ease-out) var(--lp-case-delay, 0ms),
			transform 620ms var(--lp-ease-out),
			top 620ms var(--lp-ease-out),
			left 620ms var(--lp-ease-out),
			box-shadow 320ms var(--lp-ease-out);
	}

	.lp .lp-cases__shot:has(.lp-cases__shot-face:not(:disabled)):hover {
		box-shadow: 0 0 0 1px var(--lp-crimson), var(--lp-frame-shadow);
	}

	.lp .lp-cases__shot-face:not(:disabled) .lp-cases__shot-img {
		transition: filter 260ms ease, transform 420ms var(--lp-ease-out);
	}

	.lp .lp-cases__shot-face:not(:disabled):hover .lp-cases__shot-img {
		filter: brightness(1.08) saturate(1.05);
		transform: scale(1.018);
	}

	.lp .lp-cases__shot-face:not(:disabled):focus-visible {
		outline: 2px solid var(--lp-ink);
		outline-offset: -4px;
	}

	.lp .lp-cases__shot-face:not(:disabled):hover + .lp-cases__shot-num,
	.lp .lp-cases__shot:has(.lp-cases__shot-face:not(:disabled):hover) .lp-cases__shot-num {
		background-color: var(--lp-crimson);
	}

	.lp .lp-cases__arrow-glyph {
		transition: transform 220ms var(--lp-ease-out);
	}

	.lp .lp-cases__arrow:hover:not(:disabled) .lp-cases__arrow-glyph {
		transform: translateX(0.3rem) rotate(-135deg);
	}

	.lp .lp-cases__arrow:not(.lp-cases__arrow--next):hover:not(:disabled) .lp-cases__arrow-glyph {
		transform: translateX(-0.3rem) rotate(45deg);
	}
}

/* ---------------------------------------------------------------------- */
/* Подпись переднего проекта                                              */
/* ---------------------------------------------------------------------- */

/*
 * Подняв колоду, скрипт оставляет на виду подпись только переднего экрана.
 * Все подписи при этом лежат в одной ячейке сетки друг на друге: высота
 * блока встаёт по самой длинной и не прыгает при листании. Прятать
 * лишние через display: none было бы дешевле, но тогда текст скакал бы
 * вверх-вниз вслед за длиной описания.
 *
 * Невидимая подпись выключена именно visibility, а не одной прозрачностью:
 * прозрачный текст читалка всё равно читает, и она перечислила бы все
 * проекты подряд, тогда как на экране виден один.
 *
 * Без скрипта класса .is-deck нет, и подписи остаются обычным списком —
 * это честное состояние блока и то, что увидит поисковик.
 */
.lp .lp-cases.is-deck .lp-cases__list {
	grid-template-columns: minmax(0, 1fr);
}

.lp .lp-cases.is-deck .lp-cases__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
}

.lp .lp-cases.is-deck .lp-cases__item.is-current {
	opacity: 1;
	visibility: visible;
}

/*
 * Смена подписи: уходящая гаснет, приходящая проступает следом. Задержка
 * у появления — чтобы они не накладывались друг на друга в одной ячейке.
 * visibility переключается по краям перехода, иначе она обрубила бы
 * затухание на первом же кадре.
 */
@media (prefers-reduced-motion: no-preference) {
	.lp .lp-cases.is-deck .lp-cases__item {
		transition:
			opacity 320ms var(--lp-ease-out),
			visibility 0s linear 320ms;
	}

	.lp .lp-cases.is-deck .lp-cases__item.is-current {
		transition:
			opacity 320ms var(--lp-ease-out) 220ms,
			visibility 0s;
	}
}

/* ---------------------------------------------------------------------- */
/* Узкий экран: лента проектов. Макет mobile/05-cases-mobile.png           */
/* ---------------------------------------------------------------------- */

/*
 * НА ТЕЛЕФОНЕ КОЛОДЫ НЕТ — ЕСТЬ ЛЕНТА «ЭКРАН → ЕГО ПОДПИСЬ». Колоду в ширину
 * телефона не уложить, а подпись, отделённая от своего экрана всем списком
 * проектов, перестаёт что-либо подписывать. Скрипт колоду здесь и не
 * поднимает (см. initCasesDeck в landing.js), поэтому все подписи видны.
 *
 * ПЕРЕСТАНОВКА БЕЗ ДУБЛЕЙ В РАЗМЕТКЕ. Подписи лежат в колонке текста, экраны —
 * в стопке; обе обёртки здесь растворяются (display: contents), и их дети
 * становятся соседями в одной сетке. Порядок пары задаёт --lp-n — постоянный
 * номер проекта из PHP. --lp-slot для этого не годится: его крутит колода.
 *
 * Расстояния — полями, а не зазором сетки: зазор один на всех, а здесь
 * подпись должна стоять вплотную к своему экрану и далеко от чужого.
 */
@media (max-width: 63.99em) {

	.lp .lp-cases__inner {
		row-gap: 0;
	}

	.lp .lp-cases__copy,
	.lp .lp-cases__list,
	.lp .lp-cases__stack {
		display: contents;
	}

	/*
	 * Линейка с краю превращается в строку раздела над заголовком — как
	 * «/ Состав запуска» в блоке 4. Из пяти её подписей нужна одна: остальные
	 * рассказывали о чертеже, которого на телефоне нет.
	 */
	.lp .lp-cases__rail {
		display: flex;
		align-items: center;
		margin-bottom: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
		font-size: var(--lp-text-label);
		font-weight: var(--lp-weight-medium);
		letter-spacing: var(--lp-tracking-label);
		text-transform: uppercase;
		color: var(--lp-ink-muted);
	}

	.lp .lp-cases__rail > :not(.lp-cases__rail-label) {
		display: none;
	}

	.lp .lp-cases__rail-label::before {
		margin-right: 0.5rem;
		content: '/';
	}

	.lp .lp-cases__title {
		margin-bottom: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	}

	.lp .lp-cases__text {
		margin-bottom: 2rem;
	}

	.lp .lp-cases__controls {
		display: none;
	}

	.lp .lp-cases__link {
		order: 1000;
		justify-self: start;
	}

	/*
	 * Экран отодвинут от левого края на ширину скобы: слева от него идёт
	 * красный поводок к подписи. Лёгкий наклон — тот же приём, что у листов
	 * блока 4: отпечаток лежит на столе, а не вставлен в сетку.
	 */
	.lp .lp-cases__shot {
		order: calc(10 + var(--lp-n, 0) * 2);
		margin: 0 0 1.1rem 1.5rem;
		rotate: -1.4deg;
	}

	.lp .lp-cases__shot:nth-child(even) {
		rotate: -0.8deg;
	}

	/*
	 * Загнутый угол — как у листов блока 4: треугольник цвета секции срезает
	 * угол отпечатка, по диагонали идёт линия сгиба.
	 */
	.lp .lp-cases__shot::after {
		position: absolute;
		top: -1px;
		right: -1px;
		z-index: 3;
		width: 1.6rem;
		height: 1.6rem;
		pointer-events: none;
		content: '';
		background-image:
			linear-gradient(
				45deg,
				transparent calc(50% - 0.5px),
				var(--lp-line-strong) calc(50% - 0.5px),
				var(--lp-line-strong) calc(50% + 0.5px),
				var(--lp-field-deep) calc(50% + 0.5px)
			);
	}

	/*
	 * ПОДПИСЬ И СКОБА. Скоба выходит из левой кромки экрана чуть выше его
	 * низа, спускается по полю и приводит к названию проекта — связь «этот
	 * текст про этот экран» видна, а не угадывается по соседству.
	 *
	 * Геометрия держится на трёх числах, и все они здесь:
	 *   --lp-case-gap   — поле между экраном и подписью (оно же margin выше);
	 *   --lp-case-reach — насколько выше низа экрана заходит верхний ус;
	 *   --lp-case-mid   — середина первой строки названия.
	 * Концы усов стоят на 1.5rem — ровно на кромке экрана, см. его поле слева.
	 */
	.lp .lp-cases__item {
		--lp-case-gap: 1.1rem;
		--lp-case-reach: 1.4rem;
		--lp-case-mid: 0.72rem;

		position: relative;
		order: calc(11 + var(--lp-n, 0) * 2);
		grid-template-columns: minmax(0, 1fr);
		gap: 0.45rem;
		max-width: none;
		margin-bottom: 2.5rem;
		padding-left: 2.1rem;
	}

	.lp .lp-cases__item::before {
		position: absolute;
		top: calc((var(--lp-case-gap) + var(--lp-case-reach)) * -1);
		left: 0.55rem;
		width: 0.95rem;
		height: calc(var(--lp-case-gap) + var(--lp-case-reach) + var(--lp-case-mid));
		pointer-events: none;
		content: '';
		border: 1px solid var(--lp-crimson);
		border-right: 0;
	}

	/* Точки на концах усов: на кромке экрана и у названия. */
	.lp .lp-cases__item::after {
		position: absolute;
		top: calc((var(--lp-case-gap) + var(--lp-case-reach)) * -1 - 0.25rem);
		left: 1.25rem;
		width: 0.5rem;
		height: calc(var(--lp-case-gap) + var(--lp-case-reach) + var(--lp-case-mid) + 0.5rem);
		pointer-events: none;
		content: '';
		background:
			radial-gradient(circle, var(--lp-crimson) 0 0.2rem, transparent 0.22rem) 50% 0 / 0.5rem 0.5rem no-repeat,
			radial-gradient(circle, var(--lp-crimson) 0 0.2rem, transparent 0.22rem) 50% 100% / 0.5rem 0.5rem no-repeat;
	}

	/*
	 * Название плотнее, чем в колонке на десктопе: там оно подпись к чужому
	 * экрану и набрано разрядкой метки, здесь — заголовок собственного экрана.
	 * С разрядкой 0.14em «Добрые грядки · сайт и калькулятор» ломалось на две
	 * строки, в макете оно в одну.
	 */
	.lp .lp-cases__name {
		font-size: 1.25rem;
		line-height: 1.15;
		letter-spacing: 0.03em;
	}
}