/* Адаптив: общие переносы и раскладка на узких экранах. Идёт последним —
   переопределяет базовые правила всех остальных файлов. */

/* ---------- Адаптив ---------- */
/* Меню в ряд помещается от 1100px: восемь пунктов с разделителями в шапку уже не
   влезают, а ужимать их дальше — значит мелкий шрифт навигации. Ниже этого порога
   меню сворачивается под кнопку. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    /* align-items: center из основных правил здесь сжимал бы список по содержимому и
       центрировал его — в столбике пункты должны тянуться во всю ширину панели. */
    align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: .6rem; gap: .2rem;
    /* Меню выпадает на всю ширину шапки, отступ справа ему не нужен. */
    margin-left: 0;
  }
  .site-nav.open { display: flex; }
  /* В выпадающем списке пункты в столбик и разделители убираются — так же, как в
     демо на узком экране. Подчёркивание остаётся, но идёт по всей ширине пункта. */
  .site-nav .menu-main { flex-direction: column; align-items: stretch; }
  .menu-main > li + li:not(.menu-cta)::before { content: none; }
  .menu-main > li > a { display: block; padding: .55rem .5rem; }
  .menu-main > li > a::before, .menu-main > li > a::after { bottom: .35rem; }
  .menu-main > li.menu-cta { margin: .5rem 0 0; }
  .menu-main > li.menu-cta > a { text-align: center; }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .hero { min-height: 200px; }
  /* Ниже этой ширины две колонки героя уже не помещаются: чат уходит под
     заголовок отдельной строкой на всю ширину. */
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-chat { margin-bottom: 2rem; }
  .stat { padding-right: 1.4rem; margin-right: 1.4rem; }
  .boss-list-large .boss { flex-direction: column; }
  .boss-pic, .boss-img { width: 100%; }
  .pager { flex-wrap: wrap; }
  .map-viewport { height: calc(100vh - 150px); min-height: 420px; }
  .map-legend { max-width: calc(100% - 1.2rem); }
  .map-marker .marker-icon { width: 24px; height: 24px; }
  /* На узком экране панель управления переносится в строку, карточка может
     занимать всю ширину. */
  .map-card { max-width: calc(100% - 1.2rem); }
  .map-controls { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 1.2rem); }
}