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

.lp-ownership {
	position: relative;
	overflow: clip;
	background: var(--lp-field);
}

.lp-ownership__inner {
	display: grid;
	gap: clamp(1.75rem, 3vw, 3rem);
}

/* ---------------------------------------------------------------------- */
/* Линейки реестра                                                        */
/* ---------------------------------------------------------------------- */

.lp-ownership__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem clamp(1rem, 3vw, 3rem);
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp-ownership__rail--top {
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--lp-line);
}

.lp-ownership__rail--bottom {
	padding-top: 0.85rem;
	border-top: 1px solid var(--lp-line);
}

.lp-ownership__rail-code {
	color: var(--lp-crimson);
}

/* ---------------------------------------------------------------------- */
/* Левая колонка                                                          */
/* ---------------------------------------------------------------------- */

.lp-ownership__intro {
	display: grid;
	align-content: center;
	gap: var(--lp-space-md);
	min-width: 0;
}

.lp-ownership__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
}

.lp-ownership__eyebrow-num {
	font-family: var(--lp-font-display);
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
	font-weight: var(--lp-display-weight);
	line-height: 1;
}

.lp-ownership__eyebrow-rule {
	width: clamp(1.5rem, 4vw, 3.5rem);
	height: 1px;
	background: var(--lp-crimson);
}

.lp-ownership__title {
	max-width: none;
	font-size: clamp(2rem, 1.3rem + 2.3vw, 3.5rem);
	line-height: 0.94;
	text-wrap: initial;
}

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

/*
 * Плашка принципа — единственная бордовая заливка блока. Печать прижата
 * к правому краю и не участвует в потоке текста: она метка бланка.
 */
.lp-ownership__principle {
	position: relative;
	display: grid;
	gap: 0.6rem;
	margin-top: var(--lp-space-md);
	padding: 1rem 5.5rem 1.15rem 1.25rem;
	background: var(--lp-burgundy-panel);
}

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

.lp-ownership__principle-text {
	font-family: var(--lp-font-display);
	font-size: clamp(0.9rem, 0.84rem + 0.24vw, 1.05rem);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp-ownership__principle-seal {
	position: absolute;
	top: 50%;
	right: 1.25rem;
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--lp-ink) 45%, transparent);
	border-radius: 50%;
	font-family: var(--lp-font-display);
	font-size: 1.05rem;
	color: var(--lp-ink);
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------------- */
/* Реестр: карточки и бланк                                               */
/* ---------------------------------------------------------------------- */

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

.lp-ownership__records {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Карточка-документ. Загнутый угол — это срез clip-path плюс треугольник
 * сгиба поверх него: одним только срезом угол читался бы как обрубленный,
 * а не как отвёрнутый лист.
 */
.lp-ownership__record {
	--lp-fold: 1.15rem;

	position: relative;
	display: grid;
	gap: 0.4rem;
	padding: 1rem 1.15rem 1.15rem;
	/*
	 * ЛИСТ ЛЕЖИТ НА СТОЛЕ, А НЕ НАРИСОВАН НА НЁМ. Заливка карточки совпадала
	 * с фоном секции, и от документа оставался один контур: загнутый угол
	 * было не с чем сравнивать — сгиб виден там, где лист светлее подложки.
	 * Поверхность та же, что у полос и рамок соседних блоков.
	 */
	border: 1px solid var(--lp-line-strong);
	background: var(--lp-frame-surface);
	clip-path: polygon(
		0 0,
		calc(100% - var(--lp-fold)) 0,
		100% var(--lp-fold),
		100% 100%,
		0 100%
	);
}

.lp-ownership__record-fold {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--lp-fold);
	height: var(--lp-fold);
	background: var(--lp-line-strong);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.lp-ownership__record-index {
	font-family: var(--lp-font-display);
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
	font-weight: var(--lp-display-weight);
	line-height: 1;
	color: var(--lp-crimson);
}

.lp-ownership__record-title {
	font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
	letter-spacing: var(--lp-tracking-label);
}

.lp-ownership__record-text {
	max-width: 20em;
	font-size: var(--lp-text-sm);
	line-height: 1.45;
	color: var(--lp-ink-muted);
}

/*
 * ОТМЕТКИ БЛАНКА: подпись слева, значение справа, разлиновка построчно.
 *
 * ВНЕШНЕЙ РАМКИ У НИХ БОЛЬШЕ НЕТ. Рамка внутри карточки, у которой своя
 * рамка, давала двойной контур на расстоянии в пять пикселей — на экране
 * это читалось таблицей, вклеенной в документ, и перетягивало внимание
 * с названия актива, ради которого карточка и стоит. Разлиновка строк
 * говорит то же самое и не спорит с карточкой.
 */
.lp-ownership__marks {
	display: grid;
	margin-top: 0.65rem;
	border-top: 1px solid var(--lp-line);
}

.lp-ownership__mark {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp-ownership__mark + .lp-ownership__mark {
	border-top: 1px solid var(--lp-line);
}

.lp-ownership__mark-value {
	font-family: var(--lp-font-num);
	letter-spacing: 0.1em;
	color: var(--lp-crimson);
}

/* Бланк показывается только там, где под него есть просвет между столбцами. */
.lp-ownership__plate,
.lp-ownership__record-wire {
	display: none;
}

/* ---------------------------------------------------------------------- */
/* Широкий экран                                                          */
/* ---------------------------------------------------------------------- */

@media (min-width: 64em) {

	.lp-ownership__inner {
		grid-template-columns: minmax(19rem, 0.85fr) minmax(34rem, 2fr);
		grid-template-areas:
			"railtop  railtop"
			"intro    registry"
			"railbot  railbot";
		align-items: center;
		column-gap: clamp(1.5rem, 3vw, 3.5rem);
		row-gap: clamp(1.5rem, 3vw, 3rem);
	}

	.lp-ownership__rail--top { grid-area: railtop; }
	.lp-ownership__intro { grid-area: intro; }
	.lp-ownership__registry { grid-area: registry; }
	.lp-ownership__rail--bottom { grid-area: railbot; }

	.lp-ownership__registry {
		--lp-plate: clamp(15rem, 21vw, 22rem);
	}

	/*
	 * Карточки двумя столбцами, бланк — в просвете. Первая и вторая слева,
	 * третья и четвёртая справа: так они пронумерованы в макете.
	 *
	 * ДВА СТОЛБЦА — ТОЛЬКО КОГДА КАРТОЧЕК ЧЕТЫРЕ. Раскладка была рассчитана
	 * ровно на четыре актива, а их число задаёт редактор. При трёх правый
	 * столбец оставался наполовину пустым, при двух — пустым целиком: бланк
	 * стоял по центру всей ширины, карточки жались влево, и справа зияла
	 * дыра размером с треть блока. Меньше четырёх — карточки идут одним
	 * столбцом слева, бланк уходит вправо, и композиция остаётся собранной.
	 */
	.lp-ownership__records {
		row-gap: clamp(2rem, 4vw, 4rem);
	}

	/*
	 * ГАТЬ НА `:where()`, А НЕ ПРОСТО `:has()`. Поверх этих правил лежит
	 * спокойный слой (lp-quiet.css), который раздевает блок до простого
	 * реестра и рассчитывает, что его собственные правила окажутся
	 * сильнее здешних. `:has()` считается в вес селектора и перебил бы
	 * спокойный слой: реестр разъехался бы на две колонки с дырой
	 * посередине — на месте спрятанного бланка. `:where()` веса не даёт,
	 * поэтому вес остаётся прежним и порядок слоёв сохраняется.
	 */
	.lp-ownership__records:where(:has(> .lp-ownership__record:nth-child(4))) {
		grid-template-columns: repeat(2, minmax(11rem, 1fr));
		column-gap: calc(var(--lp-plate) + clamp(2.5rem, 5vw, 6rem));
	}

	.lp-ownership__record:nth-child(1) { grid-area: 1 / 1; }
	.lp-ownership__record:nth-child(2) { grid-area: 2 / 1; }
	.lp-ownership__record:nth-child(3) { grid-area: 1 / 2; }
	.lp-ownership__record:nth-child(4) { grid-area: 2 / 2; }

	/* Меньше четырёх карточек: столбец слева, бланк справа. */
	.lp-ownership__records:where(:not(:has(> .lp-ownership__record:nth-child(4)))) {
		grid-template-columns: minmax(11rem, 1fr);
		width: calc(100% - var(--lp-plate) - clamp(2.5rem, 5vw, 6rem));
	}

	.lp-ownership__record:where(:not(:nth-child(1)):not(:nth-child(2))):where(.lp-ownership__records:not(:has(> .lp-ownership__record:nth-child(4))) *) {
		grid-area: auto;
	}

	.lp-ownership__plate:where(.lp-ownership__registry:not(:has(.lp-ownership__record:nth-child(4))) *) {
		left: auto;
		right: 0;
		transform: translateY(-50%);
	}

	/* Пятый актив и дальше — во всю ширину под бланком. */
	.lp-ownership__record:nth-child(n + 5) {
		grid-column: 1 / -1;
	}

	/* Провод от карточки к бланку. */
	.lp-ownership__record-wire {
		position: absolute;
		top: 50%;
		display: block;
		width: clamp(1.5rem, 3vw, 3.25rem);
		height: 1px;
		background: var(--lp-crimson);
	}

	.lp-ownership__record:nth-child(1) .lp-ownership__record-wire,
	.lp-ownership__record:nth-child(2) .lp-ownership__record-wire {
		left: 100%;
	}

	.lp-ownership__record:nth-child(3) .lp-ownership__record-wire,
	.lp-ownership__record:nth-child(4) .lp-ownership__record-wire {
		right: 100%;
	}

	.lp-ownership__record:nth-child(n + 5) .lp-ownership__record-wire {
		display: none;
	}

	/* Бланк передачи ---------------------------------------------------- */

	.lp-ownership__plate {
		position: absolute;
		top: 50%;
		left: 50%;
		display: grid;
		gap: 1rem;
		width: var(--lp-plate);
		transform: translate(-50%, -50%);
	}

	/*
	 * Рамка бланка: уголки по периметру и мелкая клетка внутри — тот же
	 * чертёжный слой, что и в остальных блоках.
	 */
	.lp-ownership__plate-frame {
		--lp-corner: 1.25rem;

		position: relative;
		display: grid;
		aspect-ratio: 1;
		place-items: center;
		background-image:
			linear-gradient(var(--lp-line) 1px, transparent 1px),
			linear-gradient(90deg, var(--lp-line) 1px, transparent 1px),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control)),
			linear-gradient(var(--lp-line-control), var(--lp-line-control));
		background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
		background-position:
			0 0, 0 0,
			0 0, 0 0,
			100% 0, 100% 0,
			0 100%, 0 100%,
			100% 100%, 100% 100%;
		background-size:
			1.5rem 1.5rem, 1.5rem 1.5rem,
			1px var(--lp-corner), var(--lp-corner) 1px,
			1px var(--lp-corner), var(--lp-corner) 1px,
			1px var(--lp-corner), var(--lp-corner) 1px,
			1px var(--lp-corner), var(--lp-corner) 1px;
	}

	/*
	 * ЗАМОЧНАЯ СКВАЖИНА — ОДИН КОНТУР. Дуга круга и стенки ножки лежат в
	 * одном path (см. партиал), поэтому силуэт замкнут и шва между ними нет.
	 * Подпись и галочка положены поверх обычными элементами: рисовать текст
	 * внутри SVG значило бы вынести его из типографики страницы.
	 */
	.lp-ownership__keyhole {
		position: relative;
		width: 66%;
		aspect-ratio: 120 / 150;
		color: var(--lp-line-control);
	}

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

	.lp-ownership__keyhole-word,
	.lp-ownership__keyhole-check {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	/* Подпись стоит в круге скважины — это 37% высоты фигуры. */
	.lp-ownership__keyhole-word {
		top: 30%;
		font-family: var(--lp-font-display);
		font-size: clamp(1rem, 1.4vw, 1.55rem);
		font-weight: var(--lp-display-weight);
		line-height: 1;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--lp-ink);
	}

	/* Алая галочка — единственный сигнал бланка. */
	.lp-ownership__keyhole-check {
		top: 44%;
		width: 1.35rem;
		height: 0.7rem;
		border-bottom: 2px solid var(--lp-crimson);
		border-left: 2px solid var(--lp-crimson);
		transform: translateX(-50%) rotate(-45deg);
	}

	/* Строки бланка ------------------------------------------------------ */

	.lp-ownership__deed {
		position: relative;
		display: grid;
		gap: 0.65rem;
		padding-right: 4.5rem;
	}

	.lp-ownership__deed-row {
		display: grid;
		gap: 0.3rem;
		font-size: var(--lp-text-micro);
		letter-spacing: var(--lp-tracking-label);
		text-transform: uppercase;
		color: var(--lp-ink-muted);
	}

	.lp-ownership__deed-line {
		height: 1px;
		background: var(--lp-line-control);
	}

	.lp-ownership__deed-value {
		font-family: var(--lp-font-num);
		letter-spacing: 0.18em;
		color: var(--lp-crimson);
	}

	.lp-ownership__stamp {
		position: absolute;
		right: 0;
		bottom: 0;
		display: grid;
		width: 4rem;
		height: 4rem;
		place-items: center;
		border: 1px solid var(--lp-crimson);
		border-radius: 50%;
		text-align: center;
		color: var(--lp-crimson);
	}

	.lp-ownership__stamp-word {
		position: absolute;
		top: 0.5rem;
		right: 0.35rem;
		left: 0.35rem;
		font-size: 0.4rem;
		line-height: 1.1;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/*
	 * Буквенный знак сдвинут вниз на высоту надписи по дуге: она стоит
	 * поверх круга и места в потоке не занимает. Надписи нет — нет и сдвига,
	 * иначе знак висел бы ниже центра пустого круга.
	 */
	.lp-ownership__stamp-mark {
		margin-top: 0.75rem;
		font-family: var(--lp-font-display);
		font-size: 1.1rem;
		line-height: 1;
	}

	.lp-ownership__stamp:not(:has(.lp-ownership__stamp-word)) .lp-ownership__stamp-mark {
		margin-top: 0;
	}

	/*
	 * Своя печать занимает круг целиком, и кольцо темы под ней снимается:
	 * у готовой печати свой обод, а два обода подряд читались бы браком
	 * вёрстки. Пропорции файла сохраняются — квадратная печать сядет
	 * в круг, вытянутая впишется по ширине.
	 */
	.lp-ownership__stamp--own {
		border: 0;
	}

	.lp-ownership__stamp-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

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

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

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

	.lp-js .lp-ownership.is-visible .lp-ownership__record {
		opacity: 1;
		translate: none;
	}
}