/*
  Mobile layout and fullscreen navigation for BLACK-WORLD.
*/

.mobile-menu-lock {
  overflow: hidden !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: 78px;
    height: 78px;
    grid-template-columns: 130px 1fr 46px;
  }

  .navigation__box_side_right {
    display: none !important;
  }

  .navigation__gw-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1301;
  }

  .gw-burger__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .gw-burger__line {
    margin: 0 !important;
    transition: transform .22s ease, opacity .22s ease;
  }

  .gw-burger_active .gw-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .gw-burger_active .gw-burger__line:nth-child(2) {
    opacity: 0;
  }

  .gw-burger_active .gw-burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navigation__menu {
    display: none !important;
  }

  .navigation__menu.is-open,
  .navigation__menu.mobile-menu-active,
  body.mob-nav-active .navigation__menu {
    display: flex !important;
    position: fixed !important;
    inset: 78px 0 0 0 !important;
    z-index: 1299 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100vw !important;
    min-width: 0 !important;
    height: calc(100vh - 78px) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(5, 8, 12, .96) !important;
    backdrop-filter: blur(14px) !important;
  }

  .navigation__menu.is-open .menu__content,
  .navigation__menu.mobile-menu-active .menu__content,
  body.mob-nav-active .navigation__menu .menu__content {
    width: min(420px, 100%) !important;
    padding: 30px 20px !important;
  }

  .navigation__menu.is-open .menu__list,
  .navigation__menu.mobile-menu-active .menu__list,
  body.mob-nav-active .navigation__menu .menu__list {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .navigation__menu.is-open .menu__item,
  .navigation__menu.mobile-menu-active .menu__item,
  body.mob-nav-active .navigation__menu .menu__item {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 52px !important;
  }

  .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;
  }

  .server-page_full {
    padding-top: 88px;
  }

  .server-layout_full {
    grid-template-columns: 1fr;
  }

  .server-side_full {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid #302d3c;
  }

  .server-side_full .server-side__item {
    min-height: 58px;
    padding: 10px 12px;
  }

  .server-side_full .server-side__item span {
    display: none;
  }
}

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

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

  .nova-hero {
    min-height: auto !important;
    padding: 86px 0 28px !important;
  }

  .slide__inner {
    min-height: auto !important;
  }

  .slide__content {
    padding: 20px 0 28px !important;
  }

  .slide__title {
    font-size: 38px !important;
  }

  .slide__desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .hero-top-tabs {
    gap: 8px !important;
  }

  .hero-top-tab {
    min-width: calc(50% - 4px) !important;
    height: 38px !important;
    font-size: 10px !important;
  }

  .hero-banner {
    flex-direction: column;
    align-items: stretch;
    margin-top: 18px !important;
    padding: 12px !important;
  }

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

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

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

  .server-card,
  .another__best,
  .nova-events {
    height: auto;
    min-height: 260px;
  }

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

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

  .server-description-container {
    width: min(100% - 20px, 1240px);
  }

  .server-side_full {
    grid-template-columns: 1fr;
    max-height: 44vh;
    overflow-y: auto;
  }

  .server-main_full {
    padding: 0 16px 34px;
  }

  .server-title_full {
    margin: 0 -16px 22px;
    padding: 22px 16px;
  }

  .server-title_full h1 {
    font-size: 20px;
  }

  .grid,
  .cards3,
  .timeline {
    grid-template-columns: 1fr !important;
  }
}