/* public/css/mobile.css
   Общая мобильная адаптация шапки/футера/бургер-меню — подключается на всех
   публичных страницах через <link rel="stylesheet" href="/css/mobile.css">.
   Работает через структурные селекторы (header > div > nav и т.д.), а не через
   имена классов, потому что на разных страницах разметка шапки/футера собрана
   с разными названиями классов (h-in, h-right, ph-num...), но всегда в одном
   и том же порядке вложенности: header > div(обёртка) > img, nav, div(телефон+кнопка).
   Так один файл работает одинаково на любой странице сайта. */

/* ── бургер-кнопка и оверлей (создаются скриптом /js/mobile-nav.js) ── */
.mnav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin-left: 8px;
}
.mnav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1f2937;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.mnav-toggle.mnav-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mnav-toggle.mnav-open span:nth-child(2) { opacity: 0; }
.mnav-toggle.mnav-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav-overlay {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 9990;
}
.mnav-overlay.mnav-open { display: block; }

/* панель меню — своя, не зависит от <header>; на десктопе полностью скрыта */
.mnav-panel {
  display: none;
}

@media (max-width: 900px) {
  .mnav-toggle { display: flex; }

  /* обёртка шапки: не переносить логотип/кнопки на новую строку */
  header > div {
    flex-wrap: nowrap !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 8px !important;
  }

  /* логотип — чуть компактнее, чтобы оставалось место под кнопку и бургер */
  header > div > img { height: 28px !important; top: 0 !important; }

  /* оригинальное меню в шапке прячем — вместо него показываем .mnav-panel */
  header > div > nav { display: none !important; }

  /* панель меню — выезжает СВЕРХУ на всю ширину экрана.
     display держим неизменным (не переключаем none/flex) — иначе transform
     не успевает анимироваться; скрытие/показ и блокировка кликов — через
     visibility и pointer-events, они не мешают плавности transform. */
  .mnav-panel {
    display: flex;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    max-height: calc(85vh - 72px);
    max-height: calc(85dvh - 72px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px 28px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .18);
    border-radius: 0 0 18px 18px;
    transform: translateY(-12px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    visibility: hidden;
    pointer-events: none;
    z-index: 9995;
    overflow-y: auto;
  }
  .mnav-panel.mnav-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mnav-panel a {
    display: block;
    width: 100%;
    padding: 15px 2px;
    border-bottom: 1px solid #eef1f5;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
  }
  .mnav-panel a:last-child { border-bottom: none; }

  /* на десктопе <nav> с flex:1 сам "расталкивал" лого и правый блок по краям;
     на мобильных nav скрыт — без него всё слипается слева, поэтому явно
     прижимаем правый блок (кнопка+бургер) к правому краю */
  header > div > div:last-of-type { margin-left: auto !important; }

  /* телефон в шапке прячем, оставляем только кнопку звонка компактной */
  header > div > div:last-of-type { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
  header > div > div:last-of-type > *:first-child { display: none !important; }
  header > div > div:last-of-type > *:last-child {
    padding: 9px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  /* совсем маленький экран — кнопку звонка в шапке убираем, снизу справа есть виджет обратного звонка */
  header > div > div:last-of-type > *:last-child { display: none !important; }
}

/* ── защитный барьер: если где-то на странице всплывёт похожий баг с
   переполнением по ширине (например, наш старый знакомый min-width:auto
   у flex-элементов вроде <select>), это не даст ВСЕЙ странице разъехаться
   вбок горизонтальным скроллом — проблемный элемент останется локальным ── */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ── шапка страницы (заголовок + плашки-преимущества): у неё фикс. высота
   132px с overflow:hidden на десктопе, на мобильных контент должен переноситься,
   поэтому снимаем ограничение высоты. Класс page-top/page-perks одинаковый
   на about/contacts/faq/portfolio/pricelist/reviews/catalog. ── */
@media (max-width: 860px) {
  .page-top {
    flex-wrap: wrap !important;
    height: auto !important;
    overflow: visible !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  /* описание страницы обрезалось до 2 строк с многоточием — это правило
     рассчитано на фиксированную высоту 132px десктопного блока, на
     мобильных высота уже не ограничена, поэтому убираем и обрезание текста */
  .page-title p {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
  /* плашки-преимущества (Гарантия/Фиксированная цена/Контроль качества) на мобильных
     не помещаются и вылезают за экран — на мобильных их просто убираем */
  .page-perks, .hero-perks { display: none !important; }
}

/* ── sticky-сайдбары фильтров: на десктопе разумно "прилипают" к верху при
   скролле колонки с контентом, но на мобильных, где всё в одну колонку,
   это превращается в баг — широкий блок фильтра наезжает на список ниже.
   Отключаем sticky только на мобильных, десктоп не трогаем. ── */
@media (max-width: 900px) {
  .filter-card,
  .cat-nav,
  .help-card,
  .prod-nav,
  .right-sidebar {
    position: static !important;
    top: auto !important;
  }
}

/* ── футер: одна колонка на мобильных ── */
@media (max-width: 860px) {
  footer > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer > div:nth-child(2) {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}