/* =============================================================================
   MediaPro — общие правки поверх темы
   Подключать ПОСЛЕ theme-darkred.css во всех страницах сайта.

   Здесь то, что должно работать одинаково на всём сайте:
     1. Вертикальный ритм секций
     2. Подвал

   Почему местами !important: тема бьёт по этим же местам селекторами с дюжиной
   :not() (например «section + section», theme-darkred.css:7490). Перебить их
   специфичностью нереально. Это не небрежность — убирать нельзя.
   ============================================================================= */


/* =============================================================================
   0. ТОКЕНЫ ДВИЖЕНИЯ
   Кривые и длительности собраны сюда, чтобы весь сайт двигался одинаково.
   До этого cubic-bezier(.2,.7,.3,1) был вбит руками 17 раз в пяти файлах,
   рядом жила почти такая же .16,1,.3,1 — расхождение видно на глаз, когда
   две карточки рядом реагируют по-разному.

   Значения не выдуманы: это канонические кривые из каталога правил
   (Emil Kowalski, animations.dev). Приближать их своими не нужно.

   Длительности:
     --mp-dur-hover  наведение и смена цвета. Наведение случается десятки раз
                     за сессию, поэтому оно должно быть коротким: полсекунды
                     на зум картинки читаются как тормоза, а не как плавность.
     --mp-dur-enter  появление карточек при прокрутке.
     Окна и шторки живут дольше (200-500 мс) и заданы на месте.
   ============================================================================= */

:root {
	/* --- Цвета текста -------------------------------------------------------
	   Тема набирает основной текст #767676, а вторичный у нас был #a0a0a0.
	   Замерено: 4.28:1 и 2.46:1 на фоне страницы #f8f8f8 при норме 4.5:1
	   для обычного текста. Вторичный не дотягивал вдвое — это адреса объектов,
	   значения в окнах, условия размещения, сотни строк по сайту.

	   Просто затемнить оба до порога было нельзя: они сошлись бы в один тон
	   и иерархия пропала. Поэтому развели на 15 пунктов яркости — разница
	   читается, и оба с запасом проходят.  */
	--mp-h1-page:  2.6em;     /* заголовок страницы раздела */


	--mp-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
	--mp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--mp-dur-hover:   220ms;
	--mp-dur-enter:   320ms;
}

/* =============================================================================
   1. ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ
   Тема даёт контентным секциям 104px сверху и 130px снизу — асимметрично
   и с избыточным воздухом. Сводим к 72px (4.5em) с обеих сторон,
   на экранах уже 768px — к 48px (3em).

   Величина вынесена в переменную --mp-section-pad: страница может задать
   свою плотность, переопределив её у :root в собственном <style>, и не
   дублировать при этом длинный селектор с :not(). Так сделано на index.html,
   где блоков много и общий ритм растягивал страницу.
   ============================================================================= */

:root { --mp-section-pad: 4.5em; }

/* --- Обычные контентные секции ---------------------------------------------
   Из-под правила выведены:
     .cover, .parallax, .height-*  — полноэкранные обложки и герои: высоту им
                                     задаёт не паддинг, трогать нельзя
     .space--sm                    — намеренно компактные плашки темы
                                     (заголовки разделов, логотипы клиентов)
     .map-1                        — секция карты, у темы без паддингов
     .features-5                   — нижний паддинг нулевой намеренно,
                                     картинка упирается в край секции
     .mp-stats, .mp-bundle         — свои, более плотные значения на indoor.html

   Секции с фоновой картинкой (.imagebg) под правило ПОПАДАЮТ, если у них нет
   .cover/.parallax/.height-* — у таких блоков («Есть разговор?» на главной,
   шапка контактов) высоту делает именно паддинг, и без выравнивания они
   выбиваются из общего ритма.
   --------------------------------------------------------------------------- */
section:not(.cover):not(.parallax):not([class*="height-"]):not(.space--sm):not(.map-1):not(.features-5):not(.mp-stats):not(.mp-bundle):not(.mp-hero) {
	padding-top: var(--mp-section-pad) !important;
	padding-bottom: var(--mp-section-pad) !important;
}

/* У .features-5 трогаем только верх: снизу тема намеренно оставляет ноль —
   там картинка упирается в край секции (360vr.html, images/device1.png) */
section.features-5 {
	padding-top: var(--mp-section-pad) !important;
}

/* Утилита: вернуть нижний отступ секции, которой тема его обнулила.
   Нужна для .features-5 БЕЗ такой картинки — например на price.html,
   где внизу секции карточки в рамках и они иначе липнут к краю. */
section.mp-rhythm-bottom {
	padding-bottom: var(--mp-section-pad) !important;
}


/* =============================================================================
   2. ПОДВАЛ
   ============================================================================= */

/* Навигация в подвале на мобильных.
   Тема задаёт .footer-1 .footer__navigation { width:50%; float:left } — расчёт
   на меню в две колонки, и с версии от 10.08.2026 списка действительно два
   (см. include/footer.php). На десктопе они встают рядом сами.

   На узких экранах, где подвал центрируется классом .text-center-xs, список
   шириной в половину оставался бы прижат влево: текст центрировался бы внутри
   этой половины, а не по подвалу. Логотип, заголовок и соцсети при этом стоят
   по центру — списки из них выпадали. Разворачиваем на всю ширину. */
@media all and (max-width: 767px) {
	.footer-1 .footer__navigation {
		width: 100%;
		float: none;
	}
	/* Столбцы встали друг под друга, и нижнее поле первого списка (1.625em
	   от темы для всех ul) разрывало то, что читается как один список.
	   Снимаем его у всех, кроме последнего. */
	.footer-1 .footer__navigation:not(:last-of-type) {
		margin-bottom: 0;
	}
}


/* =============================================================================
   2b. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
   Последний пункт меню: флажок и код языка, на который ведёт кнопка.
   Разметка — в include/header.php, сам флаг рисует mp_flag() в include/lang.php.

   Тема мешает в двух местах, поэтому здесь есть !important:
     .menu > li:last-child a { padding-right: 0 }  — свитчер как раз последний,
        и без перебивки таблетка была бы обрезана справа;
     .nav-modal .menu > li > a { padding: 0 }      — то же в мобильном меню.
   ============================================================================= */

/* Сама ссылка остаётся обычным пунктом меню: тема даёт ей line-height 62px,
   и текст внутри садится ровно на ту же строку, что у соседних пунктов.
   Раньше пилюля висела прямо на ссылке — inline-flex выравнивался по базовой
   линии флажка и уезжал на 3px вверх. Поэтому фон, рамка и скругление
   перенесены на вложенный .mp-lang__pill. */
.menu > li.mp-lang > .mp-lang__btn {
	/* тема обнуляет padding-right у последнего пункта — возвращаем симметрию */
	padding: 0 0 0 1.3em !important;
}

.mp-lang__pill {
	display: inline-flex;
	align-items: center;
	/* середина пилюли встаёт на оптический центр строки — то же место,
	   где находится центр букв соседних пунктов меню.
	   vertical-align:middle отсчитывает от высоты строчных букв, а меню
	   набрано прописными, поэтому остаётся расхождение в 1px — снимаем его
	   сдвигом. Размер шрифта в меню тема держит фиксированным (10px),
	   так что поправка не поедет. */
	vertical-align: middle;
	position: relative;
	top: -1px;
	padding: .28em .52em;
	/* серый с прозрачностью читается и на светлой шапке, и на тёмной
	   подложке мобильного меню — не нужно два набора правил */
	border: 1px solid rgba(127, 127, 127, .38);
	border-radius: 2em;
	line-height: 1;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mp-lang__btn:hover .mp-lang__pill,
.mp-lang__btn:focus-visible .mp-lang__pill {
	background: #F58220;
	border-color: #F58220;
	color: #fff;
}
.mp-lang__btn:hover,
.mp-lang__btn:focus-visible { color: #fff !important; }

/* Флажок. Пропорция 3:2, скруглён под общий стиль кнопок сайта. */
.mp-flag {
	display: block;
	width: 15px;
	height: 10px;
	border-radius: 1.5px;
	/* тонкая обводка, иначе белая полоса флага сливается со светлой шапкой */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
}
.mp-lang__code {
	margin-left: .42em;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
}

/* --- Мобильное меню -------------------------------------------------------
   Внимание: раскрытое меню тема помечает классом .nav-open на .nav-container,
   а не выводит .nav-modal — правила, написанные под .nav-modal, здесь просто
   не сработают. Поэтому цепляемся за брейкпоинт.

   Пункты выстраиваются колонкой по левому краю, текст у всех начинается
   в одной вертикали. Левый отступ ссылки (нужный на десктопе, чтобы отделить
   кнопку от «Контактов») здесь сдвигал бы пилюлю правее остальных пунктов —
   обнуляем, чтобы её край встал в ту же вертикаль. */
@media all and (max-width: 767px) {
	.menu > li.mp-lang { margin-left: 0; margin-top: .3em; }
	.menu > li.mp-lang > .mp-lang__btn { padding-left: 0 !important; }
	/* на телефоне палец крупнее курсора — даём чуть больше площади нажатия */
	.mp-lang__pill { padding: .34em .62em; }
	.mp-lang__pill .mp-flag { width: 17px; height: 11px; }
	.mp-lang__code { font-size: 10px; }
}

/* --- Ссылка в подвале ------------------------------------------------------ */
.mp-lang__foot { display: inline-flex !important; align-items: center; }
.mp-lang__foot .mp-flag {
	width: 17px; height: 11px;
	margin-right: .6em;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}


/* =============================================================================
   3. ФОТОГРАФИИ КОМАНДЫ
   Тема с этими снимками обходится плохо: на главной режет по
   max-height:8.125em — портрет превращается в узкую полоску; на «Команде»
   правил нет вовсе, и снимок растягивается на всю высоту колонки.
   Здесь задаём форму рамки: круг на главной, крупный квадрат на «Команде».

   Кадрирование сделано не в CSS, а в самих файлах: images/team/*.jpg — уже
   квадраты 700x700, приведённые к единой посадке лица (голова занимает 40%
   стороны, середина головы на 29% сверху). Эталон — снимок Михаила, под него
   подогнаны остальные два. Оригиналы в полном размере лежат вне сайта,
   в MediaPro/_originaly-foto-komandy/ — оттуда можно перекадрировать заново.
   ============================================================================= */

/* Страховка, если однажды положат неквадратный файл */
.testimonial-1 img,
.member-1 img {
	object-fit: cover;
	object-position: 50% 30%;
	/* перекрываем глобальное img{max-width:100%;margin-bottom:1.625em} темы */
	max-width: none;
}

/* --- Главная: круглые аватары -------------------------------------------- */
.testimonial-1 img {
	display: block;
	width: 160px;
	height: 160px;
	/* тема ставит max-height:8.125em — без сброса круг сплющится в овал */
	max-height: none !important;
	border-radius: 50%;
	margin: 0 auto 1.5em;
	box-shadow: 0 2px 6px rgba(20, 20, 20, .10), 0 10px 24px rgba(20, 20, 20, .12);
}

/* --- Команда: крупные квадраты ------------------------------------------- */
.member-1 img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	margin: 0 0 1.5em;
	box-shadow: 0 2px 6px rgba(20, 20, 20, .10), 0 14px 32px rgba(20, 20, 20, .13);
}

@media all and (max-width: 767px) {
	.testimonial-1 img { width: 130px; height: 130px; }
}


/* =============================================================================
   4. КАРТЫ (Leaflet + OpenStreetMap)
   Используются на двух страницах: indoor.html (9 объектов) и contacts.html
   (офис). Здесь всё общее — размеры страницам задавать у себя.
   ============================================================================= */

/* Обязательный фикс: тема задаёт глобально img{max-width:100%;margin-bottom:1.625em},
   из-за чего тайлы Leaflet разъезжаются щелями. Не удалять. */
.leaflet-container img {
	max-width: none !important;
	margin-bottom: 0 !important;
}

/* Тайлы приглушены до светло-серого, чтобы карта не спорила с вёрсткой сайта */
.leaflet-container .leaflet-tile-pane {
	filter: grayscale(.85) contrast(1.05) brightness(1.03);
}

/* Метка: SVG-булавка в акцентном цвете темы #F58220.
   Масштабируем именно svg, а не сам div — на div Leaflet держит своё translate3d. */
.mp-pin { cursor: pointer; }
.mp-pin svg {
	display: block;
	transform-origin: 50% 100%;
	transition: transform .15s ease;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.mp-pin:hover svg,
.mp-pin:focus svg,
.mp-pin.mp-pin--on svg { transform: scale(1.18); }

/* Подсказка у метки */
.leaflet-tooltip.mp-tip {
	background: #fff;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
	padding: .8em 1.05em;
	width: max-content;
	max-width: 380px;
	white-space: normal;
	font-family: inherit;
	color: #666;
}
.leaflet-tooltip.mp-tip:before { border-top-color: #fff; }
/* Если подсказка упирается в край карты, JS сдвигает её внутрь на --mp-arrow,
   а хвостик отводит на столько же обратно — он остаётся ровно над меткой */
.leaflet-tooltip.mp-tip.leaflet-tooltip-top:before {
	left: calc(50% - var(--mp-arrow, 0px));
}
.mp-tip__title {
	display: block;
	margin-bottom: .35em;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #232323;
}
.mp-tip__row {
	display: block;
	font-size: 12.5px;
	line-height: 1.5;
	color: #767676;
}
.mp-tip__row b { color: #F58220; font-weight: 600; }
.mp-tip__hint {
	display: block;
	margin-top: .5em;
	padding-top: .5em;
	border-top: 1px solid #ececec;
	font-size: 11px;
	line-height: 1.3;
	color: #a5a5a5;
}

@media all and (max-width: 767px) {
	.leaflet-tooltip.mp-tip { max-width: 255px; padding: .7em .85em; }
	.mp-tip__title, .mp-tip__row { font-size: 12px; }
}


/* =============================================================================
   МОБИЛЬНЫЕ ЗНАЧЕНИЯ РИТМА (в конце файла, чтобы перекрывать десктопные)
   ============================================================================= */
@media all and (max-width: 767px) {
	:root { --mp-section-pad: 3em; }
}


/* =============================================================================
   5. ФОТО-ШАПКИ РАЗДЕЛОВ
   Портфолио, 360 и VR, Услуги и цены. Раньше там стояла оранжевая плашка
   с мелким заголовком — одинаковая на трёх страницах и ничего не говорящая
   о том, чем занимается студия. Теперь снимок производства.

   ЧИТАЕМОСТЬ
   Снимки сложные: зелёный фон циклорамы, окна в контровом свете, десяток
   светящихся мониторов. Плоская заливка темы ([data-overlay] — сплошной
   #232323 с одной прозрачностью) на таком материале либо убивает фото,
   либо оставляет заголовок на пёстром пятне. Поэтому подложка составная:
     — общий вертикальный градиент притемняет кадр целиком;
     — эллипс в центре создаёт ложе именно под текстом, где он и нужен.
   Замерено композитом (яркость снимка под рамкой заголовка + обе подложки
   по их формулам), белое к фону, худшая точка из ~24 000:
     портфолио 4.94:1   360 и VR 3.84:1   услуги 4.49:1
   при средних 14–15:1. Требование для крупного текста — 3:1, так что запас
   есть даже на самых светлых участках кадра. Если менять снимки, замер надо
   повторить: у этих трёх самые опасные места — окна в контровом свете.

   ВЫСОТА
   Фиксированная и одна на три страницы — в этом и смысл «выровнять».
   Снимок вписывается кропом (background-size:cover), поэтому пропорция
   оригинала на вёрстку не влияет.
   ============================================================================= */

.mp-hero {
	position: relative;
	display: flex;
	align-items: center;
	height: 300px;
	padding: 0 !important;   /* высоту задаёт height, паддинги ритма тут лишние */
	overflow: hidden;
	background: #232323;     /* виден, пока не загрузилось фото */
}

/* Снимок. Тема превращает <img> внутри .background-image-holder в background-image
   (js/scripts.js), поэтому размеры и кроп задаём именно холдеру. */
.mp-hero .background-image-holder {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: cover !important;
	background-position: 50% 50% !important;
	/* лёгкое приглушение: на странице должен солировать оранжевый акцент,
	   а не мониторы и циклорама на фоне */
	filter: saturate(.88) contrast(1.03);
	/* один осмысленный момент движения на всю страницу: кадр приходит
	   из чуть большего масштаба. Кривая — экспоненциальный ease-out. */
	animation: mp-hero-in 1.4s var(--mp-ease-out) both;
}
@keyframes mp-hero-in {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* --- Параллакс ------------------------------------------------------------
   Класс ставит js/mp-hero-parallax.js, и только если движение уместно:
   не на телефоне и не при системном запрете анимаций. Пока класса нет,
   шапка остаётся обычной — снимок ровно по секции, без запаса и без сдвига.

   Запас 60px сверху и снизу — ровно вдвое больше хода в 55px, заданного
   в скрипте. Поэтому край кадра не показывается ни при каком положении
   прокрутки, и подгонять числа на глаз не нужно: изменится ход — здесь
   надо поменять высоту и смещение по той же формуле.

   Въезд кадра при загрузке (mp-hero-in) для таких шапок отключён: движение
   уже есть, два жеста подряд спорили бы друг с другом. */
.mp-hero--parallax .background-image-holder {
	height: calc(100% + 120px);
	top: -60px;
	animation: none;
	will-change: transform;
}


.mp-hero:before {
	content: '';
	position: absolute; inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse 62% 130% at 50% 50%,
			rgba(16, 16, 18, .70) 0%,
			rgba(16, 16, 18, .40) 62%,
			rgba(16, 16, 18, .28) 100%),
		linear-gradient(to bottom,
			rgba(16, 16, 18, .42) 0%,
			rgba(16, 16, 18, .26) 45%,
			rgba(16, 16, 18, .48) 100%);
}

.mp-hero .container { position: relative; z-index: 2; width: 100%; }

.mp-hero h1 {
	margin: 0;
	color: #fff;
	line-height: 1.18;
	letter-spacing: -.01em;
	/* переносы по смыслу, а не по остатку строки — у «360 и Виртуальная
	   реальность» без этого висел одинокий хвост */
	text-wrap: balance;
	/* тень мягкая и со смещением: подстраховка на светлых участках кадра,
	   а не декоративный ореол */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 34px rgba(0, 0, 0, .30);
}

/* Тонкая акцентная черта под заголовком — единственная деталь, которая
   связывает шапку с фирменным оранжевым. */
.mp-hero h1:after {
	content: '';
	display: block;
	width: 54px; height: 3px;
	margin: .62em auto 0;
	background: #F58220;
	border-radius: 2px;
}

@media all and (max-width: 991px) {
	.mp-hero { height: 250px; }
	.mp-hero h1 { font-size: 2.1em; }
}
@media all and (max-width: 767px) {
	.mp-hero { height: 200px; }
	.mp-hero h1 { font-size: 1.65em; }
	.mp-hero h1:after { width: 42px; height: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-hero .background-image-holder { animation: none; }
}


/* =============================================================================
   6. ДВИЖЕНИЕ: ТАЧ-ЭКРАНЫ И ОГРАНИЧЕНИЕ АНИМАЦИЙ
   Две страховки, общие для всего сайта. Держим их здесь, а не на каждой
   странице: правила перечисляют чужие селекторы, и разъехаться им нельзя.
   ============================================================================= */

/* --- Наведение на тач-экранах ----------------------------------------------
   На телефоне :hover срабатывает по тапу и ЗАЛИПАЕТ до следующего касания
   в другом месте. Из-за этого карточка, которую человек просто нажал, чтобы
   открыть, оставалась приподнятой, а картинка — увеличенной. Выглядит как
   зависший интерфейс.

   Гасим только смещение и масштаб. Тень, цвет и прочая обратная связь
   остаются: подтверждение нажатия на тач-экране нужнее, чем на мыши. */
@media (hover: none) {
	.partners-1 .slider img:hover,
	.mp-audio:hover,
	.mp-design:hover img,
	.mp-card:hover,
	.mp-card:hover .mp-card__media img,
	.mp-card:hover .mp-card__more:after,
	.mp-modal__close:hover,
	.pf-audio:hover,
	.pf-design:hover img,
	.pf-shot:hover .pf-shot__frame,
	.pf-shot:hover .pf-shot__frame img,
	.mp-letter__btn:hover .mp-letter__shot,
	.mp-letter__btn:hover .mp-letter__zoom {
		transform: none;
	}
}

/* --- Ограничение анимаций --------------------------------------------------
   Требование системной настройки — не «выключить всё», а убрать перемещения
   и оставить то, что помогает понять происходящее. Поэтому здесь снимается
   только движение: прозрачность, цвет и тени продолжают работать, иначе
   пропадёт обратная связь на наведение и фокус.

   На indoor, portfolio и contacts есть свои такие блоки под конкретные
   элементы этих страниц; здесь — общее для сайта. */
@media (prefers-reduced-motion: reduce) {
	.mp-hero .background-image-holder,
	.masonry__item,
	.mp-cell,
	.pf-cell {
		animation: none !important;
		transform: none !important;
	}
	.partners-1 .slider img:hover,
	.mp-audio:hover,
	.mp-design:hover img,
	.pf-audio:hover,
	.pf-design:hover img,
	.pf-shot:hover .pf-shot__frame,
	.pf-shot:hover .pf-shot__frame img,
	.mp-letter__btn:hover .mp-letter__shot {
		transform: none;
	}
	/* переходы оставляем короткими, а не нулевыми: резкая смена состояния
	   читается хуже, чем быстрая, — цель настройки в отсутствии движения */
	.mp-audio, .mp-design img, .pf-audio, .pf-design img,
	.pf-shot__frame, .pf-shot__frame img, .partners-1 .slider img {
		transition-duration: 120ms !important;
	}
}


/* =============================================================================
   7. ШАПКА В КОЛОНКЕ СТРАНИЦЫ
   Логотип прижимался к самому краю браузера (padding-left:15px у темы), тогда
   как контент и подвал начинаются на 70px — колонка .container по центру плюс
   её внутренние поля. Шапка выпадала из вертикали страницы.

   ПОЧЕМУ ПАДДИНГОМ, А НЕ ШИРИНОЙ
   Первая попытка задавала .nav-bar ширину 1170px и margin:auto. Так делать
   нельзя, и вот почему:
     1. На панели висит box-shadow 0 0 30px. Пока панель во всю ширину, тень
        уходит за края экрана и её не видно. У суженной панели появились края —
        и по бокам меню легла заметная тёмная кайма.
     2. При прокрутке тема вешает .nav--fixed с position:fixed и шириной 100%.
        Это перебивало заданную ширину, и меню прыгало влево — шапка вела себя
        по-разному до прокрутки и после.

   Поэтому панель остаётся во всю ширину со всем своим оформлением, а внутрь
   загоняется только содержимое — боковыми полями, равными полю колонки.
   Формула повторяет .container: (свободное место / 2) + внутренние 15px.
   В фиксированном состоянии проценты считаются от ширины окна, то есть от той
   же величины, — поэтому до прокрутки и после логотип стоит в одном месте.

   Ниже 992px правило не включаем: там колонка 750px, а логотипу с меню нужно
   около 900px — меню сорвалось бы на вторую строку. Ниже 768px — бургер.
   ============================================================================= */

@media all and (min-width: 992px) {
	.nav-bar {
		padding-left:  calc((100% - 970px) / 2 + 15px);
		padding-right: calc((100% - 970px) / 2 + 15px);
	}
}
@media all and (min-width: 1200px) {
	.nav-bar {
		padding-left:  calc((100% - 1170px) / 2 + 15px);
		padding-right: calc((100% - 1170px) / 2 + 15px);
	}
}

/* В колонке 970px (992-1199) под логотип и меню остаётся 940px, а при штатных
   полях пунктов 1.3em им нужно чуть больше. Поджимаем до 0.9em: строка держится
   одной во всём диапазоне, на глаз сжатие незаметно. Заодно снимается давняя
   болячка темы — до этой правки меню уезжало под логотип уже около 1040px,
   независимо от выравнивания. */
@media all and (min-width: 992px) and (max-width: 1199px) {
	.menu > li > a { padding: 0 .9em; }
}


/* =============================================================================
   9. ЗАГОЛОВОК СТРАНИЦЫ РАЗДЕЛА
   Размер h1 по сайту разъехался: 4em на indoor (размер темы), 2.6em на фото-
   шапках, 2.8125em на команде и 0.625em на контактах — там заголовок страницы
   был мельче обычного текста, потому что использовался служебный класс .h6.

   Главная под это правило не попадает намеренно: её h1 — заголовок всего
   сайта на полноэкранной обложке, у него другая роль и свой размер 4em.
   ============================================================================= */

.mp-page-title {
	margin: 0;
	font-size: var(--mp-h1-page);
	line-height: 1.18;
	letter-spacing: -.01em;
	/* переносы по смыслу, а не по остатку строки */
	text-wrap: balance;
}

@media all and (max-width: 991px) { :root { --mp-h1-page: 2.1em; } }
@media all and (max-width: 767px) { :root { --mp-h1-page: 1.65em; } }

/* Заголовок главной. Размер у него свой (4em темы), но акцентную черту он
   делит с фото-шапками — это единственная деталь, которая связывает обложку
   с разделами.

   Черта задана в масштабе кегля, а не теми же 54px: под 2.6em это 1.3 ширины
   к кеглю, и под 4em те же 54px читались бы заметно тоньше. Отсюда 84px.

   Отступ снизу нужен только здесь: на внутренних страницах заголовок
   заканчивает шапку, а на главной под чертой идёт лид. */
.mp-home-title:after {
	content: '';
	display: block;
	width: 84px; height: 4px;
	margin: .38em auto .34em;
	background: #F58220;
	border-radius: 2px;
}

@media all and (max-width: 767px) {
	/* h1 темы здесь падает до 2.8125em — черта уменьшается вслед за ним */
	.mp-home-title:after { width: 62px; height: 3px; }
}


/* =============================================================================
   10. МЕНЮ У ПРАВОГО КРАЯ КОЛОНКИ
   Тема кладёт логотип и меню подряд слева (.nav-module.left { float:left }),
   из-за чего справа в колонке оставалось пустое место — 178px на 1440.
   Прижимаем меню вправо: получается привычная шапка и та же раскладка,
   что в подвале, где логотип слева, а навигация справа.

   Ниже 992px не трогаем: там колонка не навязывается, а с 768px — бургер.
   ============================================================================= */

@media all and (min-width: 992px) {
	.nav-bar .nav-module.menu-module { float: right; }
}

/* =============================================================================
   11. РЯД КАРТОЧЕК РАВНОЙ ВЫСОТЫ
   Используется там, где заголовок раздела и карточки лежат в ОДНОМ ряду:
   «Как мы делаем 360-ролик» на price.html и «Как смотреть» на 360vr.html.

   Ряд переводим во флекс: колонка заголовка шириной 100% переносится сама,
   а карточки встают в строку и растягиваются до общей высоты. Без этого
   каждая была высотой по своему тексту и низ ряда выходил рваным —
   на price.html это давало 447/421/395/421, на 360vr.html 198/198/224.

   Псевдоэлементы .row (клирфикс под флоаты) во флексе становятся
   полноценными элементами и ломают раскладку — гасим.
   ============================================================================= */

.mp-steps .row { display: flex; flex-wrap: wrap; }
.mp-steps .row:before,
.mp-steps .row:after { display: none; }
.mp-steps .row > [class*="col-"] { display: flex; }
.mp-steps .col-sm-12 { display: block; }

/* Тема даёт .feature нижний отступ 1.625em — он рассчитан на флоаты, где
   карточки идут потоком. Во флексе колонка уже растянута, и отступ
   превращается в мёртвое поле под карточкой. Селектор темы специфичнее
   одиночного класса, поэтому перебиваем цепочкой. */
.mp-steps .row > [class*="col-"] > .feature {
	width: 100%;
	margin-bottom: 0;
}

/* При переносе в меньшее число колонок нужен просвет между рядами —
   такой же, как между колонками */
@media all and (max-width: 991px) {
	.mp-steps .row > [class*="col-md-3"],
	.mp-steps .row > [class*="col-md-4"] { margin-bottom: 30px; }
}

/* --- Иконка над заголовком: центрируем по тексту -------------------------
   Тема задаёт .feature-2 .feature__title i { margin-right: 0.5778em } — это
   расчёт на иконку, стоящую СЛЕВА от заголовка в одной строке. В нашем ряду
   она стоит одна над текстом, и правое поле в 37px учитывается при
   центрировании: рисунок уезжал влево ровно на половину, 18px. Заметно
   на глаз — иконка не над серединой подписи.

   Замерено: центр бокса иконки 162px от края блока, центр заголовка 180px.
   Поле снимаем, и оба центра сходятся.

   Иконка при этом остаётся centered и по вертикали — так её и рисует шрифт.
   Прежняя посадка по нижнему краю рисунка отсюда убрана: у глифов разная
   высота (глаз 29px против смартфона 64px), выравнивание по низу давало
   ровный просвет до заголовка, но ломало центр — а нужен именно он.
   --------------------------------------------------------------------------- */
.mp-steps .feature__title i { margin-right: 0; }

/* Своя иконка вместо глифа шрифта. Размер в em, поэтому кегль .icon--lg
   управляет ею так же, как управлял бы буквой, и в ряду она встаёт наравне
   с соседними глифами. Цвет — фирменный, как у остальных иконок раздела. */
.mp-svg-icon {
	display: inline-block;
	width: 1em; height: 1em;
	vertical-align: middle;
	color: #F58220;
}


/* =============================================================================
   12. ОТКРЫТАЯ СТРАНИЦА В НАВИГАЦИИ
   Пункт, соответствующий текущей странице, горит фирменным оранжевым #F58220 —
   тем же, что у кикеров, галочек и черты под заголовками. Это не новый цвет,
   а уже принятый в оформлении акцент.

   Зацепка — атрибут aria-current="page", его проставляет mp_nav_link()
   в include/lang.php. Отдельный класс не заводим намеренно: aria-current
   и так обязателен для программ чтения с экрана, а держать рядом два
   параллельных признака одного состояния — верный способ их рассинхронить.

   Сравнение идёт по адресу без языкового префикса, поэтому на /en/price.html
   подсвечивается тот же пункт, что и на /price.html.

   Селектор с .nav-bar намеренно: тема красит пункты правилами вида
   .nav-bar.bg--white .menu > li > a, и без .nav-bar наше правило проиграло бы
   им по весу на страницах, где шапка получает фоновый класс.

   Начертание не трогаем — жирный шрифт в ряду обычных пунктов даёт две
   отлички сразу, и пункт начинает выглядеть кнопкой. Хватает цвета.
   ============================================================================= */

.nav-bar .menu > li > a[aria-current="page"] {
	color: #F58220;
	transition: color var(--mp-dur-hover) ease;
}
.nav-bar .menu > li > a[aria-current="page"]:hover,
.nav-bar .menu > li > a[aria-current="page"]:focus {
	color: #d97016;
}

/* Мобильное меню темы — отдельный список в модалке, туда правило выше
   не достаёт: там нет .nav-bar. */
.nav-modal .menu > li > a[aria-current="page"] {
	color: #F58220;
}

/* Подвал. Здесь ссылки белые правилом .bg--dark a:not(.btn) — вес (0,2,1),
   наш селектор (0,2,2) его перекрывает без !important.

   Оттенок тот же #F58220: на тёмном фоне подвала он читается даже лучше,
   чем на белой шапке, поэтому осветлять под тёмный фон не понадобилось.
   При наведении тема ведёт ссылки к белому — здесь ведём к более светлому
   оранжевому, иначе акцент пропадал бы ровно в момент касания. */
.footer__navigation > li > a[aria-current="page"] {
	color: #F58220;
	transition: color var(--mp-dur-hover) ease;
}
.footer__navigation > li > a[aria-current="page"]:hover,
.footer__navigation > li > a[aria-current="page"]:focus {
	color: #ffa04d;
}