/* Появление блоков при прокрутке — страница общественного пространства.
 *
 * Скрытое состояние включает ТОЛЬКО скрипт (assets/js/public-spaces-reveal.js ставит
 * html.dp-reveal-on). Без JS, без IntersectionObserver и при prefers-reduced-motion
 * страница остаётся такой, как была, — ничего не прячется.
 *
 * Эффекты два: блок всплывает (прозрачность + сдвиг на 34px) и кадр внутри медленно
 * «приезжает» из увеличения 1,07 → 1. Ряды кадров идут каскадом (--dp-d задаёт скрипт).
 * Transform не меняет раскладку, поэтому выравниватель высоты рядов
 * (single-public-spaces.php, offsetTop/offsetHeight) работает как раньше.
 *
 * Отключить целиком: add_filter( 'dp_public_spaces_reveal', '__return_false' );
 */

html.dp-reveal-on .dp-reveal {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) var(--dp-d, 0ms),
		transform 1.1s cubic-bezier(0.22, 0.7, 0.2, 1) var(--dp-d, 0ms);
	will-change: opacity, transform;
}

html.dp-reveal-on .dp-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Кадры: рамка обрезает увеличенную картинку, пока та «приезжает» на место */
html.dp-reveal-on .dp-reveal--img {
	overflow: hidden;
}

html.dp-reveal-on .dp-reveal--img img {
	transform: scale(1.07);
	transition: transform 1.7s cubic-bezier(0.16, 0.84, 0.24, 1) var(--dp-d, 0ms);
}

html.dp-reveal-on .dp-reveal--img.is-in img {
	transform: scale(1);
}

/* Текст появляется спокойнее: короче сдвиг, без увеличения */
html.dp-reveal-on .dp-reveal--text {
	transform: translate3d(0, 20px, 0);
}

html.dp-reveal-on .dp-reveal--text.is-in {
	transform: none;
}

@media (max-width: 767px) {
	html.dp-reveal-on .dp-reveal {
		transform: translate3d(0, 22px, 0);
	}

	html.dp-reveal-on .dp-reveal--img img {
		transform: scale(1.04);
	}
}

/* Подстраховка: если браузер просит поменьше движения, скрипт эффекты не включает,
   но на случай, если класс уже стоял, всё сбрасываем. */
@media (prefers-reduced-motion: reduce) {
	html.dp-reveal-on .dp-reveal,
	html.dp-reveal-on .dp-reveal--img img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Hero-слайдер общественных пространств на телефоне. Кадры слайдера горизонтальные (отбор — от 1,3:1), а в custom.css
   рамка задана высотой 480 px: на ширине 390 это вертикаль 4:5, и от кадра оставалась узкая середина. Здесь — 3:2.
   Файл подключается только на страницах общественных пространств, поэтому сады это не затрагивает. */
@media (max-width: 767px) {
	.new-project--single .project-detail__slider-item {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* Блок фактов — компактно (см. public-spaces-reveal.js). Кнопки «Читать полностью» — только на телефоне. */
.dp-fold-btn {
	display: none;
}

/* Описание слева скрипт оборачивает в .dp-fold: без своего шага абзацы внутри «слипались»
   (у темы шаг задан колонке, а обёртка — обычный блок). Текст слева — одним стилем: у старых
   страниц он в <span> (тёмный, межстрочный 1,25), у вставки-концепции — абзацем темы (серый, 1,4). */
.new-project__info .dp-fold {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

.new-project__info .dp-fold .new-project__info-descr span {
	font-size: 16px;
	line-height: 1.5;
	color: #5B645E;
}

/* Левая колонка — стопкой от верха: справа факты стали короче, и растяжка темы (space-between)
   уводила текст к низу. */
.new-project__info > .new-project__info-column:first-child {
	justify-content: flex-start;
}

/* Подписи фактов — мелкими прописными (как на телефоне), сами факты справа — сеткой в две колонки,
   длинные (команда, длинное название) — во всю ширину. Блок становится примерно вдвое ниже. */
.new-project__info .new-project__info-title {
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .08em;
	color: #7A827C;
}

.new-project__info .dp-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row dense;
	align-content: start;
	column-gap: 40px;
	row-gap: 36px;
}

.new-project__info .dp-facts .dp-wide {
	grid-column: 1 / -1;
}

.new-project__info .dp-facts .new-project__info-descr {
	row-gap: 6px;
}

@media (max-width: 1919px) {
	.new-project__info .dp-fold .new-project__info-descr span {
		font-size: 14px;
		line-height: 1.45;
	}

	.new-project__info .new-project__info-title {
		font-size: 13px;
	}
}

@media (max-width: 1279px) {
	.new-project__info .dp-fold {
		row-gap: 14px;
	}

	.new-project__info .new-project__info-title {
		margin-bottom: 10px;
		font-size: 12px;
	}

	.new-project__info .dp-facts {
		column-gap: 24px;
		row-gap: 28px;
	}
}

@media (max-width: 767px) {
	.new-project__info .dp-fold {
		row-gap: 12px;
	}

	.new-project__info .dp-fold.is-foldable:not(.is-open) {
		position: relative;
		max-height: 8.6em;              /* ≈ 6 строк текста */
		overflow: hidden;
	}

	.new-project__info .dp-fold.is-foldable:not(.is-open)::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3.2em;
		background: linear-gradient(rgba(245, 245, 245, 0), #F5F5F5);
	}

	.new-project__info .dp-list-fold:not(.is-open) > :nth-child(n+4) {
		display: none;
	}

	/* команда — роль и имя идут отдельными строками: в свёрнутом виде первая пара */
	.new-project__info .dp-facts .dp-list-fold:not(.is-open) > :nth-child(n+3) {
		display: none;
	}

	.dp-fold-btn {
		display: inline-flex;
		align-self: flex-start;
		margin-top: 10px;
		padding: 8px 0;
		min-height: 36px;
		background: none;
		border: 0;
		border-bottom: 1px solid currentColor;
		color: #8D755E;
		font-size: 12px;
		line-height: 1.2;
		letter-spacing: .08em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.new-project__info-block .dp-fold-btn {
		margin-top: 8px;
	}

	.new-project__info .new-project__info-column {
		row-gap: 28px;
	}

	.new-project__info .dp-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		row-gap: 22px;
	}

	.new-project__info .dp-facts .dp-wide {
		grid-column: 1 / -1;
	}

	.new-project__info .dp-facts .new-project__info-title {
		margin-bottom: 6px;
		font-size: 12px;
		letter-spacing: .08em;
		color: #7A827C;
	}

	.new-project__info .new-project__info-block--awards .new-project__info-title {
		margin-bottom: 10px;
		font-size: 12px;
		letter-spacing: .08em;
		color: #7A827C;
	}

	.new-project__info .dp-facts .new-project__info-descr {
		row-gap: 4px;
	}
}