/* =========================================================================
   mobile.css — адаптив для teplomagnat.ru
   Брейкпоинты: 1100 / 900 / 768 / 480 / 360
   Подключение: после style/style.css
   Заменяет старый mobile.css (бэкап в css/mobile_legacy.css).
   ========================================================================= */

/* анти-зум на iOS: 16px+ для полей ввода */
input, select, textarea, button { font-size: 16px; }

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

/* --- 1100 (планшет горизонтально / маленький десктоп) --- */
@media (max-width: 1100px) {
  :root { --gutter: 20px; }

  /* Шапка: текст меньше, телефон компактнее */
  #hText p big { font-size: 16px; }
  #hInfo p big { font-size: 18px; }
  #hInfo p span { font-size: 13px; }
  header .mainMenu ul li a { font-size: 14px; padding: 14px 14px; }

  /* Каталог брендов в шапке */
  #company .center .companyImg img { width: 110px; }

  /* Карточки брендов: tableCost уже не помещается в строку */
  #mainTables table tr td.tableImg { width: 180px; }
  #mainTables table tr td.tableCost { min-width: 200px; }
  #mainTables table tr td.tableTitle h2 { font-size: 18px; }

  /* Преимущества: 2 колонки на узких десктопах */
  .advantages { grid-template-columns: repeat(2, 1fr); }
}

/* --- 900 --- */
@media (max-width: 900px) {
  :root { --gutter: 18px; }

  /* Шапка: прячем длинный текст, оставляем телефон */
  #hText { flex-basis: 100%; order: 3; }
  #logo { order: 1; }
  #hInfo { order: 2; }

  /* Преимущества: 2 колонки */
  .advantages { grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 32px 0; }
  .advantages__title { font-size: 15px; }
  .advantages__text { font-size: 12px; }
}
@media (max-width: 768px) {
  :root { --gutter: 16px; --gutter-sm: 12px; }

  body { font-size: 15px; }

  /* БУРГЕР-МЕНЮ */
  .burger { display: block; }
  header .mainMenu ul {
    display: none;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
  header .mainMenu ul.is-open { display: flex; }
  header .mainMenu ul li a {
    padding: 14px 18px;
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  /* Каталог брендов: 4 в ряд */
  #company .center {
    justify-content: center;
    gap: 10px;
  }
  #company .center .companyImg img { width: 100px; }

  /* mainInfo / mainInfo2 — картинка сверху, текст снизу */
  .mainInfo, .mainInfo2 { flex-direction: column; }
  .mainInfo .mainInfoImg, .mainInfo2 .mainInfoImg { width: 100%; }
  .mainInfo .mainInfoText, .mainInfo2 .mainInfoText { width: 100%; padding: 20px; }
  .mainInfo .mainInfoText h1, .mainInfo2 .mainInfoText h2 { margin-top: 0; }

  /* Преимущества: 1 колонка */
  .advantages { grid-template-columns: 1fr; gap: 14px; margin: 24px 0; }
  .advantages__item { padding: 18px; }
  .advantages__icon { width: 48px; height: 48px; }
  .advantages__icon svg { width: 26px; height: 26px; }

  /* ===== КАРТОЧКИ БРЕНДОВ: <table> → block-раскладка ===== */
  #mainTables table,
  #mainTables table tbody,
  #mainTables table tr,
  #mainTables table td {
    display: block;
    width: 100% !important;
  }
  #mainTables table { margin-top: 16px; }
  #mainTables table tr { margin-bottom: 0; }
  #mainTables table tr td.tableImg {
    background: #fafafa;
    border-bottom: 1px solid var(--c-border-soft);
    padding: 16px;
    text-align: center;
  }
  #mainTables table tr td.tableTitle {
    padding: 14px 16px;
    font-size: 16px;
    background: var(--c-primary);
    color: #fff;
  }
  #mainTables table tr td.tableTitle h2 { font-size: 17px; color: #fff; }
  #mainTables table tr td.tableTitle h2 span,
  #mainTables table tr td.tableTitle h2 a { color: #fff; }
  #mainTables table tr td.tableDesc { padding: 14px 16px; }
  #mainTables table tr td.tableCost {
    border-left: 0;
    border-top: 1px solid var(--c-border-soft);
    padding: 14px 16px;
  }

  /* верхняя «опросный лист» — кнопка на всю ширину */
  #content > table td { display: block; width: 100%; }
  #content > table td.tableImg { padding: 0; background: transparent; }
  #content > table a.order { width: 100%; }

  /* ===== КАТАЛОГ (страница товара): #leftMenu + #r-cont ===== */
  #content .cont-bg { display: block; }
  #leftMenu {
    width: 100% !important;
    flex: none;
    margin-bottom: 16px;
  }
  /* картинки брендов в меню — 2 в ряд */
  #leftMenu > table { width: 100%; }
  #leftMenu > table > tbody > tr { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  #leftMenu > table > tbody > tr > td { padding: 0; }
  #leftMenu > table > tbody > tr > td:first-child { flex: 0 0 64px; }
  #leftMenu > table > tbody > tr > td:first-child img { width: 64px; max-width: 64px; }
  #leftMenu > table > tbody > tr > td:last-child { flex: 1 1 auto; }
  /* разделитель line.gif (tr с colspan=2) — скрыть */
  #leftMenu > table > tbody > tr > td img[src$="line.gif"] { display: none; }
  /* подменю моделей бренда (вложенный table) — 3 колонки, горизонтальный скролл если не влезает */
  #leftMenu .style_4 { display: inline-block; padding: 4px 8px; }

  #r-cont { width: 100% !important; flex: none; }
  #r-cont table.sketch td { display: block; width: 100% !important; }
  #r-cont table.sketch td.name { text-align: center; padding: 14px 16px; }
  #r-cont table.sketch td.name h1 { font-size: 20px; }
  #r-cont table.sketch td.img { padding: 12px; }
  #r-cont table.sketch td.img img { max-width: 200px; }
  #r-cont table.sketch td.info { padding: 14px 16px; }
  #r-cont > a.order { width: 100%; min-width: 0; }

  /* #app — стек, компактно на мобиле */
  #app { flex-direction: column; padding: 20px 16px; margin-top: 24px; background-image: none; box-shadow: none; }
  #app .app-l { width: 100%; min-width: 0; flex: 0 0 auto; padding: 0; }
  #app .app-r { display: none; } /* пустая колонка — не занимает место */
  #app h2 { font-size: 20px; margin: 0 0 12px; }
  #app p, #app li { font-size: 14px; }
  #app ul { margin: 12px 0 0; padding-left: 20px; }

  /* ===== ТАБЛИЦЫ С ПАРАМЕТРАМИ (характеристики .full-desc table.char-s) =====
     Горизонтальный скролл внутри .table-scroll. */
  .full-desc { overflow-x: auto; }
  .full-desc > table,
  .full-desc > div > table,
  .full-desc table.char-s {
    min-width: 520px;
    width: 100%;
  }
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: #fff;
    margin: 12px 0;
  }
  .table-scroll > table { min-width: 520px; width: 100%; border: 0; }
  .table-scroll::after {
    content: '← прокрутите →';
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--c-muted);
    padding: 4px 0 6px;
  }
  /* переключатель плотности (атрибут на контейнере: data-density="compact") */
  [data-density="compact"] .table-scroll > table { font-size: 12px; }
  [data-density="compact"] .table-scroll > table th,
  [data-density="compact"] .table-scroll > table td { padding: 4px 6px; }
  [data-density="comfortable"] .table-scroll > table th,
  [data-density="comfortable"] .table-scroll > table td { padding: 8px 10px; }
  .density-toggle { display: inline-flex; gap: 6px; margin: 8px 0; }
  .density-toggle button {
    background: #fff;
    border: 1px solid var(--c-border);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    cursor: pointer;
  }
  .density-toggle button[aria-pressed="true"] {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
  }
}

/* --- 480 (мобильный) --- */
@media (max-width: 480px) {
  :root { --gutter: 12px; }

  body { font-size: 14px; }
  h1 { font-size: 24px; }
  h2 { font-size: 19px; }

  header > .center { gap: 8px 12px; padding-top: 12px; padding-bottom: 12px; }
  #logo img { max-width: 150px; }
  #hInfo { padding: 8px 12px; }
  #hInfo p big { font-size: 16px; }
  #hInfo p span, #hInfo p small { font-size: 12px; }

  /* Каталог брендов: 3 в ряд */
  #company .center .companyImg img { width: 90px; }

  /* search поле */
  .search { padding: 10px 12px; }
  .search input[type="text"], .search input[type="search"] { width: calc(100% - 30px); }

  .mainInfo .mainInfoText, .mainInfo2 .mainInfoText { padding: 16px; }

  /* Преимущества: компактнее */
  .advantages__item { padding: 16px; }
  .advantages__icon { width: 44px; height: 44px; }
  .advantages__icon svg { width: 24px; height: 24px; }
  .advantages__title { font-size: 14px; }
  .advantages__text { font-size: 12px; }

  /* таблица — все блоки плотнее */
  .table-scroll > table { min-width: 460px; font-size: 12px; }
}

/* --- 360 (очень узкий / iPhone SE 1st gen) --- */
@media (max-width: 360px) {
  :root { --gutter: 10px; }
  #logo img { max-width: 130px; }
  #hInfo p big { font-size: 15px; }
  #company .center .companyImg img { width: 80px; }
}

/* --- печать (на всякий случай) --- */
@media print {
  header .mainMenu, .burger, footer, #company { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}