/* Правки адаптивной вёрстки поверх style.min.css (подключается сразу после него в _base_v2.html).
   Правила для конкретных страниц живут в их шаблонах; здесь только то, что задаёт общий style.min.css. */

/* Шапка на 992–1199px (ноутбуки, планшеты в альбомной ориентации). Выпадающий список «Ещё» становился выпадающим
   только с 1200px, а уже с 992px скрипт показывал его на компьютерах: четыре пункта стояли прямо в шапке белым по
   белому, растягивали её, «Ещё» уезжало вверх, а кнопки «Вход / Регистрация» — за правый край. */
@media (min-width: 61.99875em) and (max-width: 74.99875em) {
  .header .menu__sublist {
    position: absolute; z-index: 5; bottom: 1px; left: 0; width: max-content; height: auto; padding: 10px;
    background-color: var(--blue); border-radius: 8px; box-shadow: 0 2px 1px rgba(0, 0, 0, .04);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate3D(0, 110%, 0);
    transition: transform .4s ease, opacity .4s ease, visibility .4s ease;
  }
  .header .opened .menu__sublist { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3D(0, 96%, 0); }
  .header .menu__list { gap: 4px; }
  .header .menu__item { padding: 10px 6px; }
  .header__logo { flex-basis: 168px; }
  .header__logo img { width: 168px; height: auto; }
}
@media (min-width: 61.99875em) and (max-width: 74.99875em) and (any-hover: hover) {
  .header .menu__item:hover .menu__sublist { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3D(0, 96%, 0); }
}
/* на сенсорных экранах от 992px список тоже выпадающий (синий), пункты в нём белые, как на компьютере */
@media (min-width: 61.99875em) {
  .touch .header .menu__sublist li { color: var(--white); }
}

/* Переключатель «Каталог / Сервисы» на телефонах до 420px: кнопки не сжимались (flex 1 0 170px и 0 0 190px),
   и «Сервисы» уходила за правый край экрана. */
@media (max-width: 420px) {
  .services-page__switcher { max-width: 100%; }
  .services-page__button--catalog { flex: 1 1 0; min-width: 0; }
  .services-page__button--services { flex: 1 1 0; min-width: 0; padding-left: 20px; text-align: center; }
}

/* Таблица-пример на лендинге менеджеров: столбцы фиксированной ширины (163 + 83 + 91px) не помещались на телефоне
   до 420px, и «Комиссия» обрезалась. Название канала теперь сжимается, цифры остаются целиком. */
@media (max-width: 420px) {
  .rows-table-hero__row { gap: 8px; }
  .rows-table-hero__cell-year { flex: 1 1 auto; min-width: 0; }
  .rows-table-hero__cell-price { flex: 0 0 64px; }
  .rows-table-hero__cell-fees { flex: 0 0 76px; }
  .rows-table-hero__main-row .rows-table-hero__cell-fees,
  .rows-table-hero__main-row .rows-table-hero__cell-price { font-size: 14px; }
  .rows-table-hero__icon__descr { min-width: 0; max-width: 100%; }
  .rows-table-hero__channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Шапка у вошедшего пользователя: в левой кнопке почта. Длинная почта переносилась на две строки по дефису,
   кнопка «Выход» становилась выше и её надпись прилипала к верху, а на 992–1199px блок уезжал за край.
   Почту не переносим, а сокращаем многоточием; надписи в обеих кнопках по центру. */
.header__actions .header__action-button { display: flex; align-items: center; }
.header__actions .header__signin { justify-content: center; }
.header__actions .header__login { flex: 0 0 auto; min-width: 0; }
.header__actions .header__login span { display: block; min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 61.99875em) {
  .header__actions { flex: 0 0 auto; }
}
@media (min-width: 61.99875em) and (max-width: 74.99875em) {
  .header__actions .header__login span { max-width: 120px; }
}

/* Плавающие значки соцсетей в первом экране: на телефоне они проплывали поверх заголовка («PL♪BBER»).
   Кладём их под текст и делаем бледнее; на компьютере они летают по пустым краям, там всё как было. */
@media (max-width: 47.99875em) {
  .hero > .hero__decors { z-index: 0; }
  .hero > .hero__decors .hero__decor { opacity: .45; }
  .hero > .hero__container { position: relative; z-index: 1; }
}

/* Вход и регистрация на 768–991px (планшет): форма узкая, почта и пароль стояли в два столбца по ~190px,
   и подсказка «Введите пароль» обрезалась. На этих ширинах поля идут одно под другим, как на телефоне. */
@media (min-width: 47.99875em) and (max-width: 61.99875em) {
  .page--authentication .authentication-form__row { flex-direction: column; gap: 12px; }
}