/*
 * LANDING V2 — ПРОБЛЕМА / ДИАГНОСТИКА.
 * Макет: output/design/landing-v2/all-screens/02-problem.png.
 *
 * Композиция макета — планшет чертёжника: слева заголовок в угловых скобках
 * и координатная выноска, справа вертикальная ось с прицельными кольцами,
 * от каждого кольца отвод к знаку и карточке причины.
 */

.lp .lp-problem {
	position: relative;
	overflow: hidden;
	background: var(--lp-field);
}

/*
 * Чертёжная сетка. Раньше здесь стояла переменная --lp-line-soft, которой
 * в токенах нет: браузер отбрасывал всё объявление целиком, и сетки на
 * странице не было вовсе. Берём --lp-line — это и есть «почти невидимый
 * чертёжный слой» из tokens.css.
 */
.lp .lp-problem::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
}

.lp .lp-problem__draft {
	--lp-draft-line-y: 8%;
	--lp-draft-line-w: min(61%, 62rem);
	--lp-draft-cross-x: 91%;
	--lp-draft-cross-y: 11%;
}

.lp .lp-problem__inner {
	position: relative;
	z-index: 1;
}

.lp .lp-problem__layout,
.lp .lp-problem__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.lp .lp-problem__layout {
	gap: clamp(2.75rem, 6vw, 6.5rem);
}

.lp .lp-problem__grid {
	align-content: start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Заголовок в угловых скобках ------------------------------------------ */

.lp .lp-problem__headline {
	position: relative;
	justify-self: start;
	padding: clamp(0.75rem, 1.5vw, 1.35rem) clamp(1rem, 2vw, 2rem);
}

/*
 * Скобки обреза. Рисуются двумя углами по диагонали, как в макете:
 * левый верхний и правый нижний. Замкнутая рамка читалась бы как карточка,
 * а это метка кадрирования чертежа.
 */
.lp .lp-problem__bracket {
	position: absolute;
	width: clamp(1.25rem, 2vw, 2rem);
	height: clamp(1.25rem, 2vw, 2rem);
}

.lp .lp-problem__bracket--tl {
	top: 0;
	left: 0;
	border-top: 2px solid var(--lp-crimson);
	border-left: 2px solid var(--lp-crimson);
}

.lp .lp-problem__bracket--br {
	right: 0;
	bottom: 0;
	border-right: 2px solid var(--lp-crimson);
	border-bottom: 2px solid var(--lp-crimson);
}

.lp .lp-problem__title {
	max-width: 24ch;
	font-size: clamp(2.35rem, 1.65rem + 2.45vw, 4rem);
	line-height: 0.98;
	text-wrap: initial; /* переносы задаёт редактор в ACF */
}

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

.lp .lp-problem__text {
	position: relative;
	max-width: 29rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-problem__text::before {
	position: absolute;
	top: -0.25rem;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	content: '';
	border: 1px solid var(--lp-crimson);
	border-radius: 50%;
	background: var(--lp-field);
}

.lp .lp-problem__points {
	display: grid;
	gap: 0.75rem;
	max-width: 29rem;
}

.lp .lp-problem__point {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.lp .lp-problem__point-text {
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
}

/* Координатная выноска -------------------------------------------------- */

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

/* Диагностическая ось -------------------------------------------------- */

.lp .lp-problem__diagnostic {
	position: relative;
	min-width: 0;
}

.lp .lp-problem__blueprint,
.lp .lp-problem__coords {
	display: none;
}

.lp .lp-problem__causes {
	display: grid;
	gap: 1.25rem;
}

.lp .lp-problem__cause {
	--lp-cause-delay: calc(var(--lp-i, 0) * 120ms);

	position: relative;
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
}

.lp .lp-problem__cause-node {
	display: none;
}

.lp .lp-problem__cause-icon {
	position: relative;
	z-index: 2;
	display: grid;
	width: 4rem;
	max-width: 100%;
	aspect-ratio: 1;
	place-items: center;
	color: var(--lp-ink-muted);
}

.lp .lp-problem__cause-icon img,
.lp .lp-problem__cause-icon svg {
	position: relative;
	z-index: 1;
	display: block;
	width: min(3.2rem, 82%);
	height: min(3.2rem, 82%);
	object-fit: contain;
}

.lp .lp-problem__cause-icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * КАРТОЧКА ПРИЧИНЫ. В макете у неё срезаны два угла по диагонали, и срез
 * несёт тот же алый контур, что и прямые стороны. Обычная рамка так не
 * умеет: clip-path режет и её. Поэтому контур — это фон самой карточки,
 * а тёмная заливка лежит внутренним слоем, отступив на пиксель.
 */
.lp .lp-problem__cause-copy {
	--lp-cause-notch: 0.9rem;

	position: relative;
	display: grid;
	gap: 0.55rem;
	min-width: 0;
	padding: 1.05rem 1.35rem 1.25rem;
	background: rgb(247 49 60 / 0.4);
	clip-path: polygon(
		0 var(--lp-cause-notch),
		var(--lp-cause-notch) 0,
		100% 0,
		100% calc(100% - var(--lp-cause-notch)),
		calc(100% - var(--lp-cause-notch)) 100%,
		0 100%
	);
}

.lp .lp-problem__cause-copy::before {
	position: absolute;
	inset: 1px;
	z-index: 0;
	content: '';
	/*
	 * Заливка карточки замешана из токенов, а не подобрана пипеткой:
	 * бордовая панель, растворённая в графитовом поле. Новой краски в
	 * палитре не появляется, а градиент повторяет уход макета слева направо.
	 */
	background:
		linear-gradient(
			105deg,
			color-mix(in srgb, var(--lp-burgundy-panel) 62%, var(--lp-field)),
			color-mix(in srgb, var(--lp-burgundy-panel) 26%, var(--lp-field)) 62%,
			color-mix(in srgb, var(--lp-burgundy-panel) 14%, var(--lp-field))
		);
	clip-path: inherit;
}

/* Короткий алый штрих в правом верхнем углу — метка активной карточки. */
.lp .lp-problem__cause-copy::after {
	position: absolute;
	top: 0.85rem;
	right: 1.1rem;
	z-index: 1;
	width: 1.5rem;
	height: 2px;
	content: '';
	background: var(--lp-crimson);
}

.lp .lp-problem__cause-kicker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.6rem;
	font-size: var(--lp-text-micro);
	font-weight: var(--lp-weight-medium);
	line-height: 1.35;
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
	border-bottom: 1px solid rgb(247 49 60 / 0.28);
}

.lp .lp-problem__cause-number {
	font-variant-numeric: tabular-nums;
	color: var(--lp-ink);
}

.lp .lp-problem__cause-text {
	position: relative;
	z-index: 1;
	max-width: 29em;
	font-family: var(--lp-font-display);
	font-size: clamp(1.05rem, 0.93rem + 0.48vw, 1.42rem);
	font-weight: var(--lp-display-weight-soft);
	line-height: var(--lp-leading-tight);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

@media (min-width: 64em) {
	.lp .lp-problem::before {
		opacity: 0.6;
		-webkit-mask-image: linear-gradient(90deg, transparent 31%, #000 49%, #000 100%);
		mask-image: linear-gradient(90deg, transparent 31%, #000 49%, #000 100%);
	}

	/*
	 * Левая колонка шире правой по содержанию, а не по числу: заголовок
	 * набран в три строки переносами редактора, и колонка обязана вместить
	 * самую длинную из них целиком. Уже — и строка ломается на четвёртую,
	 * а монумент из макета рассыпается.
	 */
	.lp .lp-problem__layout {
		grid-template-columns: minmax(34rem, 1.02fr) minmax(34rem, 1.24fr);
		align-items: center;
	}

	.lp .lp-problem__headline {
		padding-inline: clamp(0.85rem, 1.2vw, 1.35rem);
	}

	.lp .lp-problem__title {
		max-width: none;
		font-size: clamp(2.2rem, 1.1rem + 2.1vw, 3.5rem);
	}

	.lp .lp-problem__grid {
		align-content: center;
	}

	/* Выноска показывается только там, где под неё есть поле, как в макете. */
	.lp .lp-problem__readout {
		display: grid;
		gap: 0.35rem;
		justify-self: start;
		margin-top: clamp(1.5rem, 4vw, 4rem);
		padding: 0.75rem 1.1rem;
		border: 1px solid var(--lp-line-strong);
		font-family: var(--lp-font-num);
		font-size: var(--lp-text-micro);
		letter-spacing: 0.08em;
		color: var(--lp-ink-muted);
	}

	.lp .lp-problem__diagnostic {
		min-height: 30rem;
		padding-block: 1.5rem;
	}

	.lp .lp-problem__blueprint {
		position: absolute;
		inset: 0;
		display: block;
		pointer-events: none;
	}

	/*
	 * Вертикальная ось чертежа. В макете она техническая, светлая — алым
	 * горят только центры прицельных колец, иначе сигнал перестаёт быть
	 * редким и весь блок краснеет.
	 */
	.lp .lp-problem__rail {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 6.5rem;
		width: 1px;
		background: linear-gradient(to bottom, transparent, var(--lp-line-control) 10%, var(--lp-line-control) 90%, transparent);
		transform-origin: top;
	}

	.lp .lp-problem__axis {
		position: absolute;
		left: 0;
		width: 13rem;
		height: 1px;
		background: repeating-linear-gradient(to right, var(--lp-line-control) 0 0.28rem, transparent 0.28rem 0.7rem);
		opacity: 0.55;
	}

	.lp .lp-problem__axis--top {
		top: 1rem;
	}

	.lp .lp-problem__axis--bottom {
		bottom: 1rem;
	}

	/* Координатная сетка чертежа ---------------------------------------- */

	/*
	 * Сетка занимает ровно прямоугольник между осями: буквы колонок стоят
	 * НАД ним, номера строк — слева от него, поэтому поля под подписи взяты
	 * отступом самого слоя, а не внутренним полем. Проценты подписей тогда
	 * считаются от той же коробки, что и линии, и подпись не может разъехаться
	 * со своей линией.
	 */
	.lp .lp-problem__coords {
		position: absolute;
		top: 1.4rem;
		right: 1rem;
		bottom: 0.5rem;
		left: 2.5rem;
		display: block;
		color: var(--lp-line-strong);
	}

	.lp .lp-problem__net {
		display: block;
		width: 100%;
		height: 100%;
	}

	.lp .lp-problem__coord {
		position: absolute;
		font-family: var(--lp-font-num);
		font-size: var(--lp-text-micro);
		line-height: 1;
		letter-spacing: 0.14em;
		color: var(--lp-line-control);
		opacity: 0.72;
	}

	/*
	 * Номер линии живёт в СВОЕЙ переменной, а не в общей --lp-i. Той помечены
	 * причины блока, и по ней считается задержка их появления: одно имя на
	 * два разных счётчика однажды свело бы их вместе.
	 */
	.lp .lp-problem__coord--col {
		top: -1.4rem;
		left: calc(var(--lp-coord, 0) * 20%);
		transform: translateX(-50%);
	}

	.lp .lp-problem__coord--row {
		top: calc(var(--lp-coord, 0) * 20%);
		left: -2.5rem;
		transform: translateY(-50%);
	}

	.lp .lp-problem__causes {
		position: relative;
		z-index: 1;
		align-content: space-between;
		min-height: 27rem;
	}

	.lp .lp-problem__cause {
		grid-template-columns: 6.5rem 5.5rem minmax(0, 38rem);
		gap: 1.1rem;
		min-height: 7.35rem;
	}

	/* Отвод от кольца к знаку. Тонкий и светлый — это провод, а не сигнал. */
	.lp .lp-problem__cause::before {
		position: absolute;
		top: 50%;
		left: 6.5rem;
		right: calc(100% - 14.2rem);
		height: 1px;
		content: '';
		background: var(--lp-line-control);
		opacity: 0.8;
	}

	/*
	 * ПРИЦЕЛЬНОЕ КОЛЬЦО. Два кольца и алый центр со свечением — знак
	 * координаты из языка макета. Внутренний span рисует второе кольцо,
	 * ::before — саму точку.
	 */
	.lp .lp-problem__cause-node {
		position: absolute;
		top: 50%;
		left: 6.5rem;
		z-index: 3;
		display: grid;
		width: 2.6rem;
		height: 2.6rem;
		place-items: center;
		border: 1px solid var(--lp-line-control);
		border-radius: 50%;
		background: var(--lp-field);
		transform: translate(-50%, -50%);
	}

	.lp .lp-problem__cause-node::before {
		width: 0.55rem;
		height: 0.55rem;
		content: '';
		border-radius: 50%;
		background: var(--lp-crimson);
		box-shadow: 0 0 0 0.3rem rgb(247 49 60 / 0.16);
	}

	.lp .lp-problem__cause-node span {
		position: absolute;
		inset: 0.42rem;
		border: 1px solid var(--lp-line-strong);
		border-radius: 50%;
	}

	.lp .lp-problem__cause-icon {
		grid-column: 2;
		width: 5.5rem;
		background: var(--lp-field);
		transition:
			color 220ms ease,
			transform 320ms var(--lp-ease-out);
	}

	.lp .lp-problem__cause-copy {
		grid-column: 3;
		width: 100%;
		max-width: 38rem;
		min-height: 6.25rem;
		align-content: center;
		padding: 1.05rem 1.5rem 1.15rem;
		transition:
			background-color 220ms ease,
			transform 320ms var(--lp-ease-out);
	}

	.lp .lp-problem__cause:hover .lp-problem__cause-icon {
		color: var(--lp-ink);
		transform: scale(1.055) rotate(-2deg);
	}

	.lp .lp-problem__cause:hover .lp-problem__cause-copy {
		background-color: var(--lp-crimson);
		transform: translateX(0.35rem);
	}
}

@media (max-width: 39.99em) {
	.lp .lp-problem__cause {
		grid-template-columns: 3.2rem minmax(0, 1fr);
		gap: 0.8rem;
	}

	.lp .lp-problem__cause-icon {
		width: 3.2rem;
	}

	.lp .lp-problem__cause-icon img,
	.lp .lp-problem__cause-icon svg {
		width: 2.55rem;
		height: 2.55rem;
	}

	.lp .lp-problem__cause-copy {
		padding: 1rem 1rem 1.1rem;
	}
}

/* Появление схемы ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.lp-js .lp-problem__causes.lp-reveal {
		opacity: 1;
		transform: none;
	}

	.lp-js .lp-problem__cause {
		opacity: 0;
		transform: translateY(1.25rem);
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-cause-delay),
			transform var(--lp-duration-slow) var(--lp-ease-out) var(--lp-cause-delay);
	}

	.lp-js .lp-problem__causes.is-visible .lp-problem__cause {
		opacity: 1;
		transform: none;
	}

	.lp-js .lp-problem__cause-icon {
		transform: scale(0.82);
	}

	.lp-js .lp-problem__causes.is-visible .lp-problem__cause-icon {
		transform: scale(1);
	}
}