/*
 * Свой слой поверх стилей темы.
 *
 * Здесь только то, что пришлось изменить осознанно, — не косметика
 * и не переделка дизайна. Каждое правило с причиной.
 */

/*
 * Список преподавателей, когда их двое или трое.
 *
 * Тема разводит карточки по краям (`justify-content: space-between`) и держит
 * их шириной в 330 пикселей. На девяти и двенадцати — а столько их в онлайне
 * и в Москве — это ровный ряд. В Бронницах опубликовано двое, и те же правила
 * давали две карточки по углам контейнера в 1410 пикселей с полутысячей
 * пустоты между ними.
 *
 * Здесь карточки идут от левого края и становятся крупнее: места хватает,
 * а студии с двумя преподавателями есть смысл показать их как следует, а не
 * теми же миниатюрами, что рассчитаны на ряд из четырёх. Разметка та же.
 */
.teachers__main--few {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 380px));
  justify-content: start;
  gap: 72px 56px;
  margin-top: 70px;
}

/*
 * Сетка, а не флекс со `space-between`: колонки одинаковой ширины стоят
 * рядом слева, и второй преподаватель не улетает к правому краю страницы.
 * `auto-fit` заодно снимает нужду в отдельном правиле на каждое число
 * карточек — на двух это две колонки, на трёх три.
 */
.teachers__main--few .teacher__card { max-width: none; }
.teachers__main--few .teacher__link { display: block; }
.teachers__main--few .teacher__img { min-width: 0; width: 100%; }

.teachers__main--few .teacher__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 80px 0;
}

/*
 * Имя крупнее обычных 32 пикселей: карточек мало, места много, и студия
 * с двумя преподавателями представляет их, а не перечисляет.
 */
.teachers__main--few .teacher__name { font-size: 40px; margin-top: 28px; }
.teachers__main--few .teacher__description { margin-top: 14px; }

@media (max-width: 900px) {
  .teachers__main--few {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 40px;
  }
  .teachers__main--few .teacher__img img { aspect-ratio: 3 / 2; }
  .teachers__main--few .teacher__name { font-size: 32px; }
}

/*
 * Снимок в карточке мероприятия.
 *
 * `.event__img` тема задумывала слайдом Swiper и размер ей задала
 * (720×393), а правила для картинки внутри у неё нет: в её разметке слайдов
 * несколько и ими занимается библиотека. Мы показываем один снимок и без
 * этих трёх строк получаем картинку в натуральную величину, вылезающую
 * из карточки.
 *
 * Проверить это на проде было не на чем: карточек мероприятий там не
 * существовало — все 180 записей лежали черновиками.
 */
.event__slider .event__img { overflow: hidden; border-radius: 80px 0; }
.event__slider .event__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * «Подробнее» — по нижней грани снимка.
 *
 * Тема отбивала кнопку от описания постоянной величиной: 123 пикселя, а ниже
 * 1445 — сорок. Такая отбивка сходится ровно на одной длине текста. На широком
 * экране кнопка уезжала на 84 пикселя ниже снимка и растягивала карточку под
 * себя; на 1440 совпадала — но случайно, до первого мероприятия с названием
 * подлиннее.
 *
 * Считать тут нечего. Колонка с текстом и так одной высоты со снимком — обе
 * тянет флекс карточки. Кнопку прижимаем к низу колонки, а отбивку сверху
 * держим паддингом: он остаётся минимальным зазором, когда текст длинный
 * и свободного места уже нет.
 *
 * Вторая половина правила — про обратный случай. Названия у мероприятий
 * длинные («Практика глубокой релаксации под звуки симфонических гонгов…»),
 * и на трёх строках уже текст выше снимка. Тогда нижние грани разошлись бы
 * снова, только в другую сторону, поэтому снимок тянется до высоты карточки,
 * а 393 пикселя темы остаются ему полом.
 *
 * Пропорция снимку нужна не для красоты: без неё высоту рамке задаёт сама
 * картинка в натуральную величину, и вертикальный снимок раздувает карточку
 * до девятисот пикселей — проверено, так и было.
 */
.event__info { display: flex; flex-direction: column; }
.event__btns { margin-top: auto; padding-top: 40px; }
.event__slider { display: flex; }
.event__slider .event__img { height: auto; min-height: 393px; aspect-ratio: 720 / 393; }

/*
 * Карточка мероприятия сверху вниз, а не в одну строку, пока экран узкий:
 * тема ставит .event__card во flex со space-between и снимку отводит 720
 * пикселей — на телефоне текст от этого сжимается в колонку в два слова.
 *
 * Прижимать кнопку тут не к чему: колонки больше нет, снимок идёт под
 * текстом. `margin-top: auto` сам обращается в ноль — свободного места
 * в колонке по высоте не остаётся, — и зазор целиком держит паддинг.
 */
@media (max-width: 1100px) {
  .event__card { flex-direction: column; gap: 32px; }
  .event__slider, .event__img { max-width: 100%; width: 100%; height: auto; }
  .event__slider .event__img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}

/*
 * Правило для `.teachers__main` отсюда убрано.
 *
 * Оно писалось, когда Swiper в сборку не входил и ряд карточек приходилось
 * переносить руками. Библиотека вернулась, и правило стало вредным: на главной
 * этот класс висит на `.swiper-wrapper`, которому перенос строк противопоказан —
 * Swiper двигает обёртку трансформом и считает ширину одной строки, поэтому
 * второй ряд наезжает на первый. На странице списка перенос тоже лишний:
 * тема разводит эти случаи сама, через `body.--teachers-page`.
 */

/*
 * Полный список направлений.
 *
 * Тема прячет всё после восьмой карточки — на главной это верно,
 * там есть кнопка «все направления». На странице со списком прятать нечего.
 */
.courses__section--all .courses__element:nth-child(n+9) {
  display: block;
}

/*
 * Раскрытие с анимацией.
 *
 * В теме это делал инлайновый jQuery в подвале: `.show(400)` у карточек
 * и `.hide(200)` у кнопки. jQuery анимирует высоту, ширину и прозрачность,
 * то есть карточки выезжали за четыре десятых секунды, а кнопка таяла
 * за две. Наш обработчик просто добавлял класс — карточки появлялись
 * рывком, и разница с продом бросалась в глаза.
 *
 * Повторяем то же средствами CSS, а не возвратом jQuery: он на странице
 * есть, но обработчик нарочно от него не зависит, чтобы кнопка работала
 * и при неудачной загрузке библиотек.
 *
 * Длительности взяты из темы, не выдуманы: 400 мс и 200 мс.
 */
@keyframes sattva-courses-reveal {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.92); }
  to   { opacity: 1; transform: none; }
}

.courses__section--all .courses__element:nth-child(n+9) {
  animation: sattva-courses-reveal 400ms ease-out both;
  transform-origin: top center;
}

/*
 * Кнопка не исчезает мгновенно: обработчик вешает класс, а прячет её
 * уже эта анимация. Через 200 мс место освобождается — так же, как
 * это делал `.hide(200)`.
 */
.courses__element_all.--hiding {
  animation: sattva-courses-hide 200ms ease-in both;
  pointer-events: none;
}

@keyframes sattva-courses-hide {
  from { opacity: 1; }
  to   { opacity: 0; width: 0; margin: 0; padding: 0; border-width: 0; }
}

/*
 * Кому движение мешает — тому его нет. Раскрытие при этом остаётся:
 * пропадает только сама анимация, а карточки появляются сразу.
 */
@media (prefers-reduced-motion: reduce) {
  .courses__section--all .courses__element:nth-child(n+9),
  .courses__element_all.--hiding {
    animation-duration: 1ms;
  }
}

/*
 * Место под выступ подвала там, где сетка направлений заканчивает страницу.
 *
 * Подвал залезает вверх на содержимое: `.footer_photo` позиционирован абсолютно
 * с `top: -120px`, а логотип подтянут относительным сдвигом. Тема резервирует
 * под это место у самой страницы, но только там, где выставляет свои классы;
 * у /otzivi/ и /courses/ таких классов нет, сетка стоит последней — и логотип
 * с фотографией наезжали на нижний ряд карточек. Заметнее всего после кнопки
 * «все направления»: рядов прибавляется, и упираются они в самый низ.
 *
 * Порог 1350px не наш, а темин: `@media (max-width: 1350px)` прячет
 * `.footer_photo` совсем и возвращает логотип в поток (`position: static`).
 * Ниже этой ширины наезжать нечему, и пустое место внизу было бы лишним.
 * Отступ равен самому выступу — 120 пикселей.
 *
 * Отступ вешаем на внутренний контейнер, а не на саму секцию, и это важно.
 * У `.courses` есть градиентный фон и `overflow: hidden`, то есть секция
 * образует блочный контекст: отступ контейнера остаётся внутри и просто
 * увеличивает её высоту — под карточками появляется 120 пикселей того же
 * градиента. Отступ на самой секции лёг бы снаружи, и между градиентом
 * и подвалом получилась бы белая полоса со швом.
 *
 * Правило адресное, по номеру страницы: сетка направлений встречается и на
 * главной, и там она идёт в середине потока, где отступ ни к чему.
 *
 * Откуда вообще взялся случай: на проде эта страница заканчивается блоком
 * расписания Bookly, он и держал дистанцию. Расписание мы не переносим,
 * значит держим сами.
 */
@media (min-width: 1351px) {
  /* /otzivi/ */
  body.page-id-129317 section.courses > .container {
    margin-bottom: 120px;
  }
}

/*
 * Правила таблицы цен убраны вместе с самой таблицей.
 *
 * Утверждение «стилей для прайса в теме нет» было неверным: тема размечает
 * прайс аккордеоном (question__block, abonement__suggestion и далее) и держит
 * под него около сорока правил, включая поведение на узких экранах. Шаблон
 * прайса теперь печатает эту разметку, и свой слой ей не нужен.
 */

/*
 * Место под фотографию, которой нет.
 *
 * Раньше сюда подставлялась синтезированная og-карточка — та, что делается
 * для мета-тега. В вёрстке она смотрелась чужеродно: у преподавателя вставала
 * вместо портрета, а на странице направления её текст дублировал заголовок.
 * Теперь пустая карточка — просто нейтральный прямоугольник, без надписей.
 */
.teacher__img:empty,
.single-course--teacher__img:empty {
  background: linear-gradient(135deg, #efecf4 0%, #e4dfec 100%);
  min-height: 220px;
  border-radius: 4px;
}

/*
 * Зона клика по бургеру.
 *
 * Бургер в теме — не контейнер с тремя полосками, а сам себе средняя
 * полоска: `.mobile-menu` это блок 38×2 с фоном, а верхняя и нижняя
 * нарисованы псевдоэлементами `::before` и `::after` на `top: ∓13px`.
 * Псевдоэлементы лежат вне коробки родителя, но клики по ним всплывают
 * в него же — так что кликабельны ровно три полоски по два пикселя,
 * а между ними два провала по одиннадцать.
 *
 * Замер по сетке точек: из 28 пикселей высоты кнопки живых шесть.
 * Мышью попадаешь примерно раз из пяти — снаружи это выглядит как
 * «меню открывается через раз». На телефоне не воспроизводится:
 * браузер расширяет область касания, и палец перекрывает все три
 * полоски разом. Поэтому жалоба звучала как «на десктопе плохо,
 * на мобиле нормально» — и поэтому же беглая проверка ничего не находит,
 * автоматический клик всегда бьёт точно в центр.
 *
 * Чинится прозрачным слоем поверх кнопки. Он absolute, поэтому не
 * занимает места в потоке и не сдвигает ни одного пикселя вёрстки;
 * фона у него нет, поэтому не виден; лежит внутри `.mobile-menu`,
 * поэтому клик по нему всплывает в кнопку и срабатывает обработчик
 * темы — javascript темы при этом не тронут вовсе.
 *
 * Размер 58×44 подобран так, чтобы центр совпал с центром кнопки
 * и хватило на все три полоски с запасом; 44 пикселя — рекомендация
 * WCAG 2.5.5 к размеру нажимаемой цели.
 *
 * В раскрытом состоянии тема поворачивает `.mobile-menu` на -45°,
 * превращая её в крестик. Слой — потомок, поворачивается вместе с ней
 * и остаётся отцентрованным по крестику: закрывать меню так же удобно,
 * как открывать.
 */
.mobile-menu__hit {
  position: absolute;
  top: -21px;
  right: -10px;
  bottom: -21px;
  left: -10px;
}

/*
 * Подвал не помещается в экран на ноутбучных ширинах.
 *
 * `.footer__nav` — флекс из двух колонок с `justify-content: space-between`
 * и жёстким зазором. Зазор в теме идёт лесенкой: 450px, ниже 1350 — 250,
 * ниже 1200 — 150, ниже 1100 — 50, ниже 900 — колонки в столбик.
 *
 * Первая ступенька подобрана под экран 1440 и мимо самого ходового
 * ноутбучного разрешения. На 1366 действует ещё зазор 450px, и подвалу
 * нужно 1317px там, где есть 1206: страница уезжает вбок на 32 пикселя,
 * внизу появляется горизонтальная полоса прокрутки. Замер по всем
 * страницам: на 1366 это 143 страницы из 162 — вся сеть, кроме Бронниц,
 * где меню в подвале короче.
 *
 * Правка сдвигает первую ступеньку до 1400: в полосе 1351–1400 зазор
 * становится 250px — ровно то значение, которое тема сама ставит чуть
 * ниже. Ограничение снизу обязательно: без `min-width` это правило
 * перебило бы и ступеньки 150 и 50 на узких экранах.
 *
 * Померено: вне полосы 1351–1400 не сдвигается ни один блок; внутри —
 * вылет 47px на 1351 и 32px на 1366 обнуляется.
 *
 * Это лечит одну ступеньку, а не весь подвал. Ниже 1350 он тоже не
 * помещается — на 960 требует 917px при доступных 800, потому что пункты
 * меню фиксированной ширины не переносятся. Там нужна не подгонка
 * ступеньки, а текучий подвал, и это уже решение о внешнем виде:
 * вынесено в отчёт, а не сделано молча.
 */
@media (min-width: 1351px) and (max-width: 1400px) {
  nav.footer__nav { gap: 250px; }
}

/*
 * Декоративная черта у заголовков занимает остаток строки, а не процент.
 *
 * `span.line--teachers` — тонкая линия справа от заголовка «Преподаватели»
 * и его собратьев. Тема задаёт ей ширину числом, а ниже 1300 добавляет
 * `min-width: 70%` (ниже 1100 — 50%). Процент считается от контейнера,
 * а черта начинается не с его края, а после заголовка, и к ней добавлен
 * отступ справа в 65 пикселей. Сложите — и на 1152 черте нужно 694 + 65
 * пикселей от позиции 663 при экране в 1152. Страница уезжает вбок
 * на двести пять пикселей.
 *
 * Замер по Бронницам: 1152 — вылет 205, 1200 — 191, 1280 — 167.
 * На 960–1100 черта тоже вылезала, но за край контейнера, обрезалась
 * им и в прокрутку не попадала — то есть была видна короче, чем задумано,
 * и это тоже неверно.
 *
 * `flex: 1 1 auto` с нулевым минимумом заставляет черту занять ровно
 * остаток строки: сколько есть, столько и займёт. Это то, чем декоративная
 * линия и должна быть, и это самонастраивается на любой ширине без
 * подгонки под конкретные экраны.
 *
 * Померено: на 1350, 1440 и 1920 не сдвигается ни один блок — там черта
 * и так укладывалась. Правило намеренно с низкой особостью: у списка
 * занятий свои проценты (`.classes span.line--teachers`), и они остаются
 * за собой.
 */
span.line--teachers {
  min-width: 0;
  flex: 1 1 auto;
}

/*
 * Подвал уходит в столбик там, где перестаёт помещаться строкой.
 *
 * Тема раскладывает его в две колонки и ниже 900 переводит в столбик.
 * Порог выбран не по месту: строка перестаёт помещаться заметно раньше.
 * Замер по основной площадке: 965 — вылет 33 пикселя, 975 — 23, 985 — 13,
 * 995 — 3, и только на 1000 ноль. У Бронниц то же самое мягче (меню
 * короче), но на 901 вылет всё равно 61 пиксель.
 *
 * Между 901 и 998 подвал вылезал за экран на всех трёх площадках, то есть
 * внизу страницы появлялась горизонтальная прокрутка. Зазором это
 * не лечится: на 960 он уже 50 пикселей, а колонки всё равно шире, чем
 * есть места. Пробовал гасить зазор совсем — на 901 оставалось 11 пикселей.
 *
 * Поэтому порог столбика поднят до 999. Это не новая раскладка, а та же
 * самая, что тема уже применяет ниже 900, — просто включается тогда, когда
 * строка действительно перестаёт помещаться.
 *
 * Померено: 901 и 960 обнулились на обеих площадках, на 1000 и выше
 * не сдвигается ни один блок.
 */
@media (max-width: 999px) {
  nav.footer__nav { flex-direction: column; }
}