/* Мобильное меню клуба: общий каркас.
   Цвета не заданы жёстко - каждая витрина отдаёт свои токены
   (--mm-bg, --mm-fg, --mm-dim, --mm-accent, --mm-rule) в своей таблице.
   Значения ниже - только запасные, чтобы меню не осталось без цвета. */
/* запасные значения держим на :root - иначе они перебивали бы
   витринные, у тех тот же вес селектора, а эта таблица идёт последней */
:root {
  --mm-bg: #14130f;
  --mm-fg: #f2f0ed;
  --mm-dim: #8b8781;
  --mm-accent: #9e7c34;
  --mm-rule: rgb(255 255 255 / 0.12);
  --mm-scrim: rgb(0 0 0 / 0.55);
}

/* ── кнопка ── */
.mobmenu__btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mm-fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mobmenu__bars { display: block; width: 22px; }
.mobmenu__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms linear;
}
.mobmenu__bars i + i { margin-top: 5px; }
.mobmenu__bars i:nth-child(2) { width: 70%; }
.mobmenu__btn[aria-expanded="true"] .mobmenu__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobmenu__btn[aria-expanded="true"] .mobmenu__bars i:nth-child(2) { opacity: 0; }
.mobmenu__btn[aria-expanded="true"] .mobmenu__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── панель ── */
.mobmenu {
  position: fixed;
  inset: 0;
  z-index: 300;
}
.mobmenu[hidden] { display: none; }
/* пока панель уезжает (320 мс), она не должна перехватывать нажатия */
.mobmenu:not(.is-open) { pointer-events: none; }
.mobmenu__scrim {
  position: absolute;
  inset: 0;
  background: var(--mm-scrim);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.mobmenu.is-open .mobmenu__scrim { opacity: 1; }
.mobmenu__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(85vw, 360px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.9rem 1.4rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mm-bg);
  color: var(--mm-fg);
  border-left: 1px solid var(--mm-rule);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mobmenu.is-open .mobmenu__panel { transform: none; }
.mobmenu__panel:focus { outline: none; }

.mobmenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
}
.mobmenu__brand {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobmenu__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--mm-fg);
  cursor: pointer;
}
.mobmenu__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }

.mobmenu__list { list-style: none; margin: 0; padding: 0; }
.mobmenu__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.3rem 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--mm-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--mm-rule);
}
.mobmenu__list li:last-child a { border-bottom: 0; }

.mobmenu__club { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--mm-rule); }
.mobmenu__cap {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-dim);
}
.mobmenu__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.8rem; }
.mobmenu__stages li:first-child { grid-column: 1 / -1; }
.mobmenu__stages a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--mm-dim);
  text-decoration: none;
}
.mobmenu__stages a:hover { color: var(--mm-fg); }
.mobmenu__stages i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mm-accent);
}
.mobmenu__stages a[aria-current="page"] { color: var(--mm-fg); }

/* прокрутка страницы под открытой панелью не нужна */
html.mm-open, html.mm-open body { overflow: hidden; }
html.mm-open { touch-action: none; }
.mobmenu__panel { touch-action: pan-y; }

@media (max-width: 900px) {
  .mobmenu__btn { display: inline-flex; margin-left: auto; }
  /* прежняя навигация шапки уступает место кнопке */
  header.top > nav, header.top .top__nav { display: none; }
  header.top { justify-content: flex-start; gap: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobmenu__panel, .mobmenu__scrim, .mobmenu__bars i { transition: none; }
}