/* Адаптация под мобильные экраны.
   ---------------------------------------------------------------------------------------------
   Подключается ПОСЛЕ ~/Content/build/css/styles.css (в Home/Index.cshtml и _Layout_New.cshtml) -
   этот генерируемый билд-пайплайном файл проектировался без адаптива вообще: у body был жёсткий
   min-width:1260px, из-за чего весь сайт на телефоне превращался в уменьшенную копию десктопа
   с горизонтальным скроллом. Ниже - точечные переопределения только тех правил styles.css,
   которые реально ломали раскладку (сам styles.css руками не трогаем, он генерируется отдельно).
   Bootstrap-контент (формы, карточки, табы) уже адаптивен по умолчанию и не требует правок. */
@media (max-width: 900px) {
  body {
    min-width: 0;
  }
  .wrapper {
    max-width: 100%;
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Шапка сайта (лого + поиск + меню) - см. _MenuPartial.cshtml. Исходные правила
     в styles.css заданы через составные селекторы вида ".first-screen .logo-head
     .header .search, .top-menu .logo-head .header .search" (4-5 классов) - это выше
     специфичности обычного ".logo-head .header .search" (3 класса), поэтому здесь
     нужен !important, иначе фиксированные flex-basis/height из styles.css (рассчитанные
     на широкий экран) остаются в силе и при переходе на колоночную раскладку
     превращаются в гигантские пустые блоки. */
  .logo-head .header {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .logo-head .header .logo {
    flex-basis: auto !important;
    width: 140px !important;
    margin: 0 auto 12px !important;
  }
  .logo-head .header .search {
    flex-basis: auto !important;
    width: 100%;
    margin-left: 0 !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    padding: 3px;
  }
  .logo-head .header .search .search-input {
    max-width: none !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 5px !important;
  }
  .logo-head .header .search input.menu-search {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .nav-menu {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* Выпадающие меню "Админка"/"Информация"/пользователь на телефоне не помещаются
     многоколоночной раскладкой, рассчитанной на широкий экран. В десктопной вёрстке
     .drop-menu позиционируется absolute относительно своего li.submenu (у него
     position:relative) - из-за этого при "left:0;right:0" меню растягивалось не на
     ширину экрана, а на ширину самого пункта меню ("Админка" и т.п.), то есть на
     несколько десятков пикселей, и текст переносился на множество строк. Чтобы меню
     растягивалось на всю ширину экрана независимо от того, какой пункт открыт, делаем
     контейнером позиционирования саму строку меню (nav ul), а не отдельный li. */
  .nav-menu nav ul {
    font-size: 1em;
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 8px;
    position: relative;
  }
  .nav-menu nav ul li.submenu {
    position: static !important;
  }
  .nav-menu nav ul li.submenu ul.drop-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    column-count: 1 !important;
  }
  /* .drop-menu-wide ("Админка") задаёт в SiteNew.css ширину через селектор с бОльшей
     специфичностью (".top-menu .nav-menu nav ul li.submenu ul.drop-menu.drop-menu-wide"),
     поэтому правило выше её не перебивает - дублируем с тем же набором классов. */
  .top-menu .nav-menu nav ul li.submenu ul.drop-menu.drop-menu-wide,
  .first-screen .nav-menu nav ul li.submenu ul.drop-menu.drop-menu-wide {
    width: auto !important;
    column-count: 1 !important;
  }

  /* Главная страница (Home/Index.cshtml, Layout = null) - крупные фиксированные
     размеры героя/секций пересчитаны под узкий экран. */
  h1.description-text {
    font-size: 1.7em !important;
    margin-bottom: 30px !important;
  }
  .first-screen .description {
    margin-top: 24px;
  }
  .first-screen .description .wrapper .icons {
    justify-content: center;
  }
  .btn-connect {
    width: 100%;
    max-width: 292px;
  }

  .features-content {
    flex-direction: column;
  }
  .features-content .col-left,
  .features-content .col-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .features .features-content .col-left .feature,
  .features .features-content .col-right .feature {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .features .features-content .col-right .feature h3,
  .features .features-content .col-right .feature p {
    text-align: left !important;
  }
  .features .features-content .mac {
    order: -1;
    margin-bottom: 24px;
  }

  .numbers .items {
    justify-content: center;
    gap: 16px;
  }

  .reviews .wrapper {
    min-width: 0;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .reviews .wrapper .items,
  .clients .items {
    justify-content: center;
  }

  /* Таблица тарифов (Content/build - .connection table) на телефоне не сжимается по
     смыслу (тарифы/цены нужно сравнивать построчно) - даём ей скроллиться в своём
     контейнере, а не раздвигать всю страницу по горизонтали. */
  .connection {
    overflow-x: auto;
  }
  .connection table {
    min-width: 640px;
  }

  /* Таблица выбора периода архива (От/До/кнопка "Показать" - Arhiv/Graphs) в разметке
     раскладывает 3 ячейки в один ряд без переноса - на узком экране это шире экрана.
     Раскладываем ячейки в столбик. */
  table.input-table,
  table.input-table tbody,
  table.input-table tr {
    display: block;
    width: 100%;
  }
  table.input-table td {
    display: block;
    margin-bottom: 8px;
  }

  /* График архива (Arhiv/Index.cshtml - ApexCharts) рисуется в div.graph-placeholder
     с фиксированным инлайн-стилем width:900px - на телефоне это шире экрана. Ширину
     плейсхолдера не трогаем (её же использует сам ApexCharts при расчёте графика),
     а даём обёртке .demo-container скроллиться по горизонтали, как и таблицы. */
  .demo-container {
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  h1.description-text {
    font-size: 1.35em !important;
  }
  .numbers .items .item {
    padding: 24px !important;
  }
}

/* Таблицы Bootstrap (списки/справочники за формой входа) в исходной вёрстке не были
   обёрнуты в .table-responsive ни на одной странице - на телефоне широкая таблица
   раздвигала всю страницу по горизонтали вместо того, чтобы скроллиться сама.
   Правим на уровне CSS без правки разметки в полусотне Index.cshtml. */
@media (max-width: 768px) {
  table.table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  table.table thead,
  table.table tbody,
  table.table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
}