/*
  Мобильная адаптация и fullscreen mobile menu.
*/

.mobile-menu-active {
  display: flex !important;
  position: fixed !important;
  inset: 78px 0 0 0 !important;
  z-index: 999 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: rgba(5,8,12,.96) !important;
  backdrop-filter: blur(14px) !important;
}

.mobile-menu-active .menu__content {
  width: 100% !important;
  padding: 30px 20px !important;
}

.mobile-menu-active .menu__list {
  width: 100% !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mobile-menu-active .menu__item {
  width: 100% !important;
  height: 52px !important;
  font-size: 13px !important;
}

@media (max-width: 1280px) {
  .nova-nav-v5 .navigation {
    grid-template-columns: 126px minmax(0,1fr) 214px;
    gap: 10px;
  }

  .menu__item {
    height: 36px;
    padding: 0 9px;
    font-size: 11px;
  }

  .mid {
    grid-template-columns: minmax(210px,.68fr) minmax(300px,1fr) minmax(380px,1.22fr);
  }
}

@media (max-width: 1100px) {
  .nova-nav-v5 .navigation {
    min-height: 68px;
    grid-template-columns: 130px 1fr 42px;
  }

  .navigation__menu,
  .navigation__box_side_right {
    display: none;
  }

  .navigation__gw-burger {
    display: block;
  }

  .mid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "servers stats"
      "events events";
  }

  .mid__servers { grid-area: servers; }
  .mid__other { grid-area: stats; }
  .mid__events { grid-area: events; }

  .hero-parallax {
    display: none;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(100% - 24px, 1240px);
  }

  .nova-nav-v5 .navigation {
    grid-template-columns: 120px 1fr 42px;
  }

  .slide__title {
    font-size: 44px;
  }

  .hero-mini-grid,
  .top5-board,
  .mid,
  .streams-tab__grid {
    grid-template-columns: 1fr;
  }

  .mid {
    grid-template-areas:
      "servers"
      "stats"
      "events";
  }

  .hero-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-banner__preview {
    width: 100%;
    height: 150px;
    flex-basis: auto;
  }

  .nova-events,
  .nova-events iframe {
    height: 300px;
  }

  .contacts__contact {
    width: 100%;
    max-width: 320px;
  }
}