/* ==========================================================================
   DEYA MUSIC — библиотека компонентов
   Порядок соответствует таблице в CLAUDE.md § 8.
   Правило цвета: коралловый = действие (купить), бирюзовый = навигация/статус.
   ========================================================================== */

/* ==========================================================================
   1. Шапка
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
/* Прокрутили — шапка становится плотнее и отделяется тенью, а не линией-разделителем:
   жирная граница на светлом фоне выглядит тяжелее, чем мягкое касание тени. */
.site-header.is-stuck {
  border-bottom-color: var(--c-border-soft);
  background: var(--c-glass-strong);
  box-shadow: var(--shadow-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 68px;
}
@media (min-width: 1024px) { .site-header__inner { min-height: 80px; } }

/* ---------- Логотип ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  margin-right: auto;
}
.logo__img {
  display: block;
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .logo__img { height: 44px; } }
@media (max-width: 400px)  { .logo__img { height: 32px; } }

/* ---------- Навигация ---------- */

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
}

.site-nav__list { display: flex; align-items: center; gap: var(--sp-5); }

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--c-text-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav-link:hover { color: var(--c-text); }
.nav-link[aria-current='page'] { color: var(--c-text); }
.nav-link[aria-current='page']::after,
.nav-link:hover::after { transform: scaleX(1); }

/* ---------- Соцсети ---------- */

.socials { display: flex; align-items: center; gap: var(--sp-2); }

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-text-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-icon:hover { color: var(--c-text); background: var(--c-surface-2); }
.btn-icon svg { width: 20px; height: 20px; }

/* ---------- Разделы в мобильной шапке ----------
   Правка заказчика 08.09 (мобильный документ): «добавляем в шапку: Афиша (с
   переходом на главную страницу)». Разделов всего два, и на телефоне они стоят
   прямо в шапке, а не прячутся в меню.

   На десктопе скрыты: там те же пункты живут в .site-nav, и показывать их
   дважды нельзя. Правило соседствует с .site-nav и .burger намеренно — вся
   развилка «мобильная навигация ↔ десктопная» должна читаться в одном месте.
   Оформление самих ссылок — в mobile.css. */
@media (min-width: 1024px) { .header-nav { display: none; } }

/* ---------- Бургер ---------- */

.burger {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  color: var(--c-text);
  border-radius: var(--r-md);
}
@media (min-width: 1024px) { .burger { display: none; } }

.burger__box { position: relative; width: 22px; height: 14px; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }
.burger[aria-expanded='true'] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Мобильное меню ---------- */

.mobile-nav {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: var(--z-nav);
  background: var(--c-bg);
  padding: var(--sp-5) var(--container-pad) var(--sp-8);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* Список пунктов в мобильном меню убран по правке заказчика 08.09: меню стало
   разделом «о компании» (см. fillMobileNav в js/ui.js и .mobile-nav__* в
   css/mobile.css), а разделы «Афиша» и «Архив» переехали в саму шапку. */

/* ==========================================================================
   2. Кнопки
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-button);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Коралловый = действие: купить билет.
   Заливка не плашечная, а градиентная: от фирменного коралла к почти белому.
   Кнопка остаётся самой заметной на странице, но перестаёт быть цветовым пятном —
   это и есть просьба «полегче». Тёмный текст читается на обоих концах градиента
   (7.4:1 на коралле, 13:1 на светлом крае), поэтому цвет подписи не меняется.
   Обводка нужна: правый край почти сливается с белой карточкой. */
.btn-primary {
  background: linear-gradient(100deg, var(--c-coral) 0%, var(--c-coral-light) 100%);
  color: var(--c-on-accent);
  border: 1px solid var(--c-coral-edge);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: linear-gradient(100deg, var(--c-coral-hover) 0%, var(--c-coral-light) 100%);
  border-color: var(--c-coral);
}

/* Бирюзовая обводка = вторичное действие / переход.
   Контур приглушён до 40% непрозрачности и утончён до 1px: сплошная линия
   в полном брендовом цвете спорила с CTA. Текст остаётся контрастным. */
.btn-secondary {
  background: transparent;
  color: var(--c-teal-ink);
  border: 1px solid var(--c-teal-edge);
}
.btn-secondary:hover { background: var(--c-teal-dim); color: var(--c-teal-hover); border-color: var(--c-teal); }

.btn-ghost { background: var(--c-surface); color: var(--c-text-2); border: 1px solid var(--c-border); }
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); }

.btn--block { width: 100%; }
.btn--lg { min-height: 52px; padding-inline: var(--sp-6); }

/* ---------- Плашки-ссылки под кнопкой покупки ----------
   Спокойная альтернатива кнопке: белая пилюля с тонкой рамкой. Ими на странице
   мероприятия отмечены группа ВК и тур — то, что раньше занимала строка с ценой. */
.pill-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Плашки идут двумя рядами (действия и переход к туру), и между рядами нужен тот же
   шаг, что между плашками в ряду: иначе панель разнесла бы их своим `gap` в 16px
   и группа перестала бы читаться группой. */
.pill-stack { display: flex; flex-direction: column; gap: var(--sp-2); }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;          /* область нажатия по § 6.5 */
  max-width: 100%;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--fs-chip);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pill-link:hover { color: var(--c-teal-ink); border-color: var(--c-teal-edge); }
.pill-link svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Название тура может быть длинным, а панель узкая — режем многоточием,
   иначе плашка растянет колонку и сломает раскладку страницы. */
.pill-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   3. Фильтры: город и даты
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.city-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.city-select select {
  appearance: none;
  min-height: 44px;
  padding: 0 var(--sp-8) 0 var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  color: var(--c-text);
  font-size: var(--fs-chip);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.city-select select:hover { border-color: var(--c-text-3); background: var(--c-surface-2); }
.city-select.is-active select { border-color: var(--c-teal); color: var(--c-teal-ink); }
.city-select__icon {
  position: absolute;
  right: var(--sp-4);
  width: 16px; height: 16px;
  pointer-events: none;
  color: var(--c-text-2);
}
.city-select__icon svg { width: 100%; height: 100%; }
.city-select option { background: var(--c-surface); color: var(--c-text); }

/* Лента дат-чипов.
   Оформлена как навигация в шапке: просто текст, выбранный подчёркнут.
   Овальных «таблеток» и заливки здесь нет — фильтр не должен спорить с афишами,
   а коралловый на сайте означает «купить», и фильтру он не принадлежит. */
.date-chips { padding-block: var(--sp-1); }
.date-chips .chip { scroll-snap-align: start; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* область нажатия по § 6.5 */
  padding: var(--sp-3) var(--sp-2); /* поля скромные: подчёркивание должно быть по ширине слова */
  color: var(--c-text-2);
  font-size: var(--fs-chip);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
/* Подчёркивание — та же механика, что у .nav-link: растёт от левого края */
.chip::after {
  content: '';
  position: absolute;
  left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2);
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.chip:hover { color: var(--c-text); }
/* Начертание не меняем: жирный сдвигал бы соседние месяцы при каждом переключении,
   а подчёркивания и цвета для «выбрано» достаточно — как в шапке. */
.chip[aria-pressed='true'] { color: var(--c-text); }
.chip[aria-pressed='true']::after,
.chip:hover::after { transform: scaleX(1); }

/* ==========================================================================
   4. Карточка мероприятия
   ========================================================================== */

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
/* На светлом фоне карточка поднимается тенью, а не сменой заливки:
   белое на почти-белом читается воздухом, потемнение читалось бы нажатием. */
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--c-border); }
.event-card:focus-within { border-color: var(--c-teal); }

.event-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface-2); }
.event-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.event-card:hover .event-card__media img { transform: scale(1.03); }

.event-card__date {
  position: absolute;
  left: var(--sp-3); top: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  background: var(--c-glass-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.event-card__day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--c-text);
}
.event-card__month { font-size: var(--fs-overline); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2); }

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}
/* Заголовок всегда занимает ровно две строки: одна строка — вторая остаётся
   пустой, три и больше — обрезаются многоточием. Это держит одинаковую высоту
   у всех карточек сайта. */
.event-card__title {
  color: var(--c-text);
  /* На ступень мельче общего размера карточных заголовков (правка заказчика
     2026-08-18): в ленте под названием теперь четыре строки — описание,
     площадка и адрес, — и прежний кегль перетягивал внимание на себя.
     Значение из шкалы (`--fs-body`), а не подобранное на глаз (§ 6.2). */
  font-size: var(--fs-body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;   /* 2 строки × line-height 1.3 у --t-card-title */
}
/* Ссылка-растяжка: кликабельна вся карточка, но фокус — на заголовке */
.event-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Дата со временем — первой строкой карточки, над названием (правка заказчика
   2026-08-18). Стоит отдельно от блока меты, поэтому цвет ей задан здесь: у
   остальных строк он наследуется от `.event-card__meta`. */
.event-card__dateline { color: var(--c-text-2); }

.event-card__meta { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--c-text-2); }
.event-card__meta-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.event-card__meta-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-text-3); }
/* Краткое описание в карточке — ровно две строки (правка заказчика 2026-08-18):
   короткий текст оставляет вторую строку пустой, длинный режется многоточием.
   Тот же принцип, что у заголовка: место занято всегда, иначе карточки в ленте
   разъехались бы по высоте. Начертание обычное, в отличие от строк меты:
   описание читают, а не сканируют. */
.event-card__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;      /* 2 строки при line-height 1.4 у .t-meta */
  font-weight: 400;
}

/* Дата, площадка и адрес — строго по одной строке, лишнее скрывается многоточием */
.event-card__meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  /* 44px — высота кнопки: карточка без кнопки не становится ниже остальных */
  min-height: calc(44px + var(--sp-3));
}
/* Тоже одна строка: перенос текста в подвале сделал бы карточку выше соседних */
.event-card__price {
  color: var(--c-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Кнопки внутри карточки должны быть выше ссылки-растяжки */
.event-card__footer .btn, .event-card__footer .card-badge { position: relative; z-index: 2; }

/* Правка заказчика 08.09: бейдж «Тур» переехал из угла обложки вниз, в один
   ряд с кнопкой «Купить билет». Ряд не переносится: перенос сделал бы карточку
   выше соседних и разрушил ровную сетку ленты. */
.event-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex-wrap: nowrap;
}
/* Бейдж тура ужимается первым: кнопка покупки важнее и обязана остаться целой. */
.card-badge--tour {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Бейдж города поверх обложки — на месте, где раньше был «Meet & Greet».
   Длинные названия («Ростов-на-Дону», «Санкт-Петербург») ужимаются
   многоточием, а не растягивают плашку на всю ширину карточки. */
.card-badge--city { max-width: min(70%, 190px); }

/* «Sold out» (правка заказчика 08.09). Коралловый, а не бирюзовый: это
   ограничение, а не свойство концерта, и оно должно читаться иначе, чем
   нейтральный бейдж города. Текст тёмный — на коралле контраст выше белого. */
.card-badge--sold {
  background: var(--c-coral);
  color: var(--c-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Выделенное мероприятие: заказчик просил «выделять цветом (или как-то ещё)»
   важные концерты — например, Москву и Петербург.
   Рамка и мягкое свечение, а не заливка: заливка спорила бы с обложкой, ради
   которой карточка и существует, а рамка читается на любом кадре. */
.event-card--highlighted {
  border-color: var(--c-coral);
  box-shadow: 0 0 0 1px var(--c-coral), var(--shadow-card);
}
.event-card--highlighted:hover { border-color: var(--c-coral); }

/* Неактивная кнопка («Билетов нет»): выглядит как кнопка, чтобы подвал карточки
   сохранял высоту, но не отзывается на курсор и не уводит по ссылке. */
.btn.is-disabled {
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
}

.event-card--archive .event-card__media img { opacity: 0.8; }
.event-card--archive:hover .event-card__media img { opacity: 1; }

/* Плашки на карточке: тур (ссылка) и Meet & Greet (просто метка). Вид у них один,
   отличается только тег, поэтому и класс общий — `card-badge`, а не `tour-badge`,
   как было до 2026-08-18. */
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-teal-dim);
  color: var(--c-teal-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease);
}
a.card-badge:hover { background: var(--c-teal-dim-2); }
.card-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Столбик плашек поверх обложки — в правом верхнем углу, напротив плашки с датой.
   Ширина ограничена так, чтобы плашки не наезжали на дату слева.
   `z-index` выше сквозной ссылки карточки — иначе клик по плашке тура уходил бы
   на страницу мероприятия, а она ведёт на страницу тура. */
.card-badges {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  max-width: calc(100% - 54px - var(--sp-3) * 3);
}

/* Заливка сплошная бирюзовая, а не стекло: метка должна читаться с первого
   взгляда на любом кадре, а полупрозрачная подложка растворялась в фотографии.
   Текст тёмный, а не белый: на бирюзе это 5.2:1 против 3.1:1 (§ 6.1). */
.card-badge--overlay {
  /* Перебивает `align-self: flex-start` из базового правила: в столбике плашки
     равняются по правому краю, а не по левому, — иначе более узкая «Тур»
     висела бы со сдвигом относительно «Meet & Greet» над ней. */
  align-self: flex-end;
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-teal);
  color: var(--c-text);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ховер только у ссылки: плашка Meet & Greet никуда не ведёт и на курсор
   не отзывается. Подпись при этом белеет — на `--c-teal-ink` это 5.2:1. */
a.card-badge--overlay:hover { background: var(--c-teal-ink); color: var(--c-surface); }
.card-badge--overlay svg { width: 12px; height: 12px; }

.badge-past {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-size: var(--fs-overline);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Скелетон */
.skeleton {
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.skeleton__media { aspect-ratio: 3 / 4; }
.skeleton__line { height: 12px; border-radius: var(--r-pill); margin: var(--sp-3) var(--sp-4); }
.skeleton__line--sm { width: 45%; }
.skeleton__media, .skeleton__line {
  background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface) 37%, var(--c-surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ==========================================================================
   5. Заголовки секций, разделители, годы
   ========================================================================== */

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.section-header__text { display: flex; flex-direction: column; gap: var(--sp-2); }

.month-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-6) var(--sp-4);
  color: var(--c-text);
}
.month-divider:first-child { margin-top: 0; }
.month-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.year-anchors { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Правка заказчика 08.09: годы — текстом с подчёркиванием, а не «таблетками».
   Оформление берётся от .chip (те же месяцы на главной), здесь остаются только
   отличия: год набирается акцидентным шрифтом. Так фильтры на главной и в
   архиве выглядят одинаково — заказчик отметил и это расхождение. */
.year-anchor {
  font-family: var(--font-display);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.year-anchor:hover { color: var(--c-text); }
/* Текущий год отмечается тем же подчёркиванием, что и активный месяц:
   .chip::after уже описывает его, здесь только включаем. */
.year-anchor.is-current { color: var(--c-text); }
.year-anchor.is-current::after { transform: scaleX(1); }

.year-heading { scroll-margin-top: 120px; }

/* ==========================================================================
   6. Хлебные крошки
   ========================================================================== */

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--c-text-3); }
.breadcrumbs a { color: var(--c-text-2); transition: color var(--dur-fast) var(--ease); }
.breadcrumbs a:hover { color: var(--c-teal-ink); }
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before { content: '/'; color: var(--c-border); }

/* ==========================================================================
   7. Пустое состояние
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.empty-state__mark {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--c-teal-dim);
  color: var(--c-teal-ink);
}
.empty-state__mark svg { width: 26px; height: 26px; }

/* ==========================================================================
   8. Лайтбокс фотоотчёта
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--c-overlay-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--container-pad);
  color: var(--c-text-2);
}
.lightbox__close {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  color: var(--c-text-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lightbox__close:hover { color: var(--c-text); background: var(--c-surface-2); }
.lightbox__close svg { width: 20px; height: 20px; }

.lightbox__stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 var(--sp-4) var(--sp-5);
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: var(--r-md);
  object-fit: contain;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--c-glass-strong);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  box-shadow: var(--shadow-soft);
  transition: background var(--dur-fast) var(--ease);
}
.lightbox__nav:hover { background: var(--c-surface-2); }
.lightbox__nav--prev { left: var(--sp-3); }
.lightbox__nav--next { right: var(--sp-3); }
.lightbox__nav svg { width: 20px; height: 20px; }

/* ==========================================================================
   9. Информационная модалка («Правила посещения»)
   ========================================================================== */

.info-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: end center;      /* мобильный: лист снизу */
  padding: var(--sp-4);
  background: var(--c-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
@media (min-width: 640px) { .info-modal { place-items: center; padding: var(--sp-6); } }
.info-modal.is-open { opacity: 1; visibility: visible; }

.info-modal__panel {
  width: 100%;
  max-width: 560px;
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  /* Панель приезжает снизу и на мобильном, и на десктопе — движение короткое,
     8px, чтобы не выглядеть анимацией ради анимации. */
  transform: translateY(8px);
  transition: transform var(--dur-base) var(--ease);
}
.info-modal.is-open .info-modal__panel { transform: translateY(0); }

/* Заголовок липнет к верху панели: список правил длинный, и при прокрутке
   должно быть видно, что читаешь. */
.info-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.info-modal__body {
  overflow-y: auto;
  padding: var(--sp-5);
  -webkit-overflow-scrolling: touch;
}
/* Внутри модалки список правил — с маркерами: `base.css` снимает их со всех
   `ul`, а здесь перечисление и есть содержание. */
.info-modal__body ul { list-style: disc; padding-left: 1.25em; }
.info-modal__body li + li { margin-top: var(--sp-2); }

/* Окно покупки — та же панель, что у информационной модалки, другое тело:
   не сплошной текст, а название, факты и место под виджет. Отступы поэтому
   задаёт колонка, а не типографика `.prose`. */
.buy-modal__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.ticket-box .t-caption { color: var(--c-text-3); }

/* Панель шире обычной модалки: виджет Tickets Cloud рисует себя во всю
   доступную ширину и сам ограничивается 780px — под этот предел и подгоняем,
   иначе внутри окна он окажется в колодце. */
.buy-modal .info-modal__panel { max-width: 780px; max-height: min(88vh, 860px); }

/* ---------- Блок покупки (общий) ----------
   Один и тот же блок стоит под описанием на странице мероприятия и внутри окна
   покупки, которое открывают карточки в лентах. Отсюда общие классы, а не
   `buy-modal__*`: у блока два дома. */
.ticket-box { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Окошко под виджет. Высота забронирована заранее и одинакова с заглушкой:
   виджет приезжает сторонним скриптом с задержкой, и без брони блок дёргался бы.
   Свой iframe виджет ставит внутрь (`tc-widget-inline-box`). */
.ticket-box__widget {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 420px;
}
.ticket-box__widget iframe { width: 100%; border: 0; }

/* Пока виджета нет — окошко стоит пустым с подписью: так видно, что место
   занято под него, а не потеряно. Кнопка перехода живёт под окошком. */
.ticket-box__placeholder {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--sp-5);
  text-align: center;
  background: var(--c-surface-2);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
}

/* ==========================================================================
   10. Поделиться, тост
   ========================================================================== */

.share { position: relative; display: inline-flex; }
.share__menu {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 0;
  z-index: 5;
  min-width: 232px;
  padding: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.share.is-open .share__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.share__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.share__item:hover { background: var(--c-surface-2); color: var(--c-text); }
.share__item svg { width: 18px; height: 18px; flex-shrink: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  z-index: var(--z-toast);
  transform: translate(-50%, 16px);
  padding: var(--sp-3) var(--sp-5);
  /* Раньше была сплошная бирюзовая заливка — на светлой теме она вспыхивала
     ярче всего на экране. Теперь белая плашка с тенью: заметно, но спокойно. */
  background: var(--c-surface);
  color: var(--c-teal-ink);
  border: 1px solid var(--c-teal-edge);
  font-weight: 700;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ==========================================================================
   11. Галерея фотоотчёта
   ========================================================================== */

.gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-2);
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); opacity: 0.85; }

/* ==========================================================================
   12. Кнопка «наверх»
   ========================================================================== */

/* Небольшая круглая иконка в углу экрана. 44px — минимальная область нажатия
   по § 6.5, стрелка внутри мелкая: кнопка служебная и не должна спорить
   с «Купить билет». */
.to-top {
  position: fixed;
  right: var(--container-pad);
  bottom: var(--sp-5);
  z-index: 85;   /* ниже липкой панели покупки (90) и модалок, выше контента */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--c-glass-strong);
  border: 1px solid var(--c-border);
  color: var(--c-teal-ink);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
              visibility var(--dur-base), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-surface); border-color: var(--c-teal); }
.to-top:active { transform: translateY(1px); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Мессенджеры в углу экрана ----------
   Только на мобильном: на десктопе соцсети стоят в шапке. Док стоит в том же
   правом нижнем углу, что и кнопка «наверх», и всегда на одну её высоту выше —
   место под кнопку зарезервировано, даже пока она невидима, иначе док прыгал бы
   при появлении стрелки. */
.social-dock {
  position: fixed;
  right: var(--container-pad);
  bottom: calc(var(--sp-5) + 44px + var(--sp-2));
  z-index: 85;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
@media (min-width: 1024px) { .social-dock { display: none; } }

/* Столбик иконок раскрывается вверх — вниз мешала бы кнопка «наверх».
   В закрытом состоянии `visibility: hidden`, поэтому ссылки не ловят Tab. */
.social-dock__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
              visibility var(--dur-base);
}
.social-dock.is-open .social-dock__list { opacity: 1; visibility: visible; transform: none; }

/* Иконки в столбике — те же круглые кнопки, что в шапке и подвале, но на плашке:
   они висят над содержимым страницы, и без подложки терялись бы на карточках. */
.social-dock__list .btn-icon,
.social-dock__toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-glass-strong);
  border: 1px solid var(--c-border);
  color: var(--c-teal-ink);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.social-dock__list .btn-icon:hover,
.social-dock__toggle:hover { background: var(--c-surface); border-color: var(--c-teal); }
.social-dock__toggle:active { transform: translateY(1px); }
.social-dock__toggle svg { width: 20px; height: 20px; }
/* Открытый док подсвечен — видно, что столбик раскрыт именно этой кнопкой. */
.social-dock.is-open .social-dock__toggle { background: var(--c-teal-dim); border-color: var(--c-teal); }

/* ==========================================================================
   13. Подвал
   ========================================================================== */

.site-footer {
  flex-shrink: 0;
  margin-top: var(--sp-9);
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-surface);
}
/* Мобильный: воздуха до подвала вдвое меньше — 64px вместо 128px.
   Вторую половину даёт нижний padding у .site-main (см. base.css). */
@media (max-width: 639.98px) { .site-footer { margin-top: var(--sp-6); } }
.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
/* Первой колонке больше не нужна двойная ширина: в ней остались логотип и соцсети */
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-8); } }

.site-footer__col { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
/* Соцсети живут в колонке контактов, под телефоном */
.site-footer__col .socials { margin-top: var(--sp-2); margin-left: -10px; }
.site-footer__col a { color: var(--c-text-2); transition: color var(--dur-fast) var(--ease); }
.site-footer__col a:hover { color: var(--c-teal-ink); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  /* Три элемента и space-between: копирайт слева, политика по центру
     (правка заказчика 08.09), справа — пустая распорка. Она нужна именно
     для того, чтобы центральный элемент оказался по центру, а не был
     прижат к правому краю. */
  justify-content: space-between;
  align-items: center;
  padding-block: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border-soft);
  color: var(--c-text-3);
}

/* Распорка существует только ради выравнивания; на узких экранах, где строка
   переносится, она лишняя и скрывается. */
.site-footer__spacer { flex: 0 0 auto; width: 1px; }
@media (max-width: 639.98px) { .site-footer__spacer { display: none; } }

/* Политика конфиденциальности — button, а не ссылка: она не ведёт на другой
   адрес, а открывает окно с текстом. Кнопка озвучивается программами для
   незрячих как действие, ссылка обещала бы переход. */
.site-footer__privacy {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__privacy:hover { color: var(--c-text-1); }
.site-footer__privacy:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; border-radius: 3px; }