/*
 * LANDING V2 — РАЗБОР ИНТЕРФЕЙСОВ (кейс: результат и реальный экран).
 *
 * ЧТО ЗДЕСЬ ГЛАВНОЕ. Слева — результат цифрой, справа — экран, который этот
 * результат принёс. Всё остальное обслуживает эту пару и не имеет права
 * спорить с ней ни размером, ни цветом.
 *
 * ТАБЛИЦ В БЛОКЕ НЕТ. Показатели и принципы раньше стояли ячейками со своим
 * фоном и швами в 1px — на странице это читалось как выгрузка из отчёта,
 * самый дробный и самый мелкий элемент секции. Теперь и то и другое —
 * перечни на общем фоне, разделённые одной волосяной чертой.
 */

.lp .lp-interface-review {
	position: relative;
	overflow: hidden;
}

/*
 * Чертёжная сетка на фоне. Гаснет к низу секции: доведённая до края, она
 * упиралась бы в границу следующего блока и читалась бы его рамкой.
 */
.lp .lp-interface-review__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--lp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
	background-size: 3rem 3rem;
	opacity: 0.28;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.lp .lp-interface-review__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4.5rem);
}

/* --- Левая колонка: результат -------------------------------------------- */

.lp .lp-interface-review__intro {
	display: grid;
	align-content: start;
	gap: clamp(1rem, 2vw, 1.65rem);
	min-width: 0;
}

.lp .lp-interface-review__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-interface-review__eyebrow-num {
	color: var(--lp-crimson);
}

.lp .lp-interface-review__eyebrow-num::after {
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin-left: 0.85rem;
	content: '';
	background: var(--lp-line-strong);
	vertical-align: -0.05em;
}

.lp .lp-interface-review__title {
	max-width: 11ch;
	font-size: clamp(2.8rem, 1.8rem + 4vw, 6rem);
	line-height: 0.88;
}

.lp .lp-interface-review__text {
	max-width: 34em;
	margin: 0;
}

/*
 * Главная цифра блока. Стоит между двумя линиями — это единственная рамка,
 * которая ей нужна: цифра такого размера сама себе акцент.
 */
.lp .lp-interface-review__result {
	display: grid;
	gap: 0.55rem;
	padding-block: clamp(1.25rem, 2vw, 2rem);
	border-block: 1px solid var(--lp-line-strong);
}

.lp .lp-interface-review__result-value {
	font-family: var(--lp-font-display);
	font-size: clamp(4rem, 2.7rem + 5vw, 7.5rem);
	font-weight: var(--lp-display-weight);
	line-height: 0.8;
	letter-spacing: -0.035em;
	color: var(--lp-ink);
}

/*
 * Подпись под цифрой — не микротекст: она объясняет, что именно измерено,
 * и без неё цифра ничего не значит. Прежний размер этикетки терялся под
 * семисантиметровым числом.
 */
.lp .lp-interface-review__result-label {
	font-size: var(--lp-text-sm);
	line-height: 1.35;
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

/*
 * ПОКАЗАТЕЛИ — ПЕРЕЧЕНЬ, А НЕ ТАБЛИЦА. Две-три величины в ячейках с рамкой
 * и швами спорили с главной цифрой: рамка притягивает взгляд сильнее, чем
 * сами проценты. Красная черта сверху ставит их в один язык с блоком
 * «Сначала — разбор задачи», где черта отмечает начало каждого шага.
 */
.lp .lp-interface-review__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
}

.lp .lp-interface-review__metric {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.5rem;
	padding-top: clamp(0.85rem, 1.6vw, 1.15rem);
	border-top: 2px solid var(--lp-crimson);
}

.lp .lp-interface-review__metric dt,
.lp .lp-interface-review__metric dd {
	margin: 0;
}

.lp .lp-interface-review__metric dt {
	font-size: var(--lp-text-micro);
	line-height: 1.45;
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-interface-review__metric dd {
	font-family: var(--lp-font-display);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 3.2rem);
	font-weight: var(--lp-display-weight-soft);
	line-height: 1;
	color: var(--lp-crimson);
}

.lp .lp-interface-review__note {
	max-width: 40em;
	margin: 0;
	font-size: var(--lp-text-sm);
	line-height: 1.55;
	color: var(--lp-ink-muted);
}

/* --- Правая колонка: экраны ---------------------------------------------- */

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

.lp .lp-interface-review__viewport {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	min-width: 0;
}

/* Карусель включается только после инициализации: без JS экраны остаются
   обычным последовательным списком. Справа виден край следующего кадра —
   это постоянная визуальная подсказка, что блок можно листать. */
.lp .lp-interface-review__screens.is-carousel .lp-interface-review__viewport {
	position: relative;
	overflow: visible;
}

.lp .lp-interface-review__screens.is-carousel .lp-interface-review__screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 92%;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-8%);
	transition:
		opacity 260ms var(--lp-ease-out),
		transform 420ms var(--lp-ease-out);
}

.lp .lp-interface-review__screens.is-carousel .lp-interface-review__screen.is-current {
	position: relative;
	z-index: 2;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.lp .lp-interface-review__screens.is-carousel .lp-interface-review__screen.is-next {
	z-index: 1;
	opacity: 0.48;
	transform: translateX(102%);
}

.lp .lp-interface-review__controls,
.lp .lp-interface-review__nav {
	display: flex;
	align-items: center;
}

.lp .lp-interface-review__controls {
	justify-content: space-between;
	gap: 1rem;
}

.lp .lp-interface-review__hint,
.lp .lp-interface-review__counter {
	margin: 0;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-interface-review__nav {
	gap: 0.75rem;
}

.lp .lp-interface-review__arrow {
	display: inline-grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	padding: 0;
	font: inherit;
	font-size: 1.25rem;
	color: var(--lp-ink);
	background: transparent;
	border: 1px solid var(--lp-line-control);
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.lp .lp-interface-review__arrow:hover {
	color: var(--lp-crimson);
	border-color: var(--lp-crimson);
}

.lp .lp-interface-review__arrow:active {
	transform: translateY(1px);
}

.lp .lp-interface-review__arrow:focus-visible {
	outline: 2px solid var(--lp-crimson);
	outline-offset: 3px;
}

/*
 * РАМКА ЭКРАНА НЕ НАКЛОНЕНА. Прежний поворот на градус задумывался как
 * «живой снимок», но за рамкой стоит чертёжная сетка со строго прямыми
 * линиями: рядом с ней наклон читается перекосом вёрстки, а не приёмом.
 * Работу берут на себя поверхность, контур и тень — как у полос соседнего
 * блока, чтобы экран лежал в том же мире, а не был вклеен из другого.
 */
.lp .lp-interface-review__screen {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-control);
	box-shadow: var(--lp-frame-shadow);
}

/*
 * Красная кромка сверху — метка проекта, а не шапка окна браузера.
 * Двенадцать пикселей выглядели именно шапкой и требовали продолжения:
 * кнопок, адресной строки, чего-то ещё. Три пикселя работают как черта.
 */
.lp .lp-interface-review__screen::before {
	display: block;
	height: 3px;
	content: '';
	background: var(--lp-crimson);
}

.lp .lp-interface-review__shot {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Подпись под экраном. Раньше это была широкая пустая полоса с мелким
 * словом у левого края — она выглядела обрезанной областью снимка.
 * Красная точка привязывает подпись к экрану и заполняет строку смыслом.
 */
.lp .lp-interface-review__screen-caption {
	display: grid;
	grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
	gap: 0.6rem clamp(1rem, 2vw, 2rem);
	padding: 0.9rem clamp(0.9rem, 2vw, 1.25rem) 1rem;
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-interface-review__screen-title {
	grid-row: 1 / span 2;
	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);
}

.lp .lp-interface-review__screen-title::before {
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin-right: 0.7rem;
	content: '';
	background: var(--lp-crimson);
	vertical-align: 0.08em;
}

.lp .lp-interface-review__screen-detail,
.lp .lp-interface-review__screen-comment {
	font-size: var(--lp-text-sm);
	line-height: 1.45;
	color: var(--lp-ink-muted);
}

.lp .lp-interface-review__screen-label {
	display: block;
	margin-bottom: 0.15rem;
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
}

@media (max-width: 47.99em) {
	.lp .lp-interface-review__inner {
		gap: 2.5rem;
	}

	.lp .lp-interface-review__intro {
		gap: 1.15rem;
	}

	.lp .lp-interface-review__title {
		max-width: 9ch;
		font-size: clamp(2.65rem, 12vw, 3.6rem);
		line-height: 0.9;
	}

	.lp .lp-interface-review__result-value {
		font-size: clamp(3.8rem, 18vw, 5.4rem);
	}

	.lp .lp-interface-review__screens.is-carousel .lp-interface-review__screen {
		width: 88%;
	}

	.lp .lp-interface-review__screen-caption {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.7rem;
		padding: 0.85rem 0.9rem 1rem;
	}

	.lp .lp-interface-review__screen-title {
		grid-row: auto;
	}

	.lp .lp-interface-review__controls {
		align-items: flex-start;
		gap: 0.75rem;
	}

	.lp .lp-interface-review__hint {
		max-width: 12rem;
		line-height: 1.35;
	}

	.lp .lp-interface-review__nav {
		flex: none;
		gap: 0.5rem;
	}

	.lp .lp-interface-review__arrow {
		width: 2.65rem;
		height: 2.65rem;
	}

	.lp .lp-interface-review__callouts {
		gap: 1rem;
	}
}

/* --- Принципы ------------------------------------------------------------ */

/*
 * Три принципа — тот же перечень, что и показатели: черта сверху, номер
 * красным, название прописными. Ячейки с фоном превращали их в третью
 * таблицу на одном экране.
 */
.lp .lp-interface-review__callouts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-interface-review__callout {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.85rem;
	min-width: 0;
	padding-top: clamp(0.85rem, 1.6vw, 1.15rem);
	border-top: 1px solid var(--lp-line-control);
}

.lp .lp-interface-review__callout-index {
	font-family: var(--lp-font-display);
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--lp-crimson);
}

.lp .lp-interface-review__callout-title {
	font-family: var(--lp-font-display);
	font-size: clamp(0.95rem, 0.88rem + 0.24vw, 1.1rem);
	font-weight: var(--lp-display-weight-soft);
	line-height: 1.25;
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

/* --- Раскладка ----------------------------------------------------------- */

@media (min-width: 64em) {

	.lp .lp-interface-review__inner {
		grid-template-columns: minmax(23rem, 0.85fr) minmax(34rem, 1.35fr);
		grid-template-areas:
			"intro screens"
			"callouts callouts";
		align-items: center;
		column-gap: clamp(2rem, 5vw, 6rem);
	}

	.lp .lp-interface-review__intro {
		grid-area: intro;
	}

	.lp .lp-interface-review__screens {
		grid-area: screens;
	}

	.lp .lp-interface-review__callouts {
		grid-area: callouts;
	}
}

@media (max-width: 47.99em) {

	.lp .lp-interface-review__callouts {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

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

	.lp-js .lp-interface-review__screens:not(.is-carousel) .lp-interface-review__screen {
		opacity: 0;
		translate: 1rem 0;
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out),
			translate var(--lp-duration-slow) var(--lp-ease-out);
	}

	.lp-js .lp-interface-review.is-visible .lp-interface-review__screens:not(.is-carousel) .lp-interface-review__screen {
		opacity: 1;
		translate: none;
	}
}