/* Мобильная шапка и меню для СТРАНИЦ ТРЕКОВ и jury.html — копия блока
   с главной (styles/mobile-home.css, там свой экземпляр). Меняешь тут —
   проверь и главную: файлы должны оставаться зеркальными по этим классам.
   Токены (--line-soft, --glass-*, --radius-*) приходят из track-page-base.css.
   Разметку topbar/menu несут сами страницы; логика — scripts/mobile-nav.js.
   Медиазапрос ≤720px прячет .lock-nav-shell целиком (вместе с шевроном «назад»)
   и показывает .mobile-topbar, не дожидаясь скрипта — иначе на первом кадре
   мелькает десктопная панель. */

@media (max-width: 720px) {
  :root {
    --mh-gold: #e8c36a;
    --mh-text: #f4f1ea;
  }

  /* --- Mobile topbar & menu --- */
  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    /* На мобиле держим одну ступень стекла — мелкую: блюр здесь дороже всего,
       а разницу между ступенями на такой ширине всё равно не видно. */
    background: rgba(18, 20, 23, 0.72);
    backdrop-filter: blur(var(--glass-blur-soft));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft));
    border-bottom: 1px solid var(--line-soft);
  }

  /* Атрибут hidden стоит в разметке и снимается скриптом. До его запуска
     мобильная шапка отсутствовала, а десктопная .lock-nav-shell ещё не была
     спрятана — на первом кадре мелькала огромная десктопная панель. Ниже 720px
     шапка нужна всегда, поэтому атрибут здесь перебиваем; за пределами этого
     медиазапроса hidden работает как обычно и прячет шапку на десктопе. */
  .mobile-topbar[hidden] {
    display: flex !important;
  }

  .mobile-topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }

  .mobile-topbar__mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-topbar__mark img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
  }

  .mobile-topbar__copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
  }

  .mobile-topbar__copy strong {
    font: 700 12px/1.1 var(--font-display, 'IBM Plex Sans Condensed', sans-serif);
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .mobile-topbar__copy span {
    margin-top: 3px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.5);
  }

  .mobile-topbar__menu {
    width: 40px;
    height: 40px;
    position: relative;
    display: block;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    padding: 0;
    transition:
      border-color 180ms ease,
      background-color 180ms ease;
  }

  .mobile-topbar__menu span {
    position: absolute;
    left: 10px;
    top: 50%;
    display: block;
    width: 19px;
    height: 2px;
    background: var(--mh-text);
    border-radius: var(--radius-pill);
    transform-origin: center;
    transition:
      transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1),
      opacity 160ms ease,
      width 180ms ease,
      background-color 180ms ease;
  }

  .mobile-topbar__menu span:nth-child(1) {
    transform: translateY(-7px);
  }

  .mobile-topbar__menu span:nth-child(2) {
    transform: translateY(-1px);
  }

  .mobile-topbar__menu span:nth-child(3) {
    transform: translateY(5px);
  }

  .mobile-topbar__menu[aria-expanded='true'] {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-topbar__menu[aria-expanded='true'] span {
    background: #f6f2ea;
    width: 21px;
  }

  .mobile-topbar__menu[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(-1px) rotate(45deg);
  }

  .mobile-topbar__menu[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
    transform: translateY(-1px) scaleX(0.2);
  }

  .mobile-topbar__menu[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-1px) rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding: 88px 16px 0;
    background: #0a0b0d;
    overflow: hidden;
    overscroll-behavior: contain;
    animation: mobile-menu-in 180ms ease both;
  }

  .mobile-menu__bg,
  .mobile-menu__scrim {
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  .mobile-menu__bg {
    z-index: 0;
    background: url('../images/faq-crowd-marathon-v2-03.webp') center 10% / cover no-repeat;
    filter: grayscale(1) contrast(1.04) brightness(0.92);
  }

  .mobile-menu__scrim {
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(6, 7, 9, 0.72) 0%,
      rgba(6, 7, 9, 0.3) 24%,
      rgba(6, 7, 9, 0.28) 60%,
      rgba(6, 7, 9, 0.55) 100%
    );
  }

  .mobile-menu__head,
  .mobile-menu__nav,
  .mobile-menu__cta {
    position: relative;
    z-index: 2;
  }

  .mobile-menu[hidden] {
    display: none !important;
  }

  body.mobile-menu-open .mobile-topbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }

  .mobile-menu__head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .mobile-menu__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  .mobile-menu__mark {
    width: 32px;
    height: 32px;
  }

  /* Скролл только у списка ссылок — CTA остаётся внизу экрана */
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
    min-height: 0;
    margin-top: 18px;
    padding-bottom: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu__link {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 13px 4px 14px;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    color: var(--mh-text);
    font: 600 27px/1 var(--font-display, 'IBM Plex Sans Condensed', sans-serif);
    text-shadow:
      0 2px 22px rgba(0, 0, 0, 0.72),
      0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .mobile-menu__link:active {
    color: var(--mh-gold);
  }

  .mobile-menu__nav-tag {
    font: 700 10px/1 var(--font-body, Manrope, sans-serif);
    color: var(--mh-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.82;
  }

  .mobile-menu__tracks {
    padding: 10px 0 11px;
    border-bottom: 1px solid var(--line-strong);
  }

  .mobile-menu__tracks-head {
    display: none;
  }

  .mobile-menu__track-list {
    display: grid;
    gap: 6px;
    padding: 0 0 0 2px;
  }

  .mobile-menu__track-list a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(16, 18, 22, 0.26);
    backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat));
    color: rgba(248, 246, 240, 0.94);
    text-decoration: none;
    font: 650 14px/1.18 var(--font-body, Manrope, sans-serif);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  }

  .mobile-menu__track-num {
    color: var(--mh-gold);
    font: 800 11px/1 var(--font-body, Manrope, sans-serif);
    letter-spacing: 0.08em;
  }

  /* Как .lock-cta--ghost на ПК по форме, но заметнее: белый текст, крупнее,
     фон темнее остального меню. */
  .mobile-menu__cta {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    height: 3.25rem;
    margin: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 0 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 -16px 28px rgba(6, 7, 9, 0.55);
    color: #fff;
    font-family: var(--font-ui, Manrope, sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: var(--ls-caps, 0.14em);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      color 180ms ease;
  }

  .mobile-menu__cta::before {
    content: '';
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0;
    background-color: currentColor;
    background-image: none;
    opacity: 0.92;
    box-shadow: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.417 15.181l-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931L23.93 3.821c.321-1.496-.541-2.081-1.527-1.714L1.114 9.393c-1.472.571-1.45 1.393-.25 1.765l5.435 1.69L19.05 5.13c.598-.396 1.14-.177.693.219z'/%3E%3C/svg%3E")
      center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.417 15.181l-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931L23.93 3.821c.321-1.496-.541-2.081-1.527-1.714L1.114 9.393c-1.472.571-1.45 1.393-.25 1.765l5.435 1.69L19.05 5.13c.598-.396 1.14-.177.693.219z'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  .mobile-menu__cta:active {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
  }

  .mobile-menu__cta:active::before {
    opacity: 1;
  }

  body.mobile-menu-open {
    overscroll-behavior: none;
  }

  /* Без привязки к body.mobile-layout: класс вешает скрипт, и пока он не
     отработал, десктопная панель успевала показаться на первом кадре.
     Ниже 720px её не бывает никогда — прячем самим медиазапросом. */
  .lock-nav-shell {
    display: none;
  }

  @keyframes mobile-menu-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}