/* ====================================================================== */
/* ОБО МНЕ                                                                */
/* Макет: output/design/landing-v2/all-screens/12-about.png.              */
/*                                                                        */
/* КОМПОЗИЦИЯ — ТРИ ПОЛОСЫ. Слева на графите номер раздела, заголовок,    */
/* объяснение, рамка с именем и кнопка. В центре портрет на чертёжных     */
/* кольцах. Справа бордовая полоса с участками работы.                     */
/*                                                                        */
/* Бордовая полоса доходит до края общего контейнера .lp-split.           */
/* ====================================================================== */

.lp .lp-about__split {
	--lp-split-cols: minmax(0, 40fr) minmax(0, 34fr) minmax(0, 26fr);
}

/* ---------------------------------------------------------------------- */
/* Левая полоса                                                           */
/* ---------------------------------------------------------------------- */

.lp .lp-about__main {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--lp-space-md);
}

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

.lp .lp-about__eyebrow-num,
.lp .lp-about__eyebrow-slash {
	color: var(--lp-crimson);
}

.lp .lp-about__title {
	max-width: none;
	font-size: clamp(3.25rem, 6.3vw, 6.5rem);
	line-height: 0.98;
	text-wrap: initial;
}

.lp .lp-about__text {
	max-width: 24em;
}

/*
 * Рамка с именем. Алый контур и алая подпись роли под светлым именем —
 * ровно так в макете; это подпись автора под обещанием, а не карточка.
 */
.lp .lp-about__person {
	display: grid;
	gap: 0.4rem;
	max-width: 100%;
	margin-top: var(--lp-space-2xs);
	padding: 0.85rem 1.35rem 0.95rem;
	border: 1px solid var(--lp-burgundy);
}

.lp .lp-about__name {
	font-family: var(--lp-font-display);
	font-size: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
	font-weight: var(--lp-display-weight-soft);
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lp-ink);
}

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

.lp .lp-about__cta {
	margin-top: var(--lp-space-sm);
}

/* ---------------------------------------------------------------------- */
/* Портрет                                                                */
/* ---------------------------------------------------------------------- */

.lp .lp-about__stage {
	position: relative;
	display: grid;
	align-items: end;
	justify-items: center;
	padding: 0 var(--lp-gutter);
	overflow: clip;
}

/*
 * Портрет доходит до нижнего края секции, и ровно оттуда же выходит сквозной
 * сигнал. Слой сигнала стоит на z-index 2, поэтому портрет поднят выше: линия
 * уходит ЗА фотографию, а не по ней. Алая черта поперёк человека — не приём,
 * а брак вёрстки, и ТЗ прямо запрещает вести линию по лицам.
 */
.lp .lp-about__portrait {
	position: relative;
	z-index: 3;
	display: block;
	width: min(100%, 26rem);
	height: auto;
	object-fit: contain;
}

/*
 * Три тонких контура. Spread-тень заполняла весь зазор между кольцами;
 * outline оставляет его прозрачным, как в чертёжном слое макета.
 */
.lp .lp-about__rings {
	position: absolute;
	top: 42%;
	left: 50%;
	z-index: 0;
	width: min(78%, 30rem);
	aspect-ratio: 1;
	border: 1px solid var(--lp-line-strong);
	border-radius: 50%;
	outline: 1px solid var(--lp-line-strong);
	outline-offset: clamp(0.85rem, 1.6vw, 1.6rem);
	transform: translate(-50%, -50%);
}

.lp .lp-about__rings::before {
	position: absolute;
	inset: 12%;
	content: '';
	border: 1px dashed var(--lp-line);
	border-radius: 50%;
}

.lp .lp-about__rings::after {
	position: absolute;
	inset: -12%;
	content: '';
	background:
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) center / 100% 1px no-repeat,
		linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) center / 1px 100% no-repeat;
}

/* ---------------------------------------------------------------------- */
/* Бордовая полоса с участками                                            */
/* ---------------------------------------------------------------------- */

.lp .lp-about__side {
	display: grid;
	align-content: center;
}

.lp .lp-about__points {
	display: grid;
	gap: var(--lp-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-about__point {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

/*
 * Прицельная метка: квадратные уголки вокруг кольца. Квадрат рисуется
 * границей, кольцо — псевдоэлементом внутри.
 */
.lp .lp-about__point-mark {
	position: relative;
	display: grid;
	flex: none;
	width: 2rem;
	height: 2rem;
	place-items: center;
	color: var(--lp-ink-muted);
	background:
		linear-gradient(currentColor, currentColor) left top / 0.5rem 1px no-repeat,
		linear-gradient(currentColor, currentColor) right top / 0.5rem 1px no-repeat,
		linear-gradient(currentColor, currentColor) left bottom / 0.5rem 1px no-repeat,
		linear-gradient(currentColor, currentColor) right bottom / 0.5rem 1px no-repeat,
		linear-gradient(currentColor, currentColor) left top / 1px 0.5rem no-repeat,
		linear-gradient(currentColor, currentColor) right top / 1px 0.5rem no-repeat,
		linear-gradient(currentColor, currentColor) left bottom / 1px 0.5rem no-repeat,
		linear-gradient(currentColor, currentColor) right bottom / 1px 0.5rem no-repeat;
}

.lp .lp-about__point-mark::before {
	width: 0.8rem;
	height: 0.8rem;
	content: '';
	border: 1px solid currentColor;
	border-radius: 50%;
}

.lp .lp-about__point-mark::after {
	position: absolute;
	inset: 20%;
	content: '';
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
}

.lp .lp-about__point-text {
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	line-height: 1.35;
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

/* Провод к портрету появляется только там, где портрет стоит слева. */
.lp .lp-about__point-wire {
	display: none;
}

@media (min-width: 64em) {
	.lp .lp-about__main {
		gap: var(--lp-space-md);
		min-height: clamp(42rem, 56.25vw, 59rem);
		padding: clamp(3rem, 4.8vw, 5rem) var(--lp-space-lg) clamp(3rem, 4.8vw, 5rem) clamp(var(--lp-gutter), 7.6vw, 8rem);
	}

	.lp .lp-about__eyebrow {
		margin-bottom: var(--lp-space-md);
	}

	.lp .lp-about__stage {
		padding: 0;
		overflow: visible;
	}

	/* У исходного файла есть прозрачные поля. Вынос компенсирует их,
	   а нижний обрез убирает пояс и оставляет портрет во весь рост секции. */
	.lp .lp-about__portrait {
		position: absolute;
		bottom: -6%;
		left: -6%;
		width: 134%;
		max-width: none;
	}

	.lp .lp-about__rings {
		top: 46%;
		left: 44%;
		width: 105%;
	}

	.lp .lp-about__side {
		padding-left: clamp(3rem, 6.5vw, 6.75rem);
	}

	.lp .lp-about__points {
		gap: clamp(5rem, 10vw, 10.5rem);
	}

	/*
	 * Провод уходит из полосы влево, к портрету, и обрывается точкой —
	 * тем же координатным знаком, что и в остальных блоках.
	 */
	.lp .lp-about__point-wire {
		position: absolute;
		top: 50%;
		right: calc(100% + 0.6rem);
		display: block;
		width: clamp(2rem, 6vw, 6rem);
		height: 1px;
		background: var(--lp-crimson);
	}

	.lp .lp-about__point-wire::before {
		position: absolute;
		top: -0.2rem;
		left: -0.2rem;
		width: 0.4rem;
		height: 0.4rem;
		content: '';
		border-radius: 50%;
		background: var(--lp-crimson);
	}

	.lp .lp-about__point-wire::after {
		position: absolute;
		top: -0.2rem;
		right: -0.2rem;
		width: 0.4rem;
		height: 0.4rem;
		content: '';
		border-radius: 50%;
		background: var(--lp-crimson);
	}
}

@media (max-width: 63.999em) {
	.lp .lp-about__main {
		padding-bottom: var(--lp-space-lg);
	}

	.lp .lp-about__side {
		padding-block: var(--lp-space-xl);
	}
}

@media (min-width: 40em) and (max-width: 63.999em) {
	.lp .lp-about__split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.lp .lp-about__main {
		padding-right: var(--lp-space-sm);
		padding-bottom: var(--lp-space-xl);
	}

	.lp .lp-about__stage {
		align-content: end;
		padding: 0;
	}

	.lp .lp-about__portrait {
		width: 115%;
		max-width: none;
	}

	.lp .lp-about__side {
		grid-column: 1 / -1;
	}

	.lp .lp-about__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (prefers-reduced-motion: no-preference) {
	.lp-js .lp-about__point {
		--lp-point-delay: calc(var(--lp-i, 0) * 120ms);

		opacity: 0;
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out) var(--lp-point-delay),
			translate var(--lp-duration-slow) var(--lp-ease-out) var(--lp-point-delay);
		translate: 0.75rem 0;
	}

	.lp-js .lp-about.is-visible .lp-about__point {
		opacity: 1;
		translate: none;
	}
}