/* ══════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА СТУДИИ СОФИТ — «Свет на чёрном»

   Подключается последней, после стилей конструктора, и перебивает их.
   Принцип: на сцене светится только то, что важно — один красный
   акцент на экран, всё остальное живёт на чёрных и серых.

   Правки цвета, шрифта и размеров делаются здесь, а не в блоках.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── тёмные слои: не #000, а тёплый чёрный разной глубины ── */
  --sf-stage:   #0B0A0C;   /* фон страницы */
  --sf-velvet:  #141113;   /* секции, отделённые от фона */
  --sf-riser:   #1C181A;   /* карточки, поднятые поверхности */
  --sf-edge:    #2A2426;   /* все линии и рамки — единственный цвет */

  /* ── нейтрали с уклоном в красный ── */
  /* Был #7A7073. Им набраны мелкие прописные подписи, а на бархате
     он давал 3.9:1 — ниже нормы 4.5:1 для мелкого текста, подписи
     проваливались в фон. Осветлён ровно настолько, чтобы проходить
     на всех трёх тёмных поверхностях: сцена 5.2, бархат 5.0, ступень 4.7. */
  --sf-ash:     #8B8184;   /* метки, подписи */
  --sf-smoke:   #A79FA1;   /* основной текст абзацев */
  --sf-chalk:   #EDE9E8;   /* заголовки */

  /* ── акцент ── */
  --sf-spot:    #FF4433;   /* один на экран */
  --sf-spot-hi: #FF5A4B;   /* наведение на красное */
  --sf-ember:   #C0301F;   /* нажатое, второй план */
  --sf-coal:    #6E1A12;   /* тихая графика, разделители */
  --sf-ink:     #180604;   /* текст на красной заливке */

  /* ── шрифты ── */
  --sf-display: 'Prata', Georgia, 'Times New Roman', serif;
  --sf-body:    'Jost', system-ui, -apple-system, sans-serif;
  --sf-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ── радиусы: три ступени ── */
  --sf-r-s: 4px;    /* кнопки, поля */
  --sf-r-m: 10px;   /* карточки, видео */
  --sf-r-l: 18px;   /* крупные панели */

  /* ── отступы: шаг 4 ── */
  --sf-1: 4px;  --sf-2: 8px;  --sf-3: 12px; --sf-4: 16px;
  --sf-5: 24px; --sf-6: 32px; --sf-7: 48px; --sf-8: 72px;
}

/* ══ ЕДИНАЯ КОЛОНКА КОНТЕНТА ══════════════════════════════════

   В конструкторе каждый блок строился сам по себе, и левый край текста
   гулял: тринадцать разных значений на одной странице, от 32 до 729.
   Кнопка в блоке абонементов не совпадала даже с текстом своего блока.

   Здесь одна колонка на все содержательные блоки. Блоки, которые
   намеренно идут во всю ширину — шапка, бегущая строка, лента истории,
   слайдеры — в правило не попадают: у них другая задача.
   ══════════════════════════════════════════════════════════════ */

:root {
  --sf-col: 1200px;   /* ширина колонки контента */
  --sf-gut: 24px;     /* поле внутри колонки */
}

/* Блоки, пересобранные под систему, держат одну ось. Обнуляем всё,
   что конструктор навешал внутри — контейнер, ряд и колонку, — и
   задаём поле один раз на самой секции. Значение считается так:
   либо 24px на узком экране, либо ровно столько, чтобы колонка
   шириной --sf-col встала по центру. */
#open-day {
  padding-inline: max(var(--sf-gut), calc((100% - var(--sf-col)) / 2));
}
/* Внутри секции бутстраповский контейнер добавлял свои поля и свою
   ширину поверх заданных — ось уезжала на 31 пиксель. Обнуляем: поле
   задаётся один раз, на секции. */
#open-day .container,
#open-day .container > .row {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

/* Блок «Готовим»: текст стоит на оси страницы, картинка уходит за правый
   край экрана. Поэтому у секции нет горизонтальных полей — отступ живёт
   на левой колонке, а правая свободно доходит до кромки.
   Запирать картинку в колонку контента было ошибкой: справа оставалась
   полоса пустоты, и приём с выходом за край пропадал. */
#features4-q {
  padding-inline: 0;
  padding-block: clamp(var(--sf-7), 7vw, var(--sf-8));
}
#features4-q .container-fluid { max-width: 100%; padding: 0; margin: 0; }
#features4-q .row {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
#features4-q .left-side {
  flex: 1 1 420px;
  padding: 0;
  /* Именно 100%, а не 100vw: vw считает и полосу прокрутки,
     из-за неё ось уезжала на семь пикселей вправо. */
  padding-left: max(var(--sf-gut), calc((100% - var(--sf-col)) / 2));
  padding-right: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
}
#features4-q .width { width: 100%; max-width: 560px; margin: 0; }
#features4-q .right-side {
  flex: 1 1 460px;
  padding: 0;
  max-width: 52%;
}
/* Картинка в своей естественной пропорции, без обрезки и скруглений —
   их там не было, я добавил лишнего. Единственное изменение против
   исходного: она доходит до правой кромки экрана. */
#features4-q .right-side img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  #features4-q .right-side { max-width: 100%; flex-basis: 100%; }
  #features4-q .left-side {
    flex-basis: 100%;
    padding-right: max(var(--sf-gut), calc((100% - var(--sf-col)) / 2));
    padding-bottom: 2rem;
  }

}

/* ══ ОСНОВА ═══════════════════════════════════════════════════ */

body {
  background-color: var(--sf-stage);
  color: var(--sf-smoke);
  font-family: var(--sf-body);
  font-weight: 300;
}

/* Секции с чёрной заливкой из темы приводим к слоям системы.
   Тема ставила чистый #000000 — он плоский и дешевит. */
section[class*="cid-"] {
  border-color: var(--sf-edge);
}

/* ══ ТИПОГРАФИКА ══════════════════════════════════════════════ */

/* Заголовки — антиква. Prata одного начертания, этого достаточно. */
h1, h2, h3, h4, h5,
.mbr-section-title,
.display-1, .display-2, .display-5 {
  font-family: var(--sf-display) !important;
  font-weight: 400 !important;
  color: var(--sf-chalk);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Prata существует в одном начертании. Тема же утяжеляет любые <span>
   внутри своих секций правилами вида `.cid-ulx1nuCTEl span { font-weight:
   600 }`, а в поп-апах внутри заголовков лежат <strong>. Начертания 600 и
   700 у Prata нет — браузер рисует синтетический жирный: сам обводит
   контур, и тонкие штрихи антиквы заплывают, а заголовок выглядит не
   дорого, а замыленно. На главной так набраны «Театр» и «кино» в первом
   экране и восемнадцать узлов всего.
   Селектор с атрибутом — чтобы перебить `.cid-… span` (0,1,1) честной
   специфичностью (0,1,3), без !important. */
section[class*="cid-"] :is(h1, h2, h3, h4, h5) :is(span, i, b, strong, em),
.modal :is(h1, h2, h3, h4, h5) :is(span, i, b, strong, em) {
  font-weight: inherit;
}

.display-1 { line-height: 1.04; }
.display-2 { line-height: 1.12; }
.display-5 { line-height: 1.2; }

/* Разрядка в теме была рассчитана на геометрический гротеск. У антиквы
   с высоким контрастом широкие пробелы разрывают слово, а тонкие штрихи
   на их фоне истончаются — заголовок выглядит слабым, а не дорогим.
   Крупному кеглю разрядка не нужна вовсе, ему нужна собранность. */
section[class*="cid-"] .mbr-section-title,
section[class*="cid-"] .display-1,
section[class*="cid-"] .display-2 {
  letter-spacing: -0.015em;
  word-spacing: -0.02em;
}

/* Подзаголовок под крупным заголовком — тихий, лёгкий, серый.
   Сейчас он спорит с заголовком по насыщенности. */
section[class*="cid-"] .mbr-section-subtitle {
  font-weight: 300;
  color: var(--sf-smoke);
  letter-spacing: .01em;
}

/* Основной текст — Jost лёгкого начертания.
   БЕЗ !important у p и li — и это важно. С ним правило съедало
   моноширинную у каждой метки, набранной в <p> или лежащей внутри <li>:
   на одной главной так потеряли шрифт 37 меток — «РЕЗУЛЬТАТ»,
   «НАБОР ОТКРЫТ», подписи под цифрами, заголовки колонок подвала.
   Выглядело это как разрядка гротеска вместо машинописи, то есть
   ошибка была видимая, просто незаметная по отдельности.
   !important здесь и не нужен: тема нигде не задаёт шрифт голым p и li
   (в mbr-additional.css шрифт стоит только на body, .display-* и
   .form-control), а design.css грузится последним — при равной силе
   побеждает он. Правило блока (#id .класс) теперь перебивает это
   обычным путём, без гонки восклицательных знаков.
   У .display-4 и .display-7 !important остаётся: это классы темы,
   и отвечать классу темы приходится тем же оружием. */
p, .mbr-text {
  font-family: var(--sf-body);
  font-weight: 300;
}
/* У пунктов списка задаём только начертание, шрифт оставляем
   наследоваться. Причина та же, но тоньше: правило, применённое
   к элементу напрямую, всегда сильнее наследования — какой бы
   слабой ни была его специфичность. Поэтому строка `li { font-family }`
   рвала наследование моноширинной от <ul> к <li>, и списки-факты
   («Роликов · 2», «Вместе · 0:44») набирались гротеском вместо
   машинописи, хотя шрифт был честно задан на списке. Тема шрифт
   спискам не задаёт, так что наследования от body достаточно. */
li { font-weight: 300; }
.display-4, .display-7 {
  font-family: var(--sf-body) !important;
  font-weight: 300;
}
.mbr-text, p { color: var(--sf-smoke); line-height: 1.65; }

/* Тема красит текст правилами вида `.cid-XXXX .mbr-text { color: #fff }` —
   это два класса, и они перебивают селектор выше. Добавляем тип и атрибут,
   чтобы вес стал больше, но без !important: он бы отнял возможность
   покрасить отдельный блок точечно. */
section[class*="cid-"] .mbr-text,
section[class*="cid-"] p:not(.mbr-section-subtitle) {
  color: var(--sf-smoke);
}
section[class*="cid-"] li { color: var(--sf-smoke); }

/* Чисто белый оставляем там, где текст обязан звенеть */
section[class*="cid-"] .mbr-section-title,
section[class*="cid-"] h1,
section[class*="cid-"] h2,
section[class*="cid-"] h3,
section[class*="cid-"] h4 {
  color: var(--sf-chalk);
}

/* Подзаголовки и подписи — гротеск средней насыщенности */
.mbr-section-subtitle, .item-role, .card-text {
  font-family: var(--sf-body) !important;
  color: var(--sf-smoke);
}

/* Короткие метки — моноширинная, вразрядку. Единственное место,
   где остаются прописные. */
.mbr-fonts-style.display-4.tag1,
.card-company-name,
.mbr-number {
  font-family: var(--sf-mono) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400 !important;
}

/* ══ КНОПКИ ═══════════════════════════════════════════════════
   Одна форма, три роли. Высота 46px у всех — это и попадание
   пальцем на телефоне, и ровный ритм на десктопе.             */

.btn,
.mbr-section-btn a.btn {
  font-family: var(--sf-body) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  letter-spacing: .02em;
  min-height: 46px;
  padding: .85rem 1.9rem !important;
  border-radius: var(--sf-r-s) !important;
  border-width: 1px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--sf-spot); outline-offset: 3px; }

/* Основная — заливка красным. Текст ТЁМНЫЙ: белый на красном даёт
   3,4:1, ниже нормы, и надпись выглядит мутной. Тёмный даёт 6,1:1. */
.btn-primary, .btn-info, .btn-danger {
  background-color: var(--sf-spot) !important;
  border-color: var(--sf-spot) !important;
  color: var(--sf-ink) !important;
}
.btn-primary:hover, .btn-info:hover, .btn-danger:hover {
  background-color: var(--sf-spot-hi) !important;
  border-color: var(--sf-spot-hi) !important;
  color: var(--sf-ink) !important;
}

/* Вторичная — контур */
.btn-white-outline, .btn-black-outline, .btn-secondary-outline {
  background-color: transparent !important;
  border-color: var(--sf-edge) !important;
  color: var(--sf-chalk) !important;
}
.btn-white-outline:hover, .btn-black-outline:hover, .btn-secondary-outline:hover {
  border-color: var(--sf-spot) !important;
  color: var(--sf-spot) !important;
  background-color: transparent !important;
}

/* ══ ССЫЛКИ ═══════════════════════════════════════════════════ */

a { transition: color .18s ease; }
a.text-primary { color: var(--sf-spot) !important; }
a.text-primary:hover { color: var(--sf-spot-hi) !important; }

/* ══ КАРТОЧКИ ═════════════════════════════════════════════════
   Рамка одна на весь сайт: 1px цвета «Кромка». Красная рамка —
   только у ведущей карточки, одной на ряд.                     */

.card-wrapper {
  border: 1px solid var(--sf-edge) !important;
  border-radius: var(--sf-r-m) !important;
  background-color: var(--sf-riser);
}

/* Разделители в списках внутри карточек */
.card-wrapper ul { border-top-color: var(--sf-edge) !important; }
.card-wrapper li { border-bottom-color: var(--sf-edge) !important; }

/* ══ ПОЛЯ ФОРМ ════════════════════════════════════════════════
   Поле темнее карточки, в которой лежит: так видно, что сюда
   пишут. При фокусе рамка краснеет — единственное место, где
   акцент появляется сам.                                        */

.form-control,
input[type="text"], input[type="tel"], input[type="email"],
textarea, select {
  font-family: var(--sf-body) !important;
  font-weight: 300 !important;
  background-color: var(--sf-stage) !important;
  color: var(--sf-chalk) !important;
  border: 1px solid var(--sf-edge) !important;
  border-radius: var(--sf-r-s) !important;
  min-height: 46px;
  padding: .8rem 1rem !important;
  transition: border-color .18s ease;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--sf-spot) !important;
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--sf-ash) !important; }

/* ══ ВИДЕО ════════════════════════════════════════════════════ */

.sofit-video__frame { border-radius: var(--sf-r-m); }
.sofit-video__caption { color: var(--sf-smoke); font-family: var(--sf-body); }

/* ══ ПОП-АПЫ ══════════════════════════════════════════════════ */

.modal-content {
  background-color: var(--sf-velvet) !important;
  border: 1px solid var(--sf-edge) !important;
  border-radius: var(--sf-r-l) !important;
}
.modal .mbr-section-title { color: var(--sf-chalk) !important; }

/* ══ ДВИЖЕНИЕ ═════════════════════════════════════════════════
   В дорогом макете анимация почти незаметна.                   */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══ КНОПКА ВХОДА В КАБИНЕТ ═══════════════════════════════════
   Вторичная роль: контур, а не заливка. Красную заливку на сайте
   носит целевое действие «Записаться», и вход в кабинет не должен
   с ним конкурировать — он нужен тем, кто уже учится. */
/* Контейнер кнопок у темы — display:block, и рассчитан он был на одну
   кнопку: в оригинале в шапке стояло только «Написать». Вторая кнопка
   встала строчным элементом с отрицательными полями темы и налезла на
   первую — на всех десктопных ширинах от 1000 до 1600. */
.navbar .mbr-buttons {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;
}
.navbar .mbr-buttons .btn {
  margin: 0 !important;
  white-space: nowrap;
}

/* Вход в кабинет — тихая ссылка, а не кнопка. Целевое действие шапки —
   «Написать»; кабинет нужен тем, кто уже учится, и второй рамкой рядом
   он с этим действием только спорил. Заодно это вернуло шапке одну
   строку: две полноценные кнопки в неё просто не помещались. */
.btn.btn-lk {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--sf-smoke) !important;
  padding: .7rem .2rem !important;
  min-height: 42px;
}
.btn.btn-lk:hover,
.btn.btn-lk:focus-visible {
  border-color: transparent !important;
  color: var(--sf-spot) !important;
  background-color: transparent !important;
}
.btn.btn-lk .mbr-iconfont { font-size: .95rem !important; }

@media (max-width: 991px) {
  .navbar .mbr-buttons { flex-wrap: wrap; }
  .btn.btn-lk { width: 100%; margin-top: .5rem !important; justify-content: center; }
}

/* ══ ОСНОВАНИЕ СТРАНИЦ ════════════════════════════════════════
   На сайте одновременно жили четыре разных чёрных: #000 и #111 от
   конструктора, #0B0A0C и #141113 от системы. Разница мелкая, но на
   стыке секций давала еле заметную полосу — из таких мелочей и
   складывается ощущение недоделанности.

   Здесь всё приводится к двум тонам системы. Сцена — основной,
   бархат — полоса, которой отбиваются смысловые части: не через
   каждую секцию (это была бы рябь), а там, где страница переходит
   к следующему разговору.

   В исключениях — секции, которые пока светлые по-настоящему: в них
   тёмный текст, и перекрасить фон без переделки самого блока значит
   сделать текст невидимым. Их переделываю по одной; список исключений
   и есть список оставшейся работы.

   Осталось три: шапки страниц /deti, /vzroslye и /kinoshkola.
   Контакты, «Как проходит проект», баннер и видеоблок из списка убраны —
   пересобраны и красят себя сами. */

/* Исключения через :where(): у него нулевой вес. Через :not(#id) вес
   идентификатора считается, и это правило перебивало точечные — полосы
   бархатом не появлялись вовсе. */
section[class*="cid-"]:not(:where(
  [id^="header01-"], [id^="header2-"]
)) {
  background-color: var(--sf-stage);
}

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

   Список — только для блоков, которые сами про свой фон ничего не
   говорят. Пересобранный блок задаёт заливку у себя, через #id, и вес
   у такого правила ровно тот же, что здесь; кто победит, решает порядок
   в документе, а не смысл. Пока блочные <style> идут ниже этого файла,
   побеждают они — но держать вёрстку на порядке подключения нельзя:
   строка отсюда либо повторяет то, что блок и так делает, либо тихо
   спорит с ним.

   Поэтому убраны:
   · #pricing1-do и #features05-9o — оба переведены с бархата на сцену
     у себя в блоке. Здесь им назначался бархат, и правила спорили;
   · #features04-9z, #video1-k4, #video1-fj, #pricing1-em, #pricing1-g3 —
     эти красят себя бархатом сами, тем же значением. Строка здесь
     ничего не добавляла.

   Оставшиеся идентификаторы своей заливки не задают — но и на страницах
   сейчас не появляются: ни один из их блоков не подключён ни к одной
   page.tsx. Правило пока ни на что не действует; вычищать его — отдельное
   решение, не косметическое. Проверено grep-ом по src/blocks и src/app
   06.09.2026. */
#features05-c8,
#features6-di,
#article3-dn,
#video1-k5,
/* Дети */
#features6-88,
#video1-fi,
#article3-8t,
/* Взрослые */
#features6-fs,
#article3-g2,
/* Кинопроекты */
#features6-6j,
#video1-ib,
#video1-ic {
  background-color: var(--sf-velvet);
}

/* ══ ЗАПАС ПОД ЗАКРЕПЛЁННЫМ МЕНЮ ══════════════════════════════
   Меню закреплено вверху. На широком экране оно занимает 175 пикселей,
   и страницы без полноэкранной шапки начинались прямо под ним:
   заголовки «Преподаватели СОФИТ», «Персональные занятия»,
   «#кинопроекты» стояли на 96–112 пикселях и при загрузке были не видны
   вовсе — человек попадал на страницу, где не написано, куда он попал.

   Правило берёт первую секцию после меню и не трогает страницы, где
   первым идёт полноэкранный герой: там запас уже заложен в саму шапку.
   На узком экране меню сворачивается до 71 пикселя и запас не нужен. */
/* Прежнее правило опиралось на секцию menu1-* — теперь шапка не секция,
   а свой компонент, и запас задаётся ниже, в разделе «Шапка сайта». */

/* ══ ФОРМЫ: ОБЩЕЕ ДЛЯ ВСЕГО САЙТА ═════════════════════════════
   Формы стоят в блоке контактов и в двадцати с лишним поп-апах на всех
   страницах сайта. Правки здесь, а не в отдельных блоках: иначе одно
   и то же чинится по двадцать раз и всё равно где-то остаётся. */

/* Граница поля — это граница элемента управления, а не украшение:
   норма для неё 3:1, как для любого органа управления. Кромка --sf-edge
   давала 1,3:1 к сцене и 1,15:1 к ступени — поле не читалось как поле,
   и его приходилось искать по подписи. Отдельная переменная, а не
   --sf-edge: волосяные линии вёрстки должны оставаться незаметными,
   а границы полей — заметными, это разные задачи. */
:root { --sf-field: #6A6466; }   /* 3,41:1 к сцене, 3,04:1 к ступени */

.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  border-color: var(--sf-field) !important;
}
.form-control:hover { border-color: var(--sf-smoke) !important; }

/* Автозаполнение. Chrome и Safari красят подставленное поле своим
   светло-жёлтым фоном и тёмным текстом — на тёмной форме это выглядит
   поломкой, а после подстановки телефона поле становилось нечитаемым.
   Цвет фона у автозаполнения переопределить нельзя, поэтому фон
   рисуется внутренней тенью, а цвет текста — text-fill-color. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sf-stage) inset !important;
  box-shadow: 0 0 0 1000px var(--sf-stage) inset !important;
  -webkit-text-fill-color: var(--sf-chalk) !important;
  caret-color: var(--sf-chalk);
  transition: background-color 9999s ease-out 0s;
}

/* Сообщения после отправки. Тема красила успех в зелёный #70C770 с белым
   текстом — 2,1:1, и зелёного в палитре студии нет вовсе. Оба сообщения
   теперь одинаковой формы, различаются только цветом текста и кромки:
   человек и так понимает, что случилось, из самого текста. */
.alert,
.alert-success,
.alert-danger,
.alert-form,
.form-alert {
  background: var(--sf-stage) !important;
  border: 1px solid var(--sf-edge) !important;
  border-left: 2px solid var(--sf-spot) !important;
  border-radius: var(--sf-r-s) !important;
  color: var(--sf-chalk) !important;
  text-align: left !important;
  padding: .8rem 1rem !important;
}
.alert-danger,
.alert-form.alert-danger {
  color: var(--sf-spot) !important;
}

/* Кнопка на время отправки. Бутстрап гасит её до 65% непрозрачности,
   и надпись «Отправляем…» на красном становилась нечитаемой. Гасим
   не всю кнопку, а только заливку — текст остаётся плотным. */
.btn:disabled,
.btn.disabled {
  opacity: 1 !important;
  background-color: var(--sf-ember) !important;
  border-color: var(--sf-ember) !important;
  color: var(--sf-chalk) !important;
  cursor: progress;
}

/* ══ ШАПКА САЙТА ══════════════════════════════════════════════
   Стили здесь, а не в компоненте: шапка закреплена и задаёт запас
   под собой для содержания страниц — правило про этот запас стоит
   рядом, иначе они разъедутся при первой же правке высоты. */

:root {
  --sh-h: 72px;        /* высота полосы вверху страницы */
  --sh-h-tight: 56px;  /* и она же после прокрутки */
}

.sh {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1030;
  background: color-mix(in srgb, var(--sf-stage) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
/* Пока страница наверху, полоса сливается с первым экраном; стоит
   прокрутить — под ней появляется линия, чтобы она не «плавала»
   поверх содержания без границы. */
.sh--tight {
  background: color-mix(in srgb, var(--sf-stage) 97%, transparent);
  border-bottom-color: var(--sf-edge);
}
@supports not (backdrop-filter: blur(10px)) {
  .sh { background: var(--sf-stage); }
}

.sh__bar {
  height: var(--sh-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-inline: max(var(--sf-gut), calc((100% - var(--sf-col)) / 2));
  transition: height .2s ease;
}
.sh--tight .sh__bar { height: var(--sh-h-tight); }

.sh__logo { display: flex; align-items: center; flex: 0 0 auto; }
.sh__logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: height .2s ease;
}
.sh--tight .sh__logo img { height: 34px; }

.sh__nav { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.75rem); }

.sh__link,
.sh__link--btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 0;
  border: 0;
  background: none;
  font-family: var(--sf-body);
  font-weight: 400;
  font-size: .96rem;
  line-height: 1;
  color: var(--sf-smoke);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease;
}
.sh__link:hover,
.sh__link:focus-visible { color: var(--sf-chalk); }
.sh__link:focus-visible { outline: 2px solid var(--sf-spot); outline-offset: 4px; border-radius: 2px; }

/* Текущая страница отмечена чертой, а не только цветом: цвет
   различает не каждый, а линию видно всем. */
.sh__link.is-current { color: var(--sf-chalk); }
.sh__link.is-current::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--sf-spot);
}

.sh__chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.sh__chev.is-up { transform: rotate(-135deg) translate(-2px, -2px); }

/* ── раскрытие «Направления» ── */
.sh__drop { position: relative; }
.sh__menu {
  position: absolute;
  top: calc(100% + .9rem);
  left: -1rem;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 30rem;
  background: var(--sf-edge);
  border: 1px solid var(--sf-edge);
  border-radius: var(--sf-r-m);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.sh__menu.is-open { display: grid; }

.sh__item {
  display: grid;
  gap: .2rem;
  padding: .85rem 1.1rem;
  background: var(--sf-velvet);
  text-decoration: none;
  transition: background-color .16s ease;
}
.sh__item:hover { background: var(--sf-riser); }
/* Фокус в выпадающих меню.
   Смена фона с «бархата» на «ступень» даёт 1,07:1 — норма для индикатора
   фокуса 3:1, то есть собственного индикатора у пункта не было вовсе.
   Штатное кольцо браузера тоже не спасало: у плашки меню overflow: hidden,
   а пункты идут от края до края, и у верхнего с нижним кольцо срезалось
   границей. Отрицательный offset рисует обводку ВНУТРИ пункта — обрезать
   нечего, и она мелом даёт 12,6:1. */
.sh__item:focus-visible {
  background: var(--sf-riser);
  outline: 2px solid var(--sf-chalk);
  outline-offset: -2px;
}
.sh__item.is-current { background: var(--sf-riser); box-shadow: inset 2px 0 0 var(--sf-spot); }
/* Направлений стало нечётное число: вокал закрыт, осталось пять пунктов.
   Сетка из двух столбцов оставляла шестую ячейку пустой, и в углу плашки
   светился прямоугольник цвета --sf-edge — фон, который просвечивает
   сквозь зазор в 1px. Дыра выглядела недогруженным пунктом.
   Последний пункт растягивается на оба столбца, но только когда он
   нечётный по счёту: вернётся шестое направление — правило само
   перестанет срабатывать, и править CSS второй раз не придётся. */
.sh__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sh__item-name {
  font-family: var(--sf-body);
  font-size: .95rem;
  color: var(--sf-chalk);
}
.sh__item-note {
  font-family: var(--sf-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-ash);
}

/* ── действия справа ── */
.sh__acts { display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, 1rem); margin-left: auto; }

/* Вход — кнопка с серой обводкой, а не сплошная заливка: рядом стоит
   красная «Написать», и две сплошные кнопки спорили бы за внимание.
   Обводка --sf-field, а не --sf-edge: это граница органа управления,
   для неё норма 3:1, а тонкая линия вёрстки даёт всего 1,3. */
.sh__lk {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  border: 1px solid var(--sf-field);
  border-radius: var(--sf-r-s);
  background: transparent;
  font-family: var(--sf-body);
  font-weight: 400;
  font-size: .92rem;
  line-height: 1;
  color: var(--sf-smoke);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.sh__lk:hover,
.sh__lk:focus-visible {
  color: var(--sf-chalk);
  border-color: var(--sf-smoke);
  background: color-mix(in srgb, var(--sf-chalk) 6%, transparent);
}
.sh__lk:focus-visible { outline: 2px solid var(--sf-spot); outline-offset: 2px; }

.sh__write {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.15rem;
  /* Прозрачная рамка той же толщины, что у соседней «Вход»: без неё
     обведённая кнопка на два пикселя выше сплошной, и пара стоит криво. */
  border: 1px solid transparent;
  border-radius: var(--sf-r-s);
  background: var(--sf-spot);
  /* Уголь на красном — 5,7:1; белый дал бы 3,4 и не прошёл бы норму. */
  color: var(--sf-ink);
  font-family: var(--sf-body);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.sh__write:hover, .sh__write:focus-visible { background: var(--sf-spot-hi); color: var(--sf-ink); }

.sh__soc { display: flex; gap: .1rem; }
.sh__soc a {
  display: grid;
  place-items: center;
  /* 34 пикселя, а не 30: это цель для пальца и мыши, и мельче делать
     нельзя — по мелким значкам промахиваются. */
  width: 34px; height: 34px;
  border-radius: var(--sf-r-s);
  color: var(--sf-ash);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.sh__soc svg { width: 19px; height: 19px; display: block; }
.sh__soc a:hover, .sh__soc a:focus-visible { color: var(--sf-chalk); background: var(--sf-riser); }

/* ── бургер и панель на телефоне ── */
.sh__burger { display: none; }
.sh__panel { display: none; }

@media (max-width: 1199px) {
  /* Соцсети первыми уходят из тесноты: они есть в подвале, подписанные
     словами, а место в полосе нужнее кнопке «Написать». */
  .sh__soc { display: none; }
}

@media (max-width: 991px) {
  .sh__nav, .sh__acts { display: none; }
  .sh__burger {
    display: grid;
    gap: 5px;
    margin-left: auto;
    padding: .6rem .3rem;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .sh__burger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--sf-chalk);
    transition: transform .2s ease, opacity .2s ease;
  }
  .sh--open .sh__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sh--open .sh__burger span:nth-child(2) { opacity: 0; }
  .sh--open .sh__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Высота задана явно, а не через bottom: 0. Причина неочевидная:
     у шапки стоит backdrop-filter, а элемент с фильтром становится
     точкой отсчёта для вложенных position: fixed. Из-за этого bottom: 0
     считался от самой полосы, и панель выходила высотой 62 пикселя
     вместо экрана. dvh, а не vh: на телефоне адресная строка
     то появляется, то прячется, и vh даёт панель длиннее экрана. */
  .sh__panel {
    display: block;
    position: fixed;
    top: var(--sh-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--sh-h));
    height: calc(100dvh - var(--sh-h));
    background: var(--sf-stage);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem max(var(--sf-gut), 1rem) 2.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .sh__panel[hidden] { display: none; }

  .sh__panel-group {
    font-family: var(--sf-mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sf-ash);
    margin: 1.4rem 0 .5rem;
  }
  .sh__panel-group:first-child { margin-top: 0; }
  .sh__panel-link:focus-visible {
    outline: 2px solid var(--sf-spot);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Строки крупные и с большим шагом: прежние пункты шли вплотную
     по 44px, и промахнуться пальцем было легко. */
  .sh__panel-link {
    display: grid;
    gap: .15rem;
    padding: .85rem 0;
    /* Своего индикатора фокуса у строк мобильного меню не было —
       у соседних .sh__link и .sh__lk он есть. Смещение наружу здесь
       можно: панель не режет содержимое. */
    border-top: 1px solid var(--sf-edge);
    font-family: var(--sf-body);
    font-weight: 300;
    font-size: 1.12rem;
    color: var(--sf-chalk);
    text-decoration: none;
  }
  .sh__panel-link.is-current { color: var(--sf-spot); }
  .sh__panel-write { width: 100%; justify-content: center; margin-top: 1.6rem; padding-block: .9rem; }
  .sh__panel-soc { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.6rem; }
  .sh__panel-soc a {
    font-family: var(--sf-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sf-ash);
    text-decoration: none;
  }
}

/* Запас под закреплённой полосой — для страниц, которые начинаются
   не с полноэкранной шапки. У героев запас уже внутри них. */
#site-header ~ section:first-of-type:not([id^="header1-"]):not([id^="header01-"]) {
  padding-top: calc(var(--sh-h) + clamp(1.5rem, 4vw, 3rem));
}

@media (prefers-reduced-motion: reduce) {
  .sh, .sh__bar, .sh__logo img, .sh__chev, .sh__burger span { transition: none; }
}

/* ── раскрытие «Написать» ─────────────────────────────────────
   Кнопка раньше вела прямо в WhatsApp и молча выбирала мессенджер
   за человека. Теперь показывает все способы разом — включая заявку
   для тех, кто не хочет писать в мессенджер вовсе. */
.sh__write { border: 1px solid transparent; cursor: pointer; gap: .45rem; }
.sh__chev--ink { border-color: var(--sf-ink); }

.sh__ways {
  position: absolute;
  top: calc(100% + .9rem);
  right: 0;
  display: none;
  /* 17rem, а не 15: при 240px «Оставить заявку» ломалось на две строки,
     и последняя строка списка вырастала до 54px против 39 у остальных. */
  min-width: 17rem;
  background: var(--sf-edge);
  border: 1px solid var(--sf-edge);
  border-radius: var(--sf-r-m);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.sh__ways.is-open { display: grid; gap: 1px; }
.sh__way-name { white-space: nowrap; }

.sh__way {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .75rem 1rem;
  background: var(--sf-velvet);
  text-decoration: none;
  transition: background-color .16s ease;
}
.sh__way:hover { background: var(--sf-riser); }
/* То же, что у .sh__item: обводка внутрь, потому что .sh__ways прячет
   всё, что вылезло за плашку. */
.sh__way:focus-visible {
  background: var(--sf-riser);
  outline: 2px solid var(--sf-chalk);
  outline-offset: -2px;
}
.sh__way-name { font-family: var(--sf-body); font-size: .95rem; color: var(--sf-chalk); }
.sh__way-val {
  font-family: var(--sf-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-ash);
  white-space: nowrap;
}
/* Заявка — не мессенджер, поэтому отделена и подсвечена: это тот путь,
   который приводит обращение в кабинет студии, а не в чужой чат. */
.sh__way--form { background: var(--sf-riser); }
.sh__way--form .sh__way-val { color: var(--sf-spot); }

/* Заголовки групп внутри раскрытия «Написать»: список стал смешанным —
   звонок, мессенджеры, заявка, — и без подписей человеку пришлось бы
   разбирать на глаз, где что. */
.sh__ways-group {
  padding: .6rem 1rem .35rem;
  background: var(--sf-velvet);
  font-family: var(--sf-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sf-ash);
}
/* Номер набирают глазами по цифрам — моноширинная с ровными знаками. */
.sh__way--tel .sh__way-name {
  font-family: var(--sf-mono);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.sh__panel-link--tel {
  font-family: var(--sf-mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* ══ ПЕРЕНОСЫ В ЗАГОЛОВКАХ ════════════════════════════════════
   Тема конструктора ставит word-break: break-word на весь текст.
   Для абзаца это спасение от длинных адресов, для заголовка — беда:
   «Преподаватели» ломалось на «Преподавател» и «и», потому что слово
   шире своей колонки на десяток пикселей. Русское слово без переносов
   рвать посреди нельзя — либо целиком, либо меньшим кеглем. */
h1, h2, h3, h4,
.mbr-section-title,
[class*="__title"],
[class*="__name"] {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* ══ РАМКА ВОКРУГ ВИДЕО ═══════════════════════════════════════
   Тема подкладывала под ролик красный градиент (#ba0000 → #f7978f)
   и давала пять пикселей полей — получалась красная обводка кадра.
   Три беды разом: цвета не из палитры, второй красный акцент в блоке,
   где акцент уже потрачен на метку, и обводка тянет взгляд на рамку
   вместо самого видео. Блоков таких два — на /deti и /vzroslye. */
.col-video .mbr-figure {
  background-image: none !important;
  padding: 0 !important;
}
/* Скругление оставляем, но одно: у рамки было 2.08rem, у кадра внутри
   1.76rem, и края не совпадали на пару пикселей. */
.col-video .mbr-figure,
.col-video .mbr-figure iframe,
.col-video .mbr-figure .sofit-video__frame {
  border-radius: var(--sf-r-m) !important;
}