/**
 * NOMA: auto-scale секций «как в Тильде».
 *
 * Секция с классом .noma-scale верстается в фиксированных px на эталонной
 * ширине-«артборде» (Desktop 1200 / Tablet 720 / Mobile 360 — вкладки
 * респонсива Elementor) и зумится целиком под фактическое окно:
 * рендер-ширина = артборд × zoom = ровно ширина окна.
 *
 * --noma-zoom считает noma-autoscale.js (clientWidth / артборд).
 *
 * ВАЖНО: внутри .noma-scale — только обычные px из макета. Не использовать
 * var(--noma-fs-*) / var(--noma-px) — получится двойной зум. Не вешать на
 * секции с position:fixed/sticky внутри (в т.ч. noma-pin).
 */

.noma-scale {
	zoom: var(--noma-zoom, 1);
	width: 1200px !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Непрерывный зум: десктоп-артборд 1200 тянется до 768 (на 1199 скачка НЕТ).
   Мобайл ≤767 — отдельный артборд 360 (как в Тильде). */
@media (max-width: 767px) {
	.noma-scale {
		width: 360px !important;
	}
}

/* Вариант: ТОЛЬКО масштаб (zoom), БЕЗ форс-ширины артборда.
   Для вложенных контейнеров (например, 2 блока внутри noma-pin), где
   width:1200 !important ломал бы раскладку — ширину держишь сам в Elementor,
   а zoom масштабирует тем же коэффициентом, что и весь noma-scale.
   ⚠️ zoom домножает фактическую ширину блока (W → W×zoom). Чтобы не было
   переполнения, задавай блоку ширину так, чтобы W×zoom = нужная видимая
   (т.е. вводи ширину в базе артборда: 1200 на десктопе / 360 на мобиле). */
.noma-zoom {
	zoom: var(--noma-zoom, 1);
}

/* Редактор Elementor — без зума (иначе мешает редактировать). */
.elementor-editor-active .noma-zoom {
	zoom: 1 !important;
}

/* Элемент внутри зумленной секции, который должен остаться в реальном
   масштабе (например, живая карта). Работает и в .noma-scale, и в .noma-zoom. */
.noma-scale .noma-unscale,
.noma-zoom .noma-unscale {
	zoom: calc(1 / var(--noma-zoom, 1));
}

/* Полноэкранная высота внутри зума: визуально ровно 100svh. */
.noma-scale.noma-vh-100,
.noma-scale .noma-vh-100 {
	min-height: calc(100svh / var(--noma-zoom, 1)) !important;
}

/* Слайдер (виджет Slides) на всю высоту экрана ВНУТРИ noma-scale.
   Высота слайда (`{{WRAPPER}} .swiper-slide { height }`) внутри zoom-контейнера
   домножается на zoom → перестаёт быть равной экрану и пляшет от ширины/ориентации.
   calc(100svh / zoom) компенсирует: zoom × (100svh/zoom) = 100svh визуально, на любом
   устройстве и ориентации. Вешай класс `noma-slide-vh` на виджет Slides (или на сам
   noma-scale контейнер). Нужна не вся высота — задай долю: --noma-slide-vh: 92svh. */
.noma-scale .noma-slide-vh .swiper-slide,
.noma-scale.noma-slide-vh .swiper-slide {
	height: calc(var(--noma-slide-vh, 100svh) / var(--noma-zoom, 1)) !important;
}

/* Редактор Elementor — без зума, обычная ширина (иначе мешает редактировать). */
.elementor-editor-active .noma-scale {
	zoom: 1 !important;
	width: auto !important;
	max-width: none !important;
}

/* Браузеры без поддержки zoom (Firefox <126): graceful degradation —
   секция остаётся обычной responsive-вёрсткой Elementor. */
@supports not (zoom: 1) {
	.noma-scale {
		width: auto !important;
	}
	/* Зума нет — делить не на что, просто высота окна. */
	.noma-scale .noma-slide-vh .swiper-slide,
	.noma-scale.noma-slide-vh .swiper-slide {
		height: var(--noma-slide-vh, 100svh) !important;
	}
}