/* ==========================================================================
   DEYA MUSIC — мобильная вёрстка (пакет C правок заказчика 08.09)

   Заказчик: «для мобильной версии сайта нам нужно сделать индивидуальную
   вёрстку, так как версию для компьютеров не применить для другой ориентации
   и размера экрана».

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКИ В СУЩЕСТВУЮЩИХ. Витрина написана
   mobile-first: базовые правила в base/components/pages — это и есть мобильный
   вид, а десктоп надстраивается запросами `min-width: 1024px`. Если мобильные
   правки размазать по трём файлам, то при следующей десктопной правке их никто
   не найдёт, а «почему на телефоне иначе» перестанет читаться. Здесь всё
   мобильное собрано в одном месте и подключается ПОСЛЕДНИМ, поэтому
   переопределяет базовый слой без единого !important.

   ГРАНИЦА. Весь файл живёт под `max-width: 1023.98px` — ровно до той ширины,
   с которой начинается десктопная навигация (`.site-nav`, `.burger`). Одно
   число на весь мобильный слой: разъехаться с десктопом негде.
   ========================================================================== */

@media (max-width: 1023.98px) {

/* ==========================================================================
   1. Шапка: два раздела прямо в ней (C8)
   ==========================================================================
   Заказчик: «добавляем в шапку: 1. Афиша (с переходом на главную страницу)».
   Разделов на сайте всего два, они короткие и помещаются рядом с логотипом —
   прятать их в меню было бы лишним шагом. Меню при этом освобождается под
   информацию о компании, чего заказчик и просил (C5). */

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}

.header-nav__link {
  position: relative;
  padding-block: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-nav);
  color: var(--c-text-2);
  white-space: nowrap;
}

/* Текущий раздел подчёркнут брендовой линией — тем же приёмом, что и в
   десктопном меню: у посетителя не должно быть двух разных языков разметки
   активного пункта на разных ширинах. */
.header-nav__link[aria-current='page'] { color: var(--c-teal-ink); }
.header-nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-teal);
}

/* Логотип больше не растягивает строку: место справа теперь занимают разделы. */
.site-header__inner { gap: var(--sp-4); }
.site-header__inner .logo { margin-right: 0; }

/* На очень узких экранах (≈360px и меньше) логотип, два раздела и бургер
   в одну строку не помещаются — разделы набираются мельче, а не переносятся:
   перенос увеличил бы высоту шапки, а она липкая и ест первый экран. */
@media (max-width: 400px) {
  .header-nav { gap: var(--sp-3); }
  .header-nav__link { font-size: var(--fs-caption); }
}

/* ==========================================================================
   2. Меню: раздел о компании вместо дублёра навигации (C5)
   ==========================================================================
   Заказчик: «в общем разделе меню убираем все пункты, в этом разделе и
   разместим всю информацию о компании и контактные данные».

   Меню занимает весь экран, включая место шапки: под ним нет ничего, к чему
   можно вернуться взглядом, поэтому внутри стоит свой логотип и крестик. */

.mobile-nav {
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 68px;
  padding-inline: var(--container-pad);
  border-bottom: 1px solid var(--c-border-soft);
  flex-shrink: 0;
}

.mobile-nav__close {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  color: var(--c-text);
  border-radius: var(--r-md);
}
.mobile-nav__close svg { width: 22px; height: 22px; }

.mobile-nav__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--container-pad) var(--sp-8);
  overflow-y: auto;
  flex: 1;
}

.mobile-nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mobile-nav__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Контакт — строка с иконкой. Кликабельные (почта, телефон) и некликабельный
   адрес выглядят одинаково: разница в поведении, а не в виде. */
.mobile-nav__contact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body-l);
  color: var(--c-text);
  min-height: 44px;                  /* палец, а не курсор */
}
.mobile-nav__contact svg {
  width: 20px; height: 20px;
  color: var(--c-teal);
  flex-shrink: 0;
}

.mobile-nav__socials { display: flex; gap: var(--sp-2); }

/* Запасное содержимое меню, пока в админке не заполнены контакты (см.
   fillMobileNav в js/ui.js): лучше два раздела, чем пустой экран. */
.mobile-nav__fallback { display: flex; flex-direction: column; }
.mobile-nav__fallback a {
  display: block;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-border-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--c-text);
}

/* Реквизиты — самая мелкая строка внизу: юридическая подпись, а не контакт. */
.mobile-nav__legal {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border-soft);
  color: var(--c-text-3);
}

/* Текст «О нас» в меню набирается плотнее, чем на главной: здесь он
   вспомогательный, а не основной. */
.prose--compact p { font-size: var(--fs-body); }
.prose--compact p + p { margin-top: var(--sp-3); }

/* ==========================================================================
   3. Главная: одно мероприятие на экран (C4) и меньше «воздуха» (A21)
   ==========================================================================
   Заказчик: «размер афиши надо подогнать так, чтобы в итоге одно мероприятие
   полностью умещалось на экране» и «убираем лишний воздух вверху».

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

/* Заголовок «Афиша мероприятий» прижат к шапке и набран в ОДНУ строку.

   Заказчик просил «убрать лишний воздух вверху»: на 390px кегль --fs-h1 (28px)
   разбивал заголовок на две строки, и вместе с отступами до первой карточки
   уходило больше трети экрана — при том, что сама карточка должна помещаться
   целиком (C4). Уменьшаем до --fs-h2: смысл заголовка от этого не меняется,
   а экрану возвращается ~90px. */
[data-page='home'] .section--tight:first-of-type { padding-top: var(--sp-3); }
[data-page='home'] .section-header { margin-bottom: var(--sp-1); }
[data-page='home'] .section-header .t-h1 { font-size: var(--fs-h2); }

.home-filters { padding-block: var(--sp-3); gap: var(--sp-2); }
.home-filters + [data-feed] { margin-top: var(--sp-2); }

/* Месяц-разделитель на мобильном не нужен крупным: он служебный. */
.month-divider { margin-block: var(--sp-4) var(--sp-3); }

/* --- Карточка ---
   `--card-media` — высота обложки, и считается она от ВЫСОТЫ ЭКРАНА: заказчик
   просил, чтобы «одно мероприятие полностью умещалось на экране», а это условие
   про высоту, а не про пропорции кадра.

   Вычитаем ровно то, что остаётся на экране ВМЕСТЕ с карточкой, когда
   посетитель к ней прокрутил:
     68  — липкая шапка (единственный элемент, который никуда не уходит);
     130 — липкая строка фильтров: селекты года и города плюс лента месяцев;
     214 — текстовая часть самой карточки (замерено в браузере: дата, название,
           площадка, адрес и подвал с кнопкой — величина от ширины не зависит);
     16  — запас, чтобы низ кнопки не совпал с краем экрана.
   Заголовок и вход в архив сюда НЕ входят: они уезжают вверх при прокрутке и
   место у карточки не отнимают.

   Итого 428. Значение зажато в 28–52vh: на планшете в альбомной ориентации
   иначе вышла бы полоска в 90px, а на длинном узком экране — кадр во всю
   страницу без единой строки текста. */
.cards {
  /* Высота обложки такова, чтобы ближайшее мероприятие целиком помещалось на
     экране при загрузке (правка заказчика, моб. документ: «одно мероприятие
     полностью умещается на экране»). Вычет 470px — это всё, что стоит над
     карточкой и под ней в первом экране: липкая шапка (69) + панель фильтров
     (130), отступ до ленты и текстовая часть карточки (~214) с подвалом-кнопкой.
     Замер на живом 390×844: над карточкой 336 (липкая шапка 69 + фильтры 130 +
     заголовок месяца и отступы), текстовая часть 216 → на обложку остаётся
     844-336-216≈292. Вычет 552 → обложка 292, карточка 508, низ на 844 ровно.
     Нижняя граница в px, а не vh: на низких экранах обложка не должна схлопнуться
     в полоску. */
  --card-media: clamp(180px, calc(100svh - 560px), 52vh);
  gap: var(--sp-4);
}

/* Обложка: высота задаётся напрямую, поэтому aspect-ratio базового слоя
   отключается — иначе браузер посчитал бы высоту дважды и взял большую. */
.event-card__media {
  aspect-ratio: auto;
  height: var(--card-media);
}

/* Текстовая часть плотнее десктопной: те же данные, но в один столбец и без
   лишних вертикальных промежутков. */
.event-card__body { padding: var(--sp-4); gap: var(--sp-2); }
.event-card__meta { gap: var(--sp-1); }

/* Описание в ленте на телефоне съедает ровно ту высоту, которой не хватает
   кадру. Название, дата, площадка и адрес отвечают на вопрос «идти ли», а
   описание целиком есть на странице мероприятия — до неё один тап. */
.event-card__lead { display: none; }

.event-card__footer { padding-top: var(--sp-3); }

/* ==========================================================================
   4. Лента: прошедшие выше по прокрутке (C2)
   ==========================================================================
   Заказчик: «прошедшие мероприятия у нас находятся как бы выше по ленте, и мы
   их показываем только при пролистывании выше. При попадании на главную
   страницу мы всегда делаем акцент на ближайшем мероприятии».

   То есть прошедшие лежат НАД предстоящими, но экран при загрузке стоит на
   первом предстоящем: вверх — в прошлое, вниз — в будущее.

   Блок прошедших приглушён: он вспомогательный, и пролистывая вверх посетитель
   должен сразу видеть, что попал в архив, а не в начало афиши. */
.feed-past { opacity: 0.72; }
.feed-past .event-card { box-shadow: none; }

/* Подпись-разделитель между прошлым и будущим. Липкой не делается: она
   отмечает границу один раз, а не сопровождает прокрутку. */
.feed-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-5) var(--sp-4);
  color: var(--c-text-3);
  font-size: var(--fs-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feed-divider::before,
.feed-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* Вход в архив — над лентой, но компактный: это подпись-разделитель, а не
   призыв к действию. Крупная кнопка здесь отнимала бы у первой карточки те
   самые пиксели, ради которых считается --card-media (C4).

   Лента растёт ВВЕРХ, поэтому «показать ещё» стоит тоже вверху блока прошлого,
   а не под ним. */
.feed-past__more {
  display: flex;
  justify-content: center;
  margin-block: var(--sp-1) var(--sp-3);
}
.feed-past__more .btn {
  min-height: 36px;
  padding-block: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--c-text-3);
}
.feed-past__more .btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   5. Сортировка по году и городу в шапке ленты (C3)
   ==========================================================================
   Заказчик: «добавляем сортировку: год (цифра 1), город (цифра 2). Выбор
   месяцев оставляем как сейчас, только убираем лишний воздух вверху».

   Год и город стоят ОДНОЙ строкой над месяцами: это два фильтра одного рода,
   и разносить их по разным уровням значило бы сделать из них разные сущности.
   Месяцы остались лентой чипов, как и просил заказчик. */

/* Строка фильтров на мобильном не переносится: селекты сверху, месяцы снизу —
   фиксированные два ряда вместо плавающего переноса. */
.home-filters__row { flex-wrap: nowrap; }

/* ==========================================================================
   6. Страницы тура и мероприятия: афиша фоном, описание поверх (C6, C7)
   ==========================================================================
   Заказчик: «по дизайну делаем, как и в странице тура (афиша на заднем фоне,
   поверх неё описание)» и «убираем хлебные крошки».

   Крошки убираются на всех трёх страницах (тур, мероприятие, фотоотчёт): на
   телефоне они занимают строку, дублируют кнопку «назад» браузера и на узком
   экране всё равно обрезаются. */
.breadcrumbs { display: none; }

/* Панель покупки идёт сразу за описанием, без бокового столбца. */
.event-layout { gap: var(--sp-5); }

/* Плашка с названием на телефоне плотнее: «воздух» заказчик просил сократить.
   ⚠️ Высоту самого кадра (padding-block у .event-hero) здесь НЕ трогаем: она
   считается в pages.css от высоты экрана, и переопределение сплющивало афишу
   до полосы, в которой кадра было не видно. */
.event-hero__panel { padding: var(--sp-4); gap: var(--sp-2); }

/* Шапка тура: плашка плотнее — «воздух» заказчик просил сократить именно на
   мобильном. Нижний отступ урезан, верхний не трогаем: это видимая часть
   афиши, и без него кадр закрывался бы плашкой целиком (та же ловушка, что
   и у .event-hero). */
.tour-head { padding-bottom: var(--sp-5); }
.tour-head__panel { padding: var(--sp-4); gap: var(--sp-2); }

/* ==========================================================================
   7. Фотоотчёт: две формы на одной странице (C9)
   ==========================================================================
   Галерея и внешний альбом больше не исключают друг друга — см. js/pages/photo.js.
   Здесь только вид: ссылка на альбом становится строкой-баннером над галереей,
   а не отдельным экраном вместо неё. */
/* Дублирующая строка даты под заголовком убрана (правка на скриншоте): те же
   дата и город уже стоят в подзаголовке фотоотчёта. */
.photo-head .badge-past { display: none; }

/* ==========================================================================
   8. «Другие концерты» (C10)
   ==========================================================================
   Кнопка «Все мероприятия» убрана по правке заказчика: раздел «Афиша» теперь
   стоит в шапке, и вторая ссылка на то же место избыточна. */
.event-related .section-header .btn { display: none; }

/* Приглашение перейти к туру вместо списка концертов — когда все ближайшие
   даты входят в один тур (логика в js/pages/event.js). */
.tour-invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

} /* конец @media (max-width: 1023.98px) */

/* ==========================================================================
   9. Приглашение к туру — и на десктопе тоже
   ==========================================================================
   Заказчик: «если объединены туром, то приглашение перейти к странице тура
   (также сделать и в десктоп версии)». Поэтому блок описан вне мобильного
   медиазапроса — внутри него выше лежит только мобильная раскладка. */
.tour-invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.tour-invite__text { max-width: 62ch; }

@media (min-width: 1024px) {
  .tour-invite {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-6);
  }
}