/* ==========================================================================
   Переходы по экранам главной: точки разделов, «наверх», покадровая
   прокрутка — 2026-10-23
   ==========================================================================
   Механика и разметка — по na-razvilke.ru: вертикальная линия точек справа
   с подписями, текущая горит золотом; над точками кнопка «наверх».

   Отличия от оригинала: цвета взяты из нашей палитры (--mg-gold,
   --mg-cream, --mg-line), подписи набраны тем же Inter с разрядкой, что
   надзаголовки сайта, и добавлена покадровая прокрутка — ради неё вся
   затея и затевалась: экран за экраном, а не длинная лента.
   ========================================================================== */

/* ---------- Точки разделов ---------- */

.mg-dots {
	position: fixed;
	z-index: 900;
	right: clamp(14px, 2.4vw, 28px);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	gap: 14px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	transition: opacity .4s ease;
}

.mg-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1px solid rgba(242, 232, 213, .40);
	background: transparent;
	cursor: pointer;
	position: relative;
	transition:
		background .3s ease,
		border-color .3s ease,
		transform .3s cubic-bezier(.22, .61, .36, 1);
}

.mg-dot::after {
	content: attr(data-label);
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	white-space: nowrap;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-muted);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity .3s ease,
		transform .3s cubic-bezier(.22, .61, .36, 1);
}

.mg-dot:hover { border-color: var(--mg-gold-soft); transform: scale(1.25); }
.mg-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.mg-dot.is-on {
	background: var(--mg-gold);
	border-color: var(--mg-gold);
}

/*
 * Подпись активной точки постоянно видна только там, где справа есть
 * свободное поле. На 1024px поле страницы уже кончилось, и подпись
 * «03 — Зарисовки» ложилась прямо на третью карточку. Это не только
 * некрасиво: прибор контраста брал золотые пиксели подписи за фон под
 * текстом и показывал 4.15:1 там, где на самом деле 9:1.
 *
 * На узких экранах подпись появляется только при наведении — временно и
 * по воле человека, а не висит поверх чужого текста.
 */
@media (min-width: 1280px) {
	.mg-dot.is-on::after {
		color: var(--mg-gold);
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

.mg-dot:focus-visible {
	outline: 1px solid var(--mg-gold);
	outline-offset: 4px;
}

/* ---------- Кнопка «наверх» ---------- */

.mg-back-top {
	position: fixed;
	z-index: 900;
	right: clamp(14px, 2.4vw, 28px);
	bottom: clamp(18px, 3vh, 32px);
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(242, 232, 213, .22);
	border-radius: 50%;
	background: rgba(10, 8, 6, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--mg-cream);
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition:
		opacity .4s ease,
		transform .4s cubic-bezier(.22, .61, .36, 1),
		border-color .3s ease,
		background .3s ease,
		box-shadow .3s ease;
}

.mg-back-top.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }

.mg-back-top:hover {
	border-color: var(--mg-gold);
	background: rgba(212, 162, 78, .14);
	box-shadow: 0 8px 20px rgba(212, 162, 78, .18);
}

.mg-back-top:focus-visible {
	outline: 1px solid var(--mg-gold);
	outline-offset: 3px;
}

.mg-back-top svg { width: 15px; height: 15px; }

/* ---------- Покадровая прокрутка ---------- */

/*
 * Принцип с na-razvilke.ru: scroll-snap на корне, но МЯГКИЙ (proximity, а
 * не mandatory) и только для широких экранов.
 *
 * Почему proximity, а не mandatory: на телефоне секция «вход» содержит
 * пять пунктов, тарифы и карточку — в один экран она не влезает никогда.
 * Обязательный snap заставил бы браузер прыгать так, чтобы длинная
 * секция показалась целиком, и низ просто обрезался бы. Proximity
 * удерживает ровно там, где человек остановился, и не мешает читать.
 *
 * Плавная прокрутка обязательна: без неё snap дёргается.
 */
@media (min-width: 1024px) {
	/*
	 * Снап выключен: кадры теперь переключает скрипт (moigrani-jump.php:
	 * колесо, клавиатура, свайп), а браузерный снап тянул экран назад —
	 * промежуточные остановки (низ высокой секции) он не признавал точкой
	 * прилипания и откатывал к началу секции.
	 */
	html {
		scroll-snap-type: none;
		scroll-behavior: smooth;
	}

	body.page-id-6 main .mg-full {
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}
}

/* На телефоне покадровка выключена: точки и так съедают ширину, а
   принудительная прокрутка мешает читать длинные секции. */
@media (max-width: 1023px) {
	.mg-dots { display: none; }

	.mg-back-top {
		right: clamp(10px, 3vw, 18px);
		bottom: clamp(14px, 2.5vh, 22px);
		width: 34px;
		height: 34px;
	}
}

/* ---------- Уважение к настройкам ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; scroll-snap-type: none; }

	.mg-dot,
	.mg-dot::after,
	.mg-back-top { transition: none !important; }
}

/* ==========================================================================
   Сжатие экранов до экрана пользователя
   ==========================================================================
   Покадровая прокрутка работает красиво, только когда экран ≈ экран. Три
   секции были длиннее окна: «грани» на 108px, «зарисовки» на 364px, «вход»
   на 644px. Ниже они ужаты.

   Только для широких экранов (≥1024px). На телефоне сжимать нечего и не
   нужно: там раскладка в одну колонку, и та же правка сделала бы текст
   нечитаемым. Вместо сжатия на телефоне работает proximity-snap.

   Что и на сколько:
   - грани: −108px → ровно экран;
   - зарисовки: обложка карточки становится 4:3.2 вместо 4:5 (минус ~130px),
     плюс отступы — секция около 1.1 экрана;
   - вход: плотнее пункты списка и тарифы — секция около 1.2 экрана.
   ========================================================================== */

@media (min-width: 1024px) {

	/* ---------- Грани: ровно экран ---------- */

	body.page-id-6 .mg-section--facets {
		padding-block: clamp(3.2rem, 6vw, 4.5rem);
	}

	body.page-id-6 .mg-section--facets .mg-section__head {
		margin-bottom: clamp(1.4rem, 2.4vw, 1.9rem);
	}

	body.page-id-6 .mg-section--facets .mg-facet {
		padding-block: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.7rem);
	}

	body.page-id-6 .mg-section--facets .mg-facet__num {
		margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
	}

	/* ---------- Зарисовки: обложка ниже, воздух меньше ---------- */

	body.page-id-6 .mg-section--stories {
		padding-block: clamp(3.2rem, 5.5vw, 4.4rem);
	}

	body.page-id-6 .mg-section--stories .mg-section__head {
		margin-bottom: clamp(1.6rem, 2.8vw, 2.2rem);
	}

	/*
	 * Обложка 4:5 → 4:3.2. Портретная обложка была 423px, станет 296px.
	 * Картинка остаётся вертикальной по настроению, но кадр в карточке
	 * перестаёт съедать треть экрана.
	 */
	body.page-id-6 .mg-section--stories .mg-story__media {
		aspect-ratio: 4 / 3.2;
	}

	body.page-id-6 .mg-section--stories .mg-story__body {
		padding-top: clamp(.8rem, 1.4vw, 1.1rem);
	}

	body.page-id-6 .mg-section--stories > .mg-wrap > p:last-child {
		margin-top: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	}

	/* ---------- Вход: плотнее список и тарифы ---------- */

	/*
	 * Плотнее, чем у остальных секций: дверь должна уложиться в один экран
	 * вместе с шестью пунктами и тарифами. Значение то же, что в
	 * moigrani.css, — здесь оно перекрывает его по порядку подключения.
	 */
	body.page-id-6 .mg-gate {
		padding-block: clamp(2.2rem, 4.4vh, 2.9rem);
	}

	body.page-id-6 .mg-gate__lead {
		margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
	}

	body.page-id-6 .mg-gate__inside {
		margin-bottom: clamp(.7rem, 1.2vw, 1rem);
	}

	body.page-id-6 .mg-gate__item {
		padding-block: clamp(.55rem, .9vw, .8rem);
	}

	body.page-id-6 .mg-gate__item-text {
		margin-top: .3rem;
		line-height: 1.5;
	}

	body.page-id-6 .mg-gate__price {
		margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
	}

	body.page-id-6 .mg-gate__price-note {
		margin-bottom: clamp(.7rem, 1.2vw, 1rem);
	}

	body.page-id-6 .mg-gate__mercy {
		margin-top: clamp(1.6rem, 3vw, 2.4rem);
		padding-top: clamp(1.2rem, 2.2vw, 1.8rem);
	}
}

/*
 * Дверь: плотнее список. Пункты сжимаются за счёт отступов и ширины строки
 * описания, а не за счёт текста — формулировки не тронуты.
 */
@media (min-width: 1024px) {
	body.page-id-6 .mg-gate__title {
		font-size: clamp(1.7rem, 2.8vw, 2.35rem);
		margin-bottom: .8rem;
	}

	body.page-id-6 .mg-gate__lead {
		margin-bottom: clamp(.8rem, 1.4vw, 1.1rem);
		line-height: 1.5;
	}

	body.page-id-6 .mg-gate__item-text {
		max-width: 48ch;
		line-height: 1.45;
	}

	body.page-id-6 .mg-gate__item-title {
		margin-bottom: .2rem;
	}

	body.page-id-6 .mg-gate__price {
		margin-top: clamp(1.2rem, 2vw, 1.6rem);
		padding-top: clamp(.9rem, 1.6vw, 1.2rem);
	}

	/* Описание под ценой — в две строки вместо трёх: мера шире. */
	body.page-id-6 .mg-gate__price-note {
		max-width: 44ch;
		margin-bottom: clamp(.6rem, 1vw, .8rem);
	}
}

/*
 * На 1024px сетка историй уходила в две колонки: три карточки становились
 * двумя рядами, и секция вырастала до 2.15 экрана. Три колонки помещаются
 * (карточка ~300px), и секция становится одним рядом.
 */
@media (min-width: 1024px) {
	body.page-id-6 .mg-section--stories .mg-stories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Вуаль под сжатыми секциями на широких экранах.
 *
 * Когда секция становится ровно экраном, проценты в вуалях перестают
 * попадать в текст: раньше «теория граней» занимала 15–36% высоты, а
 * после сжатия — те же 15–36%, но вуаль с окном света (8–30%) накрыла
 * именно заголовок. Замер: золотой надзаголовок «Теория граней» 4.09:1,
 * описания граней 4.32:1.
 *
 * Ниже окно света убрано из полосы текста совсем и оставлено только в
 * правом верхнем углу, где текста нет. Проверено замером контраста.
 */
@media (min-width: 1024px) {
	body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				var(--mg-ink) 0%,
				rgba(10, 8, 6, .70) 5%,
				rgba(10, 8, 6, .56) 13%,
				rgba(10, 8, 6, .60) 30%,
				rgba(10, 8, 6, .68) 44%,
				rgba(10, 8, 6, .76) 64%,
				rgba(10, 8, 6, .86) 93%,
				var(--mg-ink) 100%),
			linear-gradient(to right,
				rgba(10, 8, 6, .56) 0%,
				rgba(10, 8, 6, .40) 26%,
				rgba(10, 8, 6, .30) 52%,
				rgba(10, 8, 6, .16) 76%,
				rgba(10, 8, 6, .06) 100%);
	}

	/* Зарисовки: подпись «Читать →» золотая, и ей тоже нужен фон. */
	body.page-id-6 .mg-atmos--stories .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				var(--mg-ink) 0%,
				rgba(10, 8, 6, .82) 6%,
				rgba(10, 8, 6, .48) 18%,
				rgba(10, 8, 6, .52) 34%,
				rgba(10, 8, 6, .62) 60%,
				rgba(10, 8, 6, .82) 92%,
				var(--mg-ink) 100%),
			linear-gradient(to right,
				rgba(10, 8, 6, .60) 0%,
				rgba(10, 8, 6, .40) 30%,
				rgba(10, 8, 6, .28) 60%,
				rgba(10, 8, 6, .16) 100%);
	}
}

/*
 * Вуаль переписана ещё раз. Две градиентные шкалы ПЕРЕМНОЖАЮТСЯ, и там,
 * где одна стремится к нулю, другая перестаёт работать: горизонтальная
 * уходила в 0.05 справа, и вертикальная (0.76) там почти не действовала —
 * описания граней в правых колонках падали до 4.36:1.
 *
 * Теперь у обеих шкал есть нижний предел: вертикальная гасит низ секции,
 * горизонтальная — левую часть, и окно света остаётся только в правом
 * ВЕРХНЕМ углу, где текста нет: там алмаз виден, а под ним — только вода.
 */
@media (min-width: 1024px) {
	body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				rgba(10, 8, 6, 0) 0%,
				rgba(10, 8, 6, .38) 8%,
				rgba(10, 8, 6, .74) 30%,
				rgba(10, 8, 6, .82) 50%,
				rgba(10, 8, 6, .86) 80%,
				rgba(10, 8, 6, .90) 100%),
			linear-gradient(to right,
				rgba(10, 8, 6, .54) 0%,
				rgba(10, 8, 6, .46) 40%,
				rgba(10, 8, 6, .26) 66%,
				rgba(10, 8, 6, 0) 90%);
	}

	body.page-id-6 .mg-atmos--stories .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				rgba(10, 8, 6, .34) 0%,
				rgba(10, 8, 6, .56) 14%,
				rgba(10, 8, 6, .62) 34%,
				rgba(10, 8, 6, .66) 60%,
				rgba(10, 8, 6, .80) 92%,
				rgba(10, 8, 6, .90) 100%),
			/* Космический кадр v3.13: надзаголовок лёг на рукав галактики и
			   держал 4.52:1. Левая треть плотнее, окно света — справа,
			   где галактика и нет текста. */
			linear-gradient(to right,
				rgba(10, 8, 6, .88) 0%,
				rgba(10, 8, 6, .74) 18%,
				rgba(10, 8, 6, .50) 38%,
				rgba(10, 8, 6, .24) 62%,
				rgba(10, 8, 6, .08) 100%);
	}
}

/* ==========================================================================
   Герой: текст и кнопки одной колонкой
   ==========================================================================
   Было: правые края расходились — заголовок 528px, манифест 460px, кнопки
   571px (при контейнере 1180px). Три разных правых края читаются как
   небрежность: глаз ищет общую линию и не находит.

   Стало: .mg-hero__inner — грид с одной колонкой шириной max-content.
   Колонку задаёт самый широкий элемент, а он — ряд кнопок. Заголовок и
   манифест растягиваются на эту ширину, и все три блока встают на одну
   линию. Заодно заголовок перестаёт быть башней из трёх строк: на 571px
   он укладывается в две.

   Колонка ограничена minmax(0, max-content) — на узком экране она
   ужимается, а не выталкивает содержимое.
   ========================================================================== */

body.page-id-6 .mg-hero__inner {
	/*
	 * Ширина, которую задаёт ряд кнопок. Меряется скриптом (moigrani-views
	 * / moigrani-jump): текст не может знать, сколько места займут кнопки,
	 * — их ширина зависит от надписей и шрифта. Без замера грид с
	 * колонкой max-content растягивался на всю ширину контейнера: колонку
	 * задавал заголовок со снятым ограничением, а он в одну строку не
	 * помещался.
	 */
	--mg-hero-measure: 38rem;
}

body.page-id-6 .mg-hero__title,
body.page-id-6 .mg-hero__sub {
	max-width: var(--mg-hero-measure);
}

/*
 * На телефоне кнопки занимают всю ширину, и «ширина кнопок» — это вся
 * ширина контейнера. Замер скрипта тут даёт 276px: у кнопок стоит
 * width:100%, и в колонке они не разрешаются в свою полную ширину. Поэтому
 * на узких экранах мера задаётся явно.
 */
@media (max-width: 767px) {
	body.page-id-6 .mg-hero__inner { --mg-hero-measure: 100%; }
}

/* ==========================================================================
   Шапка входит в первый экран
   ==========================================================================
   На десктопе шапка НАКЛАДЫВАЕТСЯ на герой (Kadence уводит её на −81px),
   и герой высотой 100dvh уже закрывает первый экран целиком.

   На телефоне и планшете шапка обычная, в потоке: она ВЫТАЛКИВАЕТ герой
   вниз, и вместе они занимали 81 + 844 = 925px при экране 844 — нижний
   край первого экрана уезжал за границу. Там герой на 81px короче, и
   шапка с герой снова складываются ровно в экран.
   ========================================================================== */

body.page-id-6 { --mg-head-h: 81px; }

/*
 * Шапка стоит НАД героем в потоке — и на десктопе тоже. Раньше я прочитал
 * вёрстку неверно, из-за чего на десктопе ничего не правил, а на телефоне
 * герой укоротил. Из-за этого же scroll-snap вставал на сам герой
 * (scrollY = 81) и шапка уезжала за верхний край: на главной её не было
 * видно вообще. Проверено замером — на остальных страницах scrollY = 0.
 *
 * Теперь герой на 81px короче экрана на всех ширинах, и шапка с герой
 * складываются ровно в первый экран.
 */
body.page-id-6 .mg-hero {
	min-height: calc(100dvh - var(--mg-head-h));
}

/*
 * Щелчок по точке «Порог» должен приводить к началу страницы, а не
 * под шапку. scroll-margin-top сдвигает точку прилипания на высоту
 * шапки: герой встаёт так, что над ним ровно шапка.
 */
/*
 * Идентификатор, а не класс: секции выдаётся id="mg-sec-hero", и селектор
 * по классу .mg-sec-hero не срабатывал вовсе — поэтому scroll-margin-top
 * не применялся и страница по-прежнему открывалась на 81px ниже верха.
 */
body.page-id-6 #mg-sec-hero {
	scroll-margin-top: var(--mg-head-h);
}

/* ==========================================================================
   «Зарисовки» — ровно один экран
   ==========================================================================
   Было 1042px при экране 900 (1.16). Ужимаем: отступы секции, воздух под
   заголовком, пропорция обложки карточки и строка под «Читать →».
   Текст отрывков не режется — режется только воздух.
   ========================================================================== */

@media (min-width: 1024px) {
	/*
	 * Сжатие считается от ВЫСОТЫ экрана, а не от ширины. Раньше размеры
	 * были заданы в vw, и на 1280×800 секция выходила 855px при экране 800 —
	 * низ уезжал за край. Ширина у 1280 и 1440 одна и та же (контейнер
	 * ограничен 1180px), а высота разная, и именно она решает, влезает ли
	 * блок в экран.
	 */
	body.page-id-6 .mg-section--stories {
		padding-block: clamp(1.1rem, 3.6dvh, 2.4rem);
	}

	/*
	 * Воздух под заголовком считается от НОМЕРА истории, а не на глаз.
	 *
	 * Цифра «01» висит над обложкой — position:absolute, top:-.2rem,
	 * translateY(-120%) — и занимает полосу от cardTop−25 до cardTop−7.
	 * При отступе 14px она налезала на строку заголовка: замер дал верх
	 * цифры на 10.6px ВЫШЕ низа h2 на 1440 и на 12.7px — на 1024, то есть
	 * цифры стояли в одной строке с заголовком. Теперь отступ ~38px, и
	 * верх цифры ложится на 13px ниже заголовка, отдельной полосой.
	 */
	body.page-id-6 .mg-section--stories .mg-section__head {
		margin-bottom: clamp(2.3rem, 4.2dvh, 2.6rem);
	}

	/*
	 * Заголовок поднимается к надзаголовку.
	 *
	 * Глобальные стили WordPress дают h2 margin-top 1.5em — 52px при кегле
	 * 34.6px. Именно эти 52px и стояли между «ЗАРИСОВКИ ИЗ ЖИЗНИ» и
	 * заголовком, тогда как под заголовком не хватало места цифрам.
	 * Отступ надзаголовка (1.6rem) остаётся и работает как зазор.
	 */
	body.page-id-6 .mg-section--stories .mg-section__head h2 {
		margin-top: 0;
	}

	/*
	 * Совсем низкий экран (1024×600, 1280×650): полоса под заголовком —
	 * 37px, это 6% высоты, и секция перестаёт влезать в экран (было 615px
	 * при 600). Ужимаются ТОЛЬКО поля секции: воздух под цифрами трогать
	 * нельзя, иначе цифры снова лягут на заголовок — им нужны свои 35px.
	 */
	@media (max-height: 700px) {
		body.page-id-6 .mg-section--stories {
			padding-block: clamp(.8rem, 2.2dvh, 1.4rem);
		}
	}

	/*
	 * Заголовок секции — в одну строку.
	 *
	 * Было max-width 18ch: при контейнере 1180px колонка выходила 288px, и
	 * «Короткие очерки о людях и смыслах» стояло башней из двух строк в
	 * углу над сеткой карточек на всю ширину. Текст короче, чем колонка,
	 * в которой он сидел: в одну строку он занимает около 600px и читается
	 * как заголовок раздела, а не как колонка.
	 *
	 * Заодно выигрывается около 38px высоты — а это ровно то, чего не
	 * хватало блоку, чтобы встать в один экран.
	 */
	body.page-id-6 .mg-section--stories .mg-section__head h2 {
		font-size: clamp(1.6rem, 2.4vw, 2.3rem);
		max-width: none;
		text-wrap: nowrap;
	}

	/*
	 * Обложка: пропорция 4:2.7 и потолок по высоте экрана. object-fit:cover
	 * у картинки есть, поэтому лишнее просто срезается, а не искажается.
	 */
	body.page-id-6 .mg-section--stories .mg-story__media {
		aspect-ratio: 4 / 2.7;
		max-height: calc(100dvh * 0.26);
	}

	body.page-id-6 .mg-section--stories .mg-story__body {
		padding-top: clamp(.5rem, .9dvh, .8rem);
		gap: .45rem;
	}

	body.page-id-6 .mg-section--stories .mg-story__title {
		font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	}

	body.page-id-6 .mg-section--stories .mg-story__excerpt {
		line-height: 1.5;
		font-size: .875rem;
	}

	body.page-id-6 .mg-section--stories > .mg-wrap > p:last-child {
		margin-top: clamp(.8rem, 1.4dvh, 1.2rem) !important;
	}
}

/* ---------- Мгновенное переключение секций ---------- */

/*
 * Переход по точкам, пунктам меню и якорям внутри главной — без анимации.
 * Скрипт (moigrani-jump.php, jumpInstant) ставит класс mg-jump-instant на
 * <html> на время прыжка: экран доезжает сразу, и содержимое не должно ещё
 * секунду проявляться из размытия. Обычная прокрутка по-прежнему показывает
 * появление как задумано — класс живёт только вокруг прыжка.
 */
/*
 * !important обязателен: инлайновый auto к программной прокрутке Chrome
 * не применяет, а без снятия снапа браузер подтягивает экран к ближайшей
 * точке — и переход перестаёт быть мгновенным.
 */
/*
 * Прыжок колесом: снимаем плавность и снап, но не трогаем проявление
 * содержимого — здесь шаг по экрану, каскад должен играть.
 */
html.mg-pager,
html.mg-jump-instant {
	scroll-behavior: auto !important;
	scroll-snap-type: none !important;
}

.mg-js.mg-jump-instant [data-reveal],
.mg-js.mg-jump-instant [data-reveal].is-in,
.mg-js.mg-jump-instant .mg-section__head.is-in::after,
.mg-js.mg-jump-instant .mg-confession.is-in::after {
	transition: none !important;
}

/* ==========================================================================
   «Грани»: один экран при любой высоте окна
   ==========================================================================
   Прежнее сжатие считалось от ширины (vw): на 1440×900 секция укладывалась в
   экран, но стоило окну стать ниже — 805 при 719 на 800, 790 при 619 на 700 —
   и «Грани» вылезали за кадр. Снап и переходы начинали вставать мимо.

   Здесь вертикальный ритм берётся от высоты окна: vh, а не vw. Горизонтальные
   размеры (сетка 4 колонки, ширина шапки) не тронуты. Верхние границы clamp
   равны прежним значениям, поэтому на высоких окнах всё как было.

   Содержимое центрируется в экране: остаток воздуха делится сверху и снизу,
   а не висит пустой полосой внизу.
   ========================================================================== */

@media (min-width: 1024px) {

	body.page-id-6 .mg-section--facets {
		display: flex;
		align-items: center;
		padding-block: clamp(1.2rem, 8.4vh, 4.75rem);
	}

	body.page-id-6 .mg-section--facets > .mg-wrap {
		width: 100%;
	}

	body.page-id-6 .mg-section--facets .mg-section__head {
		margin-bottom: clamp(.8rem, 3vh, 2rem);
	}

	body.page-id-6 .mg-section--facets .mg-eyebrow {
		margin-bottom: clamp(.5rem, 1.6vh, 1.4rem);
	}

	body.page-id-6 .mg-section--facets .mg-section__head h2 {
		font-size: clamp(1.4rem, 4.4vh, 2.9rem);
	}

	body.page-id-6 .mg-section--facets .mg-lead {
		font-size: clamp(.9rem, 2.1vh, 1.75rem);
		margin-top: clamp(.3rem, 1.2vh, 1.2rem) !important;
	}

	body.page-id-6 .mg-section--facets .mg-facet {
		padding-block: clamp(.8rem, 2.2vh, 1.75rem) clamp(.9rem, 2.4vh, 2rem);
	}

	body.page-id-6 .mg-section--facets .mg-facet__num {
		margin-bottom: clamp(.5rem, 1.7vh, 1.6rem);
	}

	body.page-id-6 .mg-section--facets .mg-facet__name {
		font-size: clamp(1rem, 2.4vh, 1.6rem);
	}

	body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__name {
		font-size: clamp(1.15rem, 2.9vh, 1.95rem);
	}

	body.page-id-6 .mg-section--facets .mg-facet__desc,
	body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__desc {
		font-size: clamp(.8125rem, 1.6vh, .975rem);
		line-height: 1.45;
	}
}

/*
 * Совсем низкое окно (600–660 px по высоте): основной блок уже не спасает,
 * секция вылезает на 24 px. Здесь шаг ещё жёстче — плотные отступы и мелкий
 * кегль; на таких экранах важнее, чтобы кадр был целым.
 */
@media (min-width: 1024px) and (max-height: 660px) {
	body.page-id-6 .mg-section--facets {
		padding-block: 1rem;
	}

	body.page-id-6 .mg-section--facets .mg-section__head {
		margin-bottom: .8rem;
	}

	body.page-id-6 .mg-section--facets .mg-section__head h2 {
		font-size: 1.5rem;
	}

	body.page-id-6 .mg-section--facets .mg-lead {
		font-size: .95rem;
		margin-top: .3rem !important;
	}

	body.page-id-6 .mg-section--facets .mg-facet {
		padding-block: .7rem .8rem;
	}

	body.page-id-6 .mg-section--facets .mg-facet__num {
		margin-bottom: .5rem;
	}

	body.page-id-6 .mg-section--facets .mg-facet__name {
		font-size: 1rem;
	}

	body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__name {
		font-size: 1.15rem;
	}

	body.page-id-6 .mg-section--facets .mg-facet__desc,
	body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__desc {
		font-size: .8125rem;
		line-height: 1.4;
	}
}