/*
 * ГЛАВНАЯ СТРАНИЦА, БЛОК 1 — ПЕРВЫЙ ЭКРАН.
 * Разметка: sections/lp-home-hero.php. Зависит от landing/tokens.css и
 * landing/base.css, подключается после них. Шапку рисует lp-hero.css
 * (sections/lp-site-header.php) — здесь её нет.
 *
 * ШИРИНА — КАК У ОСТАЛЬНЫХ СТРАНИЦ. Экран стоит в .lp-container: левый край на
 * одной вертикали с логотипом шапки, правый — с её последней кнопкой.
 *
 * ОДНА ЕДИНИЦА НА ЭКРАН. Макет нарисован на 2000×1108, а композиция держится на
 * том, что заголовок, портрет и чертёж стоят друг относительно друга ровно
 * так, как нарисованы. Поэтому на широком экране каждый размер здесь — доля
 * `--hm-u`, то есть «один пиксель макета»:
 *
 *     --hm-u = меньшее из (ширина контейнера / 2300, высота окна без шапки / 982)
 *
 * 2300 — это ширина, на которую рассчитан макет (1862), плюс запас справа:
 * экран получается заметно спокойнее, чем при растяжке макета на всю ширину,
 * а пустое место между текстом и портретом остаётся воздухом. Если окно
 * низкое, единицу ограничивает высота, и композиция остаётся целой.
 *
 * Числа в calc(N * var(--hm-u)) — координаты из макета, снятые с него в
 * пикселях и пересчитанные от левого верхнего угла экрана (x−73, y−118).
 * Менять их надо только вместе с макетом.
 *
 * НА УЗКОМ ЭКРАНЕ (до 1200px) композиция другая и не масштабируется, а
 * собирается заново: оффер → H1 → объяснение → кнопки → метка → портрет
 * (порядок из PRODUCT.md). Портрет с чертежом остаются одной картинкой и
 * масштабируются вместе — см. блок узкого экрана в конце файла.
 */

/* ---------------------------------------------------------------------- */
/* Каркас и локальные токены                                              */
/* ---------------------------------------------------------------------- */

.lp .lp-home-hero {
	/*
	 * Цвета, кегли и линии — только токены посадочной (tokens.css). Своих
	 * значений у блока нет: красный текст и чертёж — алый сигнал, заливка
	 * кнопки — бордовый, как на остальных страницах сайта.
	 */
	position: relative;
	overflow-x: clip;
	color: var(--lp-ink);
	background-color: var(--lp-field);

	/* Место под сквозную фиксированную шапку: на узком экране она в одну
	   строку, от 48em — со вторым рядом якорей, от 75em — снова в одну. */
	padding-top: 6.5rem;
}

@media (min-width: 48em) {
	.lp .lp-home-hero {
		padding-top: clamp(11rem, 10rem + 3vw, 12rem);
	}
}

@media (min-width: 75em) {
	.lp .lp-home-hero {
		padding-top: clamp(6rem, 4rem + 3vw, 8rem);
	}
}

/*
 * Контейнер размеров: от его ширины считается единица макета. Единица
 * вычисляется потомком (.lp-home-hero__grid), потому что cqw разрешается
 * относительно предка, а не самого контейнера.
 */
.lp .lp-home-hero__stage {
	container-type: inline-size;
}

.lp .lp-home-hero__grid {
	--hm-u: min(calc(100cqw / 2300), calc((100svh - 8rem) / 982));

	position: relative;
	display: flex;
	flex-direction: column;
	/* Нижний край обрезает портрет, как в макете его обрезает край экрана;
	   сверху и по бокам чертёж вправе выходить за рамку. */
	height: calc(982 * var(--hm-u));
	clip-path: inset(-400px -400px 0 -400px);
}

/*
 * Логотип сквозной шапки — ссылка на главную. Стили шапки ведёт lp-hero.css,
 * но правила для ссылки там нет (оно в незакоммиченной правке посадочной),
 * поэтому здесь: без него картинка в ссылке садится на строку, а не по центру.
 */
.lp .lp-site-header .lp-hero__brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Текст слева                                                            */
/* ---------------------------------------------------------------------- */

.lp .lp-home-hero__body {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* Сдвигает центр блока вверх: заголовок встаёт на y=171 макета. */
	padding-bottom: calc(57 * var(--hm-u));
}

.lp .lp-home-hero__title {
	font-family: var(--lp-font-display);
	font-size: calc(120 * var(--hm-u));
	font-weight: var(--lp-display-weight);
	line-height: calc(120 * var(--hm-u));
	letter-spacing: var(--lp-tracking-display);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-home-hero__title-line {
	display: block;
	white-space: nowrap;
}

.lp .lp-home-hero__title-line--accent {
	/* Красный текст на графите — только алый сигнал (5.05:1). */
	color: var(--lp-crimson);
}

.lp .lp-home-hero__lead {
	margin-top: calc(25 * var(--hm-u));
	font-size: max(1rem, calc(38 * var(--hm-u)));
	line-height: var(--lp-leading-lead);
	font-weight: var(--lp-weight-regular);
	color: var(--lp-ink);
}

.lp .lp-home-hero__lead-line {
	display: block;
}

.lp .lp-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(31 * var(--hm-u));
	margin-top: calc(42 * var(--hm-u));
}

/*
 * Кнопки — `.lp-btn` из base.css (шрифт, трекинг, заливка, состояния), здесь
 * только размеры. Кегль подписи — общий кнопочный, не растёт с экраном. Главная — бордовая заливка, вторая — контур,
 * ровно как у кнопки «Обсудить проект» в шапке.
 */
.lp .lp-home-hero__btn {
	gap: calc(18 * var(--hm-u));
	min-height: 62px;
	padding-inline: calc(53 * var(--hm-u)) calc(41 * var(--hm-u));
	white-space: nowrap;
}

.lp .lp-home-hero__btn--primary {
	min-width: calc(450 * var(--hm-u));
}

.lp .lp-home-hero__btn--ghost {
	min-width: calc(384 * var(--hm-u));
	padding-inline: calc(46 * var(--hm-u)) calc(36 * var(--hm-u));
}

/* Стрелка — общая `.lp-btn__arrow` из base.css; здесь только её размер. */
.lp .lp-home-hero__arrow {
	width: max(1.25rem, calc(27 * var(--hm-u)));
}

/* ---------------------------------------------------------------------- */
/* Портрет и чертёж                                                       */
/* ---------------------------------------------------------------------- */

/*
 * Коробка чертежа — кусок макета (x 930…2000, y 60…1100), прижатый к правому
 * и нижнему краям экрана. Всё внутри считается от её левого верхнего угла.
 */
.lp .lp-home-hero__visual {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	width: calc(1070 * var(--hm-u));
	height: calc(1040 * var(--hm-u));
	pointer-events: none;
}

.lp .lp-home-hero__blueprint {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--lp-crimson);
}

.lp .lp-home-hero__letter {
	stroke-width: 3;
	stroke-linejoin: miter;
}

/* Направляющие: тоньше буквы и пунктиром, чтобы не спорить с ней. */
.lp .lp-home-hero__guides {
	stroke-width: 1.5;
	stroke-dasharray: 7 6;
	opacity: 0.85;
}

.lp .lp-home-hero__nodes rect {
	fill: var(--lp-crimson);
	stroke: none;
}

.lp .lp-home-hero__figure {
	position: absolute;
	inset: 0;
}

.lp .lp-home-hero__portrait {
	position: absolute;
	top: calc(-10 * var(--hm-u));
	left: calc(51 * var(--hm-u));
	display: block;
	width: calc(800 * var(--hm-u));
	height: auto;
	max-width: none;
}

.lp .lp-home-hero__badge {
	position: absolute;
	top: calc(718 * var(--hm-u));
	left: calc(530 * var(--hm-u));
	display: flex;
	align-items: center;
	height: calc(60 * var(--hm-u));
	padding: 0 calc(34 * var(--hm-u));
	font-size: max(var(--lp-text-label), calc(21 * var(--hm-u)));
	font-weight: var(--lp-weight-bold);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lp-ink);
	background-color: var(--lp-field-deep);
}

/* Красная черта слева от плашки выступает за неё, как метка на чертеже. */
.lp .lp-home-hero__badge::before {
	position: absolute;
	top: calc(-13 * var(--hm-u));
	bottom: calc(-22 * var(--hm-u));
	left: 0;
	width: 2px;
	background-color: var(--lp-crimson);
	content: '';
}

/* ---------------------------------------------------------------------- */
/* Нижняя метка                                                           */
/* ---------------------------------------------------------------------- */

/*
 * Линия уходит под портрет (тот выше по слою) и появляется за ним у правого
 * края контейнера с красным квадратом на конце — как в макете.
 */
.lp .lp-home-hero__marker {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	margin: 0 0 calc(59 * var(--hm-u));
}

.lp .lp-home-hero__marker-dot {
	flex: none;
	width: calc(11 * var(--hm-u));
	min-width: 7px;
	aspect-ratio: 1;
	background-color: var(--lp-crimson);
}

.lp .lp-home-hero__marker-tick {
	flex: none;
	width: calc(18 * var(--hm-u));
	height: 2px;
	background-color: var(--lp-crimson);
}

.lp .lp-home-hero__marker-text {
	flex: none;
	margin-left: calc(26 * var(--hm-u));
	font-size: max(var(--lp-text-label), calc(22 * var(--hm-u)));
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1;
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-home-hero__marker-line {
	flex: 1;
	height: 1px;
	margin: 0 calc(8 * var(--hm-u)) 0 calc(30 * var(--hm-u));
	background-color: var(--lp-line-control);
}

/* ---------------------------------------------------------------------- */
/* Узкий экран (до 1200px): композиция собирается заново                  */
/* ---------------------------------------------------------------------- */

@media (max-width: 74.99em) {
	.lp .lp-home-hero__grid {
		height: auto;
		clip-path: none;
	}

	.lp .lp-home-hero__body {
		flex: none;
		padding-bottom: 0;
	}

	.lp .lp-home-hero__title {
		/* Самый длинный неразрывный кусок — «МАРКЕТОЛОГ:», около 4,5 кегля. */
		font-size: min(calc(80cqw / 5.6), 9.5rem);
		line-height: 0.92;
	}

	/* Строки на телефоне переносятся: иначе «Частный интернет-маркетолог:»
	   шире экрана и режется справа. */
	.lp .lp-home-hero__title-line {
		white-space: normal;
		overflow-wrap: break-word;
	}

	.lp .lp-home-hero__lead {
		margin-top: 1.5rem;
		font-size: var(--lp-text-lead);
		line-height: var(--lp-leading-lead);
		max-width: 34rem;
	}

	/* На телефоне строки объяснения — обычный абзац. */
	.lp .lp-home-hero__lead-line {
		display: inline;
	}

	.lp .lp-home-hero__lead-line::after {
		content: ' ';
	}

	.lp .lp-home-hero__actions {
		flex-direction: column;
		gap: 0.75rem;
		width: 100%;
		max-width: 34rem;
		margin-top: 1.75rem;
	}

	.lp .lp-home-hero__btn {
		justify-content: space-between;
		min-height: 3.5rem;
		padding-inline: 1.5rem;
		gap: 1rem;
	}

	.lp .lp-home-hero__btn--primary,
	.lp .lp-home-hero__btn--ghost {
		min-width: 0;
	}

	.lp .lp-home-hero__arrow {
		width: 1.625rem;
	}

	/* Метка идёт сразу под кнопками, а портрет — после неё. */
	.lp .lp-home-hero__marker {
		order: 2;
		margin: 1.75rem 0 0;
	}

	.lp .lp-home-hero__marker-dot {
		width: 0.5rem;
	}

	.lp .lp-home-hero__marker-tick {
		width: 1rem;
	}

	.lp .lp-home-hero__marker-text {
		margin-left: 0.75rem;
		font-size: var(--lp-text-micro);
		/* Длинную подпись на 320px разрешаем перенести, а не обрезать. */
		white-space: normal;
		line-height: 1.35;
	}

	.lp .lp-home-hero__marker-line,
	.lp .lp-home-hero__marker-line + .lp-home-hero__marker-dot {
		display: none;
	}

	/*
	 * Чертёж с портретом — по-прежнему одна коробка, но теперь она в потоке
	 * и её единица считается от ширины контейнера. Портрет упирается в
	 * нижний край коробки и обрезается им, как в макете его обрезает край
	 * экрана.
	 */
	.lp .lp-home-hero__visual {
		--hm-u: calc(min(100cqw, 40rem) / 1070);
		position: relative;
		order: 3;
		right: auto;
		bottom: auto;
		margin: 1.5rem 0 0 auto;
		overflow: hidden;
	}

	.lp .lp-home-hero__badge {
		top: auto;
		right: calc(40 * var(--hm-u));
		bottom: calc(60 * var(--hm-u));
		left: auto;
		height: 2.25rem;
		padding: 0 0.875rem;
		font-size: var(--lp-text-micro);
	}

	.lp .lp-home-hero__badge::before {
		top: -0.4rem;
		bottom: -0.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp .lp-home-hero__arrow {
		transition: none;
	}
}