/* ============================================================
   HC TORPEDO NIZHNY NOVGOROD — OFFICIAL WEBSITE STYLES
   ============================================================ */

/* Шрифты Play / Rodchenko подгружаются темплейтом (см. main.css),
   Google Fonts здесь больше не нужны. */

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Унифицированный навy всех тёмных секций — раньше #0A1628 (чуть темнее
     чем у news/match-detail), из-за этого вокруг ad-banner-zone
     (transparent) на body просвечивала более тёмная полоса. Меняем на
     #041027 — тот же тон, что у `.match-detail` и `.news-section`. */
  --bg-dark:        #041027;
  --bg-card:        #0F1F3D;
  --bg-card-hover:  #142847;
  --primary:        #1D5FA8;
  --primary-light:  #2E7FD4;
  --highlight:      #E8A020;
  --highlight-dark: #C47F10;
  --text-primary:   #FFFFFF;
  --text-secondary: #A0B4C8;
  --border:         rgba(255, 255, 255, 0.1);
  --header-bg:      rgba(10, 22, 40, 0.97);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-btn:     0 4px 16px rgba(232, 160, 32, 0.35);
  --radius-card:    8px;
  --radius-btn:     4px;
  --transition:     0.2s ease;
  --header-height:  70px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* overflow-x: clip вместо hidden — не делает элемент scroll-контейнером,
     поэтому iOS Safari корректно скроллит документ вверх при тапе по
     статус-бару. Fallback на hidden для старых браузеров. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: 'Play', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

/* Dark theme — only on custom TP pages (not Bitrix) */
body:has(.news-section, .news__grid-section, .schedule-section,
         .standings-section, .media-section, .partners-section, .tp-page,
         .loyalty-page) {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

/* Fix Bitrix pages where .composition/.staff is outside .wrapper due to HTML nesting issue.
   The wrapper has min-height:100% from main.css which creates a full-viewport empty block
   before the composition content. Setting min-height:0 collapses the empty wrapper. */
body:has(> .composition) .wrapper,
body:has(> .staff) .wrapper {
  min-height: 0 !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

ul { list-style: none; }

img { display: block; max-width: 100%; }

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
/* Полностью прячем все скроллбары — скролл работает, визуально не видно
   ни сбоку, ни снизу. Покрываем все браузеры: WebKit + Firefox + IE/Edge. */
::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: transparent !important; }
html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* Доступно скринридерам/краулерам, но скрыто визуально (для SEO-H1 на главной). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Прячем переключатель языков (RU/EN) — только русская версия. */
.langs,
.footer__langs,
.header__langs,
.mobile-nav__langs { display: none !important; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 64px 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}

.section-title {
  font-family: 'Play', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-left: 16px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--highlight);
  border-radius: 2px;
}

.section-link {
  font-family: 'Play', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-light);
  white-space: nowrap;
  transition: color var(--transition);
}

.section-link:hover { color: var(--highlight); }

/* Buttons — do not redefine .btn here, it conflicts with Bitrix's .btn class in main.css */

/* Tag badges */
.tag {
  display: inline-block;
  font-family: 'Play', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 2px;
}

.tag-match    { background: rgba(232, 160, 32, 0.2);  color: var(--highlight); }
.tag-team     { background: rgba(29, 95, 168, 0.25);  color: #5B9FE0; }
.tag-club     { background: rgba(46, 127, 212, 0.2);  color: #7BB8EE; }
.tag-media    { background: rgba(100, 180, 100, 0.2); color: #7DC87D; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow var(--transition);
}

.site-header.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.header-inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
}

.header-logo:hover { opacity: 0.9; }

.logo-svg { flex-shrink: 0; }

.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-name {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-primary);
}

.logo-sub {
  font-family: 'Play', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--highlight);
}

/* Main Nav */
.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: stretch;
  height: var(--header-height);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: 'Play', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--transition);
  position: relative;
  cursor: pointer;
  user-select: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--highlight);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav-item:hover .nav-link,
.nav-item.active .nav-link {
  color: var(--text-primary);
}

.nav-item:hover .nav-link::after,
.nav-item.active .nav-link::after {
  transform: scaleX(1);
}

.nav-link .chevron {
  margin-left: 4px;
  font-size: 9px;
  transition: transform var(--transition);
}

.nav-item:hover .nav-link .chevron { transform: rotate(180deg); }

/* Dropdowns (header nav only — scoped to .nav-item to avoid bleeding into gorky .dropdown) */
.nav-item .dropdown {
  position: absolute;
  top: calc(var(--header-height) - 1px);
  left: 0;
  min-width: 240px;
  background: #0D1C38;
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 100;
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: block;
  padding: 11px 20px;
  font-family: 'Play', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}

.dropdown-link:last-child { border-bottom: none; }

.dropdown-link:hover {
  background: rgba(29, 95, 168, 0.15);
  color: var(--text-primary);
  padding-left: 26px;
}

/* Header actions */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-link {
  font-family: 'Play', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.shop-link:hover { color: var(--text-primary); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 6px 0;
  cursor: pointer;
  background: none;
  border: none;
  margin-left: auto;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: #0c1931;
  z-index: 999;
  overflow-y: auto;
  padding: 24px 20px;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  /* Скрыть скроллбар визуально, скролл остаётся функциональным */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }

.mobile-nav.open {
  display: block !important;
  transform: translateX(0) !important;
}
/* Лок прокрутки фона при открытом меню. Body overflow:hidden ломает
   sticky-контекст хедера — поэтому ниже header переключается на fixed. */
body.mobile-nav-open { overflow: hidden !important; }

/* Fancybox открывает .mobile-nav через свой механизм (добавляет .fancybox__content
   на него), а translateX(-100%) из базового правила оставляет её off-screen.
   Сбрасываем трансформацию + ставим тёмный фон, иначе fancybox оставляет
   родительский (белый/прозрачный) и текст не виден на странице с белым контентом. */
.mobile-nav.fancybox__content {
  transform: none !important;
  background: #0c1931 !important;
  /* padding-top: 0 — .fancybox__container ниже (с :has) уже сдвинут вниз на
     var(--header-height), так что доп. компенсация шапки внутри content
     создаёт двойной зазор. */
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  top: 0 !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-nav.fancybox__content::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Заливаем всю иерархию мобильного меню одним тёмно-синим (#0c1931),
   чтобы под низлежащим контентом ничего не просвечивало. */
.mobile-nav,
.mobile-nav.fancybox__content,
.mobile-nav .mobile-nav__container,
.mobile-nav .mobile-nav__wrapper,
.mobile-nav .mobile-nav__column,
.fancybox__container:has(.mobile-nav.fancybox__content),
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__slide,
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__content {
  background: #0c1931 !important;
}
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__backdrop {
  background: #0c1931 !important;
  opacity: 1 !important;
}

/* Глазок (show password) — скрыт полностью в auth-модалках. */
.modal._lk .show-password-btn,
.modal .show-password-btn,
.modal__field .show-password-btn {
  display: none !important;
}
/* Убираем padding-right у password-input, теперь зарезервированное место
   под глазок не нужно. */
.modal._lk .field__input[type="password"],
.modal__field .field__input[type="password"] {
  padding-right: 20px !important;
}

/* Fancybox-контейнер должен быть выше .tp-modal-backdrop (99998) */
.fancybox__container {
  z-index: 99999 !important;
}

/* Backdrop с блюром: либо ручной .tp-modal-backdrop (создаётся в
   mobile-nav-extra.js при открытии любой модалки), либо штатный
   .fancybox__backdrop когда Fancybox активен. */
.tp-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(8, 15, 30, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 99998 !important;
}
.fancybox__container .fancybox__backdrop {
  background: rgba(8, 15, 30, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 1 !important;
}
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Square corners модалок — Fancybox v5 ставит border-radius по умолчанию. */
.fancybox__content,
.fancybox__content > .modal,
.fancybox__content .modal,
.modal._lk,
.modal {
  border-radius: 0 !important;
}

/* Модалки логина/восстановления собираются в JS и подвешиваются прямо в
   body, чтобы Fancybox мог открыть их через src:'#login'. Когда Fancybox
   закрывает модалку, она возвращается в body — без этого правила она
   просто болтается видимым блоком в самом низу страницы. Скрываем все
   .modal._lk, которые НЕ лежат внутри fancybox-контейнера. */
body > .modal._lk {
  display: none !important;
}

/* Убираем большой margin-top у .mobile-nav__login (main.css ставит 24px). */
.mobile-nav .mobile-nav__login {
  margin-top: 0 !important;
}
/* Гарантия видимости стрелки `>` в пунктах меню с js-sub-link.
   На некоторых страницах перебивающие правила прятали svg, сделаем
   её явно видимой и достаточного размера. */
.mobile-nav .mobile-nav__content .svgsprite._arrow-vertical-icon {
  display: block !important;
  width: 10px !important;
  height: 18px !important;
  stroke: #f4f6fa !important;
  fill: #f4f6fa !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* Когда меню открыто — принудительно показываем активную колонку и её
   секцию. Bitrix-овский селектор `.mobile-nav__column:first-child
   .mobile-nav__section { display: block }` на внутренних страницах
   иногда не отрабатывает (fancybox перекладывает DOM-tree). */
.mobile-nav.fancybox__content,
.mobile-nav.open {
  display: block !important;
}
.mobile-nav.fancybox__content .mobile-nav__column.active,
.mobile-nav.open .mobile-nav__column.active {
  display: block !important;
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.mobile-nav.fancybox__content .mobile-nav__column.active .mobile-nav__section,
.mobile-nav.open .mobile-nav__column.active .mobile-nav__section {
  display: block !important;
}

/* Fancybox-обёртка вокруг мобильного меню — оставляем хедер видимым.
   Сама модалка начинается сразу под хедером, без зазора.
   ВАЖНО: убираем flex-центрирование .fancybox__slide и padding —
   иначе .mobile-nav смещается вниз на половину free-space. */
.fancybox__container:has(.mobile-nav.fancybox__content) {
  top: var(--header-height) !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__slide,
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__viewport,
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__carousel {
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  display: block !important;
}
.fancybox__container:has(.mobile-nav.fancybox__content)::-webkit-scrollbar,
.fancybox__container:has(.mobile-nav.fancybox__content) *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__backdrop {
  display: none !important;
}
/* Все вложенные слайды/каркасы тоже скрывают скролл */
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__carousel,
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__slide,
.fancybox__container:has(.mobile-nav.fancybox__content) .fancybox__viewport {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.mobile-nav-item { border-bottom: 1px solid var(--border); }

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: 'Play', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
}

.mobile-dropdown {
  padding-bottom: 8px;
  display: none;
}

.mobile-dropdown.open { display: block; }

.mobile-dropdown-link {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

.mobile-dropdown-link:hover { color: var(--highlight); }

.mobile-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.mobile-actions .btn { flex: 1; justify-content: center; }

/* ============================================================
   HERO / SCOREBOARD SECTION
   ============================================================ */
.hero {
  margin-top: var(--header-height);
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
  padding: 40px 0 48px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(29, 95, 168, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 75% 50%, rgba(10, 22, 40, 0.6) 0%, transparent 70%);
  pointer-events: none;
}

/* hex grid pattern */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M30 2 L58 17 L58 47 L30 62 L2 47 L2 17 Z' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3Cpath d='M30 52 L58 67 L58 97 L30 112 L2 97 L2 67 Z' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Next Match Panel */
.panel-next {
  background: var(--bg-card);
  padding: 40px 48px;
  position: relative;
}

.panel-next::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.panel-label {
  font-family: 'Play', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--highlight);
  margin-bottom: 12px;
}

.panel-date {
  font-family: 'Play', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.panel-time {
  font-family: 'Play', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 32px;
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.team-logo-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid var(--border);
  overflow: hidden;
}

.team-logo-torpedo {
  background: linear-gradient(135deg, var(--primary) 0%, #0F3A6E 100%);
}

.team-logo-traktor {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
  border-color: #FFD700;
}

.team-name {
  font-family: 'Play', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  text-align: center;
}

.vs-divider {
  font-family: 'Play', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 2px;
  flex-shrink: 0;
}

.match-venue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--text-secondary);
  font-size: 13px;
}

.venue-icon {
  color: var(--primary-light);
  flex-shrink: 0;
}

/* Last Match Panel */
.panel-last {
  background: linear-gradient(135deg, #0D1A30 0%, #091220 100%);
  padding: 40px 48px;
  position: relative;
}

.panel-last::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight), #F0C040);
}

.last-match-date {
  font-family: 'Play', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.last-match-teams {
  font-family: 'Play', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.last-match-teams span { color: var(--text-primary); }

.score-display {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.score-num {
  font-family: 'Play', sans-serif;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
}

.score-num.score-away { color: var(--text-secondary); }
.score-num.score-home { color: var(--primary-light); }

.score-separator {
  font-family: 'Play', sans-serif;
  font-size: 60px;
  font-weight: 300;
  color: var(--border);
  line-height: 1;
}

.score-result-label {
  font-family: 'Play', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #E84040;
  padding: 4px 10px;
  background: rgba(232, 64, 64, 0.15);
  border-radius: 2px;
  align-self: flex-start;
  margin-top: 16px;
}

.last-match-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   NEWS SECTION
   ============================================================ */
.news-section {
  background: var(--bg-dark);
  padding: 64px 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.news-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary);
}

.news-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0D1A30 0%, #162035 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.news-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.news-img-placeholder {
  width: 48px;
  height: 48px;
  opacity: 0.15;
}

.news-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10, 22, 40, 0.8) 100%);
}

.news-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-date {
  font-size: 11px;
  color: var(--text-secondary);
}

.news-title {
  font-family: 'Play', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  transition: color var(--transition);
  flex: 1;
}

.news-card:hover .news-title { color: var(--primary-light); }

.news-read-more {
  font-size: 12px;
  color: var(--primary-light);
  font-family: 'Play', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
  padding-top: 8px;
}

/* ============================================================
   SCHEDULE SECTION
   ============================================================ */
.schedule-section {
  background: #0c1931;
  padding: 64px 0;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
}

.schedule-table thead tr {
  background: rgba(29, 95, 168, 0.15);
  border-bottom: 1px solid var(--border);
}

.schedule-table th {
  padding: 14px 20px;
  text-align: left;
  font-family: 'Play', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.schedule-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--transition);
}

.schedule-table tbody tr:last-child { border-bottom: none; }

.schedule-table tbody tr:hover { background: rgba(29, 95, 168, 0.08); }

.schedule-table td {
  padding: 18px 20px;
  font-size: 14px;
  color: var(--text-primary);
  vertical-align: middle;
}

.schedule-date-full {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.schedule-day {
  display: inline-block;
  font-family: 'Play', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}

.schedule-time {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.schedule-opponent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.opp-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.opp-name {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.venue-cell {
  font-size: 13px;
  color: var(--text-secondary);
}

.home-badge {
  display: inline-block;
  font-family: 'Play', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(232, 160, 32, 0.15);
  color: var(--highlight);
  border: 1px solid rgba(232, 160, 32, 0.3);
  margin-left: 6px;
}

.away-badge {
  display: inline-block;
  font-family: 'Play', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(160, 180, 200, 0.1);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  margin-left: 6px;
}

.broadcast-cell {
  font-size: 13px;
  color: var(--primary-light);
}

/* ============================================================
   STANDINGS SECTION
   ============================================================ */
.standings-section {
  background: var(--bg-dark);
  padding: 64px 0;
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
}

.standings-table thead tr {
  background: rgba(29, 95, 168, 0.12);
  border-bottom: 1px solid var(--border);
}

.standings-table th {
  padding: 12px 16px;
  text-align: center;
  font-family: 'Play', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.standings-table th:nth-child(2) { text-align: left; }

.standings-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--transition);
}

.standings-table tbody tr:last-child { border-bottom: none; }
.standings-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.standings-table tbody tr.highlight {
  background: rgba(29, 95, 168, 0.18);
  border-left: 3px solid var(--primary);
}

.standings-table tbody tr.highlight:hover {
  background: rgba(29, 95, 168, 0.25);
}

.standings-table td {
  padding: 14px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  vertical-align: middle;
}

.standings-table td:nth-child(2) { text-align: left; }

.standings-pos {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  width: 40px;
}

.standings-team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-logo-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'Play', sans-serif;
}

.team-logo-sm.torpedo-mini {
  background: var(--primary);
  border-color: var(--primary-light);
  color: #fff;
}

.team-name-cell {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}

.standings-pts {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.highlight .standings-pts { color: var(--primary-light); }

/* ============================================================
   FANZONE / TICKETS BANNER
   ============================================================ */
.fanzone-banner {
  padding: 60px 0;
  background: linear-gradient(135deg, #0A1628 0%, #0F2344 40%, #0D1C38 100%);
  position: relative;
  overflow: hidden;
}

.fanzone-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 100% at 20% 50%, rgba(29, 95, 168, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 30% 80% at 80% 50%, rgba(232, 160, 32, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.fanzone-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--highlight), var(--primary));
}

.fanzone-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.fanzone-content { flex: 1; }

.fanzone-label {
  font-family: 'Play', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--highlight);
  margin-bottom: 12px;
}

.fanzone-title {
  font-family: 'Play', sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 12px;
}

.fanzone-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.fanzone-price {
  font-family: 'Play', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--highlight);
  margin-bottom: 28px;
}

.fanzone-price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}

.fanzone-decoration {
  flex-shrink: 0;
  opacity: 0.12;
}

/* ============================================================
   MEDIA SECTION
   ============================================================ */
.media-section {
  background: #0c1931;
  padding: 64px 0;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.media-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary);
}

.media-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0D1A30 0%, #162035 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(232, 160, 32, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition);
}

.media-card:hover .play-btn {
  transform: scale(1.1);
  background: var(--highlight);
}

.play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #000;
  margin-left: 3px;
}

.media-info {
  padding: 16px;
}

.media-type {
  font-family: 'Play', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary-light);
  margin-bottom: 6px;
}

.media-title {
  font-family: 'Play', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
}

.media-date {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ============================================================
   PARTNERS SECTION
   ============================================================ */
.partners-section {
  background: var(--bg-dark);
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.partner-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  aspect-ratio: 16/7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Play', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.15);
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}

.partner-box:hover {
  border-color: rgba(29, 95, 168, 0.4);
  background: var(--bg-card-hover);
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #060E1A;
  border-top: 1px solid var(--border);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.footer-brand { display: flex; flex-direction: column; gap: 20px; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
  text-decoration: none;
}

.footer-logo:hover { opacity: 0.85; }

.footer-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 220px;
}

.social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.social-link:hover {
  background: var(--primary);
  border-color: var(--primary-light);
  color: #fff;
  transform: translateY(-2px);
}

.social-link svg { display: block; }

.footer-col-title {
  font-family: 'Play', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }

.footer-link {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--transition), padding-left var(--transition);
  display: block;
}

.footer-link:hover {
  color: var(--text-primary);
  padding-left: 4px;
}

.affiliate-clubs { display: flex; flex-direction: column; gap: 12px; }

.affiliate-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}

.affiliate-item:hover {
  border-color: rgba(29, 95, 168, 0.4);
  background: rgba(29, 95, 168, 0.06);
}

.affiliate-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.affiliate-info { display: flex; flex-direction: column; gap: 2px; }

.affiliate-name {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.affiliate-league {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Footer bottom */
.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(160, 180, 200, 0.5);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  font-size: 12px;
  color: rgba(160, 180, 200, 0.4);
  transition: color var(--transition);
}

.footer-legal a:hover { color: var(--text-secondary); }

/* ============================================================
   DIVIDER
   ============================================================ */
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ============================================================
   RESPONSIVE — TABLET 768px
   ============================================================ */
@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .shop-link { display: none; }
  .hamburger { display: flex; }

  .hero-panels { grid-template-columns: 1fr; }
  .panel-next, .panel-last { padding: 32px 28px; }

  .score-num { font-size: 60px; }

  .media-grid { grid-template-columns: 1fr 1fr; }

  .schedule-table th:nth-child(4),
  .schedule-table td:nth-child(4) { display: none; }

  .standings-table th:nth-child(n+6),
  .standings-table td:nth-child(n+6) { display: none; }
}

@media (max-width: 768px) {
  :root { --header-height: 60px; }

  .container { padding: 0 16px; }
  .section { padding: 48px 0; }

  .news-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand { grid-column: auto; }

  .fanzone-inner { flex-direction: column; text-align: center; }
  .fanzone-decoration { display: none; }

  .score-num { font-size: 50px; }

  .schedule-table th:nth-child(3),
  .schedule-table td:nth-child(3),
  .schedule-table th:nth-child(5),
  .schedule-table td:nth-child(5) { display: none; }

  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
}

@media (max-width: 480px) {
  .hero { padding: 24px 0 32px; }
  .panel-next, .panel-last { padding: 24px 20px; }
  .score-num { font-size: 40px; }
  .score-separator { font-size: 40px; }
  .team-logo-circle { width: 60px; height: 60px; }
  .panel-time { font-size: 32px; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeInUp 0.5s ease forwards;
}

/* Active tab styling — main.css already handles .ui-tabs-active via jQuery UI classes */

/* ============================================================
   GOODS CAROUSEL — replace Swiper/absolute-positioning approach
   with CSS Grid at desktop. Gorky's absolute-position grid is
   unreliable because slides end up positioned against the wrong
   ancestor. Grid is explicit and layout-engine-independent.

   Layout (1200px+): 3 cols [big | small | small], 2 rows
     col widths:  552px  270px  270px  (gap 12px)
     row heights: 270px  270px          (gap 12px)
     slide 1 spans both rows in col 1 (552×552)
     slides 2-5 fill the 2×2 grid in cols 2-3

   Layout (1600px+): 3 cols [big | small | small]
     col widths:  732px  358px  358px  (gap 16px)
     row heights: 358px  358px          (gap 16px)
   ============================================================ */
@media (min-width: 1200px) {
  .goods__carousel {
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .goods__carousel-wrapper {
    display: grid !important;
    grid-template-columns: 552px 270px 270px !important;
    grid-template-rows: 270px 270px !important;
    gap: 12px !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    position: static !important;
    width: auto !important;
  }
  .goods__slide {
    position: static !important;
    transform: none !important;
    transition: none !important;
    width: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .goods__slide:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .goods__slide:nth-child(2) { grid-column: 2; grid-row: 1; }
  .goods__slide:nth-child(3) { grid-column: 3; grid-row: 1; }
  .goods__slide:nth-child(4) { grid-column: 2; grid-row: 2; }
  .goods__slide:nth-child(5) { grid-column: 3; grid-row: 2; }

  .goods__slide .goods__slide-wrapper {
    width: 270px !important;
    height: 270px !important;
  }
  .goods__slide:nth-child(1) .goods__slide-wrapper {
    width: 552px !important;
    height: 552px !important;
  }

  /* News carousel still uses gorky's absolute-positioning — keep position:relative */
  .news__carousel-wrapper {
    position: relative !important;
    width: 100% !important;
  }
}

@media (min-width: 1600px) {
  .goods__carousel-wrapper {
    grid-template-columns: 732px 358px 358px !important;
    grid-template-rows: 358px 358px !important;
    gap: 16px !important;
  }
  .goods__slide .goods__slide-wrapper {
    width: 358px !important;
    height: 358px !important;
  }
  .goods__slide:nth-child(1) .goods__slide-wrapper {
    width: 732px !important;
    height: 732px !important;
  }
}

/* ============================================================
   NEWS CARD TEXT POSITION — force text to the BOTTOM of each card.
   main.css sets align-items:flex-end + explicit height on the wrapper,
   but Swiper re-init can reset these. Override with higher specificity.
   Heights match main.css breakpoints exactly.
   ============================================================ */
.news__slide .news__slide-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  height: 223px !important;
}
@media (min-width: 768px) {
  .news__slide .news__slide-wrapper {
    height: 237px !important;
  }
}
@media (min-width: 1200px) {
  .news__slide .news__slide-wrapper {
    height: 257px !important;
    width: 366px !important;
  }
  .news__slide:first-child .news__slide-wrapper {
    width: 743px !important;
    height: 490px !important;
  }
  .news__slide:nth-child(3) .news__slide-wrapper {
    height: 491px !important;
  }
}

/* ============================================================
   SLIDER BANNER — responsive height + anchored image position
   Fixed heights (543px/625px/842px) caused image to jump when
   zooming. clamp() makes height proportional to viewport width
   so image doesn't shift. object-position keeps subjects in view.
   ============================================================ */
.slider .slider__cover {
  height: clamp(400px, 58.5vw, 842px) !important;
}
.slider .slider__img {
  object-position: center 20% !important;
}

/* Видео-слайды в hero: iframe (VK / YouTube) не поддерживает object-fit:cover.
   Чтобы видео заполняло слайд без letterbox-ов — растягиваем iframe больше
   контейнера и центрируем. min-width/min-height гарантирует covering при
   любом соотношении сторон viewport-а; overflow:hidden у контейнера обрежет
   лишнее. Для нативного <video> object-fit:cover уже работает через legacy
   .slider__img правило. */
.slider .slider__img-container {
  overflow: hidden;
}
.slider .slider__img-container .slider__iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 177.78vh !important;   /* 16:9 ratio width based on viewport height */
  min-width: 100% !important;
  height: 56.25vw !important;   /* 16:9 ratio height based on viewport width */
  min-height: 100% !important;
  transform: translate(-50%, -50%) !important;
  max-width: none !important;
  pointer-events: none;
}

/* Мобилка (≤767px): hero-фото на всю высоту, как на dev.hctorpedo.ru. Источники
   из API — 1920×1080/900 с центрированным субъектом, при cover-кропе под
   360×580 игрок виден целиком; вертикальный object-position наследуется
   от десктопного правила (center 20%). */
@media (max-width: 767px) {
  .slider .slider__cover {
    height: 580px !important;
  }
}

/* ============================================================
   SLIDER PAGINATION BULLETS
   vendors~main.bundle.js injects Swiper 8 CSS *after* main.css,
   overriding bullet shape (8px circles). Re-declare here with
   higher specificity (.slider__nav-pagination .swiper-*) to win.
   ============================================================ */
.slider__nav-pagination .swiper-pagination-bullet {
  position: relative;
  overflow: hidden;
  display: block !important;
  flex: 0 0 auto !important;
  width: 33px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: #fff !important;
  opacity: 0.3 !important;
  margin: 4px !important;
  cursor: pointer;
}
.slider__nav-pagination .swiper-pagination-bullet.active {
  opacity: 1 !important;
}
@media (min-width: 1200px) {
  .slider__nav-pagination .swiper-pagination-bullet {
    width: 55px !important;
    height: 5px !important;
    margin: 0 6px 6px !important;
  }
  /* Прижать пагинацию к правому краю.
     vendors~main.bundle.js (Swiper 8) инжектит position:absolute ПОСЛЕ main.css,
     из-за чего margin-left:auto не работает. Переопределяем обратно на relative. */
  .slider__nav-pagination {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-left: auto !important;
    max-width: 270px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
}
@media (min-width: 1600px) {
  .slider__nav-pagination .swiper-pagination-bullet {
    width: 69px !important;
    height: 6px !important;
    margin: 0 10px 10px !important;
  }
  .slider__nav-pagination {
    max-width: 360px !important;
  }
}

/* ============================================================
   SHIMMER LOADING — news cards skeleton while API loads.
   Shows instantly, replaces Bitrix static HTML before user sees it.
   ============================================================ */
@keyframes tp-shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Shimmer card background — animated gradient sweep */
.news__slide-wrapper._shimmer {
  background: linear-gradient(
    90deg,
    #0d1626 0%,
    #162035 30%,
    #1a2840 50%,
    #162035 70%,
    #0d1626 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: tp-shimmer-sweep 1.6s infinite linear;
  cursor: default;
  pointer-events: none;
}
/* Hide real gradient overlay and hover overlay pseudo-elements */
.news__slide-wrapper._shimmer::before,
.news__slide-wrapper._shimmer::after {
  display: none !important;
}

/* Placeholder bars inside the shimmer card */
.news__shimmer-bar {
  display: block;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 3px;
  flex-shrink: 0;
}
.news__shimmer-bar._type   { width: 56px;  height: 22px; margin-bottom: 10px; border-radius: 4px; }
.news__shimmer-bar._title  { width: 88%;   height: 15px; margin-bottom: 7px; }
.news__shimmer-bar._title2 { width: 68%;   height: 15px; }
.news__shimmer-bar._date   { width: 90px;  height: 11px; margin-top: 14px; }

/* Fade-in for real slides after shimmer is replaced */
@keyframes news-slide-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.news__slide._fadein {
  animation: news-slide-fadein 0.45s ease both;
}


/* ============================================================
   TEAMROSTER — dynamic grid (no Swiper)
   ============================================================ */
.tp-roster-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  overflow: visible !important;
  flex-wrap: unset !important;
}
@media (min-width: 768px) {
  .tp-roster-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
  .tp-roster-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

.tp-roster-grid .composition__item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
  display: block !important;
}

/* Fix image proportions inside grid (not Swiper) */
.tp-roster-grid .composition__img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 133.33%;
  height: 0;
  overflow: hidden;
}
.tp-roster-grid .composition__img-container {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.tp-roster-grid .composition__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  max-width: none;
}

/* Staff shimmer loading */
@keyframes tp-staff-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.staff__item._shimmer .staff__img-container {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(90deg, #e8eaed 25%, #f5f5f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: tp-staff-shimmer 1.4s infinite linear;
  border-radius: 4px;
}
.staff__item._shimmer .staff__item-content {
  padding-top: 16px;
}
.staff__item._shimmer .staff__shimmer-line {
  height: 14px;
  background: linear-gradient(90deg, #e8eaed 25%, #f5f5f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: tp-staff-shimmer 1.4s infinite linear;
  border-radius: 4px;
  margin-bottom: 8px;
}
.staff__item._shimmer .staff__shimmer-line._name { width: 80%; height: 18px; }
.staff__item._shimmer .staff__shimmer-line._role { width: 55%; }

/* Staff card fade-in */
@keyframes tp-staff-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.staff__item._fadein {
  animation: tp-staff-fadein 0.4s ease both;
}

/* Image loading state — shimmer on container while photo loads */
.staff__img-container._img-loading {
  background: linear-gradient(90deg, #e8eaed 25%, #f5f5f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: tp-staff-shimmer 1.4s infinite linear;
  border-radius: 4px;
}
/* Image hidden until loaded */
.staff__img._img-hidden {
  opacity: 0;
}
/* Smooth reveal when image is ready */
.staff__img:not(._img-hidden) {
  animation: tp-staff-img-reveal 0.35s ease both;
}
@keyframes tp-staff-img-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   LEADERS SECTION — синий фон, белый текст
   Переопределяет Bitrix main.css (#f4f6fa серый фон)
   ============================================================ */
.leaders {
  background: #fff;
}
.leaders .head-section__title,
.leaders .head-section__link {
  color: #00205b;
}
.leaders .head-section__link::after {
  border-color: #00205b;
}
.leaders .leaders__title {
  color: #00205b;
}
.leaders .leaders__title-text::before {
  border-top-color: #00205b;
}
.leaders .leaders__name {
  color: #00205b;
}
.leaders .leaders__status {
  color: rgba(0, 32, 91, 0.55);
}
.leaders .leaders__item {
  background: #f0f3f8;
}
/* Hover-эффект — только на устройствах с реальным указателем (десктоп).
   На тач-устройствах :hover «залипает» после тапа, фон при этом перебит
   мобильным правилом (.leaders__item background: #ebeef3 !important),
   а текст становится белым → нечитабельно. */
@media (hover: hover) and (pointer: fine) {
  .leaders .leaders__item:hover,
  .leaders .leaders__item:active {
    background: #00205b;
  }
}
.leaders .leaders__number {
  background: #fff;
  color: #00205b;
}
.leaders .leaders__stat {
  color: #00205b;
}
.leaders .leaders__stat-value {
  color: #c8102e;
}
.leaders .leaders__stat-label {
  color: #9aa0a9;
  text-transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .leaders .leaders__item:hover .leaders__name,
  .leaders .leaders__item:active .leaders__name {
    color: #fff;
  }
  .leaders .leaders__item:hover .leaders__status,
  .leaders .leaders__item:active .leaders__status {
    color: rgba(255, 255, 255, 0.6);
  }
  .leaders .leaders__item:hover .leaders__stat,
  .leaders .leaders__item:active .leaders__stat {
    color: #fff;
  }
  .leaders .leaders__item:hover .leaders__number,
  .leaders .leaders__item:active .leaders__number {
    background: #fff;
    color: #00205b;
  }
  .leaders .leaders__item:hover .leaders__stat-value,
  .leaders .leaders__item:active .leaders__stat-value {
    color: #fff;
  }
}

/* ============================================================
   MATCH SHIMMER — banner__bar._match и info__match skeleton
   while next-match / info-match API calls are in flight.
   Uses the same tp-shimmer-sweep keyframe already defined above.
   ============================================================ */


/* -- info__match shimmer placeholder bars -- */
.match__shimmer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.match__shimmer-bar {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  flex-shrink: 0;
  animation: tp-shimmer-sweep 1.6s infinite linear;
  background-size: 300% 100%;
}
/* dark block (prev match, navy bg) */
.match._dark .match__shimmer-bar {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 300% 100%;
}
/* blue block (next match) */
.match._blue .match__shimmer-bar {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 100%
  );
  background-size: 300% 100%;
}
.match__shimmer-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}
.match__shimmer-name  { height: 14px; width: 80px; }
.match__shimmer-city  { height: 11px; width: 55px; margin-top: 6px; }
.match__shimmer-score { height: 40px; width: 70px; border-radius: 6px; }
.match__shimmer-date  { height: 13px; width: 120px; }
.match__shimmer-title { height: 14px; width: 90px; margin-bottom: 10px; }

/* fade-in when real data replaces shimmer */
@keyframes match-block-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.match._fadein {
  animation: match-block-fadein 0.4s ease both;
}


/* ============================================================
   NEWS GRID — homepage layout (like hctorpedo.ru)
   Row 1: big (2/3) | right col: normal + double (1/3)
   Row 2: 3 equal items
   Row 3: 2 items + subscription
   ============================================================ */

.news__grid-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news__grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Big container — full width mobile, 2/3 desktop */
.news__big-container {
  width: 100%;
  box-sizing: border-box;
}

/* Small container — full width mobile, 1/3 desktop */
.news__small-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual news item */
.news__item {
  width: 100%;
  box-sizing: border-box;
}

/* Item wrapper — card with image background */
.news__item,
.news__item * {
  cursor: pointer;
}

.news__item-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  color: #f4f6fa;
  width: 100%;
  height: 220px;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}

.news__item-wrapper::before,
.news__item-wrapper::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.2s;
}

.news__item-wrapper::before {
  background: linear-gradient(
    0deg,
    rgba(0, 32, 91, 0.98) 0%,
    rgba(0, 32, 91, 0.6) 40%,
    rgba(0, 32, 91, 0) 100%
  );
  z-index: 2;
}

.news__item-wrapper::after {
  background: #00205b;
  opacity: 0;
  z-index: 3;
}

.news__item:hover .news__item-wrapper::after { opacity: 0.35; }

/* Image */
.news__item-img-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  overflow: hidden;
}

.news__item-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Content overlay */
.news__item-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.news__item-info-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news__item-type {
  display: inline-flex;
  align-items: center;
  font-family: 'Rodchenko', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  align-self: flex-start;
}

.news__item-type._blue { background: #003da5; color: #fff; }
.news__item-type._red  { background: #c8102e; color: #fff; }

.news__item-title {
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.375;
  color: #fff;
  margin: 0;
}

.news__item-text {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  display: none;
}

.news__item-date {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* Big item btn */
.news__item-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: auto;
  background: #16223a;
  padding: 14px 30px;
  font-size: 16px;
}
.news__item-btn:hover,
.news__item-btn:active {
  background: #003da5;
}

/* Subscription block */
.news__grid-subscription {
  background: #00205b;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.news__grid-subscription__title {
  font-family: 'Rodchenko', sans-serif;
  font-size: 34px;
  color: #f4f6fa;
  text-transform: uppercase;
  margin: 0 0 24px;
  line-height: 1.05;
}

/* Input + button row */
.news__grid-subscription .subscription {
  display: flex;
  gap: 0;
}

.news__grid-subscription .field {
  flex: 1;
  margin: 0;
}

.news__grid-subscription .field__container {
  height: 56px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  display: flex;
  align-items: center;
}

.news__grid-subscription .field__input,
.news__grid-subscription .field._dark .field__input {
  background: transparent !important;
  border: none;
  outline: none;
  color: #fff !important;
  font-size: 15px;
  width: 100%;
  padding: 0 16px;
  height: 100%;
}

.news__grid-subscription .field__input::placeholder { color: rgba(255,255,255,0.45); }
.news__grid-subscription .field__input::selection { background: rgba(255,255,255,0.2); }

.news__grid-subscription .field__placeholder { display: none; }

.news__grid-subscription .subscription__btn {
  height: 56px;
  background: #e8102a;
  color: #fff;
  font-family: 'Rodchenko', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  padding: 0 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.news__grid-subscription .subscription__btn:hover { background: #c40d23; }
.news__grid-subscription .subscription__btn .btn__text { display: inline; }

/* Mobile: стакаем форму подписки вертикально, иначе кнопка съедает всю ширину */
@media (max-width: 600px) {
  .news__grid-subscription .subscription {
    flex-direction: column;
    gap: 12px;
  }
  .news__grid-subscription .field__container {
    border-right: 1px solid rgba(255,255,255,0.2);
  }
  .news__grid-subscription .subscription__btn {
    width: 100%;
  }
}

.news__subscription-policy {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 24px;
  margin-bottom: 0;
  line-height: 1.5;
  text-align: center;
}

.news__subscription-policy a { color: rgba(255,255,255,0.85); text-decoration: underline; }

/* Мобила: блок подписки — на тёмном фоне, поля и кнопка занимают всю
   ширину, тексты крупнее и легче читаются. */
@media (max-width: 767px) {
  .news__grid-subscription {
    background: #0c1931;
    padding: 28px 20px 32px;
  }
  .news__grid-subscription__title {
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 20px;
    text-align: left;
  }
  .news__grid-subscription .field__container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    height: 60px;
  }
  .news__grid-subscription .field__input {
    font-size: 15px;
    color: #f4f6fa !important;
  }
  .news__grid-subscription .field__input::placeholder {
    color: rgba(244, 246, 250, 0.5);
  }
  .news__grid-subscription .subscription__btn {
    height: 60px;
    font-size: 16px;
    width: 100%;
  }
  .news__subscription-policy {
    font-size: 13px;
    text-align: center;
    margin-top: 20px;
  }
}

/* ── News filter: reset button ── */
.news-filter-reset {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 4px 8px;
  padding: 9px 14px;
  background: none;
  border: 1px solid #c8102e;
  color: #c8102e;
  font: 400 14px/1 'Rodchenko', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.news-filter-reset:hover { background: rgba(200,16,46,0.08); }
.news-filter-reset:active { transform: scale(0.93); }

/* ── News filter: border и цвет кнопок-рубрик — синий вместо красного ── */
.list-news__list-categories .dropdown__toggler-text {
  border-color: #003da5 !important;
  color: #003da5 !important;
}

/* ── News filter: hover, active state, click animation ── */
.list-news__list-categories .dropdown__toggler {
  transition: transform 0.1s ease;
}
.list-news__list-categories .dropdown__toggler:hover .dropdown__toggler-text {
  background-color: rgba(0, 61, 165, 0.1) !important;
  color: #003da5 !important;
}
.list-news__list-categories .dropdown__toggler:active {
  transform: scale(0.93);
}
.list-news__list-categories .dropdown__toggler._active .dropdown__toggler-text {
  background-color: #003da5 !important;
  color: #f4f6fa !important;
}

/* ── Matches inline date label ── */
.calendar__event-date {
  font-size: 13px;
  color: rgba(12, 25, 49, 0.45);
  margin-bottom: 4px;
  padding: 0 4px;
}

/* Shimmer */
.news__item-wrapper._shimmer {
  background: linear-gradient(90deg, #0d1626 0%, #1a2840 50%, #0d1626 100%);
  background-size: 300% 100%;
  animation: tp-shimmer-sweep 1.6s infinite linear;
  cursor: default;
  pointer-events: none;
}
.news__item-wrapper._shimmer::before,
.news__item-wrapper._shimmer::after { display: none !important; }

.news__shimmer-bar {
  display: block;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
}
.news__shimmer-bar._type  { width: 60px; height: 20px; }
.news__shimmer-bar._title { width: 80%; height: 16px; margin-top: 6px; }
.news__shimmer-bar._title2{ width: 55%; height: 16px; margin-top: 4px; }
.news__shimmer-bar._date  { width: 80px; height: 11px; margin-top: 8px; }

/* Fade-in */
@keyframes news-item-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.news__item._fadein { animation: news-item-fadein 0.45s ease both; }

/* === DESKTOP (960px+) === */
@media (min-width: 960px) {
  .news__grid-row { flex-wrap: nowrap; }

  /* Top section: left column (2/3) + right column (1/3), aligned stretch */
  .news__grid-row._top { align-items: stretch; }

  /* Left column: big card + 2 middle tiles, stacked */
  .news__left-column {
    width: 66.66667%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .news__big-container { width: 100%; }
  .news__big-container .news__item-wrapper { height: 640px; }

  .news__big-container .news__item-content { padding: 40px 36px; }
  .news__item-title                        { font-size: 21px; line-height: 1.38; }
  .news__big-container .news__item-title   { font-size: 48px; line-height: 0.95; letter-spacing: -0.5px; }
  .news__big-container .news__item-text    { display: block; margin-top: 12px; font-size: 15px; }
  .news__big-container .news__item-date    { margin-top: 18px; font-size: 14px; }
  .news__big-container .news__item-type    { font-size: 17px; padding: 9px 16px; margin-bottom: 14px; }

  /* Middle row — 2 equal tiles under big card */
  .news__grid-row._middle { flex-wrap: nowrap; }
  .news__grid-row._middle .news__item { width: calc(50% - 4px); }
  .news__grid-row._middle .news__item-wrapper { height: 320px; }

  /* Right column: 1/3 width, stretches to full height of left column */
  .news__small-container {
    width: 33.33333%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
  }

  .news__small-container .news__item { width: 100%; }

  /* First card: same height as regular tiles */
  .news__small-container .news__item:not(._double) { flex: 0 0 320px; }
  .news__small-container .news__item:not(._double) .news__item-wrapper { height: 320px; }

  /* Double card: fills all remaining height */
  .news__small-container .news__item._double { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .news__small-container .news__item._double .news__item-wrapper { flex: 1 1 0; min-height: 0; height: auto; width: 100%; }

  /* Bottom row — 2 news + subscription */
  .news__grid-row._bottom { align-items: stretch; }
  .news__grid-row._bottom .news__item { width: calc(33.33333% - 6px); }
  .news__grid-row._bottom .news__item-wrapper { height: 320px; }
  .news__grid-row._bottom .news__grid-subscription {
    width: calc(33.33333% - 6px);
    min-height: 320px;
    padding: 36px 28px;
  }
  .news__grid-row._bottom .news__grid-subscription__title { font-size: 26px; }
}

/* === TABLET (768px–959px) === */
@media (min-width: 768px) and (max-width: 959px) {
  .news__grid-row._middle,
  .news__grid-row._bottom { flex-wrap: wrap; }

  .news__grid-row._bottom .news__item { width: calc(50% - 4px); }
}

/* ============================================================
   EVENTS — shimmer placeholder slides while API loads
   ============================================================ */
/* Fix: shimmer slides must have explicit px widths so they don't
   inherit % widths relative to the swiper-wrapper total width */
.events__slide._shimmer-slide {
  width: 128px !important;
  flex-shrink: 0 !important;
}
@media (min-width: 768px) {
  .events__slide._shimmer-slide {
    width: 188px !important;
  }
}
@media (min-width: 1200px) {
  .events__slide._shimmer-slide {
    /* Approximate 1/6 of typical container width — JS applyWidths takes over after load */
    width: min(calc((100vw - 44px) / 6), 246px) !important;
  }
}

.events__content._shimmer {
  background: linear-gradient(
    90deg, #0c1931 0%, #16273f 30%, #1c3358 50%, #16273f 70%, #0c1931 100%
  );
  background-size: 300% 100%;
  animation: tp-shimmer-sweep 1.6s infinite linear;
  pointer-events: none;
  cursor: default;
}
.events__shimmer-bar {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 3px;
}
.events__shimmer-bar._day  { left: 14px; top: 10px;   width: 24px; height: 11px; }
.events__shimmer-bar._date { left: 10px; bottom: 8px; width: 52px; height: 36px; }
.events__shimmer-bar._type { right:  0;  top:     0;  width: 44px; height: 18px; }

/* ============================================================
   LEADERS — shimmer placeholder items while API loads
   ============================================================ */
@keyframes tp-shimmer-light {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.leaders .leaders__item._shimmer {
  pointer-events: none;
  background: linear-gradient(
    90deg, #e4e8f2 0%, #ecf0f9 30%, #f0f4fb 50%, #ecf0f9 70%, #e4e8f2 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: tp-shimmer-light 1.6s infinite linear;
}
.leaders .leaders__item._shimmer > * { visibility: hidden; }
.leaders .leaders__item._main._shimmer { min-height: 350px; }
@media (min-width: 1600px) {
  .leaders .leaders__item._main._shimmer { min-height: 460px; }
}

/* ============================================================
   MEDIA — shimmer placeholder slides while API loads
   ============================================================ */
.media__slide._shimmer { pointer-events: none; cursor: default; }
.media__shimmer-card {
  width: 100%;
  height: 237px;
  background: linear-gradient(
    90deg, #0d1626 0%, #162035 30%, #1a2840 50%, #162035 70%, #0d1626 100%
  );
  background-size: 300% 100%;
  animation: tp-shimmer-sweep 1.6s infinite linear;
  box-sizing: border-box;
}
.media__slide._photo._shimmer .media__shimmer-card { height: 208px; }

/* ============================================================
   BLOCK FADE-IN — smooth reveal when shimmer is replaced
   ============================================================ */
@keyframes tp-block-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.events__wrapper._loaded        { animation: tp-block-fadein 0.4s ease both; }
.leaders__list._loaded          { animation: tp-block-fadein 0.4s ease both; }
.media__carousel-wrapper._loaded { animation: tp-block-fadein 0.4s ease both; }


/* ============================================================
   NEWS LIST PAGE — pin info-container to bottom of every card.
   ============================================================ */
.list-news__item-wrapper {
  position: relative !important;
}
/* Мобилка ≤767px: показываем чипы рубрик и поле периода вертикально.
   Раньше прятали целиком, потому что dropdown был закрыт; сейчас чипы
   работают и на мобиле, поле периода — отдельной строкой. */
@media (max-width: 767px) {
  .list-news__navbar {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 10px !important;
  }
  /* Legacy main.css: .list-news__wrapper{padding-top:16; padding-bottom:50}
     создавал большой зазор между блоком фильтра и первой новостью. */
  section.list-news > .cover:has(.list-news__navbar) .list-news__wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .list-news__categories {
    width: 100%;
  }
  .list-news__navbar-label {
    display: block !important;
    margin-bottom: 4px;
  }
  .list-news__list-categories .dropdown {
    width: 100%;
  }
  .list-news__list-categories .dropdown__head {
    display: none;
  }
  .list-news__list-categories .dropdown__content {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Legacy main.css держит dropdown__content скрытым (opacity:0/visibility:hidden)
       до ≥1200px; на мобиле явно показываем, иначе чипы невидимы. */
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Один горизонтальный ряд с боковым скроллом — как на десктопе.
     Legacy дефолтные .dropdown__toggler ставят wrap+padding 19px и показывают
     marker (checkbox); перебиваем на стиль десктопных чипсов. */
  .list-news__list-categories .dropdown__list-togglers {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: 0 0 4px;
    scrollbar-width: none;
  }
  .list-news__list-categories .dropdown__list-togglers::-webkit-scrollbar {
    display: none;
  }
  .list-news__list-categories .dropdown__toggler {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  /* marker (checkbox) скрываем — на десктопе он тоже скрыт */
  .list-news__list-categories .dropdown__toggler-marker {
    display: none !important;
  }
  /* Сам чип — текст в синей рамке (как у фильтра на сателлитах). */
  .list-news__list-categories .dropdown__toggler-text {
    display: inline-block !important;
    padding: 8px 12px !important;
    border: 1px solid #003da5 !important;
    text-align: center;
    font: 400 13px/1 'Rodchenko', sans-serif !important;
    text-transform: uppercase;
    color: #003da5 !important;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
  }
  .list-news__list-categories .dropdown__toggler._active .dropdown__toggler-text {
    background: #003da5 !important;
    color: #f4f6fa !important;
  }
}
/* Десктоп: уменьшаем отступ между фильтром-категориями и первой карточкой
   новостей. У первого `.list-news__wrapper` (контейнер навбара) был лишний
   padding-bottom: 100px — обнуляем; padding между навбаром и контентом
   управляем самим .list-news__navbar { padding-bottom }. */
@media (min-width: 768px) {
  .list-news__navbar { padding-bottom: 16px !important; }
  section.list-news > .cover:has(.list-news__navbar) .list-news__wrapper {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }
}

/* ============================================================
   News filter — поле «Выбрать период» (legacy field _light _big с AirDatepicker)
   и multi-select по чипам-рубрикам.
   ============================================================ */
.list-news__date-container {
  margin-left: auto;
  min-width: 260px;
}
@media (max-width: 767px) {
  .list-news__date-container {
    margin-top: 12px;
    margin-left: 0;
    width: 100%;
  }
}

/* Чипы рубрик — multi-select: активные подсвечиваются. */
.list-news__list-categories .dropdown__toggler._active {
  background: #003da5 !important;
  color: #fff !important;
  border-color: #003da5 !important;
}
.list-news__list-categories .dropdown__toggler._active .dropdown__toggler-text {
  color: #fff !important;
}

/* ============================================================
   News filter — date range + multi-select chips.
   Контейнер с двумя <input type="date"> + кнопкой сброса справа.
   ============================================================ */
.list-news__date-container {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #f4f6fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  font-family: 'Rodchenko', sans-serif;
  color: #0c1931;
  margin-left: auto;
}
.list-news__date-container._has-date {
  border-color: #003da5;
  background: #fff;
}
.list-news__date-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(12, 25, 49, 0.6);
  cursor: pointer;
}
.list-news__date-input {
  border: 0;
  background: transparent;
  font: 500 14px/1.2 'Rodchenko', sans-serif;
  color: #0c1931;
  padding: 2px 0;
  width: 130px;
  outline: none;
  cursor: pointer;
}
.list-news__date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}
.list-news__date-clear {
  border: 0;
  background: transparent;
  color: rgba(12, 25, 49, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.list-news__date-container:not(._has-date) .list-news__date-clear {
  visibility: hidden;
}
.list-news__date-clear:hover { color: #c8102e; }

@media (max-width: 767px) {
  .list-news__date-container {
    margin-top: 12px;
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .list-news__date-input { width: 130px; }
}

/* Чипы рубрик — multi-select: активные подсвечиваются, неактивные — outline. */
.list-news__list-categories .dropdown__toggler._active {
  background: #003da5 !important;
  color: #fff !important;
  border-color: #003da5 !important;
}
.list-news__list-categories .dropdown__toggler._active .dropdown__toggler-text {
  color: #fff !important;
}
.list-news__item-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
}

/* На мобиле/планшете (≤1199px) карточки .list-news такие же, как home news:
   портретные 3:4 с фото на всю площадь и текстом на градиенте снизу.
   Без override-а первая (big) карточка едет как landscape с текстом
   слева от фото. */
@media (max-width: 1199px) {
  .list-news__big-container,
  .list-news__small-container {
    width: 100%;
    display: block;
  }
  .list-news__item,
  .list-news__big-container .list-news__item,
  .list-news__small-container .list-news__item {
    width: calc(100% - 16px) !important;
    margin: 0 8px 12px !important;
  }
  .list-news__item-wrapper {
    display: block !important;
    height: 223px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: #0c1931;
  }
  /* Большая (первая) карточка на мобиле — той же высоты, что и остальные. */
  .list-news__big-container .list-news__item-wrapper {
    height: 223px !important;
  }
  .list-news__item-wrapper::before {
    display: none !important;
  }
  .list-news__item-img-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
  }
  .list-news__item-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .list-news__item-content {
    width: 100% !important;
    padding: 40px 14px 16px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 60%, transparent 100%) !important;
    color: #fff !important;
    display: block !important;
  }
  .list-news__item-info-container {
    width: 100% !important;
    text-align: left !important;
    flex: none !important;
  }
  .list-news__item-type {
    display: inline-block !important;
    margin: 0 0 8px !important;
  }
  .list-news__item-title {
    font-family: 'Play', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 6px !important;
    max-width: none !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .list-news__item-text {
    display: none !important;
  }
  .list-news__item-date {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Play', sans-serif !important;
  }
  .list-news__item-btn {
    display: none !important;
  }
  .list-news__big-container .list-news__item-title {
    font-size: 18px !important;
    -webkit-line-clamp: 4;
  }
}

/* ============================================================
   NEWS LIST PAGE — apply 1600px-scale card sizes at 1200px+.
   Gorky CSS only sets 340px height and 21px titles at 1600px+;
   this backports them to 1200px so the page matches the reference.
   ============================================================ */
@media (min-width: 1200px) {
  .list-news__item-wrapper {
    height: 340px !important;
  }
  .list-news__advert-container .list-news__item-wrapper,
  .list-news__big-container    .list-news__item-wrapper {
    height: 696px !important;
  }
  .list-news__item-title {
    font-size: 21px !important;
    line-height: 1.38 !important;
    max-width: 350px !important;
  }
  .list-news__big-container .list-news__item-title {
    font-size: 60px !important;
    font-weight: 400 !important;
    font-family: 'Rodchenko', sans-serif !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
    max-width: 920px !important;
  }
}

/* ============================================================
   PLAYOFFS BRACKET — убираем видимые полосы между карточками.
   Gorky CSS задаёт border и background #0c1931 на club-list,
   что темнее карточек (#16223a) и создаёт видимые полосы.
   Меняем на цвет карточек чтобы зазоры слились с ними.
   ============================================================ */
@media (min-width: 1200px) {
  .playoffs__club-list,
  .playoffs__subtotal-list {
    background: #16223a !important;
    border-color: #16223a !important;
  }
}

/* ============================================================
   GOODS BLOCK — shimmer загрузки, анимация появления,
   hover и active эффекты на плитках.
   ============================================================ */

/* --- Shimmer-заглушки пока картинки не загрузились --- */
.goods__slide._shimmer .goods__slide-wrapper {
  background: linear-gradient(
    90deg,
    #0d1a2e 0%, #162035 30%, #1e2f4a 50%, #162035 70%, #0d1a2e 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: tp-shimmer-sweep 1.6s infinite linear;
  pointer-events: none;
}
.goods__slide._shimmer .goods__img-container,
.goods__slide._shimmer .goods__content,
.goods__slide._shimmer .goods__status {
  opacity: 0;
}

/* --- Анимация появления всей сетки --- */
@keyframes goods-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1200px) {
  .goods__slide:nth-child(1) { animation: goods-fadein 0.45s ease both 0.05s; }
  .goods__slide:nth-child(2) { animation: goods-fadein 0.45s ease both 0.15s; }
  .goods__slide:nth-child(3) { animation: goods-fadein 0.45s ease both 0.20s; }
  .goods__slide:nth-child(4) { animation: goods-fadein 0.45s ease both 0.25s; }
  .goods__slide:nth-child(5) { animation: goods-fadein 0.45s ease both 0.30s; }
}

/* --- Hover: зум картинки + красный оверлей --- */
.goods__img-container {
  transition: transform 0.35s ease;
}
.goods__img {
  transition: transform 0.45s ease;
}
.goods__slide-wrapper {
  transition: background-color 0.25s ease !important;
}

/* Красный оверлей при наведении (горки: background-color:#c8102e)
   Добавляем плавность через transition, уже есть в gorky — усиливаем */
.goods__slide-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #c8102e;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.goods__slide-wrapper:hover::after {
  opacity: 0.18;
}
.goods__slide-wrapper:hover .goods__img {
  transform: scale(1.06);
}

/* --- Active (нажатие): лёгкое сжатие карточки --- */
.goods__slide-wrapper:active {
  transform: scale(0.97);
  transition: transform 0.12s ease !important;
}
.goods__slide-wrapper:active .goods__img {
  transform: scale(1.03);
}

/* Clip image zoom within card boundaries */
.goods__slide-wrapper {
  overflow: hidden;
}

/* ── Video duration badge on card images ── */
.video-dur {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

/* ── News list shimmer — visible immediately, replaced by real cards after API loads ── */
/* News list pagination — hidden until JS shows it */
.list-news__pagination {
  display: none;
}

/* main.css задаёт только padding-top — кнопка «Показать ещё» упиралась
   в блок партнёров/футер. Добавляем нижний отступ всем спискам
   (новости/видео/фотогалерея используют один класс). */
.list-news__pagination {
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .list-news__pagination {
    padding-bottom: 64px;
  }
}

/* ============================================================
   NEWS LIST PAGE — shimmer cards while data loads
   ============================================================ */
.list-news__item._shimmer {
  pointer-events: none;
}
.list-news__item._shimmer .list-news__item-wrapper {
  background: linear-gradient(
    90deg,
    #0d1626 0%, #162035 30%, #1a2840 50%, #162035 70%, #0d1626 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: tp-shimmer-sweep 1.6s infinite linear;
}
/* Placeholder bars inside shimmer news card */
.ln-sbar {
  display: block;
  background: rgba(255,255,255,0.09);
  border-radius: 3px;
  flex-shrink: 0;
}
.ln-sbar._type  { width: 56px; height: 20px; margin-bottom: 10px; border-radius: 4px; }
.ln-sbar._title { width: 88%; height: 14px; margin-bottom: 7px; }
.ln-sbar._t2    { width: 65%; height: 14px; }
.ln-sbar._date  { width: 90px; height: 11px; margin-top: 14px; }


/* ============================================================
   404 NOT FOUND PAGE
   ============================================================ */

.nf {
  background: #0A1221;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.nf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.nf__picture {
  display: block;
  margin-bottom: 40px;
  max-width: 460px;
  width: 100%;
}

.nf__picture img {
  width: 100%;
  height: auto;
  display: block;
}

.nf__h {
  font-family: 'Rodchenko', 'Play', sans-serif;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  line-height: 1.2;
}

.nf__text {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 40px;
  line-height: 1.5;
}

.nf__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.nf__btn:hover {
  border-color: #FFFFFF;
  background: rgba(255,255,255,0.07);
  color: #FFFFFF;
}

@media (max-width: 767px) {
  .nf {
    padding: 40px 16px;
    min-height: calc(100vh - 120px);
  }
  .nf__picture {
    max-width: 320px;
    margin-bottom: 28px;
  }
}

/* ============================================================
   TOURNAMENT TABLES PAGE — playoff section layout
   Uses the same .playoffs__section / position:absolute structure as homepage.
   Desktop bracket visual tree is driven entirely by main.css rules.
   ============================================================ */

/* Conference labels in standings table */
.table__conf-title {
  margin: 32px 0 8px;
  font-size: clamp(16px, 2.5vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Playoff section spacing on tournament_tables page */
#js-playoff-section.playoffs {
  margin-bottom: 0;
}

/* .playoffs__club-name не наследует Rodchenko автоматически — задаём явно. */
.playoffs__club-name {
  font-family: 'Rodchenko', sans-serif !important;
}

/* On the tournament_tables page the section sits inside .cover — give the
   bracket container enough height so absolutely-positioned sections don't
   collapse it. main.css sets height:571px at ≥1200px via its own media query.
   On mobile tabs are used (one container visible at a time) so height is
   determined by content — no min-height needed. */
#js-playoff-section .playoffs__content {
  /* Allow horizontal scroll on narrow viewports (e.g. tab-1 with 8 series) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* On desktop (≥1200px) main.css uses position:absolute sections inside
   a fixed-height .playoffs__content — restore fixed min-height so the
   parent doesn't collapse. */
@media (min-width: 1200px) {
  #js-playoff-section .playoffs__content {
    min-height: 571px;
    overflow-x: visible;
  }
}

/* Article detail page — hero banner starts below fixed header */
section.detail {
  padding-top: var(--header-height, 70px);
}

/* Statistics table — player name column shouldn't expand to fill all space */
.statistics__preview-player {
  white-space: nowrap;
}
.stat td:nth-child(2) {
  width: 1px;
}
.stat th:nth-child(2) {
  width: 1px;
  white-space: nowrap;
}

/* ============================================================
   TICKETS PAGE — shimmer skeletons + fade-in
   ============================================================ */

/* Shared shimmer sweep (dark theme) */
@keyframes tp-tickets-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes tp-tickets-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tp-tickets-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.11) 30%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.11) 70%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 300% 100%;
  animation: tp-tickets-shimmer 1.5s infinite linear;
  border-radius: 5px;
  display: block;
}

/* ── Slider skeleton ── */
.sliderCard-skel {
  min-width: 280px;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sliderCard-skel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sliderCard-skel__date  { height: 14px; width: 150px; }
.sliderCard-skel__btn   { height: 30px; width: 80px; border-radius: 4px; }
.sliderCard-skel__body  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sliderCard-skel__logo  { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.sliderCard-skel__mid   { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sliderCard-skel__timer { height: 32px; width: 120px; border-radius: 4px; }
.sliderCard-skel__arena { height: 11px; width: 100px; }
.sliderCard-skel__foot  { height: 34px; border-radius: 4px; }

/* ── Match item skeleton (светлый фон) ── */
.calTicket-skel {
  background: #f0f3f9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calTicket-skel__tag   { height: 13px; width: 90px; }
.calTicket-skel__body  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.calTicket-skel__logo  { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.calTicket-skel__mid   { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.calTicket-skel__time  { height: 20px; width: 56px; }
.calTicket-skel__date  { height: 11px; width: 95px; }
.calTicket-skel__foot  { height: 11px; width: 120px; }

/* Шиммер светлой темы для скелетонов секции билетов */
.calTicket-skel__tag,
.calTicket-skel__logo,
.calTicket-skel__time,
.calTicket-skel__date,
.calTicket-skel__foot {
  background: linear-gradient(90deg, #e4e8f2 0%, #edf1f9 40%, #f4f6fc 50%, #edf1f9 60%, #e4e8f2 100%);
  background-size: 300% 100%;
  animation: tp-shimmer-light 1.4s infinite linear;
  border-radius: 4px;
}

/* ── Calendar grid skeleton ── */
.cal-grid-skel {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 8px;
}
.cal-grid-skel__cell {
  height: 42px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e4e8f2 0%, #edf1f9 40%, #f4f6fc 50%, #edf1f9 60%, #e4e8f2 100%);
  background-size: 300% 100%;
  animation: tp-shimmer-light 1.4s infinite linear;
}

/* ── Fade-in for loaded content ── */
.tp-tickets-fadein {
  animation: tp-tickets-fadein 0.38s ease both;
}
/* Staggered fade for multiple items */
.tp-tickets-fadein:nth-child(1) { animation-delay: 0.00s; }
.tp-tickets-fadein:nth-child(2) { animation-delay: 0.06s; }
.tp-tickets-fadein:nth-child(3) { animation-delay: 0.12s; }
.tp-tickets-fadein:nth-child(4) { animation-delay: 0.18s; }
.tp-tickets-fadein:nth-child(5) { animation-delay: 0.24s; }

/* ── App store banner ── */
.app-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px;
  text-align: center;
  color: #fff;
}
.app-banner .banner-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.app-banner .banner-text {
  font-size: 1.4rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.app-banner .store-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.app-banner .store-badge {
  height: 44px;
  display: block;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.app-banner .store-buttons a:hover .store-badge {
  transform: translateY(-3px) scale(1.04);
  opacity: 0.9;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}



/* ── Homepage Standings Widget ───────────────────────────────── */
/* Native CSS scroll (js-scrollbar not re-initialized for dynamic content) */
.standings__content.hs-scroll {
  overflow-y: auto;
  max-height: 480px;
}
/* Мобилка (≤767px): окно скролла = 6 строк, Торпедо центрируется JS-ом. */
@media (max-width: 767px) {
  .standings__content.hs-scroll {
    max-height: calc(48px * 6);
  }
}

/* Fade-in при замене скелетона на реальные данные */
@keyframes hs-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-fade-in {
  animation: hs-fade-in 0.3s ease both;
}

/* Shimmer skeleton — строки таблицы */
.hs-shimmer-item .standings__position,
.hs-shimmer-item .standings__club-name,
.hs-shimmer-item .standings__info-value {
  visibility: hidden; /* скрываем реальный контент чтобы сохранить высоту строки */
}

.hs-shimmer-bar {
  display: inline-block;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.13) 40%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.13) 60%,
    rgba(255,255,255,0.05) 100%
  );
  background-size: 300% 100%;
  animation: tp-shimmer-sweep 1.5s infinite linear;
  vertical-align: middle;
}

.hs-shimmer-bar--xs    { width: 16px;  height: 12px; }
.hs-shimmer-bar--logo  { width: 28px;  height: 28px; border-radius: 50%; }
.hs-shimmer-bar--name  { width: 110px; height: 12px; }
.hs-shimmer-bar--num   { width: 28px;  height: 12px; }
.hs-shimmer-bar--goals { width: 52px;  height: 12px; }

/* ============================================================
   LOYALTY PAGE — Программа лояльности «Торпедо Фэмили»
   ============================================================ */

/* Page offset below fixed header */
.loyalty-page { padding-top: var(--header-height); }

/* Section backgrounds */
.lc-section-dark { background: var(--bg-dark); }
.lc-section-alt  { background: #0c1931; }

/* ── Hero (overrides .fanzone-banner padding) ── */
.lc-hero { padding: 90px 0 80px; }
.lc-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.lc-hero .fanzone-subtitle { max-width: 540px; margin-bottom: 36px; }


/* Stat pills in hero */
.lc-pills {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.lc-pill {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-card);
  padding: 16px 24px;
  min-width: 120px;
  text-align: center;
}
.lc-pill__val {
  display: block;
  font-family: 'Play', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--highlight);
  line-height: 1;
}
.lc-pill__label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}

/* App store buttons */
.lc-store-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.lc-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-card);
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.lc-store-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.38);
  transform: translateY(-2px);
  color: #fff;
}
.lc-store-btn__sub  { display: block; font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.2; }
.lc-store-btn__name { display: block; font-size: 15px; font-weight: 700; }
.lc-store-btn__inner { display: flex; flex-direction: column; }

/* ── Card icon area (mimics .news-img but for icons) ── */
.lc-card-ico {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0A1628 0%, #0D1E3A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  color: var(--primary-light);
}
.lc-ico-gold { color: var(--highlight); }
.lc-card-ico::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.lc-ico-blue::after { background: var(--primary); }
.lc-ico-gold::after { background: var(--highlight); }
.lc-card-ico .lc-ico-sprite {
  width: 48px;
  height: 48px;
  opacity: 0.65;
}
.lc-ico-val {
  font-family: 'Play', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--highlight);
  line-height: 1;
}

/* Card body text */
.lc-card-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Grid overrides for loyalty sections ── */
.news-grid.lc-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.news-grid.lc-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }

/* ── Status tier section label ── */
.lc-status-label {
  font-family: 'Play', sans-serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-left: 16px;
  margin: 40px 0 20px;
}
.lc-status-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 70%;
  background: var(--highlight);
  border-radius: 2px;
}

/* ── Status tier cards ── */
.lc-statuses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lc-status {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.lc-status:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.lc-status__head {
  padding: 10px 20px;
  font-family: 'Play', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #fff;
  position: relative;
}
.lc-status__head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.lc-status--bronze .lc-status__head { background: rgba(205,127,50,0.18); }
.lc-status--bronze .lc-status__head::before { background: #CD7F32; }
.lc-status--silver .lc-status__head { background: rgba(158,163,165,0.12); }
.lc-status--silver .lc-status__head::before { background: #9EA3A5; }
.lc-status--gold   .lc-status__head { background: rgba(232,160,32,0.12); }
.lc-status--gold   .lc-status__head::before { background: var(--highlight); }
.lc-status__body { padding: 24px 20px; }
.lc-status__cashback {
  font-family: 'Play', sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
}
.lc-status--bronze .lc-status__cashback { color: #CD7F32; }
.lc-status--silver .lc-status__cashback { color: #9EA3A5; }
.lc-status--gold   .lc-status__cashback { color: var(--highlight); }
.lc-status__cashback-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.lc-status__conditions {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-status__condition {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.lc-status__condition::before { content: '—'; color: rgba(255,255,255,0.2); flex-shrink: 0; }

/* ── Note/info block ── */
.lc-note {
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(29,95,168,0.1);
  border: 1px solid rgba(29,95,168,0.25);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  margin-top: 24px;
}
.lc-note strong { color: rgba(255,255,255,0.75); }

/* ── FAQ accordion ── */
.lc-faq { display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.lc-faq details {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.lc-faq details[open] {
  background: var(--bg-card-hover);
  border-color: rgba(29,95,168,0.4);
}
.lc-faq summary {
  padding: 20px 24px;
  font-family: 'Play', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  transition: color var(--transition);
}
.lc-faq summary::-webkit-details-marker { display: none; }
.lc-faq summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--primary-light);
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--transition);
}
.lc-faq details[open] summary { color: var(--highlight); }
.lc-faq details[open] summary::after { transform: rotate(45deg); }
.lc-faq__answer {
  padding: 0 24px 22px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lc-hero { padding: 60px 0 50px; }
  .news-grid.lc-grid-2 { grid-template-columns: 1fr !important; }
  .lc-statuses { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .news-grid.lc-grid-3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .lc-pills { gap: 10px; }
  .lc-pill { min-width: 100px; padding: 12px 16px; }
  .lc-pill__val { font-size: 26px; }
  .lc-faq summary { font-size: 16px; padding: 16px 20px; }
  .lc-faq__answer { padding: 0 20px 18px; }
}

/* ══════════════════════════════════════════════════════════════
   Auth modal (am-*) — light white theme matching shop design
   ══════════════════════════════════════════════════════════════ */

/* Modal container — размер и отступы */
#login,
#recovery {
  border-radius: 8px;
  padding: 36px 32px 32px !important;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Fancybox перебивает фон модала своим #fff — восстанавливаем тёмный */
#login.fancybox__content,
#recovery.fancybox__content {
  background: #16223a !important;
}

/* Чекбокс "Запомнить меня" — светлый текст на тёмном фоне */
#login .input__remember-me label {
  color: #f4f6fa !important;
}

/* Убираем огромный отступ сверху у ссылок под кнопкой */
#login .modal__form-links-container._auth {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Close button */
.am-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
  padding: 0;
  border-radius: 4px;
}
.am-close:hover { color: #1a1a1a; }

/* Title */
.am-title {
  font-family: 'Rodchenko', 'Play', sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 22px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Tabs */
.am-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.am-tab {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Play', sans-serif;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.am-tab:hover { border-color: #c8102e; color: #c8102e; }
.am-tab--active {
  background: #c8102e;
  border-color: #c8102e;
  color: #fff;
}

/* Field wrapper */
.am-field-wrap {
  margin-bottom: 14px;
}

/* Input */
.am-input {
  display: block;
  width: 100%;
  padding: 13px 16px;
  font-size: 14px;
  font-family: 'Play', sans-serif;
  color: #1a1a1a;
  background: #f4f5f7;
  border: 1.5px solid #f4f5f7;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.am-input::placeholder { color: #9a9a9a; }
.am-input:focus {
  border-color: #c8102e;
  background: #fff;
}
.am-input--otp {
  font-size: 20px;
  letter-spacing: 0.25em;
  text-align: center;
}

/* Input with icon */
.am-input-icon-wrap {
  position: relative;
}
.am-input-icon-wrap .am-input {
  padding-right: 46px;
}
.am-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.am-eye:hover { color: #1a1a1a; }

/* Error message */
.am-error {
  display: none;
  color: #c8102e;
  font-size: 12px;
  margin-top: -8px;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Remember me */
.am-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 18px;
}
.am-remember input[type="checkbox"] { display: none; }
.am-remember__box {
  width: 16px;
  height: 16px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  flex-shrink: 0;
  background: #fff;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}
.am-remember input:checked + .am-remember__box {
  background: #c8102e;
  border-color: #c8102e;
}
.am-remember input:checked + .am-remember__box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.am-remember__text {
  font-size: 13px;
  color: #555;
}

/* Primary button */
.am-btn-primary {
  display: block;
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Play', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #c8102e;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  text-align: center;
}
.am-btn-primary:hover { background: #a50d26; }
.am-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Divider */
.am-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #bbb;
  font-size: 12px;
}
.am-divider::before,
.am-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e8e8;
}

/* VK button */
.am-btn-vk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  background: #0077FF;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Play', sans-serif;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.am-btn-vk:hover { background: #0069e0; }

/* Links */
.am-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.am-link {
  font-size: 13px;
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.am-link:hover { color: #c8102e; }

/* SMS hint */
.am-hint {
  font-size: 13px;
  color: #666;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Resend button */
.am-resend {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s;
}
.am-resend:hover:not(:disabled) { color: #c8102e; }
.am-resend:disabled { color: #bbb; cursor: default; }

/* Success message */
.am-success {
  font-size: 14px;
  color: #1a9e52;
  line-height: 1.6;
  text-align: center;
  padding: 20px 0 10px;
}

/* VKID floating container */
#vkid-floating-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#vkid-floating-wrap > * { pointer-events: auto; }

/* ================================================================
   Bug fixes: 13, 12, 21
   ================================================================ */

/* Bug 13 — /changes/ player photos don't scale (rules were scoped to .tp-roster-grid) */
.composition__img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 133.33%;
  height: 0;
  overflow: hidden;
}
.composition__img-container {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.composition__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  max-width: none;
}


/* Detail-страницы (новость/видео/галерея/матч/легенда) — крошки выше,
   ближе к header. */
.detail .page-head._light,
.detail--gallery .page-head._light,
.detail--match .page-head._light {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.detail .page-head._light .page-head__breadcrumbs,
.detail--gallery .page-head._light .page-head__breadcrumbs,
.detail--match .page-head._light .page-head__breadcrumbs {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Все hero-баннеры на сайте: якорь по верху, чтобы голова на портретных
   фотографиях не обрезалась. Покрывает .player__page-banner,
   .worker__page-banner, .detail__page-banner, .reportage__page-banner,
   .match-detail__page-banner, .contacts__page-banner. */
.page-banner__img,
.page-banner__img-img {
  object-position: top center !important;
}

/* Профиль игрока — баннер выше, чтобы лучше видеть фотографию.
   Legacy main.css: 683px / 1025px (≥1200) / 1225px (≥1600).

   Заодно сдвигаем .player__banner-wrapper (имя+номер) и .player__info-wrapper
   (фото-карточка + статы) так, чтобы:
   1) wrapper с именем доходил до низа баннера (min-height = высоте баннера),
      имя смещено к низу через padding-bottom (40-80px от низа);
   2) info-wrapper начинался ровно на нижней кромке баннера (margin-top: 0),
      не перекрывая лицо игрока на бэкграунд-фото.
   В legacy у info-wrapper был отрицательный margin-top (-225/-55/-270), из-за
   чего фото-карточка наезжала на лицо. Перебиваем. */
.player__page-banner {
  height: 820px !important;
}
.player__banner-wrapper {
  min-height: 820px !important;
  padding-bottom: 40px !important;
}
.player__info-wrapper {
  margin-top: 0 !important;
}
@media (min-width: 1200px) {
  .player__page-banner {
    height: 1200px !important;
  }
  .player__banner-wrapper {
    min-height: 1200px !important;
    padding-bottom: 60px !important;
  }
}
@media (min-width: 1600px) {
  .player__page-banner {
    height: 1400px !important;
  }
  .player__banner-wrapper {
    min-height: 1400px !important;
    padding-bottom: 80px !important;
  }
}

/* Bug 21 — breadcrumbs: force visible, readable color and size */
.page-head .page-head__breadcrumbs,
.cover > .page-head__breadcrumbs,
.page-head__breadcrumbs {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 24px;
  font-family: 'Rodchenko', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  gap: 6px;
}
@media (max-width: 768px) {
  .page-head .page-head__breadcrumbs,
  .cover > .page-head__breadcrumbs,
  .page-head__breadcrumbs {
    font-size: 14px;
    line-height: 18px;
    gap: 4px;
  }
}
.page-head .page-head__link,
.page-head__link {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  transition: color 0.2s;
  margin: 0;
}
.page-head .page-head__link:hover,
.page-head__link:hover {
  color: #c8102e !important;   /* фирменный красный (как кнопка «Билеты») */
}
.page-head .page-head__last,
.page-head__last {
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0;
}


/* Bug #28/#29 — Calendar: day numbers invisible (white on light background) at wide breakpoints.
   Bitrix main.css sets upcoming__day-number to color:#f4f6fa!important in the calendar grid view
   at ≥1200px but the cell background is #ebeef3 (light grey) — white on white.
   Override with dark text; keep white only when cell is active (selected). */
.upcoming__day .upcoming__day-number {
  color: #0c1931 !important;
}
.upcoming__day.active .upcoming__day-number {
  color: #f4f6fa !important;
}
/* Ensure calendar links in cells have correct color.
   Видимость управляется main.css: display:none на мобилке, block на ≥768px.
   Раньше тут безусловный display:block ломал мобилку — точки-индикаторы
   уезжали в сторону, потому что chip-карточка матча видна в 47px ячейке. */
.upcoming__small-match,
.upcoming__small-event {
  text-decoration: none;
}


/* Bug #50 — Header shifts left when profile button is injected after login.
   The profile button has display:none initially. When shown it expands
   header__buttons. Reserve min-width so the header nav doesn't jump.
   At the desktop breakpoint where header__buttons is position:relative,
   add flex-shrink:0 and ensure no layout shift. */
#header-profile-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Длинные фамилии (например «ВЕНГРЫЖАНОВСКИЙ») раздвигали кнопку и
   выталкивали правые кнопки шапки (Магазин/Билеты) под лого. Ограничиваем
   ширину текста плашки + ellipsis. Бейдж с баллами позиционируется
   absolute, поэтому ширину не диктует. */
#header-profile-btn .btn__text {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.header__buttons {
  flex-shrink: 0;
}


/* Bug #51 / gorky #24 / chaika #7 — breadcrumbs white-on-white.
   body background is #f4f6fa (light grey). Bitrix main.css sets
   page-head__link to #f4f6fa at desktop breakpoint → invisible.
   The ._light modifier is used on dark-background (cover) pages where white is correct.
   For all other page-head (without ._light) — force dark readable text. */
.page-head:not(._light) .page-head__link {
  color: #0c1931 !important;
}
.page-head:not(._light) .page-head__last {
  color: #697181 !important;
}
.page-head:not(._light) .page-head__breadcrumbs {
  color: rgba(12, 25, 49, 0.7);
}
/* Hover всегда красный, последний крамб всегда серый — не зависит от темы */
.page-head .page-head__link:hover {
  color: #c8102e !important;
}
/* Light theme — white title and breadcrumbs on dark-background pages */
.page-head._light .page-head__title {
  color: #fff !important;
}
.page-head._light .page-head__link {
  color: rgba(255, 255, 255, 0.7) !important;
}
.page-head._light .page-head__last {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* KHL nav widget (#n_menu_bl) dropdowns were clipped because parent .wrapper has
   overflow:hidden. Allow overflow on the wrapper chain and lift dropdown z-index
   above the fixed .header__wrapper (z-index:1000). */
.wrapper,
.wrapper__content {
  overflow: visible !important;
}
.s_khl_menu_n_dropdown_menu,
.s_khl_menu_n_dropdown_menu_container {
  z-index: 1100 !important;
}

/* Logos for chaika (1254×850 wide) and gorky (11500×13088 tall) have different
   aspects than Torpedo (~0.66:1). main.css sets fixed width/height tuned for
   Torpedo — non-Torpedo logos either get squashed (without object-fit) or
   shrink to a tiny patch in the middle (with contain). Target each by src and
   give the SVG its own width/height while keeping the parent container
   positioning/scale from main.css. */
.header__logo-img,
.footer__logo,
.infobar__club-logo,
.infobar__abbreviated-logo {
  object-fit: contain;
}
/* Чайка/Горький — вписываем в ту же боксу что у Торпедо (53×80 / 86×129 / 109×165)
   с object-fit:contain, чтобы визуально выглядели одинакового размера.
   При этом стандартный translate(-53px,...) парента .header__logo продолжает
   работать, так как ширина бокса — как у Торпедо. */
.header__logo-img[src*="logo-chaika"],
.header__logo-img[src*="logo-gorky"] {
  object-fit: contain;
  /* width/height унаследуются от базового .header__logo-img (53×80 → 86×129 → 109×165) */
}

/* Home page media block — hover для карточек видео/фото (как в news cards).
   ВАЖНО: НЕ задавать display, оригинал .media__video — flex с align-items:flex-end
   (контент карточки прижат к низу), а .media__photo — block. */
.media__video,
.media__photo {
  position: relative;
  z-index: 1;
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s ease;
  will-change: transform;
}
.media__video:hover,
.media__photo:hover {
  z-index: 2;
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 18px 48px rgba(0, 32, 91, .22),
              0 4px 12px rgba(200, 16, 46, .12);
}
.media__video-img,
.media__photo-img {
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.media__video:hover .media__video-img,
.media__photo:hover .media__photo-img {
  transform: scale(1.06);
}
.media__video-btn {
  transition: background .2s ease, transform .2s cubic-bezier(.22,1,.36,1),
              box-shadow .2s ease;
}
.media__video:hover .media__video-btn {
  background: rgba(200, 16, 46, .9);
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(200, 16, 46, .55);
}
.media__video-title,
.media__photo-title {
  transition: color .2s ease;
}
/* Override: убираем красный цвет заголовков медиа при ховере
   (наш код и gorky main.css задавали #c8102e — убираем) */
.media__video:hover .media__video-title,
.media__video:active .media__video-title {
  color: #f4f6fa;
}
.media__photo:hover .media__photo-title,
.media__photo:active .media__photo-title {
  color: #f4f6fa !important;
}

/* ── Главная / Фотогалерея — layout как на оригинальном Bitrix:
      фото-контейнер фиксированной высоты, заголовок и дата НИЖЕ фото
      в нормальном потоке (тёмный текст на светлом фоне). */
.media__carousel._photo .media__photo {
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  text-decoration: none;
  color: #0c1931;
}
/* Обнуляем padding-top на слайде — main.css добавляет 16-44px для эффекта стопки */
.media__carousel._photo .media__slide {
  padding-top: 0 !important;
}
.media__carousel._photo .media__photo-container {
  position: relative !important;
  inset: auto !important;
  height: 208px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}
@media (min-width: 1024px) {
  .media__carousel._photo .media__photo-container {
    height: 230px !important;
  }
}
@media (min-width: 1200px) {
  .media__carousel._photo .media__photo-container {
    height: 257px !important;
  }
}
@media (min-width: 1600px) {
  .media__carousel._photo .media__photo-container {
    height: 340px !important;
  }
}
.media__carousel._photo .media__photo-item {
  position: absolute;
  inset: 0;
  transform: none !important;
}
.media__carousel._photo .media__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media__carousel._photo .media__photo::before,
.media__carousel._photo .media__photo::after {
  display: none !important;
}
/* Legacy main.css: .media__content { overflow: hidden } + .media__carousel._photo
   { margin: 0 -10px } → слайды выходят на 10px за границу .media__content и
   обрезаются. У первого/последнего слайда срезался первый/последний символ
   заголовка (например, «Т» в «Торпедо - Ак Барс»). На _inner-страницах
   overflow уже visible, а на главной — нет. Расширяем правило. */
section.media .media__content {
  overflow: visible !important;
}
/* Ховер на фото-карточку — без translateY/scale/shadow (как в news-блоке),
   только тонировка поверх фото. Перебиваем глобальный .media__photo:hover
   из media-block-выше. */
.media__carousel._photo .media__photo,
.media__carousel._photo .media__photo:hover {
  transform: none !important;
  box-shadow: none !important;
}
.media__carousel._photo .media__photo:hover .media__photo-img {
  transform: none !important;
}
.media__carousel._photo .media__photo-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #00205b;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  pointer-events: none;
}
.media__carousel._photo .media__photo:hover .media__photo-container::after {
  opacity: 0.35;
}
.media__carousel._photo .media__photo-content {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 10px 0 0 !important;
  margin: 0;
  z-index: auto !important;
  color: #0c1931;
}
.media__carousel._photo .media__photo-title {
  color: #0c1931 !important;
  margin: 0 0 4px;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-shadow: none;
}
.media__carousel._photo .media__photo-info,
.media__carousel._photo .media__photo-date {
  color: #9aa0a9 !important;
  margin: 0;
  font-family: 'Play', sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

/* ── Главная / Торпедо TV — карточки в том же стиле что и фотогалерея.
   Видео-карусель (без модификатора _photo) должна выглядеть идентично
   фото-карусели: 3 в ряд на десктопе, фото-фон, белый заголовок и
   дата поверх тёмного градиента. */
.media__carousel:not(._photo) .media__slide {
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .media__carousel:not(._photo) .media__slide {
    width: 316px !important;
  }
}
/* На десктопе Swiper сам обеспечивает 16px зазор (spaceBetween).
   Убираем CSS padding со слайдов чтобы избежать двойного spacing (28px вместо 16px). */
@media (min-width: 1200px) {
  .media__carousel .media__slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* «Популярные видео» на странице /video/<slug>/ — Swiper стоит с
   slidesPerView:'auto', которому нужны фиксированные пиксельные ширины,
   иначе legacy-правило width:33.33% ломает расчёт и слайды сжимаются в ряд
   без зазора. Принудительно фиксируем ширину + flex-shrink:0 чтобы свайп
   работал, а ширина карточек оставалась консистентной. */
#popular-videos .swiper-wrapper {
  display: flex !important;
}
#popular-videos .media__slide {
  width: 326px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
}
@media (min-width: 1024px) {
  #popular-videos .media__slide { width: 343px !important; }
}
@media (min-width: 1200px) {
  #popular-videos .media__slide { width: 380px !important; }
}
@media (min-width: 1600px) {
  #popular-videos .media__slide { width: 440px !important; }
}
@media (max-width: 767px) {
  #popular-videos .media__slide { width: 280px !important; }
}
.media__carousel:not(._photo) .media__video {
  display: block !important;
  position: relative;
  width: 100%;
  height: 223px !important;
  min-height: 223px;
  overflow: hidden;
  text-decoration: none;
  color: #f4f6fa;
  align-items: stretch !important;
  padding-top: 0 !important;
}
@media (min-width: 1024px) {
  .media__carousel:not(._photo) .media__video {
    height: 230px !important;
    min-height: 230px;
  }
}
@media (min-width: 1200px) {
  .media__carousel:not(._photo) .media__video {
    height: 257px !important;
    min-height: 257px;
  }
}
@media (min-width: 1600px) {
  .media__carousel:not(._photo) .media__video {
    height: 340px !important;
    min-height: 340px;
  }
}
.media__carousel:not(._photo) .media__video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.media__carousel:not(._photo) .media__video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media__carousel:not(._photo) .media__video::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Тёмный градиент под текстом: усиленная заливка для читаемости
     белого заголовка на светлых фото. ВАЖНО: legacy main.css на
     .media__video:before ставит transform: matrix(1,0,0,-1,0,0) —
     вертикальный flip. Без сброса наш `to top` инвертируется и тёмное
     уходит наверх. */
  transform: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.3) 65%,
    rgba(0, 0, 0, 0) 85%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity .25s ease;
}
.media__carousel:not(._photo) .media__video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #00205b;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .25s ease;
}
.media__carousel:not(._photo) .media__video:hover::after {
  opacity: 0.32;
}
.media__carousel:not(._photo) .media__video-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 18px 20px;
  margin: 0;
  z-index: 4;
  color: #f4f6fa;
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media__carousel:not(._photo) .media__video-info {
  width: 100% !important;
}
.media__carousel:not(._photo) .media__video-type {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
}
.media__carousel:not(._photo) .media__video-title {
  color: #f4f6fa !important;
  margin: 0 0 6px !important;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  max-width: none !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.7);
}
.media__carousel:not(._photo) .media__video-date {
  color: rgba(244, 246, 250, 0.85) !important;
  margin: 0 !important;
  font-family: 'Play', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0 !important;
}
.media__carousel:not(._photo) .media__video-sub-info {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.media__carousel:not(._photo) .media__video-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  position: relative;
}
.media__carousel:not(._photo) .media__video-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #f4f6fa;
}
.media__carousel:not(._photo) .media__video-time {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 7px;
  border-radius: 3px;
  color: #f4f6fa;
  font-family: 'Play', sans-serif;
}

/* ── Медиа / десктоп: убираем legacy 134px-зазор между секциями.
   main.css ставит margin-bottom:65px + padding-bottom:69px = 134px
   (было для Swiper-навигации), у нас скроллбар скрыт — дырки нет.
   Мобилка перебивается отдельным блоком ниже (≤767px). */
@media (min-width: 768px) {
  section.media .media__section {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  section.media .media__section:last-child {
    margin-bottom: 0;
    padding-bottom: 32px;
  }
}

/* Ссылки «Все новости / Все видео / Все альбомы» — красный hover.
   В main.css по умолчанию уже #c8102e, оставляем явно на случай других
   общих переопределений `a:hover`. */
.head-section__link:hover,
.head-section__link:active {
  color: #c8102e;
}
.head-section__link:hover:before,
.head-section__link:active:before {
  border-left-color: #c8102e;
}

/* На тёмном фоне `.media._inner` (страницы видео-плеера и галереи)
   legacy-цвет ссылки #003da5 сливается с фоном #041027 — делаем белой.
   Hover остаётся красным через общее правило выше. */
.media._inner .head-section__link {
  color: #fff;
}
.media._inner .head-section__link:before {
  border-left-color: #fff;
}

/* Sortable career stats table — индикаторы сортировки и crosshair-ховер. */
.player__full-stat-table.sortable thead th {
  position: relative;
  user-select: none;
  transition: color .15s ease, background .15s ease;
}
.player__full-stat-table.sortable thead th:not(.sorttable_nosort) {
  cursor: pointer;
  /* Без асимметричного padding-right: text-align: center в th и в td
     должны давать одинаковую визуальную колонку. Стрелку прижимаем
     к правому краю поверх padding. */
}
/* Скрываем встроенный индикатор sorttable. Библиотека при сортировке
   инжектит inline <span id="sorttable_sortfwdind"|"sorttable_sortrevind">
   прямо в <th> — текст из-за этого сдвигается. Рисуем только ::after. */
.player__full-stat-table.sortable thead th small,
.player__full-stat-table.sortable thead th img,
.player__full-stat-table.sortable thead th #sorttable_sortfwdind,
.player__full-stat-table.sortable thead th #sorttable_sortrevind,
.player__full-stat-table.sortable thead th [id^="sorttable_sort"] {
  display: none !important;
}
/* Стрелки сортировки — чистые SVG-chevron'ы (вверх + вниз).
   data-URI чтобы не плодить лишние файлы. currentColor наследует
   цвет от th (становится красным при hover/active). */
/* Стрелка сортировки — SVG double-chevron через mask-image; URL-encoded data
   URI чтобы Chrome корректно парсил спецсимволы. Прижата к правому краю
   ячейки поверх padding (текст th остаётся центрированным). */
.player__full-stat-table.sortable thead th:not(.sorttable_nosort)::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 12px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%2012%27%3E%3Cpath%20d%3D%27M4%200L0%204h8L4%200zM4%2012L0%208h8l-4%204z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%2012%27%3E%3Cpath%20d%3D%27M4%200L0%204h8L4%200zM4%2012L0%208h8l-4%204z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: .35;
  transition: opacity .15s ease, background-color .15s ease;
}
/* Active sort: одна стрелка ▲, красная. */
.player__full-stat-table.sortable thead th.sorttable_sorted::after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%206%27%3E%3Cpath%20d%3D%27M4%200L0%206h8L4%200z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%206%27%3E%3Cpath%20d%3D%27M4%200L0%206h8L4%200z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  background-color: #c8102e;
  opacity: 1;
}
.player__full-stat-table.sortable thead th.sorttable_sorted_reverse::after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%206%27%3E%3Cpath%20d%3D%27M4%206L0%200h8L4%206z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%206%27%3E%3Cpath%20d%3D%27M4%206L0%200h8L4%206z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  background-color: #c8102e;
  opacity: 1;
}
.player__full-stat-table.sortable thead th:not(.sorttable_nosort):hover     { color: #c8102e; }
.player__full-stat-table.sortable thead th:not(.sorttable_nosort):hover::after { opacity: 1; }

/* Crosshair-hover: строка + колонка подсвечиваются, конкретная ячейка — красным жирным */
.player__full-stat-table tbody tr,
.player__full-stat-table tbody td,
.player__full-stat-table thead th {
  transition: background .15s ease, color .15s ease;
}
.player__full-stat-table tbody tr:hover {
  background: rgba(200, 16, 46, .08);
}
.player__full-stat-table .col-hovered {
  background: rgba(200, 16, 46, .08);
}
.player__full-stat-table tbody td:hover {
  color: #c8102e;
  font-weight: 700;
}
.player__full-stat-table thead th.col-hovered {
  color: #c8102e;
}

/* На мобиле в карточке игрока 3 info-bar'a (Гражданство / Возраст / Контракт)
   слипаются — карточка узкая, значения 2026-05-31 не помещаются и переносятся
   на строку label'ов. Стэкаем info-bar'ы вертикально на узких экранах. */
@media (max-width: 600px) {
  .composition__info {
    flex-direction: column;
    align-items: stretch;
  }
  .composition__info-bar,
  .composition__info-bar:nth-child(1),
  .composition__info-bar:nth-child(2),
  .composition__info-bar:nth-child(3) {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px !important;
    border-bottom: 1px solid rgba(0, 32, 91, .08);
  }
  .composition__info-bar:last-child { border-bottom: none; }
  .composition__info-text-container + .composition__info-label {
    margin-top: 0 !important;
  }
  .composition__info-label {
    order: -1;
    text-align: left;
    flex: 0 0 auto;
  }
  .composition__info-text-container {
    flex: 0 0 auto;
    text-align: right;
  }
}

/* legacy `.composition__info{padding-top:23px}` обрезает 3-ю строку
   (контракт) в карточке игрока — уменьшаем зазор. */
.composition__info {
  padding-top: 10px;
}

/* /season/statistics/ на мобиле — таблица не свайпилась (overflow:hidden),
   и preview-карточки сверху налезали друг на друга. */
@media (max-width: 767px) {
  .stat,
  .stat._custom,
  .player__full-stat-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Расширяем за пределы .cover-padding-а, чтобы справа не было белой
     полосы — последний столбец упирается в правую кромку экрана. */
  .statistics__section .stat._custom {
    margin-right: -16px !important;
    padding-right: 0 !important;
  }
  .stat table {
    /* Сжаты до 540px — 6 столбцов влезают в 375px-экран, дальше пальцем
       свайп вправо. Auto-layout (default) — браузер балансирует ширины
     ячеек по содержимому, не ломая выравнивание. */
    min-width: 540px;
  }
  /* Шрифт заголовков столбцов чуть крупнее (12→14), компактные ячейки. */
  .stat table th,
  .stat table td {
    padding: 10px 4px !important;
    font-size: 12px !important;
  }
  .stat table thead th,
  .stat table thead th span {
    font-size: 14px !important;
    letter-spacing: 0.3px;
  }
  /* Фиксированная ширина столбца с именем — иначе при auto-layout он
     забирает слишком много места. Остальные числовые столбцы сжимаем. */
  .stat table th:nth-child(1),
  .stat table td:nth-child(1) { width: 36px; }
  .stat table th:nth-child(2),
  .stat table td:nth-child(2) { width: 140px; }
  .stat table th:nth-child(n+3),
  .stat table td:nth-child(n+3) { width: 44px; }
  /* Preview-блок «Лучшие игроки» — слайды с запасом под длинные фамилии */
  .statistics__slide,
  .swiper-slide.statistics__slide {
    width: 175px !important;
    padding: 0 4px !important;
  }
  /* Номер игрока — уменьшаем, освобождаем место для имени */
  .statistics__player-number {
    font-size: 32px !important;
    margin-top: 0 !important;
  }
  .statistics__player-name,
  .statistics__preview-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    padding-left: 6px !important;
  }
  /* span внутри имени (имя) — отдельная строка над фамилией */
  .statistics__player-name span {
    display: block !important;
    font-size: 13px !important;
  }
  /* Отступ content-блока */
  .statistics__player-content {
    padding-top: 10px !important;
  }
}
/* Номер игрока в leader-карточке (десктоп/планшет) — крупно, чтобы
   визуально соответствовать двум строкам имени. Шрифт Q10XTorpedo имеет
   большой внутренний padding, поэтому 60px смотрится сбалансированно
   (48px выглядел заметно меньше комбинированной высоты имя+фамилия). */
.statistics__player-number {
  font-size: 60px !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}
/* Заголовок секции «Лидеры среди …» (левая плитка) — выровнен по центру
   вертикали блока + крупный шрифт, чтобы соответствовать размеру карточек
   справа (легаси задавал 36px только на самом широком брейкпоинте). */
@media (min-width: 1024px) {
  .statistics__sub-title {
    align-items: center !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
}
@media (min-width: 1200px) {
  .statistics__sub-title {
    font-size: 36px !important;
  }
}
/* Отступ между карточками «Лучшие …» и таблицей.
   Раньше блок карточек сидел вплотную к заголовку таблицы, потом стало
   слишком много (32/48px) — уменьшили до 16/24px. */
.statistics__section .statistics__players-container {
  margin-bottom: 16px;
}
@media (min-width: 1200px) {
  .statistics__section .statistics__players-container {
    margin-bottom: 24px;
  }
}
/* Desktop / tablet: карусель «Лучших» рендерится Swiper-ом из legacy
   main.bundle.js с default slidesPerView:1 — показывался только один
   слайд во всю ширину. Принудительно отключаем translate-trансформ
   на .swiper-wrapper и делаем overflow:visible — слайды показываются
   в обычном flex-потоке (3 в ряд через width:33% из legacy CSS). */
@media (min-width: 768px) {
  .statistics__carousel {
    overflow: visible !important;
  }
  .statistics__carousel .swiper-wrapper,
  .statistics__carousel .statistics__carousel-wrapper {
    transform: none !important;
    transition: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .swiper-slide.statistics__slide {
    flex: 0 0 33.33333% !important;
    width: 33.33333% !important;
    max-width: 33.33333% !important;
  }
  /* Все карточки одинакового portrait-формата — иначе первая (полнокадровая
     фотка) получается выше, а остальные (только голова) — короткими/квадратными. */
  .statistics__player-img-wrapper {
    position: relative !important;
    aspect-ratio: 3/4 !important;
    overflow: hidden;
  }
  .statistics__player-img-wrapper::before {
    display: none !important;
  }
  .statistics__player-img-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .statistics__player-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* Карусель «Лучшие игроки» на мобиле:
   - Цифры остаются как overlay поверх фото (legacy markup), но прижаты к
     нижней кромке фото на тёмной полосе с градиентом — не закрывают лицо.
   - Карточки маленькие: 3 в ряд (по ~33vw) + peek от четвёртой справа,
     как на старом сайте. */
@media (max-width: 767px) {
  .swiper-slide.statistics__slide {
    width: 32vw !important;
    max-width: 32vw !important;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  /* Карусель «Лучших» в этом проекте НЕ инициализируется Swiper-ом —
     используем нативный horizontal scroll, чтобы 4+ карточек можно
     было скроллить вправо пальцем. Расширяем за пределы родительского
     .cover-padding-а, чтобы справа не было белой полосы. */
  .statistics__players-content {
    margin-right: -16px !important;
    padding-right: 0 !important;
  }
  .statistics__carousel {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .statistics__carousel::-webkit-scrollbar { display: none; }
  .statistics__carousel .statistics__carousel-wrapper,
  .statistics__carousel .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    width: max-content;
    gap: 6px;
    padding-right: 16px;     /* запас справа на последнюю карточку */
  }
  .statistics__player-img-wrapper {
    position: relative !important;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3/4;     /* единый portrait для всех карточек */
  }
  /* Убираем legacy :before с фикс. высотой 160px — он ломал высоту wrapper-а
     у первой/больших карточек. */
  .statistics__player-img-wrapper::before {
    display: none !important;
  }
  .statistics__player-img-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .statistics__player-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .statistics__player-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    display: flex !important;
    justify-content: space-around !important;
    gap: 2px;
    padding: 22px 4px 6px !important;
    background: linear-gradient(to bottom, rgba(8, 17, 41, 0) 0%, rgba(8, 17, 41, .85) 70%) !important;
    z-index: 3;
  }
  .statistics__player-info-column {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  .statistics__player-info-value {
    color: #f4f6fa !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700;
    white-space: nowrap;
  }
  .statistics__player-info-name {
    color: rgba(244, 246, 250, .85) !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
  }
}

/* Мобильное меню — отступы по бокам у пунктов */
@media (max-width: 767px) {
  .mobile-nav .mobile-nav__container,
  .mobile-nav.fancybox__content .mobile-nav__container,
  .fancybox__container .mobile-nav__container,
  .fancybox__container .mobile-nav__wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }
  .fancybox__container .mobile-nav__btn-list,
  .fancybox__container .mobile-nav-extras {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Спонсоры — лёгкий ховер на карточках партнёров */
.partners__item {
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              filter .25s ease;
  filter: grayscale(.15) brightness(.92);
}
.partners__item:hover {
  transform: translateY(-4px) scale(1.04);
  filter: grayscale(0) brightness(1.15);
}
.partners__logo-img {
  transition: filter .3s ease;
}
.partners__item:hover .partners__logo-img {
  filter: drop-shadow(0 6px 18px rgba(200, 16, 46, .35));
}
.partners__item-name {
  transition: color .2s ease;
}
.partners__item:hover .partners__item-name {
  color: #c8102e;
}

/* Smooth page fade-in to mask layout shift during initial load.
   ВАЖНО: только opacity, без transform. Любой non-none transform на body
   создаёт containing block для position:fixed-потомков, что ломает
   #mobile-nav: при скролле и нажатии хамбургера меню «улетает» к ТОПУ
   ДОКУМЕНТА (которым становится body), не к viewport. */
@keyframes tp-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: tp-page-fade-in 0.45s cubic-bezier(.22,1,.36,1) both;
}

/* ============================================================
   TEAMROSTER — mobile Swiper carousel (≤767px only)
   Card internals (img, name, footer) styled by Bitrix main.css automatically
   because JS renders 1:1 identical HTML structure as prod hctorpedo.ru.
   Desktop grid (.tp-roster-grid) is NOT touched here.
   ============================================================ */
@media (max-width: 767px) {
  /* ── STAFF (тренеры / персонал / правление / руководство): такой же
     горизонтальный свайпер с peek-эффектом, как у состава игроков. */
  .staff__list.swiper.js-staff-carousel {
    overflow: hidden;
    padding: 0 16px !important;
    margin: 0 -16px !important;
    display: block !important; /* перебиваем flex-wrap у legacy .staff__list */
    box-sizing: border-box;
  }
  .staff__list.swiper.js-staff-carousel .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
  }
  .swiper-slide.staff__item {
    width: 78vw !important;
    max-width: 78vw !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .staff__list.swiper .staff__item-container,
  .staff__list.swiper .staff__item-container:hover,
  .staff__list.swiper .staff__item-container:focus {
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
  }
  .staff__list.swiper .staff__item-container {
    -webkit-tap-highlight-color: transparent;
  }
  .staff__list.swiper .staff__item-container:active {
    transform: scale(0.985);
    transition: transform .12s ease;
  }

  /* Carousel container: bleed past cover padding so cards reach screen edges */
  .composition__list.swiper {
    overflow: hidden;
    padding: 0 16px;
    margin: 0 -16px;
  }

  /* Карточка во всю ширину экрана + peek соседа справа — как на
     старом сайте (показ одной полноценной карточки + подсказка про
     swipe вправо). Цель: фото + имя + блок гражданство/возраст/контракт
     помещаются в один экран при открытии страницы, без скролла. */
  .swiper-slide.composition__item {
    width: 78vw !important;
    max-width: 78vw !important;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  /* Фото — 5:6 (110% padding-top), компромисс между legacy 4:3 (слишком
     высокое) и 1:1 (слишком короткое). Блок «Гражданство/Возраст/
     Контракт» помещается в один экран, голова игрока не обрезается
     (object-position:top center). */
  .composition__list.swiper .composition__img-wrapper {
    padding-top: 110% !important;
  }
  /* Шрифты в инфо-блоке — крупнее, под полную ширину карточки */
  .composition__list.swiper .composition__info-text,
  .composition__list.swiper .composition__sub-info-text {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .composition__list.swiper .composition__info-label,
  .composition__list.swiper .composition__sub-info-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .composition__list.swiper .composition__number {
    font-size: 64px !important;
    line-height: 1 !important;
  }
  .composition__list.swiper .composition__item-name {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }
  .composition__list.swiper .composition__item-name span {
    font-size: 16px !important;
  }

  /* Шрифт Play для инфо-блока внутри мобильного свайпера (Гражданство/Возраст/Контракт + sub-info).
     Селектор .composition__list.swiper гарантирует отсутствие влияния на десктоп. */
  .composition__list.swiper .composition__info,
  .composition__list.swiper .composition__sub-info,
  .composition__list.swiper .composition__info-text,
  .composition__list.swiper .composition__info-label,
  .composition__list.swiper .composition__sub-info-text,
  .composition__list.swiper .composition__sub-info-label {
    font-family: 'Play', sans-serif !important;
  }

  /* ── Убрать обводки / тени / sticky-hover эффекты на мобиле ──
     Источники:
     - tp-animations.css: .composition__item-container:hover { box-shadow: ... } — sticky в Safari
     - main.css: .composition__item-container:before { box-shadow: ... } — белый overlay с тенью
       который при :active/:hover переходит в opacity:1 → выглядит как обводка
  */
  .composition__list.swiper .composition__item-container,
  .composition__list.swiper .composition__item-container:hover,
  .composition__list.swiper .composition__item-container:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    transform: none !important;
  }
  /* Убиваем псевдоэлемент с box-shadow из main.css (белый overlay при hover) */
  .composition__list.swiper .composition__item-container:before {
    display: none !important;
  }
  /* Убираем браузерный tap-highlight (синяя/серая подложка Safari/Chrome при тапе) */
  .composition__list.swiper .composition__item-container {
    -webkit-tap-highlight-color: transparent;
  }
  /* Убрать outline и border на img элементах */
  .composition__list.swiper .composition__img-wrapper,
  .composition__list.swiper .composition__img-container,
  .composition__list.swiper .composition__img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* ── Красивый эффект нажатия (tap feedback) ──
     Scale + brightness вместо box-shadow обводки.
     transition задан отдельно от reset выше чтобы не конфликтовать. */
  .composition__list.swiper .composition__item-container {
    transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 180ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .composition__list.swiper .composition__item-container:active {
    transform: scale(0.97) !important;
    filter: brightness(0.92);
    box-shadow: none !important;
  }

  /* ── Fade-in stagger для карточек при первом рендере ──
     tp-animations.css уже определяет @keyframes tp-roster-fadein и .composition__item._fadein.
     JS добавляет класс _fadein + animationDelay на каждый .swiper-slide.
     Переопределяем анимацию под мобиле с чуть большим вертикальным сдвигом. */
  .composition__list.swiper .swiper-slide.composition__item._fadein {
    animation: tp-roster-fadein 480ms cubic-bezier(.22,1,.36,1) both;
  }
}

/* Teamroster / player: скрыть хлебные крошки на мобиле */
@media (max-width: 767px) {
  .composition .page-head__breadcrumbs,
  .player .page-head__breadcrumbs {
    display: none !important;
  }
}

/* Footer .networks — единый Torpedo navy (#0c1931), как у мобильного меню и
   остальной части футера, без контрастной чёрной полоски. */
.networks { background: #0c1931 !important; }

/* Footer social networks: центрирование и убрать висящий разделитель */
@media (max-width: 767px) {
  .networks__list {
    justify-content: center;
  }
  .networks__network:last-child::before {
    display: none !important;
  }
}

/* Sticky header — CSS-only.
   <header class="header"> is a direct child of <body> on dev/dev-gorky/dev-chaika
   (no .wrapper{overflow:hidden} ancestor), so position:sticky works natively.
   Override main.css ._float rules that would make .header__wrapper position:fixed —
   body has transform from page fade-in animation, which breaks fixed positioning. */
header.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
}
/* Когда меню открыто, body имеет overflow:hidden, что ломает sticky
   у хедера. Переключаем header на position:fixed — он не зависит от
   overflow родителя. z-index выше mobile-nav (999), визуально хедер
   остаётся «частью меню» (хамбургер → крестик через JS). */
body.mobile-nav-open header.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* mobile-nav-extra.js ставит inline z-index:99999 на .mobile-nav —
     хедер должен лежать ПОВЕРХ него. */
  z-index: 100000 !important;
}
/* Меню начинается ПОД хедером — отступ под него inline-style на .mobile-nav
   перекрываем здесь (top:0 → top:var(--header-height)). */
body.mobile-nav-open #mobile-nav.mobile-nav.open {
  top: var(--header-height, 70px) !important;
  height: calc(100vh - var(--header-height, 70px)) !important;
  max-height: calc(100vh - var(--header-height, 70px)) !important;
}
.header._float .header__wrapper {
  position: static !important;
}
.header._float .header__plug {
  height: 0 !important;
}

/* Скрыть кнопку «Войти» в верхней чёрной панели (.panel) —
   авторизация теперь только через кнопку в основном хедере (#header-profile-btn).
   Скрываем и для гостя, и для авторизованного (updateHeaderForUser в auth.js
   уже делала display:none при логине — теперь скрываем сразу через CSS). */
.panel__link-auth-container {
  display: none !important;
}


/* ─── /fan_zone/away/ — список «Гостевые секторы на аренах команд КХЛ» ───
   Перешли с простого <p> списка на структурированный с логотипом команды
   (логотип подтягивает /js/away-sectors-loader.js из standings API). */
.away-sectors {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px 24px;
}
.away-sectors__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0;
  color: #fff;
  line-height: 1.25;
}
.away-sectors__logo-container {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.away-sectors__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.away-sectors__name {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  font-size: 1.4rem;
}
.away-sectors__sector {
  grid-column: 2;
  grid-row: 2;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  font-size: 1.2rem;
  text-align: left;
}
@media (max-width: 600px) {
  .away-sectors { grid-template-columns: 1fr; gap: 6px; }
  .away-sectors__item { padding: 8px 10px; column-gap: 10px; }
  .away-sectors__sector { white-space: normal; }
}

/* ─── /fan_zone/away/ — двухколоночный layout: секторы слева, форма справа ─── */

/* .away-layout — обёртка для секторов + формы, идёт после .skating__info-container */
.away-layout {
  display: block;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .away-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
  }
}
.away-layout__sectors {
  min-width: 0;
}
.away-layout__heading {
  font-family: 'Rodchenko', sans-serif;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 12px;
}
.away-layout > .away-sectors {
  margin: 0;
}
.away-layout > .away-register-block {
  margin: 0;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 1024px) {
  .away-layout__sectors {
    padding-top: 32px;
  }
  .away-layout__sectors > .away-sectors {
    margin-top: 12px;
  }
}

/* ─── /fan_zone/away/ — inline-форма «Записаться на выездной матч» ─── */
.away-register-block {
  margin: 40px auto 0;
  max-width: 860px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 40px 44px;
  color: #fff;
  font-family: 'Play', sans-serif;
}
/* Textarea placeholder должен всплывать так же, как в input — иначе налезает на текст */
.away-register-block textarea.field__input:focus ~ .field__placeholder,
.away-register-block textarea.field__input:not(:placeholder-shown) ~ .field__placeholder,
.away-register-block textarea.field__input.has-value ~ .field__placeholder {
  font-size: 10px !important;
  transform: translateY(-13px) !important;
}
/* Гарантируем что у textarea есть пустой placeholder атрибут, чтобы :placeholder-shown работал */
.away-register-block textarea.field__input { resize: vertical; min-height: 70px; }
.away-register-block .field,
.away-register-block .field__input,
.away-register-block .field__placeholder {
  font-family: 'Play', sans-serif;
}
.away-register-block .field__input {
  /* Совпадает по размеру/жирности с телефоном в .away-register-block__contacts
     (14px / 600) — пользователь просил визуально равнять введённые значения
     с подсветкой телефона над формой. */
  font-size: 14px !important;
  font-weight: 600 !important;
}
.away-register-block select.field__input {
  background-color: #212d43 !important;
  color: #f4f6fa !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23f4f6fa' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
}
.away-register-block select.field__input option {
  background-color: #212d43;
  color: #f4f6fa;
}
/* В двухколоночном layout (≥1024px) сбрасываем margin/max-width — размер задаёт грид */
@media (min-width: 1024px) {
  .away-layout > .away-register-block {
    margin: 0;
    max-width: none;
    padding: 32px 36px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .away-layout > .away-register-block form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .away-layout > .away-register-block .away-register-block__form {
    flex: 1 1 auto;
  }
}
.away-register-block__title {
  font-family: 'Play', sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 12px;
  color: #fff;
  line-height: 1.2;
}
.away-register-block__contacts {
  font-family: 'Play', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
}
.away-register-block__contacts a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  margin-right: 6px;
}
.away-register-block__contacts a:hover { text-decoration: underline; }
.away-register-block__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 20px;
}
/* В правой колонке away-layout форма в одну колонку */
@media (min-width: 1024px) {
  .away-layout > .away-register-block .away-register-block__form {
    grid-template-columns: 1fr;
  }
  .away-layout > .away-register-block .away-register-block__field._wide {
    grid-column: 1;
  }
}
.away-register-block__field._wide {
  grid-column: 1 / -1;
}
.away-register-block__btn {
  margin-top: 4px;
}
@media (max-width: 640px) {
  .away-register-block { padding: 20px 16px; }
  .away-register-block__form { grid-template-columns: 1fr; }
  .away-register-block__field._wide { grid-column: 1; }
  /* Шрифты на мобиле — base в .away-register-block в rem-ах, и при
     крупном базовом rem (~18-20px) заголовок превращается в ~35px.
     Прижимаем явными px, чтобы не зависеть от глобального base. */
  .away-register-block__title {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 10px;
  }
  .away-register-block__contacts {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 18px;
  }
  .away-register-block .field__input,
  .away-register-block select.field__input,
  .away-register-block textarea.field__input {
    /* Совпадает по размеру/жирности с телефоном в .away-register-block__contacts
       (14px / 600) — введённые значения визуально такого же размера. */
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  .away-register-block .field__placeholder {
    font-size: 13px !important;
  }
  .away-register-block .field__placeholder-top {
    font-size: 11px !important;
  }
  .away-register-block__btn .btn__text {
    font-size: 14px !important;
  }
}

/* ─── /fan_zone/away/ — фикс floating label для полей с принудительным -top ───
   .field__placeholder-top используется для полей у которых label должен
   всегда быть «всплывшим» (select с options, number с value, tel с маской).
   main.css не содержит этого класса — определяем здесь. */
.field__placeholder-top {
  font-size: 10px !important;
  transform: translateY(-13px) !important;
  -webkit-transform: translateY(-13px) !important;
}

/* ─── /fan_zone/away/ — стрелки swiper-галереи арены ───
   Кнопки prev/next вынесены из .swiper-контейнера в .arena__gallery-nav.
   Swiper всё равно применяет position:absolute + top:50% на .swiper-button-*
   через свой CSS — перебиваем позицию и убираем дефолтную иконку через шрифт. */
.arena__gallery-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arena__gallery-button.swiper-button-prev,
.arena__gallery-button.swiper-button-next {
  position: static !important;
  margin-top: 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}
.arena__gallery-button.swiper-button-prev::after,
.arena__gallery-button.swiper-button-next::after {
  content: '' !important;
  display: none !important;
}
.arena__gallery-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.arena__gallery-button:hover { opacity: 1; }
.arena__gallery-button.swiper-button-disabled { opacity: 0.3; cursor: default; }
.arena__gallery-button .arena__gallery-arrow {
  width: 14px;
  height: 14px;
  border-top: 3px solid #f4f6fa;
  border-right: 3px solid #f4f6fa;
}
.arena__gallery-button.swiper-button-prev .arena__gallery-arrow {
  transform: rotate(-135deg);
}
.arena__gallery-button.swiper-button-next .arena__gallery-arrow {
  transform: rotate(45deg);
}

/* ============================================================
   NEWS ARTICLE PAGE — body text font fix.
   Bitrix content (article.content HTML) can carry inline
   font-family:serif on <p> / <span> tags.  Override to keep
   the site-wide Play throughout the article body.
   ============================================================ */
#js-article-body,
#js-article-body * {
  font-family: 'Play', sans-serif !important;
}

/* ============================================================
   NEWS LIST PAGE — description and date font fix.
   Gorky/Bitrix CSS sets a different font on card text and dates.
   Force Play on all text elements inside news cards.
   ============================================================ */
.list-news__item-text,
.list-news__item-date,
.list-news__item-info,
.list-news__item-info-container,
.list-news__item,
.list-news__item * {
  font-family: 'Play', sans-serif !important;
}

/* ============================================================
   PLAYER/LEGEND PAGE — шрифт Play на всех текстовых элементах.
   Затрагивает:
   - .player__position  — подзаголовок позиции («Вратарь»)
   - .player__name      — имя игрока (уже Rodchenko через h1, оставляем)
   - .player__data-*    — таблица инфо (Дата рождения, Рост, Вес, …)
   - .player__brief-stat-* — краткая статистика в баннере
   - .player__full-stat-table — таблица карьеры (Сезон/Команда/Лига/ИГ/Г/А/О/ШМ/+/-)
   - .player__text      — текстовый биоблок игрока
   ============================================================ */
.player__data-name,
.player__data-value,
.player__data-value-text,
.player__data-item,
.player__text,
.player__full-stat-table tbody,
.player__full-stat-table tbody td {
  font-family: 'Play', sans-serif !important;
}

/* Заголовок «СТАТИСТИКА СЕЗОНА» и шапка таблицы — Rodchenko. */
.player__full-stat-title,
.player__full-stat-table thead,
.player__full-stat-table thead th,
.player__full-stat-table thead th span {
  font-family: 'Rodchenko', sans-serif !important;
}

/* Таблица: ровные ячейки, без сдвигов. Текстовые столбцы слева, числа по центру. */
.player__full-stat-table th,
.player__full-stat-table td {
  text-align: center;
  vertical-align: middle;
  padding: 12px 8px;
  white-space: nowrap;
}
.player__full-stat-table th:nth-child(1),
.player__full-stat-table th:nth-child(2),
.player__full-stat-table th:nth-child(3),
.player__full-stat-table td:nth-child(1),
.player__full-stat-table td:nth-child(2),
.player__full-stat-table td:nth-child(3) {
  text-align: left;
}

/* Mobile: компактные столбцы — Сезон + Команда полностью, Лига подглядывает
   справа как подсказка про horizontal swipe.
   КЛЮЧЕВОЕ: .player__full-stat-table в legacy HTML имеет width="100%" атрибут.
   Принудительно width:auto + min-width на таблицу + table-layout:fixed —
   только так колоночные min-width работают и таблица выходит за viewport. */
@media (max-width: 767px) {
  .player__full-stat-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Тонкий fade-маска справа намекает что справа ещё контент. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .player__full-stat-table {
    width: auto !important;
    min-width: 620px !important;
    table-layout: fixed;
  }
  .player__full-stat-table th,
  .player__full-stat-table td {
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
  /* Заголовки столбцов — крупнее и читаемее. */
  .player__full-stat-table thead th,
  .player__full-stat-table thead th span {
    font-size: 15px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.3px;
  }
  .player__full-stat-table th:nth-child(1),
  .player__full-stat-table td:nth-child(1) { min-width: 86px; width: 86px; }
  .player__full-stat-table th:nth-child(2),
  .player__full-stat-table td:nth-child(2) { min-width: 138px; width: 138px; }
  .player__full-stat-table th:nth-child(3),
  .player__full-stat-table td:nth-child(3) { min-width: 90px;  width: 90px;  }
  .player__full-stat-table th:nth-child(n+4),
  .player__full-stat-table td:nth-child(n+4) { min-width: 50px; width: 50px; }
}

/* Позиция, brief-stat значения И подписи — фирменный Rodchenko (uppercase). */
.player__position,
.player__brief-stat-value,
.player__brief-stat-name {
  font-family: 'Rodchenko', sans-serif !important;
  letter-spacing: 0.4px;
}

/* Brief-stat в карточке игрока на мобиле: 4 столбца не помещаются в ряд,
   поэтому даём горизонтальный скролл со snap'ом (как на странице
   статистики игроков). Без wrap'а — иначе legacy main.css ужимает
   подписи в 2 строки + 4-я колонка отрезается. */
@media (max-width: 767px) {
  .player__brief-stat {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -16px !important;
    padding: 17px 16px 18px !important;
  }
  .player__brief-stat::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .player__brief-stat .player__brief-stat-bar {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 110px;
    scroll-snap-align: start;
    padding: 0 14px !important;
    margin-bottom: 0 !important;
  }
}

/* Блок «Другие игроки» под таблицей карьеры — отступ сверху, чтобы заголовок
   не прижимался к последней строке статистики. */
.player .other-players {
  padding-top: 64px;
}
@media (max-width: 1023px) {
  .player .other-players { padding-top: 48px; }
}
@media (max-width: 767px) {
  .player .other-players { padding-top: 32px; }
}

/* Достижения — белый текст с плотным line-height (без курсива). */
.player__achievements {
  margin-top: 12px;
  color: #f4f6fa;
  font-family: 'Play', sans-serif;
  font-size: 13px;
  line-height: 1.25;
  max-width: 640px;
}

/* Имя и фамилия в баннере — небольшой отступ между строками (раньше
   были вплотную из-за прижатого line-height у .h1). */
.player__name br + * { display: inline; }
.player__banner-info .player__name {
  line-height: 1.05;
}
.player__banner-info .player__name br {
  display: block;
  content: '';
  margin-top: 6px;          /* зазор между ДЕНИС и КОСТИН */
}

/* Флаг страны рядом с гражданством. */
.player__flag-container {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}
.player__flag {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  display: block;
}

/* Хлебные крошки — шрифт Rodchenko (снимаем ошибочный Play-override).
   SVG-разделитель (_brassy-icon) — выравниваем по центру строки:
   bx_breadcrumb_N — это div, flex-item контейнера, нужно его схлопнуть
   чтобы не растягивал высоту и SVG не уезжал. */
.page-head__breadcrumbs > div[id^="bx_breadcrumb"] {
  display: flex;
  align-items: center;
}
.page-head__breadcrumbs .svgsprite._brassy-icon {
  display: inline-flex;
  align-self: flex-end;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-bottom: 2px;
}
@media (max-width: 768px) {
  .page-head__breadcrumbs .svgsprite._brassy-icon {
    width: 13px;
    height: 13px;
    margin-bottom: 1px;
  }
}

/* ============================================================
   /fan_zone/away/ — текстовый блок про гостевые билеты и
   список секторов .away-sectors.
   Контейнер .skating__info содержит параграфы без отдельных
   классов (raw HTML из Bitrix), покрываем всё содержимое.
   ============================================================ */
.skating__info,
.skating__info *,
.away-sectors__name,
.away-sectors__sector,
.away-sectors__item {
  font-family: 'Play', sans-serif !important;
}

/* ============================================================
   /season/tournament_tables/ — турнирная таблица.
   Структура: .table > .table__content > .table__section >
   .stat._flex > table.sortable > thead/tbody.
   Данные строк подгружаются JS-ом в tbody, классы не добавляются —
   целимся через .table__section и table.sortable.
   ============================================================ */
.table__section .table__title,
.table__section .stat,
.table__section table.sortable,
.table__section table.sortable * {
  font-family: 'Play', sans-serif !important;
}

/* Заголовки конференций («Западная конференция» / «Восточная конференция»)
   должны использовать Rodchenko. Правило выше (.table__section .table__title)
   принудительно ставит Play с !important — переопределяем более специфичным
   селектором с тем же весом, но расположенным позже в каскаде. */
.table__section .cover .table__title {
  font-family: 'Rodchenko', sans-serif !important;
}


/* ─── /season/match-detail.html — наш статик-шаблон детальной матча ───
   Главная CSS-сетка для match-progress уже в main.css, но там зависимости
   от Bitrix-разметки с svg-иконками. Здесь — минимальные правки чтобы события
   читались колонкой и текст не растягивался на всю ширину. */
.match-progress__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.match-progress__info {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 12px 16px;
}
.match-progress__info._success { border-left-color: #4caf50; }
.match-progress__info._danger  { border-left-color: #ff6b6b; }
.match-progress__info._warning { border-left-color: #ffb84d; }
.match-progress__detail-content {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: start;
}
.match-progress__detail-sub-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-progress__time-container { display: block; }
.match-progress__time {
  font-weight: 700;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.9);
}
.match-progress__detail-sub-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.match-progress__text {
  font-size: 1.3rem;
  line-height: 1.45;
  color: #fff;
}
.match-progress__text p { margin: 0; }
.match-progress__text b, .match-progress__text strong { font-weight: 700; }
.match-progress__text a { color: #4ea3ff; text-decoration: none; }
.match-progress__text a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .match-progress__detail-content { grid-template-columns: 80px 1fr; gap: 10px; }
  .match-progress__info { padding: 10px 12px; }
}

/* На мобиле (<600px) legacy main.css прячет первую колонку (`._first`)
   внутри секции `_first` (это было для случая «одна команда»). У нас в
   loader'е и Голы и Штрафы — две команды, обе колонки нужны. Возвращаем
   home-колонку на мобиле, без !important и без сдвига брейкпоинтов
   600+/768+/1200+ — там legacy уже даёт правильный двухколоночный layout
   с absolute-заголовком посередине. */
@media (max-width: 599px) {
  .match-detail__stat-section._first .match-detail__stat-column {
    width: 50%;
  }
  .match-detail__stat-section._first .match-detail__stat-column._first {
    display: block;
    padding-right: 10px;
  }
  .match-detail__stat-section._first .match-detail__stat-column._last {
    padding-left: 10px;
    text-align: left;
  }
  /* Legacy main.css: `.match-detail__stat-column._last .match-detail__stat-item:nth-child(odd) { text-align: left }`
     даёт чередование right/left у строк в гостевой колонке (1-я и 3-я слева,
     2-я справа). На мобиле это создавало «3:2 — Виноградов» с большим
     отступом — выглядело как ошибка вёрстки. Принудительно left для всех. */
  .match-detail__stat-section._first .match-detail__stat-column._last .match-detail__stat-item {
    text-align: left !important;
  }
}

/* ─── match-detail header tweaks ─── */
.match-detail__info-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.match-detail__info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.match-detail__info-description {
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 1.3rem;
}
.match-detail__info-date { margin-bottom: 4px; }

/* ─── match-detail header: компактная адаптация для всех узких экранов ───
   До 1100px логотипы прижаты к счёту, no-wrap. Чтобы логотипы стояли
   ровно на уровне скоробокса, выносим статус-бейдж и описание (дата/арена)
   из потока — info-content съёживается до размера .match-detail__check,
   и align-items: center корректно центрирует логотипы со скоробоксом. */
@media (max-width: 1100px) {
  .match-detail .match-detail__info-wrapper {
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 0 16px;
  }
  .match-detail .match-detail__info-wrapper .match-detail__info-content {
    position: relative !important;
    padding: 0 !important;
    width: auto !important;
  }
  /* «МАТЧ ЗАВЕРШЁН» — над скоробоксом, не влияет на высоту контейнера. */
  .match-detail .match-detail__info-wrapper .match-detail__check-success-status {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translate(-50%, -8px) !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  /* Дата + арена — под скоробоксом, тоже не влияет на высоту. */
  .match-detail .match-detail__info-wrapper .match-detail__info-description {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translate(-50%, 8px) !important;
    width: max-content !important;
    max-width: 90vw !important;
  }
  /* .match-detail__info-links (ВИДЕО / ТРАНСЛЯЦИЯ) идёт после wrapper'а
     в нормальном потоке — отодвигаем её ниже абсолютного описания. */
  .match-detail .match-detail__info-container .match-detail__info-links {
    margin-top: 80px !important;
  }
  /* Отступы container'а под выехавшее описание и кнопки. */
  .match-detail .match-detail__info-container {
    padding-top: 56px !important;
  }
  .match-detail .match-detail__info-wrapper .match-detail__club {
    flex: 0 0 auto !important;
    width: 140px !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }
  .match-detail .match-detail__info-wrapper .match-detail__club-logo-container {
    height: 140px !important;
    width: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .match-detail .match-detail__info-wrapper .match-detail__club-logo {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .match-detail .match-detail__info-wrapper .match-detail__info-block {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  .match-detail .match-detail__info-description {
    text-align: center !important;
    font-size: 1.3rem !important;
  }
}
@media (max-width: 768px) {
  .match-detail .match-detail__info-wrapper { gap: 8px !important; padding: 0 8px; }
  .match-detail .match-detail__info-wrapper .match-detail__club { width: 88px !important; }
  .match-detail .match-detail__info-wrapper .match-detail__club-logo-container {
    height: 88px !important;
    width: 88px !important;
  }
  .match-detail .match-detail__info-description { font-size: 1.1rem !important; }
}
@media (max-width: 480px) {
  .match-detail .match-detail__info-wrapper { gap: 4px !important; padding: 0 4px; }
  .match-detail .match-detail__info-wrapper .match-detail__club { width: 64px !important; }
  .match-detail .match-detail__info-wrapper .match-detail__club-logo-container {
    height: 64px !important;
    width: 64px !important;
  }
}

/* ============================================================
   /partners/ — подписи типа партнёрства под логотипами.
   Структура: .partners__item > .partners__logo + .partners__item-name.
   Целимся только в текстовую подпись, не затрагивая <img> логотипов.
   ============================================================ */
.partners__item-name {
  font-family: 'Play', sans-serif !important;
}


/* ─── /season/match-detail.html — секции «Голы» и «Штрафы» ─── */
.match-stat {
  max-width: 980px;
  margin: 24px auto 0;
  padding: 0 16px;
}
.match-stat__title {
  color: #fff;
  margin: 0 0 12px;
}
.match-stat__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-stat__row {
  display: grid;
  grid-template-columns: 60px 120px 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 1.3rem;
  color: #fff;
}
.match-stat__time {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.match-stat__team {
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.match-stat__player { font-weight: 600; }
.match-stat__assists {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.2rem;
}
.match-stat__score {
  font-weight: 700;
  color: #4caf50;
  white-space: nowrap;
}
.match-stat__minutes {
  font-weight: 700;
  color: #ff6b6b;
  white-space: nowrap;
}
.match-stat__reason {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.2rem;
}
@media (max-width: 600px) {
  .match-stat__row {
    grid-template-columns: 50px 1fr auto;
    grid-template-areas:
      'time team score'
      'time player score'
      '. assists assists'
      '. reason reason';
    row-gap: 2px;
  }
  .match-stat__time { grid-area: time; }
  .match-stat__team { grid-area: team; }
  .match-stat__player { grid-area: player; }
  .match-stat__assists { grid-area: assists; }
  .match-stat__score, .match-stat__minutes { grid-area: score; text-align: right; }
  .match-stat__reason { grid-area: reason; }
}


/* ─── match-detail: счёт по периодам ─── */
.match-detail__periods {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.match-detail__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
}
.match-detail__period b {
  font-size: 1.5rem;
  font-weight: 700;
}
.match-detail__period i {
  font-style: normal;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── match-news: статья новости под матчем (как на проде) ─── */
.match-news {
  margin: 48px 0 0;
}
.match-news__cover {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}
.match-news__article {
  display: block;
  background: #fff;
  padding: 40px 56px 32px;
  color: #0c1931;
  margin-top: 24px;
}
.match-news__article:first-child { margin-top: 0; }
.match-news__article-title {
  text-align: center;
  margin: 0 0 24px;
  color: #0c1931;
  letter-spacing: 0.5px;
  font-size: 3rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.match-news__article-lead {
  margin: 0 0 28px;
  font-size: 1.6rem;
  line-height: 1.55;
  color: #0c1931;
  text-align: justify;
}
.match-news__article-picture {
  display: block;
  margin: 0 0 24px;
}
.match-news__article-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Размеры — близко к проду (.text* в main.css). */
.match-news__article-body {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #0c1931;
  text-align: justify;
}
.match-news__article-body p { margin: 0 0 16px; }
.match-news__article-body p:last-child { margin-bottom: 0; }
.match-news__article-body img,
.match-news__article-body picture {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
}
.match-news__article-body .text__main {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 24px;
}
.match-news__article-body h2,
.match-news__article-body h3,
.match-news__article-body h4 {
  color: #0c1931;
  margin: 24px 0 12px;
}
.match-news__article-body a {
  color: #c8102e;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .match-news__article { padding: 24px 18px 18px; }
  .match-news__article-title { font-size: 2.2rem; }
  .match-news__article-lead { font-size: 1.4rem; }
  .match-news__article-body { font-size: 1.3rem; }
  .match-news__article-body .text__main { font-size: 1.4rem; }
}

/* ============================================================
   /news/<slug>/ — деталка новости: описание и дата публикации.
   .text-content__info — lead-параграф (аннотация) под заголовком.
   .detail__date       — дата публикации (формат ДД.ММ.ГГГГ).
   .detail__time       — время публикации рядом с датой.
   H1.detail__title намеренно НЕ включён — у него свой шрифт.
   ============================================================ */
.text-content__info,
.detail__date,
.detail__time {
  font-family: 'Play', sans-serif !important;
}

/* ─── match-detail: видео-обзор ─── */
.match-video {
  max-width: 980px;
  margin: 24px auto 0;
  padding: 0 16px;
}
.match-video__title { color: #fff; margin: 0 0 12px; }
.match-video__player {
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  overflow: hidden;
}
.match-video__player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.match-video__caption {
  margin-top: 10px;
  font-size: 1.25rem;
  color: rgba(255,255,255,0.7);
}

/* ─── match-detail: судьи ─── */
.match-persons {
  max-width: 980px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.match-persons__title { color: #fff; margin: 0 0 12px; }
.match-persons__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.match-persons__col {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 12px 16px;
}
.match-persons__sub-title {
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.match-persons__list { list-style: none; padding: 0; margin: 0; }
.match-persons__item {
  font-size: 1.3rem; color: #fff; padding: 4px 0;
}

/* ─── match-detail: составы ─── */
.match-lineup {
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.match-lineup__title { color: #fff; margin: 0 0 12px; }
.match-lineup__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.match-lineup__team {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 14px 16px;
}
.match-lineup__team-name { color: #fff; margin: 0 0 10px; }
.match-lineup__group { margin-bottom: 12px; }
.match-lineup__group:last-child { margin-bottom: 0; }
.match-lineup__group-title {
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.match-lineup__players { list-style: none; padding: 0; margin: 0; }
.match-lineup__player {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0;
  font-size: 1.3rem; color: #fff;
}
.match-lineup__num {
  display: inline-block;
  min-width: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.match-lineup__captain {
  display: inline-block;
  width: 18px; height: 18px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  background: #c8102e;
  color: #fff;
  border-radius: 3px;
  line-height: 18px;
}

/* ============================================================
   ГЛАВНАЯ СТРАНИЦА — блок «Новости» (section.news)
   .news__item-text  — описание/lead-параграф под заголовком карточки.
   .news__item-date  — дата публикации.
   Намеренно НЕ включены:
     .news__item-title  (H6 — заголовок карточки, Rodchenko)
     .news__item-type   (бейдж «ПЛЕЙОФФ»/«ИНТЕРВЬЮ», Rodchenko)
   ============================================================ */
.news__item-text,
.news__item-date {
  font-family: 'Play', sans-serif !important;
}

/* ============================================================
   ГЛАВНАЯ СТРАНИЦА — featured-карточка (big container) в блоке «Новости».
   Гарантируем Rodchenko !important для заголовка и рубрики —
   перебиваем любые сторонние Play-правила.
   Фикс обрезки заголовка: при font-size 48px на 960-1100px
   длинные слова уходят за правую границу overlay; принудительный
   перенос через overflow-wrap + word-break исправляет это.
   ============================================================ */
.news__big-container .news__item-title {
  font-family: 'Rodchenko', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.news__big-container .news__item-type {
  font-family: 'Rodchenko', sans-serif !important;
}

/* ============================================================
   Шрифт Play на текстовых элементах:
   - верхняя панель (ТОРПЕДО / ТОРПЕДО-ГОРЬКИЙ / ЧАЙКА / ШКОЛА)
   - вся страница матча /season/matches/{type}/{slug}/
   ============================================================ */
.panel__link,
.panel__link * {
  font-family: 'Play', sans-serif !important;
}

.match-detail,
.match-detail * {
  font-family: 'Play', sans-serif !important;
}
/* Breadcrumbs sit inside `.match-detail` on this page but must keep the
   site-wide Rodchenko styling. The broad `.match-detail *` Play rule
   above would otherwise force Play onto them. */
.match-detail .page-head__breadcrumbs,
.match-detail .page-head__breadcrumbs *,
.match-detail .page-head__breadcrumbs a,
.match-detail .page-head__breadcrumbs span {
  font-family: 'Rodchenko', sans-serif !important;
}
/* match-news рендерится внутри .match-detail (вставляется afterend
   #js-match-detail). Откатываем Play-override и возвращаем нативную
   типографику .text / .text__person из main.css. */
.match-detail .match-news,
.match-detail .match-news * {
  font-family: 'Play', sans-serif !important;
}
/* Заголовок статьи + имя автора цитаты — Rodchenko (как на проде).
   Высокая специфичность чтобы перебить .match-detail * { Play !important }. */
.match-detail .match-news article.match-news__article h2.match-news__article-title,
.match-detail .match-news article.match-news__article .text__person-name,
.match-detail .match-news article.match-news__article .text__person-name *,
.match-detail .match-news article.match-news__article span.text__person-name {
  font-family: 'Rodchenko', sans-serif !important;
}

/* ============================================================
   Главная — виджет «Турнирная таблица» (#homest-body.standings).
   Покрываем заголовок, табы, шапку таблицы, имена клубов,
   числа очков и игр, кнопку.
   ============================================================ */
#homest-body .standings__nav-link,
#homest-body .standings__cell-name,
#homest-body .standings__cell-name-item,
#homest-body .standings__cell-name-item span,
#homest-body .standings__club-name,
#homest-body .standings__position,
#homest-body .standings__info-value {
  font-family: 'Play', sans-serif !important;
}

#homest-body .standings__title,
#homest-body .standings__btn,
#homest-body .standings__btn .btn__text {
  font-family: 'Rodchenko', sans-serif !important;
}

/* ============================================================
   Карточка матча (главная, «Предыдущий матч»):
   — дата/время «17 Апреля, Птн, 17:00» → Play
   — статус «ОВЕРТАЙМ» / «БУЛЛИТЫ» (.match__periods) → Rodchenko
   Счёт (.match__check-number) уже Rodchenko — не трогаем.
   ============================================================ */
.match__date {
  font-family: 'Play', sans-serif !important;
}

.match__periods {
  font-family: 'Rodchenko', sans-serif !important;
}


/* ─── match-detail: кликабельные карточки игроков (lineup + compound) ─── */
.match-detail__person-player-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
li.match-detail__person-player {
  transition: background 0.15s, transform 0.15s;
  border-radius: 4px;
  cursor: pointer;
}
li.match-detail__person-player:has(a.match-detail__person-player-link:hover),
li.match-detail__person-player:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

a.match-detail__compound-player {
  text-decoration: none;
  color: inherit;
  display: block;
  /* Не двигаем карточку — main.css позиционирует через :nth-of-type,
     любой transform ломает раскладку на льду. Только цвет имени меняем. */
}
a.match-detail__compound-player .match-detail__compound-player-name,
a.match-detail__compound-player .match-detail__compound-player-name * {
  transition: color 0.15s;
}
a.match-detail__compound-player .match-detail__compound-player-number {
  transition: color 0.15s;
}
a.match-detail__compound-player:hover .match-detail__compound-player-name,
a.match-detail__compound-player:hover .match-detail__compound-player-name *,
a.match-detail__compound-player:hover .match-detail__compound-player-number {
  color: #c8102e !important;
}
a.match-detail__person-player-link {
  transition: color 0.15s;
}
a.match-detail__person-player-link .match-detail__person-player-number {
  transition: color 0.15s;
}
a.match-detail__person-player-link:hover .match-detail__person-player-name,
a.match-detail__person-player-link:hover .match-detail__person-player-name *,
a.match-detail__person-player-link:hover .match-detail__person-player-number {
  color: #c8102e !important;
}

/* Судьи: lite hover + ссылка на профиль khl.ru (target=_blank). */
li.match-detail__person {
  transition: background 0.15s;
  border-radius: 4px;
}
li.match-detail__person:hover {
  background: rgba(255, 255, 255, 0.04);
}
.match-detail__person-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
li.match-detail__person:has(.match-detail__person-link:hover) .match-detail__person-name,
.match-detail__person-link:hover .match-detail__person-name {
  color: #c8102e !important;
}

/* Имена/фамилии игроков на расстановке и в списке составов — Rodchenko, чуть крупнее.
   Перекрывает универсальный `.match-detail *` Play-override; номера остаются Play. */
.match-detail__compound-player-name,
.match-detail__compound-player-name *,
.match-detail__person-player-name,
.match-detail__person-player-name * {
  font-family: 'Rodchenko', sans-serif !important;
}
.match-detail__compound-player-name {
  font-size: 1.2rem !important;
  line-height: 1.12 !important;
}
.match-detail__person-player-name {
  font-size: 1.4rem !important;
}
@media (max-width: 1100px) {
  .match-detail__compound-player-name { font-size: 1.05rem !important; }
}
@media (max-width: 768px) {
  .match-detail__compound-player-name { font-size: 0.95rem !important; }
}

/* Номера игроков — Q10XTorpedo (фирменный шрифт хоккейных номеров на джерси).
   @font-face объявлен в main.css. Перекрываем универсальный `.match-detail *`. */
.match-detail__compound-player-number,
.match-detail__person-player-number {
  font-family: 'Q10XTorpedo', sans-serif !important;
}
.match-detail__compound-player-number {
  font-size: 2.1rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  /* В левом-верхнем углу карточки, поверх фото — фирменный тёмно-синий. */
  position: absolute !important;
  top: 0 !important;
  left: 2px !important;
  z-index: 3 !important;
  color: #00205b !important;
  text-shadow: none;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .match-detail__compound-player-number { font-size: 1.8rem !important; }
}
@media (max-width: 768px) {
  .match-detail__compound-player-number { font-size: 1.5rem !important; }
}
/* При hover на карточке номер тоже окрашивается красным (см. правило выше)
   — нужно отменить компонентный text-shadow и оставить только color. */
.match-detail__person-player-number {
  font-size: 2.4rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* Состав команды «Торпедо» — сетка 4 колонки на ряд + крупные карточки.
   В main.css sub-columns укладываются в один ряд через flex без переноса —
   при 6+ группах (4 пятёрки + 2 вратаря) текст становится мелким и сжатым.
   Жёстко переопределяем в grid 4×N. */
.match-detail__persons-section .match-detail__persons-column {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px 32px !important;
  width: 100% !important;
  padding: 0 22px !important;
  margin-top: 32px !important;
}
.match-detail__persons-section .match-detail__persons-sub-column {
  width: auto !important;
  flex: none !important;
  min-width: 0 !important;
}
.match-detail__persons-section .match-detail__persons-sub-column:first-child,
.match-detail__persons-section .match-detail__persons-sub-column:last-child {
  width: auto !important;
}
.match-detail__persons-section .match-detail__persons-players-list {
  padding-right: 0 !important;
}
.match-detail__persons-section .match-detail__person-player {
  margin-top: 22px !important;
}
.match-detail__persons-section .match-detail__person-player-picture {
  width: 60px !important;
  height: 60px !important;
}
.match-detail__persons-section .match-detail__person-player-number {
  width: 56px !important;
  font-size: 3rem !important;
}
.match-detail__persons-section .match-detail__person-player-name {
  font-size: 1.8rem !important;
  line-height: 1.25 !important;
  padding-left: 16px !important;
}
.match-detail__persons-section .match-detail__persons-sub-title {
  font-size: 1.7rem !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 24px !important;
}
/* Судьи — те же стили (номер + имя), что и у игроков, но без фото. */
.match-detail__persons-section .match-detail__person {
  margin-top: 22px !important;
  display: flex !important;
  align-items: center !important;
}
.match-detail__persons-section .match-detail__person-number {
  width: 56px !important;
  flex: 0 0 auto !important;
  font-family: 'Q10XTorpedo', sans-serif !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  color: #f4f6fa !important;
}
.match-detail__persons-section .match-detail__person-name {
  font-family: 'Rodchenko', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #f4f6fa !important;
  padding-left: 16px !important;
}
/* Судьи и составы — горизонтальный скролл со snap на всех узких экранах
   ≤1100px (как «Расстановка пятёрок»). На десктопе остаётся 4-кол. grid.
   Скроллбар спрятан — swipe жестом, без визуального бара. */
@media (max-width: 1100px) {
  .match-detail__persons-section .match-detail__persons-column {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    gap: 16px !important;
    padding: 0 16px 12px !important;
    margin-top: 24px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .match-detail__persons-section .match-detail__persons-column::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  .match-detail__persons-section .match-detail__persons-sub-column {
    flex: 0 0 60% !important;
    scroll-snap-align: start;
    min-width: 0 !important;
    padding: 0 !important;
  }
  /* Заголовок раздела внутри карточки — гарантированно Rodchenko,
     перебиваем .match-detail * { Play !important }. */
  .match-detail .match-detail__persons-section .match-detail__persons-sub-column h6.match-detail__persons-sub-title {
    font-family: 'Rodchenko', sans-serif !important;
    text-decoration: none !important;
    border: 0 !important;
  }
}
@media (max-width: 768px) {
  .match-detail__persons-section .match-detail__persons-sub-column {
    flex: 0 0 82% !important;
    padding: 0 !important;
  }
}

/* Полоска-разделитель под заголовком sub-column (ГЛАВНЫЕ СУДЬИ /
   ПЕРВАЯ ПЯТЁРКА и т.п.). На широком десктопе её рисует legacy
   .match-detail__persons-column:before, но он растягивается на всю
   колонку. Нам нужна полоска под каждым sub-title — рисуем её
   через border-bottom прямо на заголовке. */
.match-detail__persons-section .match-detail__persons-sub-title {
  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
}

/* Заголовок секции «Состав команды «Торпедо»» (h4) должен быть НЕ
   МЕНЬШЕ чем подзаголовки пятёрок (h6, 20px на мобиле / 32px на десктопе).
   Legacy mobile = 22px — недостаточно, бледнеет на фоне sub-title. */
.match-detail__persons-section .match-detail__persons-title {
  font-size: 28px !important;
  line-height: 1.15 !important;
  margin-bottom: 24px !important;
}
@media (min-width: 1200px) {
  .match-detail__persons-section .match-detail__persons-title {
    font-size: 40px !important;
    margin-bottom: 36px !important;
  }
}

/* Имена игроков в списке пятёрок — только фамилия (lastNameOf
   в match-detail-loader.js). 24px, без жирности. */
.match-detail__persons-section .match-detail__person-player-name {
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Плашка на ледовой расстановке — фамилию центрируем, без жирности.
   Legacy mob 10px — слишком мелко; теперь только фамилия (без имени)
   → 14px моб / 17px десктоп. */
.match-detail__compound-player-name {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}
.match-detail__compound-player-content {
  justify-content: center !important;
}
@media (min-width: 1200px) {
  .match-detail__compound-player-name {
    font-size: 17px !important;
  }
}

/* Блок вратарей под слайдером с пятёрками. Без горизонтального скролла —
   занимает ширину секции, sub-column становится «прижатым» к левому краю. */
.match-detail__persons-section .match-detail__persons-goalies {
  margin-top: 28px;
}
.match-detail__persons-section .match-detail__persons-goalies .match-detail__persons-column {
  display: block;
}
.match-detail__persons-section .match-detail__persons-goalies .match-detail__persons-sub-column {
  width: 100%;
  padding-right: 0;
}

/* Дубликат полоски над пятёркой: legacy main.css рисует свою через
   .match-detail__persons-column:before. Мы уже рисуем border-bottom
   под каждым sub-title (см. правило выше) — скрываем legacy-вариант. */
.match-detail__persons-section .match-detail__persons-column::before {
  display: none !important;
}

/* Шапка матча: название команд, счёт, статус, овертайм, заголовок «Голы»
   — Rodchenko (универсальный `.match-detail *` Play-override перекрывается).
   Также «Видео» / «Трансляция» под счётом — info-link. */
.match-detail__club-name,
.match-detail__club-name *,
.match-detail__check-number,
.match-detail__check-sub-info,
.match-detail__check-success-status,
.match-detail__stat-title,
.match-detail__persons-title,
.match-detail__persons-sub-title,
.match-detail__compound-title,
.match-detail__compound-nav-link,
.match-detail__text-title,
.match-detail__info-link {
  font-family: 'Rodchenko', sans-serif !important;
}

/* Compound-nav-wrapper тоже скроллится горизонтально (см. main.css) —
   прячем визуальный scrollbar. */
.match-detail__compound-nav-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.match-detail__compound-nav-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Compound nav: подсветка активной пятёрки белым подчёркиванием.
   main.css раскрашивает ВСЕ ссылки в #f4f6fa с border-bottom — нужно ограничить
   эту подсветку только `._active` пункту. */
.match-detail__compound-nav-link {
  border-bottom: 2px solid transparent !important;
  color: #b1bdd0 !important;
  padding-bottom: 8px !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.match-detail__compound-nav-link:hover {
  color: #f4f6fa !important;
}
.match-detail__compound-nav-item._active .match-detail__compound-nav-link {
  color: #f4f6fa !important;
  border-bottom-color: #f4f6fa !important;
}

/* Page-banner без картинки — синий вертикальный градиент (фейд).
   :before из main.css прокрашивает в #010916 — снимаем, чтобы был виден градиент. */
.page-banner._no-img {
  display: block !important;
  /* Финальный стоп = фон .match-detail (#041027) — плавный переход. */
  background: linear-gradient(180deg,
    #0a2761 0%,
    #061a44 30%,
    #052046 65%,
    #041027 100%
  ) !important;
}
.page-banner._no-img:before,
.page-banner._no-img:after {
  display: none !important;
}

/* Сглаживаем верхнюю и нижнюю границы синего overlay-тинта на странице
   матча. Legacy `.match-detail .page-banner__img-container:before` красит
   сплошной `rgba(0,24,68, 0.8)` от 0% до 100% высоты — это даёт резкие
   горизонтальные углы там, где overlay начинается (под хедером) и
   заканчивается (под счётом). Переводим бэкграунд в вертикальный
   linear-gradient: transparent → solid → solid → transparent, чтобы
   синий тинт плавно появлялся сверху и исчезал снизу. */
.match-detail .page-banner__img-container::before {
  background: linear-gradient(
    180deg,
    rgba(0, 24, 68, 0) 0%,
    rgba(0, 24, 68, 0.8) 22%,
    rgba(0, 24, 68, 0.8) 70%,
    rgba(0, 24, 68, 0) 100%
  ) !important;
  opacity: 1 !important;
}

/* cover остаётся относительным для своих абсолютных детей (картинка
   рамки счёта и т.д.). Никаких декоративных pseudo-element overlay'ев
   на cover'е — иначе на широком экране они рисуют прямоугольную
   плашку поверх overlay'я picture-container. */
.match-detail .match-detail__cover {
  position: relative;
}
.match-detail .match-detail__cover > * { position: relative; z-index: 1; }

/* Крупные логотипы команд в шапке. В main.css прогрессия 78/160/188/285px,
   но на нашей странице большой брейкпоинт срабатывает не везде — форсируем. */
@media (min-width: 901px) {
  .match-detail__info-wrapper .match-detail__club {
    width: 260px !important;
  }
  .match-detail__info-wrapper .match-detail__club-logo-container {
    height: 220px !important;
  }
}
@media (min-width: 1200px) {
  .match-detail__info-wrapper .match-detail__club {
    width: 300px !important;
  }
  .match-detail__info-wrapper .match-detail__club-logo-container {
    height: 260px !important;
  }
}

/* ============================================================
   FOOTER: все не-заголовочные тексты — Play (v69)
   Rodchenko сохраняем на: логотип, заголовки колонок,
   переключатель языков, кнопки (.btn).
   ============================================================ */
.footer,
.footer a,
.footer p,
.footer div,
.footer span,
.footer li,
.footer ul,
.footer input,
.footer label {
  font-family: 'Play', sans-serif !important;
}

/* Возвращаем Rodchenko там, где он должен быть.
   Специфичность (0,2,0) / (0,2,1) — выше чем .footer div (0,1,1) и .footer a (0,1,1). */
.footer .footer__logo-label,
.footer .footer__nav-title-link,
.footer h6.footer__subscription-title,
.footer .btn.footer__btn,
.footer .btn.subscription__btn,
.footer .btn__text,
.footer .btn__arrow,
.footer .langs .langs__item,
.footer .langs .langs__name {
  font-family: 'Rodchenko', sans-serif !important;
}

/* Мобильная адаптация footer__info — на мобиле подписка и btn-list в одну
   колонку (legacy main.css на мобиле уже сам стэкит, тут только лёгкие
   правки чтобы поля совпадали с edge-to-edge раскладкой). */
@media (max-width: 991px) {
  .footer .footer__info {
    padding: 0 16px;
  }
}

/* Контактный телефон в футере — над email-ом, такого же размера как ссылка.
   Цвет белый/светлый — главный контактный канал. */
.footer .footer__contact-phone {
  display: block;
  color: #f4f6fa;
  font-family: 'Rodchenko', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-decoration: none;
  margin-top: 4px;
  transition: color .2s;
}
.footer .footer__contact-phone:hover,
.footer .footer__contact-phone:active {
  color: #979ea9;
}
@media (max-width: 767px) {
  .footer .footer__contact-phone {
    font-size: 18px;
    line-height: 1.3;
  }
  /* Контакты в одну колонку, аккуратно стэкнуты. */
  .footer .footer__contacts,
  .footer .footer__contacts-container {
    flex-direction: column;
    padding: 0 16px;
    margin-top: 16px;
    display: flex;
  }
  .footer .footer__contact {
    padding: 0;
    margin-top: 18px;
    width: 100%;
  }
}

/* ============================================================
   ПЛАШКА-РУБРИКА — везде Rodchenko.
   .list-news__item-type — карточки /news/, /video/, /photogallery/
     (рендерятся через news-list-loader.js, video-loader.js, gallery-loader.js).
   .events__type — плашка типа события в карусели на главной.
   .news__item-type уже Rodchenko (строка 2148), здесь дублируем с !important
     на случай переопределений сторонними Play-правилами.
   ============================================================ */
.list-news__item-type,
.events__type,
.news__item-type {
  font-family: 'Rodchenko', sans-serif !important;
}

/* ============================================================
   TEAMROSTER — hover-эффект карточки игрока: только смена фото на банер.
   ============================================================ */

/* Банер-картинка: абсолютная поверх основной, изначально скрыта.
   .composition__img-wrapper уже имеет position:relative (строки выше). */
.composition__img-container--banner {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .composition__item-container:hover .composition__img-container--banner {
    opacity: 1;
  }
}


/* ============================================================
   /photogallery/{cat}/{slug}/ — детальная фотогалереи: сетка фото
   ============================================================ */
/* Класс is-gallery-page вешает JS-loader на <body>, а .detail--gallery
   на <section> — :has() оказался ненадёжным в этой среде. */
body.is-gallery-page,
body.is-gallery-page .wrapper { background: #041027; }
.detail--gallery {
  background: #041027;
  color: #f4f6fa;
}
.detail--gallery .detail__title,
.detail--gallery .detail__date,
.detail--gallery .detail__networks-label,
.detail--gallery .detail__bottom-sub-info,
.detail--gallery .detail__bottom-sub-info * {
  color: #f4f6fa !important;
}
/* `.text-content:before` рисует огромный белый прямоугольник — перекрашиваем. */
.detail--gallery .text-content::before {
  background: #041027 !important;
}
.detail--gallery .text-content__info {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.detail--gallery .text-content {
  overflow: visible !important;
}
.detail--gallery .detail__cover {
  max-width: none !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin: 0 !important;
  width: 100%;
}
@media (max-width: 600px) {
  .detail--gallery .detail__cover {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Убираем все возможные источники "белой полосы" на gallery-странице:
   1) ::before/::after у структурных блоков (.detail__sub-info рисует
      тонкую light-разделительную линию).
   2) box-shadow / outline на банере, info, cover.
   3) border на всех вложенных элементах detail__info. */
.detail--gallery .detail__sub-info,
.detail--gallery .detail__info,
.detail--gallery .detail__info-content,
.detail--gallery .detail__bottom-sub-info,
.detail--gallery .detail__cover,
.detail--gallery .detail__page-banner,
.detail--gallery .page-banner__img-container,
.detail--gallery .page-banner__img,
.detail--gallery .text-content,
.detail--gallery .text-content__info {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Уменьшаем огромный padding `.detail__text-info` (по умолчанию 60-100px),
   чтобы между датой и блоком «Популярные альбомы» не было гигантской пустоты. */
.detail--gallery .detail__text-info { padding-bottom: 24px !important; padding-top: 16px !important; }
.detail--gallery .detail__bottom-sub-info { padding: 16px 0 !important; margin: 0 !important; }
.detail--gallery .detail__sub-info::before,
.detail--gallery .detail__sub-info::after,
.detail--gallery .detail__info::before,
.detail--gallery .detail__info::after,
.detail--gallery .detail__bottom-sub-info::before,
.detail--gallery .detail__bottom-sub-info::after {
  display: none !important;
  background: transparent !important;
  border: 0 !important;
}
/* Banner: убираем градиентный fade у ::after — он может оставлять
   видимую "ступень" в районе перехода. Заливаем сплошным dark. */
.detail--gallery .detail__page-banner::before,
.detail--gallery .detail__page-banner::after {
  background: linear-gradient(180deg, transparent 0%, #041027 100%) !important;
  opacity: 1 !important;
  transform: none !important;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 20px;
  /* Сетка во всю ширину окна, заметный отступ по бокам. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
  /* Поверх `.text-content::before` (z-index:1) — иначе он перекрывает клики. */
  position: relative;
  z-index: 3;
}
.gallery-grid__item {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}
.gallery-grid__item img {
  pointer-events: none;
}
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (min-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
@media (min-width: 1500px) {
  .gallery-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
}
@media (max-width: 600px) {
  .gallery-grid { padding-left: 12px; padding-right: 12px; gap: 6px; }
}

/* Шапка альбома и навигация между альбомами (prev/next). */
.gallery-album-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  font-family: 'Rodchenko', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gallery-album-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4f6fa;
  text-decoration: none;
  font-size: 14px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.gallery-album-nav__link:hover {
  background: rgba(200, 16, 46, 0.9);
  color: #fff;
}
.gallery-album-nav__link[hidden] { display: none; }
.gallery-album-nav__arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
}
.gallery-album-nav__label {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .gallery-album-nav__label { max-width: 140px; font-size: 12px; }
  .gallery-album-nav__link { padding: 10px 12px; }
}
.gallery-grid__item {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
  z-index: 2;
}
.gallery-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.gallery-grid__item:hover .gallery-grid__img {
  transform: scale(1.05);
}

/* Шиммер для плейсхолдеров фото */
.gallery-grid__item--shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 300% 100%;
  animation: gallery-shimmer-sweep 1.6s infinite linear;
  cursor: default;
  pointer-events: none;
}
.gallery-grid__item--shimmer:hover {
  transform: none;
  box-shadow: none;
}
@keyframes gallery-shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Лайтбокс ── */
.lightbox {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  z-index: 2147483647 !important;
  background: rgba(2, 8, 20, 0.97) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Свой stacking context — не зависим от родителя. */
  isolation: isolate;
  transform: translateZ(0);
}
.lightbox.lightbox--open { display: flex !important; }
/* Когда лайтбокс открыт, замораживаем скролл body. */
body.lightbox-open { overflow: hidden !important; }
.lightbox__stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.lightbox__img {
  max-width: min(1400px, calc(100vw - 140px));
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}
.lightbox__counter {
  color: rgba(255,255,255,0.7);
  font-family: 'Play', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 0;
  color: #fff;
  cursor: pointer;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(200, 16, 46, 0.9);
}
.lightbox__close {
  top: 20px;
  right: 24px;
  font-size: 26px;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  font-weight: 300;
}
.lightbox__nav:hover {
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
@media (max-width: 600px) {
  .lightbox__img {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
  }
  .lightbox__nav { width: 44px; height: 44px; font-size: 28px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close { top: 12px; right: 12px; width: 44px; height: 44px; }
}


/* ============================================================
   /video/{cat}/{slug}/ — детальная видео: вёрстка в стиле .reportage
   (как на проде). Большой баннер за плеером с тёмным фейдом,
   плеер 16:9 центрирован, под ним дата и share.
   ============================================================ */
.reportage__title {
  font-family: 'Rodchenko', sans-serif;
  font-size: 38px;
  line-height: 1.15;
  color: #f4f6fa;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 18px 0 0;
  max-width: 900px;
}
@media (max-width: 768px) {
  .reportage__title { font-size: 24px; }
}
.reportage__video-container {
  max-width: 1180px;
  margin: 0 auto;
}
/* Video страница: тёмный фон у body + .wrapper, чтобы между .reportage
   и .media._inner не светилась светло-серая полоса (body=#f4f6fa). */
body:has(.reportage),
body:has(.reportage) .wrapper {
  background: #041027;
}
/* Дополнительный воздух между плеером и блоком «Популярные видео». */
.reportage + .media._inner { padding-top: 30px; }
.reportage__video-sub-info {
  margin-top: 32px;
  padding-bottom: 12px;
}
/* Hover для share-иконок под плеером — красный + лёгкое увеличение. */
.reportage__video-network-link {
  transition: transform .2s ease;
}
.reportage__video-network-link .svgsprite {
  transition: fill .2s ease;
}
.reportage__video-network-link:hover {
  transform: scale(1.15);
}
.reportage__video-network-link:hover .svgsprite {
  fill: #c8102e !important;
}
/* Hover для карточек в карусели «Популярные видео». */
.media._inner #popular-videos .media__video {
  transition: transform .25s ease, box-shadow .25s ease;
}
.media._inner #popular-videos .media__video:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4),
              0 4px 12px rgba(200, 16, 46, 0.18);
}
.media._inner #popular-videos .media__video-img {
  transition: transform .35s ease;
}
.media._inner #popular-videos .media__video:hover .media__video-img {
  transform: scale(1.06);
}
.media._inner #popular-videos .media__video-btn {
  transition: background .2s ease, transform .2s ease;
}
.media._inner #popular-videos .media__video:hover .media__video-btn {
  background: rgba(200, 16, 46, 0.9);
  transform: scale(1.1);
}
.media._inner #popular-videos .media__video-title {
  transition: color .2s ease;
}
.media._inner #popular-videos .media__video:hover .media__video-title {
  color: #fff !important;
}
/* Карусель «Популярные видео»: переопределяем base width Bitrix-овских
   .media__slide (33% / 343px) — отдаём управление Swiper-у через
   фиксированную ширину карточки и slidesPerView:'auto'. */
.media._inner #popular-videos .media__slide {
  width: 480px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .media._inner #popular-videos .media__slide { width: 560px !important; }
}
@media (min-width: 1400px) {
  .media._inner #popular-videos .media__slide { width: 640px !important; }
}
/* Блок «Популярные видео»: разворачиваем .cover внутри `.media._inner`
   почти на всю ширину (32px от края, 16px на мобиле). И заголовок,
   и карусель стартуют с одного и того же небольшого отступа слева. */
.media._inner > .cover {
  max-width: none !important;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 600px) {
  .media._inner > .cover {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.media._inner #popular-videos,
.media._inner #popular-galleries {
  cursor: grab;
  overflow: hidden;
  touch-action: pan-y;
}
.media._inner #popular-videos.swiper-grabbing,
.media._inner #popular-galleries.swiper-grabbing,
.media._inner #popular-videos:active,
.media._inner #popular-galleries:active { cursor: grabbing; }
/* Карточки в карусели «Популярные альбомы» — те же размеры, что и видео. */
.media._inner #popular-galleries .media__slide {
  width: 480px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .media._inner #popular-galleries .media__slide { width: 560px !important; }
}
@media (min-width: 1400px) {
  .media._inner #popular-galleries .media__slide { width: 640px !important; }
}
/* Делаем карточку выше — стандартная 208px слишком плоская для 480-640px ширины. */
.media._inner #popular-galleries .media__photo-container {
  height: 320px !important;
  margin-right: 0 !important;
}
@media (min-width: 1024px) {
  .media._inner #popular-galleries .media__photo-container { height: 360px !important; }
}
@media (min-width: 1400px) {
  .media._inner #popular-galleries .media__photo-container { height: 400px !important; }
}
.media._inner #popular-galleries .media__photo {
  transition: transform .25s ease, box-shadow .25s ease;
}
.media._inner #popular-galleries .media__photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4),
              0 4px 12px rgba(200, 16, 46, 0.18);
}
.media._inner #popular-galleries .media__photo-img {
  transition: transform .35s ease;
}
.media._inner #popular-galleries .media__photo:hover .media__photo-img {
  transform: scale(1.06);
}
.media._inner #popular-galleries .media__photo-title {
  color: #f4f6fa !important;
  transition: color .2s ease;
}
.reportage__video { position: relative; }
.reportage__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.reportage__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reportage__external {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
.reportage__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.75;
}
.reportage__external-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rodchenko', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.reportage__description {
  color: rgba(244, 246, 250, 0.85);
  font-family: 'Play', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Все карточки кроме первой — заголовок Play (main.css на десктопе ставит Rodchenko). */
.list-news__small-container .list-news__item-title {
  font-family: 'Play', sans-serif !important;
}

/* ============================================================
   /news/ — featured-карточка (большая, первая в .list-news__big-container).
   Шрифт заголовка и кнопки — Rodchenko (переопределяем .list-news__item * → Play).
   Сдвиг текстового блока левее: padding-left 23px → 8px.
   Заголовок: main.css задаёт margin: auto (центрирует max-width 620px в 727px → +53px отступ).
   Перебиваем margin-left: 0 чтобы заголовок начинался от левого края карточки.
   ============================================================ */
.list-news__big-container .list-news__item-title,
.list-news__big-container .list-news__item-btn,
.list-news__big-container .list-news__item-btn .btn__text,
.list-news__big-container .list-news__item-btn .btn__arrow {
  font-family: 'Rodchenko', sans-serif !important;
}
.list-news__big-container .list-news__item-content {
  padding-left: 8px !important;
  padding-right: 8px !important;
}


/* ─── Календарь /season/calendar/: фиксы — шиммер, контраст, фото ─── */

/* Шиммер при загрузке месяца (calendar-loader.js → buildShimmer). */
.upcoming__day._shimmer {
  position: relative;
  overflow: hidden;
  background: #eef1f5;
}
.upcoming__day._shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: tp-calendar-shimmer 1.2s linear infinite;
}
.upcoming__day._shimmer .upcoming__day-number { display: none; }
@keyframes tp-calendar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Не даём фото и матч-карточкам выезжать за границы ячейки. */
.upcoming__day {
  overflow: hidden !important;
}
.upcoming__day._active {
  outline: 2px solid #c8102e;
  outline-offset: -2px;
  cursor: pointer;
}
.upcoming__day[data-day]:has(~ .upcoming__day-dots),
.upcoming__day._has-match-red,
.upcoming__day._has-match-dark,
.upcoming__day._has-event {
  cursor: pointer;
}

/* Дата ячейки с матчем — белая (на тёмно-синем/красном фоне чёрный
   текст не виден). День рождения — тёмная (фото игрока обычно на светлом
   фоне; для контраста добавляем text-shadow). */
.upcoming__day._has-match-red  .upcoming__day-number,
.upcoming__day._has-match-dark .upcoming__day-number {
  color: #f4f6fa !important;
}
.upcoming__day._has-event:not(._has-match-red):not(._has-match-dark) .upcoming__day-number {
  color: #0c1931 !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
}

/* flex:1 1 auto без явной высоты не даёт definite height дочерним picture height:100%.
   Задаём height:100% явно — тогда picture и img заполняют ячейку полностью. */
.upcoming__small-event,
.upcoming__small-match {
  height: 100% !important;
}
.upcoming__small-event-img-container {
  border-radius: 0 !important;
}
.upcoming__small-event-img {
  object-fit: cover !important;
  max-width: none !important;
  transition: transform 0.3s ease;
}
.upcoming__day:hover .upcoming__small-event-img {
  transform: scale(1.04) !important;
}

/* Сдвоенная ячейка: flex делит match и event 50/50 автоматически (оба flex:1 1 auto). */

/* В сдвоенной ячейке логотип и счёт по центру левой половины. */
.upcoming__day._has-both .upcoming__small-match-logo-container {
  width: 40px !important;
  height: 40px !important;
  top: 50% !important;
  transform: translate(-50%, -55%) !important;
}
.upcoming__day._has-both .upcoming__small-match-time {
  font-size: 22px !important;
  padding: 6px 0 !important;
}
/* Дата в сдвоенной ячейке остаётся белой (слева — цветная плашка матча). */
.upcoming__day._has-both .upcoming__day-number {
  color: #f4f6fa !important;
  text-shadow: none !important;
}

/* Селектор сезона: дропдаун открывается кликом — calendar-loader.js
   ставит ._opened. Стиль ._opened .dropdown__content есть в main.css. */
.nav-panel__years .dropdown__head {
  cursor: pointer;
}

/* Hover-эффекты для карточек дня в календаре. */
.upcoming__small-match,
.upcoming__small-event {
  transition: filter 0.2s ease, transform 0.2s ease;
}
.upcoming__day:hover .upcoming__small-match {
  filter: brightness(1.1);
}
.upcoming__day:hover .upcoming__day-number {
  color: #c8102e !important;
}
.upcoming__day._has-match-red:hover .upcoming__day-number,
.upcoming__day._has-match-dark:hover .upcoming__day-number {
  color: #f4f6fa !important; /* на цветной плашке оставляем белым */
}

/* Точка дня рождения (_light) в legacy main.css — #b1bdd0; на нашем
   светлом фоне календаря почти не видна. Делаем красной для контраста. */
.upcoming__day-dot._light {
  background: #c8102e;
}
/* main.css: .list-news__big-container .list-news__item-title { margin: auto } центрирует
   заголовок в ширине контейнера → ~53px отступа. Обнуляем. */
.list-news__big-container .list-news__item-title {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Сдвиг заголовка и даты вправо: пиксельно они совпадают с описанием,
   но из-за разницы font-size (38px caps vs 15px) визуально воспринимаются левее.
   Добавляем 24px padding-left, чтобы перцептивная вертикаль совпала. */
.list-news__big-container .list-news__item-title,
.list-news__big-container .list-news__item-date {
  padding-left: 24px !important;
}

/* Первая (hero) новость на десктопе: увеличенный заголовок + видимое описание */
@media (min-width: 768px) {
  .list-news__big-container h6.list-news__item-title {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
  .list-news__big-container .list-news__item-text {
    display: block !important;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(244, 246, 250, 0.85);
    margin-top: 14px;
    padding-left: 24px;
    max-width: 920px;
  }
}
@media (min-width: 1200px) {
  /* На десктопе ≥1200 ещё крупнее, чтобы соответствовать главной (60px). */
  .list-news__big-container h6.list-news__item-title {
    font-size: 60px !important;
    line-height: 1.05 !important;
  }
  .list-news__big-container .list-news__item-text {
    font-size: 18px;
    margin-top: 18px;
  }
  /* Рубрика-бейдж выровнена с левым краем заголовка (тот же padding-left). */
  .list-news__big-container .list-news__item-type {
    margin-left: 24px !important;
    margin-bottom: 16px !important;
  }
}

/* ===== broadcasts: горизонтальная панель табов ===== */
/* main.css фиксирует .dropdown._custom { width: 420px } на ≥600px и 470px на ≥1600px —
   это подходит для вертикального дропдауна, но не для горизонтальных табов.
   Сбрасываем жёсткую ширину и разрешаем перенос табов. */
.broadcasts__nav-panel .dropdown._custom {
  width: auto !important;
}
.broadcasts__nav-panel .dropdown._custom .dropdown__list {
  flex-wrap: wrap !important;
  gap: 4px 0;
}
/* ===== broadcasts: карточка матча со счётом и катком ===== */
/* Переиспользуем calendar__club / calendar__check-* классы из main.css.
   broadcasts__item уже имеет background:#ebeef3 и padding из main.css.
   Добавляем только flex-layout и активируем стрелку. */
.broadcasts__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 48px 16px 16px !important; /* правый отступ для стрелки */
  position: relative;
  transition: background-color 0.2s;
}
.broadcasts__item:hover {
  background-color: #e2e6ee !important;
}
.broadcasts__item:before {
  display: block !important; /* активируем стрелку из main.css */
}
/* Числа счёта должны быть поверх SVG-катка */
.broadcasts__item .calendar__check-number {
  position: relative;
  z-index: 2;
}
/* Название команды в карточке трансляции */
.broadcasts__item .calendar__club-name {
  color: #0c1931;
}
/* ===== /broadcasts ===== */


/* ============================================================
   Mobile header — спрятать вынесенную auth.js кнопку «ХК / Войти»
   на узких ширинах. С position:absolute она ломает шапку — на
   мобильнике профиль доступен из выпадающего меню `mobile-nav`.
   ============================================================ */
@media (max-width: 991px) {
  #header-profile-btn { display: none !important; }
}

/* Mobile-nav: блок «Войти на сайт» — стилизуем как кнопку ТОРПЕДО-ГОРЬКИЙ
   из footer btn-list (тёмная подложка #152239 + иконка слева + ▶ справа). */
.mobile-nav__login {
  margin: 0 !important;
  background: #152239 !important;
  display: block !important;
  position: relative !important;
}
.mobile-nav__login::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid #f4f6fa;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
  pointer-events: none;
}
.mobile-nav .mobile-nav__login .mobile-nav__login-content {
  min-height: 64px !important;
  padding: 0 22px !important;
  color: #f4f6fa !important;
  display: flex !important;
  align-items: center !important;
}
.mobile-nav .mobile-nav__login .mobile-nav__login-content .svgsprite._user-icon {
  width: 16px !important;
  height: 18px !important;
  fill: #f4f6fa !important;
  margin-right: 12px !important;
  flex: 0 0 auto !important;
}
.mobile-nav .mobile-nav__login .mobile-nav__login-text {
  font-family: 'Rodchenko', sans-serif !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #f4f6fa !important;
}
.mobile-nav__login .cover {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Контейнер выпадающего меню — без боковых padding'ов, чтобы пункты шли
   во всю ширину окна. */
.mobile-nav__container,
#mobile-nav-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Пункт меню: текст ближе к левому краю, стрелка ближе к правому. */
.mobile-nav__content {
  justify-content: space-between !important;
  padding-left: 12px !important;
  padding-right: 22px !important;
}
.mobile-nav__sub-link {
  padding-left: 12px !important;
  padding-right: 22px !important;
}
/* Стрелка ▶ у кнопок МАГАЗИН/БИЛЕТЫ/ТОРПЕДО-ГОРЬКИЙ/ЧАЙКА/ШКОЛА —
   выравниваем на тот же правый отступ, что и стрелки `>` у пунктов
   меню (22px). В main.css margin-right негативный (-515px) под
   broader viewport — обнуляем для мобильных вариантов. */
.mobile-nav .mobile-nav__btn .btn__arrow,
.mobile-nav .btn-list .btn__arrow,
.footer .btn-list .btn__arrow,
.footer .footer__btn .btn__arrow,
.btn-list__btn.mobile-nav__btn .btn__arrow,
.btn-list__btn.footer__btn .btn__arrow {
  margin-right: 22px !important;
}
/* btn-list внутри мобильного меню — отрицательный margin из main.css
   (-27px) на мобильных нерабочий ширине и icons первой кнопки уезжают
   за пределы viewport. Обнуляем + ставим колоночный layout (full-width
   stacked) для блока клубных кнопок (Торпедо-Горький/Чайка/Школа). */
.mobile-nav .btn-list,
.mobile-nav .mobile-nav__btn-list {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.mobile-nav .btn-list .btn-list__btn {
  margin: 0 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
}

/* ── Верхний ряд МАГАЗИН/БИЛЕТЫ в мобильном меню — в одну строку (как на
   старом сайте). Селектор `:not(.mobile-nav-extras)` оставляет
   динамический блок клубных кнопок столбцом. */
.mobile-nav .mobile-nav__section:not(.mobile-nav-extras) > .mobile-nav__btn-list {
  flex-direction: row !important;
  gap: 8px !important;
}
.mobile-nav .mobile-nav__section:not(.mobile-nav-extras) > .mobile-nav__btn-list > .btn-list__btn {
  width: calc(50% - 4px) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* ▶-стрелка остаётся (как на старом сайте) — фиксируем её к правому краю
   кнопки, чтобы не съезжала после Магазин/Билеты в плотном двухколоночном
   layout. */
.mobile-nav .mobile-nav__section:not(.mobile-nav-extras) > .mobile-nav__btn-list > .btn-list__btn .btn__arrow {
  margin-right: 14px !important;
  margin-left: auto !important;
}
/* Зазор между секциями (МАГАЗИН/БИЛЕТЫ ↔ клубные кнопки): два разных
   flex-контейнера, gap внутри них не работает между ними. */
.mobile-nav .mobile-nav__btn-list {
  margin-bottom: 8px !important;
}
/* Логотип в кнопках — фикс. 30x30, чтобы SVG (Torpedo-Logo25.svg) и PNG
   отображались одинаково и не схлопывались в 0. */
.mobile-nav .btn-list .btn__img-container {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mobile-nav .btn-list .btn__img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Внутри `.mobile-nav__link` обёртка `.cover` добавляет свой 22px-padding
   (общий стиль .cover из main.css), плюс `.mobile-nav__content` ещё 18px —
   итого текст уезжает на ~40px от края. Убираем боковой padding `.cover`
   ВНУТРИ меню, чтобы остался только 18px от `.mobile-nav__content`. */
.mobile-nav .mobile-nav__link > .cover,
.mobile-nav .mobile-nav__login > .cover {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Существующая КОМАНДА-колонка (nav-1-1) в HTML использует
   `.mobile-nav__sub-link` без обёртки .cover/.content. Стилизуем
   как обычный `.mobile-nav__link`, чтобы все подменю выглядели одинаково. */
.mobile-nav__sub-link {
  display: block;
  height: 60px;
  line-height: 60px;
  padding-left: 18px;
  padding-right: 18px;
  color: #f4f6fa;
  font: 400 28px/60px 'Rodchenko', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  border-top: 2px solid #152239;
}
.mobile-nav__item:first-child .mobile-nav__sub-link { border-top: none; }

/* Хедер: олень-логотип на мобиле обрезался сверху, потому что
   header__content height < высоты логотипа после scale. Разрешаем
   overflow и слегка уменьшаем логотип. */
.header,
.header__wrapper,
.header__content {
  overflow: visible !important;
}

/* ============================================================
   HEADER PROFILE BUTTON — плашка «Войти» / «Личный кабинет».
   Монтируется в #header-profile-mount слева от навигации.
   Высота — на весь `.header__content` (от верха до низа), как и .header__btn.
   ============================================================ */
.header__profile {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;        /* плашка тянется на всю высоту */
  height: 100%;
  margin-right: 24px;           /* отступ до раздела «НОВОСТИ» */
}
.header__profile:empty { display: none; }

/* Сама плашка — переопределяем .header__btn чтобы тянуться на всю высоту. */
.header__profile #header-profile-btn,
.header__profile-btn {
  height: 100% !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  padding: 0 22px !important;
}

/* Залогиненная плашка: уровень → имя → баллы (баллы — главный акцент). */
.header__profile-text {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.1;
  max-width: 240px;
}
.header__profile-level {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  opacity: 0.85;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.header__profile-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  text-transform: uppercase;
}
/* Баллы — самый акцентный элемент: крупный, красный, по центру. */
.header__profile-bonus {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #c8102e;               /* фирменный красный (как кнопка «Билеты») */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 3px;
  text-transform: uppercase;
  text-align: center;
}

/* Баллы — «облако» над кнопкой профиля, чтобы не перекрывать имя.
   Раньше был кружок снизу-справа, обрезавший последние буквы «АЛЕКСЕЙ». */
.header__profile-badge {
  position: absolute;
  top: -10px;
  right: 4px;
  min-width: 26px;
  height: 20px;
  padding: 0 8px;
  background: #c8102e;
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rodchenko', sans-serif;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
/* Маленький «хвостик» облака — треугольник вниз, под цвет облака. */
.header__profile-badge::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #c8102e;
}
#header-profile-btn {
  position: relative;
}

/* Мобильное меню — те же 3 строки в .mobile-nav__login. */
.mobile-nav__login._level-1 { background: #8B5E3C !important; }
.mobile-nav__login._level-2 { background: #6F7A88 !important; }
.mobile-nav__login._level-3 { background: #B68B3C !important; }
.mobile-nav__login-level {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  opacity: 0.85;
  text-transform: uppercase;
}
.mobile-nav__login-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
}
.mobile-nav__login-bonus {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #c8102e;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Tier-цвета лояльности — перебивают .header__btn._dark { background:#0c1931 }. */
.header__btn._dark._level-1 { background: #8B5E3C !important; } /* бронза */
.header__btn._dark._level-1:hover { background: #a0704e !important; }
.header__btn._dark._level-2 { background: #6F7A88 !important; } /* серебро */
.header__btn._dark._level-2:hover { background: #87929e !important; }
.header__btn._dark._level-3 { background: #B68B3C !important; } /* золото */
.header__btn._dark._level-3:hover { background: #d0a04a !important; }

/* Планшет/мобилка (<1200px) — burger-режим, плашку не показываем:
   логин доступен из мобильного меню (.mobile-nav__login). */
@media (max-width: 1199px) {
  .header__profile { display: none !important; }
}

/* ============================================================
   TOP PANEL (.panel) — flex с переходами слева и соцсетями справа.
   .panel__container в main.css без правил — задаём flex здесь.
   ============================================================ */
.panel__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 24px;
}
.panel__networks {
  display: flex !important;
  align-items: center;
  gap: 28px;
  flex: 0 0 auto !important;
  width: auto !important;
}
.panel__club-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b1bdd0;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: color 0.18s ease;
}
.panel__club-link:hover {
  color: #fff;
  text-decoration: none;
}
.panel__club-link .svgsprite {
  width: 8px;
  height: 8px;
  fill: currentColor;
}
.panel__links {
  display: flex !important;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto !important;
  margin-left: auto !important;   /* прижать к правому краю .cover */
  margin-right: 0 !important;
}

/* Адаптив: на промежуточных ширинах ужимаем cross-club nav. */
@media (max-width: 1199px) {
  .panel__networks { gap: 16px; }
  .panel__club-link { font-size: 11px; letter-spacing: 0.2px; }
}
@media (max-width: 991px) {
  /* Меню «Клубы» в KHL-нав-баре пропадает; нашу панель оставляем,
     но переходы делаем компактными. */
  .panel__container { padding: 8px 0; gap: 12px; }
  .panel__networks { gap: 12px; }
  .panel__club-link { font-size: 10px; }
}

/* Десктоп (>991px): при скролле header._compact уменьшает логотип-оленя
   и центрирует его внутри бара. Перебиваем все варианты base-стилей
   (left/top заданы в main.css только с 1200px+, ниже у логотипа другая
   точка крепления — поэтому ставим явно). */
@media (min-width: 992px) {
  .header._compact .header__logo {
    left: 50% !important;
    top: 50% !important;
    /* Логотип крупнее (scale 0.55) и сдвинут ниже центра бара — антлеры
       у верхней кромки, корпус заметно нависает под баром. */
    transform: translate(-50%, calc(-50% + 30px)) scale(0.55) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 991px) {
  .header__logo { z-index: 1100; }
  .header__logo-img { width: 53px !important; height: 80px !important; }
  /* Логотип в правильной позиции для мобильной шапки:
     - Сдвигаем вправо (left: 100px) после burger-кнопки.
     - Поднимаем выше (top: 2px) — у изображения масштаб .55, высота 44px,
       помещается в 60-пиксельную шапку с 14px зазора снизу. */
  .header .header__logo {
    top: 2px !important;
    left: 100px !important;
    transform: scale(.55) !important;
    transform-origin: top left !important;
  }
  .header._float .header__logo {
    top: 0 !important;
    transform: scale(.5) !important;
    transform-origin: top left !important;
  }
}

/* ─── Ближайшие события: фикс обрезки hover-эффекта ─────────────────────
   .swiper { overflow: hidden } (Swiper CSS) обрезает верхнюю часть
   карточки при translateY(-10px) на ховере (эффект из main.css).
   Переопределяем overflow только для контейнера событий, чтобы не
   сломать маскировку других каруселей. ──────────────────────────────── */
.events__container.swiper {
  overflow: visible;
}

/* ─── match-detail: номера судей — снять жирность ─── */
.match-detail__persons-section .match-detail__person-number {
  font-weight: 400 !important;
}

/* ─── Ближайшие события: мобильная карусель с peek-эффектом ─────────────
   На мобилке (≤767px) JS выставляет ширину слайда = 42% контейнера,
   благодаря чему видно ~2.4 карточки одновременно.
   Ниже — CSS-поддержка: компактные шрифты, scrollbar, отступы.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Секция: убрать лишний нижний отступ, дать боковой padding для peek */
  section.events {
    padding-bottom: 36px;
  }

  /* Убираем боковой padding у .cover внутри секции events — иначе Swiper-контейнер
     получает offsetWidth 331px вместо 375px, JS считает slideWidth от 331px,
     и peek-карточка справа не влезает в экран полностью.
     Заголовок и scrollbar компенсируют отступ через собственный padding-left. */
  section.events > .cover {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.events .events__title {
    padding-left: 22px;
  }
  section.events .events__scrollbar {
    margin-left: 22px;
    margin-right: 22px;
  }

  /* Контейнер Swiper: clip по горизонтали с peek — overflow visible уже
     задан глобально (.events__container.swiper), оставляем его */

  /* День недели: компактный */
  .events__day {
    font-size: 14px !important;
    left: 10px !important;
    top: 9px !important;
  }

  /* Дата внизу слева: компактная */
  .events__date {
    font-size: 26px !important;
    left: 10px !important;
    bottom: 9px !important;
  }
  .events__date span {
    font-size: 12px !important;
  }

  /* Плашка типа события (День Рождения / Нет событий / Матч) */
  .events__type {
    font-size: 10px !important;
    padding: 4px 7px !important;
  }

  /* Время матча */
  .events__time {
    font-size: 15px !important;
    right: 10px !important;
    bottom: 9px !important;
  }

  /* Логотипы матча: компактные */
  .events__logo-container {
    width: 38px !important;
    height: 38px !important;
    margin: 0 4px !important;
  }

  /* Скроллбар — полоска внизу */
  .events__scrollbar {
    margin-top: 16px;
    height: 3px;
    border-radius: 2px;
  }
  .events__scrollbar .swiper-scrollbar-drag {
    border-radius: 2px;
  }

  /* Источник затемнения: main.css задаёт .events__slide { opacity: .1 }
     и показывает только _visible (opacity: 1) + _visible._damped (opacity: .4).
     На мобилке peek-карточка справа не получает _visible → почти невидима.
     Сбрасываем opacity для всех карточек на мобилке — видимость контролируется
     только fade-градиентами по краям контейнера. */
  .events__slide {
    opacity: 1 !important;
  }
}

/* ─── Сегодняшний слайд событий: красная обводка ───
   В legacy main.css :before-overlay уже задан (position:absolute z-index:4,
   border 2px #c8102e), но включался только при .events__slide.active.
   events-loader.js помечает «сегодня» классом ._today — переподписываем
   правило под него, делаем рамку толще и поднимаем z-index выше всех
   абсолютных детей (.events__match, .events__info, .events__img). */
.events__slide._today .events__content::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 3px solid #c8102e !important;
  z-index: 10 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

/* ============================================================
   НОВОСТИ — мобильная карусель (≤767px)
   Используем оригинальную структуру hctorpedo.ru:
     news__slide-wrapper — ссылка-карточка с aspect-ratio 3/4
     news__img-container + news__img — фото на всю площадь
     news__content — текст поверх фото, position:absolute внизу
     Градиент снизу вместо отдельного цветного блока.
   ============================================================ */
@media (max-width: 767px) {

  /* Секция новостей — убираем боковые отступы для peek */
  section.news .cover {
    padding-left: 0;
    padding-right: 0;
  }

  section.news .news__head {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* grid-section на мобилке — убираем колонный flex, Swiper сам управляет */
  .news__grid-section {
    display: block;
  }

  /* ── Внешний контейнер ── */
  .news__mob-wrapper {
    width: 100%;
    overflow: hidden;
  }

  /* ── Swiper-контейнер (overflow: visible — для peek следующей карточки)
     padding убран — отступ слева задаётся через slidesOffsetBefore в swiper-
     конфиге, чтобы snap-позиции были корректными. */
  .news__mob-swiper {
    overflow: visible !important;
    box-sizing: border-box;
  }

  /* ── Карточка-ссылка — портретная, фото на всю площадь ── */
  .news__mob-wrapper .news__slide-wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0;
    text-decoration: none;
    background: #0c1931;
  }

  /* ── Touch: позволяем Swiper перехватывать горизонтальный свайп ── */
  .news__mob-swiper .news__slide,
  .news__mob-swiper .news__slide-wrapper {
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-select: none;
  }
  .news__mob-swiper .news__img,
  .news__mob-swiper picture {
    pointer-events: none;
    -webkit-user-drag: none;
  }

  /* ── Фото — занимает всю карточку ── */
  .news__mob-wrapper .news__img-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .news__mob-wrapper .news__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* ── Контент поверх фото — градиент снизу ── */
  .news__mob-wrapper .news__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 14px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
    color: #fff;
  }

  /* ── Плашка-рубрика ── */
  .news__mob-wrapper .news__type {
    display: inline-block;
    background: #c8102e;
    color: #fff;
    padding: 4px 8px;
    font-size: 11px;
    font-family: 'Rodchenko', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  /* ── Заголовок ── */
  .news__mob-wrapper .news__title {
    font-family: 'Play', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Описание на мобилке скрываем ── */
  .news__mob-wrapper .news__text {
    display: none;
  }

  /* ── Дата ── */
  .news__mob-wrapper .news__date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Play', sans-serif;
  }

  /* ── Swiper scrollbar — находится вне .swiper, в потоке. Делаем заметным,
     как в дизайне у заказчика: тонкий ~80%-широкий трек + красный drag. ── */
  .news__mob-wrapper .news__scrollbar {
    position: relative !important;
    bottom: auto !important;
    margin: 20px auto 0 !important;
    width: 80% !important;
    max-width: 320px;
    height: 4px;
    background: rgba(0, 32, 91, 0.18);
    border-radius: 2px;
    overflow: hidden;
  }

  .news__mob-wrapper .news__scrollbar .swiper-scrollbar-drag {
    background: #c8102e;
    border-radius: 2px;
    height: 100%;
  }

  /* ── Контейнер кнопки «ВСЕ НОВОСТИ» под scrollbar-ом. Сам стиль ссылки
       (Rodchenko 24px, цвет, стрелка-:before) идёт из main.css на классе
       .head-section__link — мы тут только центрируем под каруселью.
       Снизу даём 32px воздуха, чтобы кнопка не упиралась в блок подписки. ── */
  .news__mob-all-btn-container {
    display: flex !important;
    justify-content: center !important;
    margin: 18px 0 32px !important;
    padding: 8px 0 4px;
    width: auto !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
  }
  .news__mob-all-btn-container .head-section__link {
    padding-right: 22px;
  }

  /* ── Shimmer-заглушка ── */
  .news__mob-shimmer {
    height: 400px;
    background: linear-gradient(90deg, #0d1626 0%, #1a2840 50%, #0d1626 100%);
    background-size: 300% 100%;
    animation: tp-shimmer-sweep 1.6s infinite linear;
    margin: 0 16px;
  }

  /* ── Fadein для слайдов ── */
  .news__mob-wrapper .news__slide._fadein {
    animation: news-item-fadein 0.45s ease both;
  }

  /* ── Блок подписки на мобилке — после карусели ── */
  .news__grid-section .news__grid-subscription {
    margin: 0;
    padding: 28px 16px 32px;
    border-radius: 0;
  }

  .news__grid-section .news__grid-subscription__title {
    font-size: 22px;
    margin-bottom: 18px;
  }

  /* Форма: поле сверху, кнопка снизу (вертикально) */
  .news__grid-section .news__grid-subscription .subscription {
    flex-direction: column;
    gap: 10px;
  }

  .news__grid-section .news__grid-subscription .field__container {
    border-right: 1px solid rgba(255,255,255,0.2);
    height: 50px;
  }

  .news__grid-section .news__grid-subscription .subscription__btn {
    width: 100%;
    height: 50px;
  }
}


/* Сетка плей-офф (главная): убираем стрелочку ▼ у активного таба
   `.ui-state-active::after` на мобиле — в узком layout она наезжает
   на номера матчей и выглядит мусором. */
@media (max-width: 767px) {
  .playoffs__nav-item.ui-state-active::after,
  .playoffs__nav-link.ui-state-active::after,
  li.playoffs__nav-item.ui-tabs-active.ui-state-active::after {
    content: '' !important;
    display: none !important;
  }
  /* `.playoffs` имеет `padding-bottom: 70px` из main.css — это создаёт
     лишнюю тёмно-синюю полосу под блоком с кубком на мобиле. Убираем. */
  .playoffs { padding-bottom: 0 !important; }
  /* `.playoffs__content { height: 571px/755px }` — фиксированная высота,
     внутри которой контент короче на мобиле → пустая тёмная полоса.
     Высота по контенту. */
  .playoffs__content { height: auto !important; min-height: 0 !important; max-height: none !important; }
  /* Сами секции playoff'а на десктопе `position: absolute` с фикс top/left
     (`._final { top: 205px; left: 495px }` и т.п.) — на мобиле их надо
     вернуть в нормальный поток, иначе они выпадают из родителя и
     создают пустоту. */
  .playoffs__section { position: relative !important; top: auto !important; left: auto !important; right: auto !important; }
  .playoffs__wrapper { margin-top: 20px !important; }
}

/* ============================================================
   LEADERS — мобильный одно-колонный layout (≤767px)
   Все карточки идут вертикальным списком, photo absolute слева,
   info в столбик справа. Как было до карусельной верстки.
   ============================================================ */
/* Прогресс-индикатор скролла .leaders__content (создаётся в JS leaders-loader.js
   после контейнера). Показываем только на мобильной/планшетной версии. */
.leaders__progress { display: none; }
@media (max-width: 1023px) {
  .leaders__progress {
    display: block;
    width: calc(100% - 32px);
    height: 4px;
    margin: 8px 16px 20px;
    background: rgba(12, 25, 49, 0.08);
    border-radius: 2px;
    overflow: hidden;
  }
  .leaders__progress-thumb {
    height: 100%;
    width: 25%;
    background: #00205b;
    border-radius: 2px;
    transition: transform 0.18s ease, width 0.18s ease;
    transform: translateX(0);
  }
}

@media (max-width: 1023px) {
  /* Категории идут горизонтальной каруселью — пользователь свайпает
     БОМБАРДИРЫ → СНАЙПЕРЫ → АССИСТЕНТЫ → ВРАТАРИ. Один экран = одна категория.
     Применяем до 1023px чтобы покрыть планшеты тоже. */
  .leaders .leaders__content,
  section.leaders .leaders__content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    margin: 0 !important;
    /* Лёгкий отступ слева у первой категории; справа peek (~24px) видно
       следующую категорию — визуальный cue, что есть ещё статистика. */
    padding: 0 0 0 16px !important;
    scroll-padding-left: 16px !important;
  }
  .leaders .leaders__content::-webkit-scrollbar { display: none !important; }
  .leaders .leaders__list-container {
    flex: 0 0 calc(100% - 24px) !important;
    min-width: calc(100% - 24px) !important;
    width: calc(100% - 24px) !important;
    scroll-snap-align: start !important;
    padding: 0 0 24px !important;
    /* overflow: hidden — карточки обрезаются ровно по правому краю контейнера,
       не «сплошняком» бьются с соседней категорией. */
    overflow: hidden !important;
  }
  .leaders__title { padding: 0 16px; margin-bottom: 10px; cursor: auto; }
  /* Стрелка ▼ не нужна — все категории достижимы свайпом. */
  .leaders__title-text:before { display: none !important; }
  .leaders__title-text { padding-right: 0 !important; cursor: auto !important; }

  /* Список и колонки — обычный вертикальный поток. */
  .leaders__list {
    display: block !important;
    padding: 0 16px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .leaders__column,
  .leaders__column._hide,
  .leaders__list-container._opened .leaders__column._hide {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Карточка — компактная горизонтальная (photo absolute слева). */
  .leaders__item,
  .leaders__item._main {
    display: flex !important;
    flex-direction: row !important;
    padding: 12px 14px 12px 118px !important;
    min-height: 108px !important;
    margin-bottom: 12px !important;
    background: #ebeef3 !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
  }
  .leaders__info,
  .leaders__item._main .leaders__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
    flex: 1 1 auto;
  }
  .leaders__photo-container,
  .leaders__item._main .leaders__photo-container {
    width: 88px !important;
    height: 88px !important;
    position: absolute !important;
    left: 14px !important;
    top: 10px !important;
    margin: 0 !important;
  }
  .leaders__number,
  .leaders__item._main .leaders__number {
    width: 48px !important;
    height: 48px !important;
    right: -6px !important;
    bottom: -2px !important;
    font-size: 32px !important;
  }
  .leaders__description { width: 100%; }
  .leaders__name {
    font-size: 18px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .leaders__status { font-size: 14px !important; line-height: 1.4 !important; }
  .leaders__stat { margin-top: 8px !important; font-size: 15px !important; }
  .leaders__stat-value { font-size: 34px !important; }
  /* Категория-заголовок крупнее на мобиле. */
  .leaders__title { font-size: 22px !important; }
  /* .cover из main.css имеет padding:0 22px — обнуляем, отступ слева
     управляется через .leaders__content padding-left. */
  .leaders .cover { padding: 0 !important; }
  /* Заголовок «ЛИДЕРЫ КОМАНДЫ» — отступ слева. */
  .leaders .leaders__head { padding-left: 16px !important; padding-right: 0 !important; }
}

/* Заголовки новостных карточек на мобиле — Play вместо Rodchenko,
   обычный регистр и без межбуквенного letter-spacing'а. */
@media (max-width: 767px) {
  /* Карточки в ленте новостей — Play (читабельнее на мелком экране).
     Высокая специфичность чтобы перебить `.h6` + `.news__big-container
     .news__item-title { Rodchenko !important }`. */
  h6.news__item-title,
  h6.h6.news__item-title,
  .news__grid-section h6.news__item-title,
  .news__big-container h6.news__item-title,
  .news__item .news__item-title,
  .news__item h6.news__item-title,
  .list-news__item h6.list-news__item-title,
  .list-news__big-container h6.list-news__item-title,
  h6.list-news__item-title {
    font-family: 'Play', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
  }
  /* На всякий случай дублируем без h6 префикса с грубой важностью. */
  .news__item-title,
  .news__big-container .news__item-title,
  .list-news__item-title,
  .list-news__big-container .list-news__item-title {
    font-family: 'Play', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
  }
  /* Баннер главной страницы — оставляем Rodchenko uppercase (родной стиль). */
  .slider__title,
  .slider__title__link {
    font-family: 'Rodchenko', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
  }
}

/* ============================================================
   Рекламные баннеры (.ad-banner — рендерятся через ad-banners-loader.js
   в зоны `<div data-ad-placement="...">`).
   ============================================================ */
.ad-banner-zone {
  /* На десктопе наследуем .cover (max-width: 1164px, padding: 0 22px),
     чтобы баннер был выровнен по ширине с остальным контентом секции.
     Добавляем только вертикальный отступ. Мобильный override edge-to-edge —
     ниже в @media (max-width: 767px). */
  padding-top: 16px;
  padding-bottom: 16px;
  box-sizing: border-box;
}
.ad-banner-zone > .ad-banner {
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ad-banner {
  display: block;
  width: 100%;
  text-decoration: none;
  transition: opacity .18s ease;
}
.ad-banner:hover { opacity: 0.95; }
.ad-banner__pic { display: block; width: 100%; }
.ad-banner__img {
  display: block;
  width: 100%;
  height: auto;
  /* Без object-fit — даём картинке отрисоваться в исходном aspect-ratio. */
}
.ad-banner__disclosure {
  display: block;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  padding: 4px 0 0;
  background: transparent;
}
@media (max-width: 767px) {
  /* На мобиле баннеры от края до края — без боковых padding'ов и без
     белой подложки. ВАЖНО: в исходной картинке PARI mobile (720×204)
     нижняя ~20% — навигационная полоса с disclosure-текстом «Реклама.
     Рекламодатель…», запечённая в изображение. На сайте это выглядит как
     навы́шная подложка вокруг баннера. Чтобы не показывать эту полосу,
     обрезаем картинку через object-fit: cover с object-position: top
     и фиксированным aspect-ratio под верхнюю «креативную» часть. */
  .ad-banner-zone {
    padding: 0 !important;
    width: 100% !important;
    margin: 0 0 40px 0 !important;
    max-width: none !important;
    /* Светлая `.news` (#f4f6fa) просвечивала по бокам/прозрачным углам
       баннера. Тёмная подложка перекрывает фон секции. */
    background: #0c1931 !important;
  }
  .ad-banner-zone > .ad-banner {
    padding: 0;
    max-width: 100%;
  }
  .ad-banner-zone .ad-banner__pic {
    display: block;
    width: 100%;
    aspect-ratio: 720 / 204;
    overflow: hidden;
  }
  .ad-banner-zone .ad-banner__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .ad-banner__disclosure {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.55) !important;
    padding: 4px 16px 0 !important;
  }
  /* Плитки событий в календаре на главной — та же высота, что и баннер (aspect 720:165) */
  .upcoming__day {
    height: calc(100vw * 204 / 720) !important;
  }
  /* Мобиле: фото/матчи скрываем, показываем точки */
  .upcoming__small-match,
  .upcoming__small-event {
    display: none !important;
  }
  .upcoming__day-dots {
    display: flex !important;
  }
}

/* ─── Мобилка ≤767px: логотип-олень — крупный при scrollY=0, компактный при скролле ───
   При scrollY=0 логотип выступает ниже синего бара (translateY > 0).
   При .header._compact (scrollY > 20px через JS) — уменьшается и вписывается в бар.
   Переопределяем @media(max-width:991px) выше, поэтому все правила с !important. */

@media (max-width: 767px) {
  /* БАЗОВОЕ состояние (scrollY=0): логотип немного крупнее бара,
     слегка свисает вниз. Image 53×80, scale 1.0 → 53×80; top:2 +
     translateY 6 = visible 8..88; шапка ~60px, ~28px ниже бара. */
  .header .header__logo {
    transform: translate(-28px, 6px) scale(1.0) !important;
    transition: transform 0.3s ease !important;
    z-index: 1100;
  }
  /* КОМПАКТНОЕ состояние (при скролле .header._compact): логотип
     уменьшается и полностью вписывается в бар. scale 0.72 = 38×57
     — соответствует оригинальному Bitrix-размеру. */
  .header._compact .header__logo {
    transform: translate(-30px, 4px) scale(0.72) !important;
  }
  /* ._float (открыт пункт меню) ведёт себя как базовое */
  .header._float .header__logo {
    transform: translate(-28px, 6px) scale(1.0) !important;
  }
  .header._float._compact .header__logo {
    transform: translate(-30px, 4px) scale(0.72) !important;
  }
}

/* Скрываем хлебные крошки на любой мобильной/планшетной адаптации —
   до десктопа (1199px) включительно они не показываются. */
@media (max-width: 1199px) {
  .page-head__breadcrumbs,
  .page-head .page-head__breadcrumbs,
  .cover > .page-head__breadcrumbs {
    display: none !important;
  }
}

/* «Смотрите также» на детальной странице новости — на мобиле формат
   совпадает с главной (portrait-карточка с фото + красный scrollbar-
   индикатор снизу). */
@media (max-width: 1199px) {
  .detail__media-carousel {
    overflow: visible !important;
    margin: 0 !important;
    width: 100% !important;
    padding-left: 16px;
    box-sizing: border-box;
  }
  .detail__media-slide {
    width: calc((100vw - 34px) / 1.15) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-right: 12px;
  }
  .detail__media-slide-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    overflow: hidden;
    background: #0c1931;
  }
  .detail__media-slide-wrapper::before {
    display: none !important;
  }
  .detail__media-img-container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
  }
  .detail__media-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .detail__media-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 40px 14px 16px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 60%, transparent 100%) !important;
    color: #fff !important;
    z-index: 3;
  }
  .detail__media-type {
    display: inline-block !important;
    background: #c8102e !important;
    color: #fff !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 8px !important;
  }
  .detail__media-name {
    font-family: 'Play', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .detail__media-date {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Play', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }
  /* Press-effect (без transform-прыжков). */
  .detail__media-slide-wrapper {
    transition: opacity .15s ease !important;
  }
  .detail__media-slide-wrapper:active {
    opacity: 0.85;
  }
  .detail__media-slide-wrapper:hover,
  .detail__media-slide-wrapper:active {
    transform: none !important;
  }
  /* Scrollbar-индикатор снизу — как у news mobile (красный drag). */
  #detail-media-scrollbar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin: 20px auto 0 !important;
    width: 80% !important;
    max-width: 320px;
    height: 4px !important;
    background: rgba(0, 32, 91, 0.18) !important;
    border-radius: 2px;
    overflow: hidden;
    opacity: 1 !important;
  }
  #detail-media-scrollbar .swiper-scrollbar-drag {
    background: #c8102e !important;
    border-radius: 2px;
    height: 100% !important;
  }
}

/* Зазор между датой+соцшарами и светлым text-content. */
.detail__info {
  padding-bottom: 80px !important;
}
@media (max-width: 767px) {
  .detail__info {
    padding-bottom: 48px !important;
  }
}
.text-content.detail__text-content::before {
  top: 0 !important;
}

/* Отключаем hover-эффекты на мобилке (на тачах :hover «залипает»). */
@media (hover: none), (max-width: 767px) {
  .partners__item:hover {
    transform: none !important;
    filter: none !important;
  }
  .partners__item:hover .partners__logo-img {
    filter: none !important;
  }
  .partners__item:hover .partners__item-name {
    color: inherit !important;
  }
}

/* Убираем градиент-fade overlay по краям блока «Ближайшие события» на мобилке. */
@media (max-width: 767px) {
  .events__fade-left,
  .events__fade-right {
    display: none !important;
  }
}

/* Скрываем ФИО на карточках дней рождения в «Ближайших событиях» — фото
   с бейджем «День Рождения» и датой даёт достаточно контекста. */
.events__name {
  display: none !important;
}

/* Заголовок группы партнёров — белый, по центру, маленький uppercase
   Rodchenko с увеличенным letter-spacing (как на проде hctorpedo.ru). */
.partners__group-title {
  text-align: center !important;
  color: #f4f6fa !important;
  font-family: 'Rodchenko', sans-serif !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin: 0 auto 36px !important;
  max-width: 1100px;
}
@media (max-width: 1023px) {
  .partners__group-title {
    font-size: 22px !important;
    letter-spacing: 1px !important;
    margin-bottom: 28px !important;
  }
}
@media (max-width: 767px) {
  .partners__group-title {
    font-size: 17px !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 20px !important;
    padding: 0 16px;
  }
}
.partners__group + .partners__group {
  margin-top: 56px;
}

/* ============================================================
   МЕДИА (Торпедо TV + Фотогалерея) — карточки того же размера и
   формата, что новостные слайды, с peek. До 1199px — один портретный
   3:4 слайд с peek соседа. С 1200px (десктоп) — 3 в ряд.
   ============================================================ */
@media (max-width: 1199px) {
  /* На мобиле section.media тоже без боковых padding-ов от .cover —
     чтобы peek соседа справа не клипался padding-ом cover-блока. */
  section.media .cover {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.media .media__head,
  section.media .media__section-head {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Контейнер карусели — overflow:visible, чтобы пиковый сосед справа
     не клипался. Отступы слева/справа задаются через slidesOffsetBefore/
     slidesOffsetAfter в swiper-конфиге. */
  .media .media__carousel {
    overflow: visible !important;
    box-sizing: border-box;
  }
  /* Фиксированный размер плиток 316×223 — как заказчик попросил.
     Перебиваем legacy `.media__slide { width: 326px !important }` через
     специфичность (0,2,0) + !important. Swiper в SWIPER_CFG переключён
     на slidesPerView:'auto', он уважает CSS-ширину. */
  .media .media__slide,
  .media .media__slide._photo {
    width: 316px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    height: auto !important;
  }
  .media .media__slide .media__video,
  .media .media__slide .media__photo {
    display: block !important;
    width: 100% !important;
    height: 223px !important;
    aspect-ratio: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .media .media__photo-container {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .media .media__photo-item {
    transform: none !important;
  }
  .media .media__video-img,
  .media .media__photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  /* Контент — поверх фото, градиент снизу. */
  .media .media__video-content,
  .media .media__photo-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 40px 14px 16px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 60%, transparent 100%) !important;
    color: #fff !important;
    z-index: 2;
  }
  .media .media__video-title,
  .media .media__photo-title {
    font-family: 'Play', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .media .media__video-date,
  .media .media__photo-date {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Play', sans-serif !important;
  }
  /* Любой scrollbar-стрейч в медиа-секциях скрываем — он рисуется как
     белая горизонтальная полоса и визуально режет между секциями. */
  .media .swiper-scrollbar,
  .media .media__carousel + .swiper-scrollbar {
    display: none !important;
  }
  /* На фото-карусели не нужен тёмный градиент снизу — у фото-карточек
     заголовок рендерится под фотографией, а не поверх. */
  .media .media__carousel._photo .media__photo-content {
    background: none !important;
    position: relative !important;
    bottom: auto !important;
    padding: 10px 0 0 !important;
    color: #0c1931 !important;
  }
  .media .media__carousel._photo .media__photo-title {
    color: #0c1931 !important;
  }
  .media .media__carousel._photo .media__photo-date {
    color: #9aa0a9 !important;
  }

  /* Press-effect на тач — без transform (legacy ставит translateY(-6px)
     scale(1.012) на :hover/:active → на тапе виден «прыжок»). Оставляем
     только лёгкий opacity-flash. */
  .media .media__video,
  .media .media__photo {
    transition: opacity .15s ease !important;
  }
  .media .media__video:hover,
  .media .media__video:active,
  .media .media__photo:hover,
  .media .media__photo:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .media .media__video:active,
  .media .media__photo:active {
    opacity: 0.85;
  }
  .media .media__video:hover .media__video-img,
  .media .media__photo:hover .media__photo-img,
  .media .media__video:active .media__video-img,
  .media .media__photo:active .media__photo-img {
    transform: none !important;
  }
  .media .media__video:hover .media__video-btn,
  .media .media__video:active .media__video-btn {
    transform: none !important;
    box-shadow: none !important;
  }
  /* news-карточки на тапе — тоже только opacity, без caller-эффектов */
  .news__mob-swiper .news__slide-wrapper {
    transition: opacity .15s ease !important;
  }
  .news__mob-swiper .news__slide-wrapper:active {
    opacity: 0.85;
  }
}

/* ============================================================
   MOBILE: компактнее блок «Медиа», убираем гигантский белый
   зазор между «ВСЕ АЛЬБОМЫ» и блоком партнёров, добавляем плавный
   fade-переход к тёмной секции партнёров.
   ============================================================ */
@media (max-width: 767px) {
  section.media .media__section {
    /* legacy ставит margin-bottom:65px + padding-bottom:69px = 134px пустоты.
       Под каруселью оставляем ~24-28px воздуха до кнопки «ВСЕ ВИДЕО/АЛЬБОМЫ». */
    margin-bottom: 12px !important;
    padding-bottom: 64px !important;
  }
  section.media .media__section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 72px !important;
  }
  section.media .media__section-head .head-section__link-container {
    /* «ВСЕ ВИДЕО/АЛЬБОМЫ» absolute — позиционируем ближе к низу секции
       (16px), чтобы карточка сверху имела ~24-28px воздуха до кнопки. */
    bottom: 16px !important;
    top: auto !important;
  }
  section.media + .partners {
    margin-top: 0;
  }
}

/* Hero-видео на /legends/ — заполняет page-banner на всю ширину/высоту,
   с object-fit:cover. Высоту делаем компактной, чтобы список легенд
   начинался выше: 220px mobile / 270px tablet / 320px desktop (legacy
   main.css ставит 270px, оставляем близко к нему). */
.hall__page-banner {
  position: relative;
  overflow: hidden;
  height: 220px;
}
.hall__page-banner video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 0;
}
@media (min-width: 768px) {
  .hall__page-banner { height: 270px; }
}
@media (min-width: 1200px) {
  .hall__page-banner { height: 320px; }
}
/* Список легенд начинается сразу под видео — убираем «провал». */
.hall .hall__cover {
  padding-top: 28px !important;
}

/* /legends/ — PageHead absolute-overlay поверх hero-видео.
   Не занимает отдельного места в потоке → между header-ом и видео нет
   навы́шного пустого блока. Заголовок и крошки центрируются по горизонтали
   и вертикально в баннере. */
.hall--with-video-overlay .hall__page-banner {
  position: relative;
  overflow: hidden;
}
.hall--with-video-overlay .hall__page-banner .page-head {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  /* мягкий dim над видео под текстом — улучшает читаемость */
  background: linear-gradient(to bottom, rgba(4,16,39,0.45) 0%, rgba(4,16,39,0.15) 50%, rgba(4,16,39,0.45) 100%);
}
.hall--with-video-overlay .hall__page-banner .page-head .cover {
  pointer-events: auto;
  text-align: center;
  padding: 0 16px;
}
.hall--with-video-overlay .hall__page-banner .page-head__title {
  margin: 0;
  color: #ffffff !important;
}
.hall--with-video-overlay .hall__page-banner .page-head__breadcrumbs {
  margin-top: 14px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hall--with-video-overlay .hall__page-banner .page-head__breadcrumbs,
.hall--with-video-overlay .hall__page-banner .page-head__breadcrumbs a,
.hall--with-video-overlay .hall__page-banner .page-head__breadcrumbs span,
.hall--with-video-overlay .hall__page-banner .page-head__last,
.hall--with-video-overlay .hall__page-banner .page-head__link {
  color: #ffffff !important;
  opacity: 1 !important;
}
.hall--with-video-overlay .hall__page-banner .page-head__breadcrumbs .svgsprite._brassy-icon {
  fill: #ffffff !important;
  width: 8px;
  height: 8px;
}
/* Override глобального скрытия хлебных крошек на мобиле — на /legends/
   overlay они нужны и читаются. */
.hall--with-video-overlay .hall__page-banner .page-head__breadcrumbs {
  display: inline-flex !important;
}

/* «Мобильное приложение» — one-link с детектом UA. Цвет полностью
   копирует .btn._blue (Магазин): фон #003da5, hover #041027.
   Иконка-телефон — SVG-инлайн, белая, одинакового размера с bag-icon
   у Магазина. */
.btn.btn-list__btn._app,
.btn._app {
  background: #003da5 !important;
  color: #ffffff !important;
}
.btn.btn-list__btn._app:active,
.btn.btn-list__btn._app:hover,
.btn._app:active,
.btn._app:hover {
  background: #041027 !important;
  color: #ffffff !important;
}
.btn.btn-list__btn._app .btn__text,
.btn._app .btn__text {
  color: #ffffff !important;
}
.btn.btn-list__btn._app .btn__icon,
.btn._app .btn__icon {
  fill: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
}
/* SVG-иконка внутри .btn__img-container (layout как у Горький) */
.btn.btn-list__btn._app .btn__img-svg,
.btn._app .btn__img-svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #ffffff;
}
.btn.btn-list__btn._app .btn__arrow,
.btn._app .btn__arrow {
  border-left-color: #ffffff !important;
}

/* ============================================================
   /history/ — карточки рекордсменов одной высоты.
   Источник: legends-фото имеют разные пропорции (часть 4:3 landscape,
   часть 3:4 portrait), и без принудительного aspect-ratio карточка
   Скворцова/Преснякова/Астафьева в 2 раза ниже карточки Наместникова.
   Reference (старый Битрикс) — портрет ~2:3 с лицом в верхней-средней
   зоне и градиентом-плашкой статистики снизу.
   object-position: center 20% — голова/шлем выше центра, не клипается.
   ============================================================ */
.history__record-img-container {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: block;
  line-height: 0;
}
.history__record-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 20%;
  display: block !important;
  vertical-align: bottom;
}
/* Полоса в "блюре" — артефакт того, что pseudo-градиент с opacity:0.9
   позволяет ярким пикселям джерси в нижней зоне фото проступать сквозь
   плашку. Делаем градиент полностью непрозрачным + клипим wrapper, чтобы
   pseudo не выходил за рамку фото. Плюс тёмный фон wrapper'а, чтобы при
   любой щели между info-плашкой и краем фото не светилась белая полоска. */
.history__record-img-wrapper {
  overflow: hidden;
  background: #020814;
  font-size: 0;
  line-height: 0;
}
.history__record-img-wrapper:before {
  opacity: 1 !important;
}
/* Десктоп — показываем 4 карточки + ~3/4 пятой как peek (как на оригинале).
   main.css ставит slide{width:25%} на ≥1200 — переопределяем на 21%. */
@media (min-width: 1200px) {
  .history__record-slide {
    width: 21% !important;
  }
  /* Убираем "жёлтый отступ справа" — карусель выходит за правый padding
     родительского .cover (22px) + slide padding (8px), чтобы 5-я карточка
     показывала больше peek-а и не оставалось пустоты справа.
     main.css ставит margin:0 -8px — оставляем слева, расширяем справа. */
  .history__record-carousel {
    margin-right: -30px !important;
  }
}

/* Мобила — ОДНА карточка по центру + peek соседних слева/справа
   (как на prod-битриксе). main.css ставит slide{width:50%} → 2 в ряд,
   что слишком узко.

   На десктопе нужен принудительный aspect-ratio 2/3 у picture чтобы все
   карточки выровнялись по высоте — у легенд фото разной пропорции.
   На мобиле же видна только одна карточка → выравнивать не нужно. Если
   принудительно тянуть до 2:3, на 80vw карточка получается ~432px тал,
   а legacy :before-градиент с height:343px занимает 79% — между
   подписью статистики и именем визуально остаётся огромный тёмный
   разрыв (это и есть «слишком большой отступ»).

   Снимаем aspect-ratio на мобиле — пусть picture сам подтягивается под
   натуральную высоту картинки. Плюс режем :before до 140px (узкая тёмная
   подложка под статистикой как на prod) и убираем тёмный bg у wrapper
   (на мобиле белый шов между картинкой и плашкой info не светится,
   потому что info лежит прямо поверх фото). */
@media (max-width: 767px) {
  .history__record-slide {
    width: 80% !important;
    box-sizing: border-box;
  }
  /* Все карточки одной высоты — иначе карусель «прыгает» между слайдами
     с разными пропорциями фото. Фиксируем aspect-ratio 2:3 (portrait как
     на prod-bitrix) на УРОВНЕ wrapper (не picture как раньше). picture
     внутри заполняет wrapper целиком (width/height: 100%), img —
     object-fit: cover. info абсолютно внизу wrapper — стек «фото →
     градиент → статистика» всегда в нижней зоне. */
  .history__record-img-wrapper {
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
    background: transparent !important;
  }
  .history__record-img-container {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
  }
  .history__record-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .history__record-img-wrapper:before {
    height: 140px !important;
  }
  /* Имя — оставляем legacy left-align, не центрируем. */
  /* Legacy ставит на base шрифт value 88px, span 43px — это desktop-first
     инверсия (на 768+ шрифт уменьшается до 52/24px). На узких карточках
     ~280px число и единица не помещаются в одну строку и переносятся,
     получается двухстрочная плашка ~131px высотой — она не помещается
     в 140px градиента и торчит вверх в фото. Делаем шрифт компактным. */
  .history__record-value {
    font-size: 52px !important;
    line-height: 1 !important;
  }
  .history__record-value span {
    font-size: 22px !important;
  }
  .history__record-text {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  /* Сокращаем info-padding на мобиле: 22px → 14px сверху, 12px снизу. */
  .history__record-info {
    padding: 14px 16px 12px !important;
  }
}

/* "Переливание" silver-достижений 1957/1960/... — pseudo :before рисует
   диагональный градиент с opacity:0.3 и без transform лежит видимым на
   тёмной плашке. Legacy JS добавляет родителю класс `_animate` и градиент
   уезжает rotate(-45deg) translateX(500%) — но JS не успевает на мобиле.
   Ставим конечное состояние трансформа дефолтом — shimmer не виден, а
   при срабатывании _animate просто остаётся на том же месте. */
.history__progress-item._silver .history__progress-content:before,
.history__progress-item._gold .history__progress-content:before {
  transform: rotate(-45deg) translateX(500%) !important;
}


/* ============================================================
   /history/ timeline-нав — на мобиле "следующая эра" должна быть
   прижата к правому краю viewport-а. main.css ставит translateX(83%)
   с width:100% — текст уходит вправо за экран либо висит посередине.
   Убираем transform + width:100% → right:0 + width:auto.
   ============================================================ */
@media (max-width: 767px) {
  .history-info__nav-link {
    font-size: 26px !important;
    padding-left: 16px !important;
  }
  .history-info__nav-link.mPS2id-highlight + .history-info__nav-link {
    transform: none !important;
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
  }
  /* :before underline (width:100%) и :after blue-dot (left:18px) — обе
     завязаны на 100%-width контекст. С auto-width они выглядят сломанно;
     прячем у "следующей эры". */
  .history-info__nav-link.mPS2id-highlight + .history-info__nav-link:before,
  .history-info__nav-link.mPS2id-highlight + .history-info__nav-link:after {
    display: none !important;
  }
}

/* ============================================================
   Header desktop ≥1200px — логотип-олень (absolute по центру,
   ~86×129px на 1200-1599 и 109×165px на 1600+) пересекался с пунктом
   меню «МЕДИА», потому что .header__nav._left { flex:1 1 auto; width:100% }
   занимает всю правую половину хедера до центра, а пункты внутри прижаты
   к левому краю контейнера и физически попадают в зону логотипа.
   max-width на колонках не решает: пункты сдвигаются ещё ближе к центру.

   Реальное лечение — вытащить логотип из absolute в flex-поток,
   тогда он сам раздвинет _left и _right и займёт честное место в центре.
   Вертикальное «вылезание» рогов наверх и тела вниз сохраняем через
   translate Y + overflow:visible на родителях.
   ============================================================ */
@media (min-width: 1200px) {
  .header__content {
    overflow: visible;
  }
  .header__logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    /* было translate(-56,-41) от 50%/50% — теперь только вертикальный сдвиг,
       чтобы рога торчали над хедером, а тело — под ним. */
    transform: translateY(-14px) !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 24px !important;
  }
  /* Обе нав-колонки делим оставшееся пространство симметрично от центра.
     flex-basis: 0 + flex-grow: 1 — каждая берёт ровно половину свободного
     места, поэтому логотип-олень между ними садится в геометрический центр.
     Min-width не задаём — flex учтёт ширину пунктов автоматически (они
     flex:0 0 auto, не сжимаются). */
  .header__nav._left {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  .header__nav._right {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-end;
  }
}
/* На ≥1600 логотип крупнее (109×165) — увеличиваем горизонтальный отступ. */
@media (min-width: 1600px) {
  .header__logo {
    transform: translateY(-18px) !important;
    margin: 0 32px !important;
  }
}

/* При скролле .header._compact логотип съезжал на правый край: правило
   на min-width:992px ставит left/top:50% (рассчитано на absolute-логотип),
   но теперь на ≥1200px он position: relative и left/top сдвигают элемент
   относительно flex-позиции, выкидывая его из центра.
   Перебиваем для ≥1200px: остаёмся в потоке, просто масштабируем. */
@media (min-width: 1200px) {
  .header._compact .header__logo {
    left: auto !important;
    top: auto !important;
    transform: translateY(0) scale(0.55) !important;
    transform-origin: center top !important;
  }
}

/* ============================================================
   /contacts/ карточки с фоновым фото (СДЮШОР ._red, БИЛЕТЫ ._red,
   МАГАЗИН ._blue) на мобиле — .contact-block__img-container в
   position:absolute bottom:0 right:0, а .contact-block__img имеет
   height:100% + max-width:100%, поэтому фото растягивается во весь
   карточ и текст становится нечитаемым поверх него.
   На <768px ужимаем фото в правый нижний угол (40% ширины), контент —
   слева в 60% поверх с z-index.
   ============================================================ */
@media (max-width: 767px) {
  .contact-block:has(.contact-block__img-container) {
    position: relative;
    min-height: 280px;
    overflow: hidden;
  }
  .contact-block .contact-block__img-container {
    top: auto !important;
    left: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 40% !important;
    max-width: 40% !important;
    height: auto !important;
    max-height: 100% !important;
  }
  .contact-block .contact-block__img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: bottom right;
  }
  .contact-block:has(.contact-block__img-container) .contact-block__content {
    position: relative;
    z-index: 1;
    max-width: 60%;
  }
}

/* ============================================================
   FAQ-аккордеон на /tickets/ (и других страницах с .accordion):

   1) Стрелка ▲/▼ позиционирована absolute right:0 padding:30px, а
      .accordion__container > h4 имеет только margin-right:auto без
      правого padding'а. На мобиле длинные вопросы переносятся в 2-3
      строки и текст налезает на стрелку. Резервируем 56px справа.

   2) Длинные URL внутри ответа (.accordion > section) не переносятся
      по словам и выезжают за правый край карточки. Включаем
      overflow-wrap, плюс на мобиле сбрасываем legacy `padding-right:38%`
      из main.css, который для десктопа оставляет место под стрелку,
      а на мобиле просто сжимает текст в узкую полосу.

   3) Анимация схлопывания регулируется jQuery UI accordion'ом
      (heightStyle переключается на 'content' через JS в tickets-page;
      см. inline-скрипт после блока .accordion__block).
   ============================================================ */
.accordion__container > h4 {
  padding-right: 56px;
}
.accordion > section {
  /* Длинные ссылки/слова переносятся вместо выхода за карточку. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 767px) {
  .accordion__container > h4 {
    padding-right: 48px;
  }
  .accordion > section {
    padding-right: 24px !important;
  }
}

/* Champion-блок (лого + «Чемпионы!») удалён — пользователь решил, что
   баннер только зашумляет финальную секцию. История: коммит 8c611e39. */

/* ============================================================
   «Ближайшие события» (.events__content) — legacy main.css добавляет
   `transform: translateY(-10px)` на hover, из-за чего карточка с
   красной рамкой :before торчит над верхним краем swiper'а и
   «вылазит за свои границы». Оставляем только красную рамку, без
   подъёма по Y.
   ============================================================ */
.events__content:hover {
  transform: none !important;
}

/* ============================================================
   /season/statistics/ — лидеры сезона (карусель «Лучшие»):
   на десктопе цифры (И / КН / %ОБ и т.п.) белым шрифтом ложатся
   прямо на синюю джерси игрока и сливаются с фоном. На старом
   сайте под цифрами лёгкое тёмное затемнение в нижней четверти
   карточки — без блюра, обычный градиент. Повторяем эффект.
   ============================================================ */
.statistics__player-img-wrapper {
  position: relative;
  overflow: hidden;
}
.statistics__player-info {
  /* legacy main.css уже даёт position:absolute;left:0;bottom:0;width:100%
     — нам остаётся только фон-градиент + вертикальный padding. */
  padding-top: 36px !important;
  padding-bottom: 10px !important;
  background: linear-gradient(
    to bottom,
    rgba(8, 17, 41, 0)    0%,
    rgba(8, 17, 41, 0.75) 45%,
    rgba(8, 17, 41, 0.95) 100%
  );
  pointer-events: none;
}
.statistics__player-info-value {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.statistics__player-info-name {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* legacy main.css добавляет .info-column { margin-bottom: 21-22px }
   — это поднимало текст высоко в карточку. С нашей полосой цифры
   должны прижиматься к нижнему краю. */
.statistics__player-info-column {
  margin-bottom: 0 !important;
}

/* ============================================================
   /tickets/mode/ — на мобиле карточки касс залезали поверх баннера
   с фото арены: .page-banner на <768 имеет height: 564px, а
   .mode__cover — padding-top: 64px (main.css). Карточка стартует
   на ~214px от верха секции (≈page-head 150px + 64px), садится на
   середину баннера и перекрывает большую его часть. Опускаем
   карточки ниже, чтобы баннер был виден целиком. На ≥768
   padding-top уже большой (67/146/160px) — не трогаем.
   ============================================================ */
@media (max-width: 767px) {
  .mode__cover {
    padding-top: 300px;
  }
}

/* ============================================================
   Круглые аватары игроков/персонала — лицо центрируется на крепе,
   а не пояс. Bitrix-портреты 714x1000 с лицом в верхней четверти,
   при object-fit:cover без object-position браузер режет квадрат
   из середины (выходит грудь/живот). object-position:center top
   двигает центр crop'а к голове.
   Покрытие: статистика, «другие игроки», штаб, авторы, руководство.
   ============================================================ */
.statistics__preview-img,
.other-players__img,
.worker__other-img,
.text__person-img,
.leaders__photo > img,
.leaders__photo {
  object-fit: cover;
  object-position: center top;
}

/* ============================================================
   /season/matches/ — карточка матча кликабельна целиком.
   .calendar__event-wrapper теперь имеет href на детальную
   страницу — добавляем cursor + тонировку и тень при hover'е.
   Для карточек без href ничего не меняется.
   ============================================================ */
.calendar__event-wrapper[href] {
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.calendar__event-wrapper[href]:hover {
  background-color: rgba(0, 32, 91, 0.04);
  box-shadow: 0 2px 12px rgba(0, 32, 91, 0.08);
}