/* ============================================================
   adaptive.css — адаптивный слой поверх all.css (шаблон almaz)
   Ретрофит адаптивности для almazt54.inteldev.ru
   Ничего не удаляем из all.css: только переопределяем на узких экранах.
   Основной брейкпоинт — 996px (ширина фиксированного макета).
   ============================================================ */

/* Страховка от горизонтального скролла (без overflow-x:hidden на html/body —
   вместе с height:100% оно превращает body в самостоятельный скролл-контейнер
   и ломает window.scrollY / sticky / аналитику; переполнений нет и без него) */
html, body { max-width: 100%; }
img { max-width: 100%; height: auto; }
/* CSS-only бургер: сам чекбокс скрыт, но управляет меню через label (работает без JS) */
#burger-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* ---- Текст пунктов меню теперь в разметке (span.mtext) для всех устройств
   (SEO/доступность). На ПК визуально скрыт — спрайт-фон .menu a остаётся,
   вёрстка не меняется. На мобильном текст показывается (см. медиазапрос). ---- */
.menu .mtext {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Бургер, затемнение и телефон-пункт — только на мобильном (на ПК скрыты) */
.burger, .menu-backdrop, .menu-phone { display: none; }

/* ==================== ≤ 996px: мобильные и планшеты ==================== */
@media (max-width: 996px) {

  /* ---- Каркас: снять форс-ширину, сделать резиновым ---- */
  .page      { min-width: 0 !important; width: 100% !important; overflow: visible !important; }
  .content   { width: 100% !important; }
  .content_in{ width: auto !important; max-width: 996px; margin: 0 auto;
               padding: 15px 12px 0 !important; box-sizing: border-box; background-color: white;}
  .footer    { width: auto !important; }

  /* Декоративные тяжёлые углы (2000px PNG) на мобильном не нужны */
  .corners   { display: none !important; }

  /* Декоративные слои не должны перехватывать клики (они на весь экран) */
  .bg_bottom, .bg_bottom span, .corners { pointer-events: none !important; }

  /* ---- Шапка: из фикс-блока 996×444 в обычный поток ----
     ВАЖНО: оставляем position:relative + высокий z-index, иначе .bg_bottom
     (position:absolute, покрывает весь экран) ляжет ПОВЕРХ меню и логотипа
     и они станут некликабельными на touch. */
  .header {
    width: auto !important; height: auto !important;
    position: relative !important; z-index: 2000 !important; text-align: center;
    /* padding-top отодвигает логотип НИЖЕ фиксированного бургера (46px + 8px отступ),
       иначе бургер в левом верхнем углу накладывается на левый край логотипа */
    padding: 60px 0 10px; box-sizing: border-box;
  }

  /* Логотип: был position:absolute */
  .logo {
    position: static !important; top: auto !important; left: auto !important;
    display: block; text-align: center; padding: 8px 0;
  }
  .logo img { max-width: 70%; height: auto; }

  /* (2) Картинка-телефон .header_phone на мобильном скрыта — номер теперь в меню */
  .header_phone { display: none !important; }

  /* ================= (1) БУРГЕР-МЕНЮ ================= */
  /* Кнопка-бургер: фиксирована в верхнем левом углу */
  .burger {
    display: flex !important; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed !important; top: 8px; left: 8px; z-index: 99999;
    width: 46px; height: 46px; padding: 11px; box-sizing: border-box;
    background: #0a3d5c; border: 0; border-radius: 9px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent;
  }
  .burger span { display: block; height: 3px; width: 100%; background: #fff; border-radius: 2px;
    transition: transform .25s, opacity .2s; }
  #burger-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #burger-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
  #burger-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Затемнение фона при открытом меню (inset:0 в этом окружении не растягивает — явные габариты) */
  .menu-backdrop {
    display: block !important;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99990; background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .25s; }
  #burger-toggle:checked ~ .menu-backdrop { opacity: 1; visibility: visible; }

  /* Меню: по умолчанию скрыто (выезжает слева по тапу на бургер) */
  .menu {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 270px !important; max-width: 84% !important; height: 100% !important;
    margin: 0 !important; padding: 60px 0 20px !important;
    background: #0a3d5c !important; z-index: 99992; box-sizing: border-box;
    overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left;
    transform: translateX(-102%); transition: transform .27s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.4);
  }
  #burger-toggle:checked ~ .menu { transform: translateX(0); }

  .menu > div,
  .menu div[class^="menu"] {
    position: static !important; top: auto !important; left: auto !important;
    width: 100% !important; height: auto !important; float: none !important;
    display: block !important; background: none !important;
  }
  .menu div span,
  .menu div span.active { display: block !important; width: 100% !important; height: auto !important; background: none !important; }
  .menu div[class^="menu"] span a,
  .menu-phone {
    position: static !important; top: auto !important; left: auto !important;
    width: auto !important; height: auto !important; float: none !important;
    display: block !important; background: none !important;
    padding: 14px 18px !important; color: #fff !important;
    font: 16px/1.2 Arial, Helvetica, sans-serif !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    text-decoration: none !important;
  }
  .menu div[class^="menu"] span a:hover { background: rgba(255,255,255,.08) !important; text-decoration: none !important; }
  .menu div[class^="menu"] span.active a { background: rgba(255,255,255,.16) !important; }

  /* (4) На мобильном показываем реальный текст пункта (span.mtext) */
  .menu .mtext {
    position: static !important; width: auto !important; height: auto !important;
    margin: 0 !important; clip: auto !important; overflow: visible !important;
    white-space: normal !important;
  }

  /* (3) Пункт-телефон в меню (в разметке шаблона меню, после «Контакты») */
  .menu-phone { font-weight: 700 !important; }
  .menu-phone::before { content: "\260E\00A0"; opacity: .85; }  /* ☎ */

  /* ---- Колонки: двухколоночный float → вертикальный стек ----
     ВАЖНО: колонки содержат плавающих детей (.about/.work/... float:left в all.css).
     При float:none у самой колонки без BFC она схлопывается до высоты 0, и
     .right_column/.nav ложится ПОВЕРХ контента (клики перехватываются).
     display:flow-root заставляет колонку охватить свои флоаты по высоте. */
  .left_column  { width: auto !important; float: none !important; padding: 0 !important; display: flow-root !important; position: relative; z-index: 1; }
  .right_column { width: auto !important; float: none !important; padding: 0 !important; margin-top: 20px; display: flow-root !important; position: relative; z-index: 1; }
  .clear        { height: 20px !important; }
  .clearfix     { width: auto !important; float: none !important; }

  /* Крупные контентные секции: убрать float, разложить вертикально */
  .about, .work, .work_page, .contact_page, .faq, .certificate, .img_list, .contact_us {
    float: none !important; width: auto !important;
  }

  /* ---- Плашки-заголовки .title/.title_right (абсолют + фон-картинки) ---- */
  .title, .work .title, .work_page .title, .contact_page .title, .faq .title {
    position: static !important; top: auto !important; left: auto !important;
    height: auto !important; background: none !important; margin: 0 0 12px;
  }
  .title h1, .title h4 {
    position: static !important; left: auto !important; float: none !important;
    background: none !important; min-width: 0 !important; height: auto !important;
    padding: 6px 0 !important; font-size: 20px !important; line-height: 1.3 !important;
  }
  .title_right {
    position: static !important; right: auto !important; top: auto !important;
    width: auto !important; height: auto !important; background: none !important; margin: 0 0 12px;
  }
  .title_right h1, .title_right h4 { padding: 6px 0 !important; font-size: 20px !important; }

  /* ---- Контентные боксы: ужать паддинги ---- */
  .about, .about_in { width: auto !important; }
  .about_in { padding: 16px !important; box-sizing: border-box; }
  .about_page h4 { font-size: 18px !important; }

  /* ---- Блок «Наши работы» ---- */
  .work { padding: 20px 0 0 0 !important; }
  .work_page .work { width: auto !important; padding: 16px !important; box-sizing: border-box; }
  .work_in { padding: 0 !important; }
  .work_in li img { float: none !important; display: block; margin: 0 auto 12px; max-width: 100%; height: auto; }
  .work_in li .work_brief { width: auto !important; float: none !important; padding: 0 !important; }
  .work .all { float: none !important; width: auto !important; margin: 10px 0; }

  /* ---- Контакты ---- */
  .contact_page { min-height: 0 !important; }
  .contact_in { padding: 16px !important; box-sizing: border-box; }
  .contact_in .clearfix .row { width: 100% !important; float: none !important; margin-bottom: 12px; }

  /* ---- FAQ / вопрос-ответ ---- */
  .faq .faq_in { padding: 12px !important; box-sizing: border-box; }
  .faq_top .clearfix { float: none !important; width: 100% !important; }
  .faq_top .clearfix .input { width: 100% !important; box-sizing: border-box; }
  .faq_top .button { float: none !important; width: 100% !important; max-width: 200px; }

  /* ---- Навигация подразделов / список услуг (right_column .nav) ---- */
  .nav { width: auto !important; float: none !important; padding: 0 0 16px !important; }
  /* (5) Фон пункта услуг растягиваем на всю ширину блока (было no-repeat — кусок слева).
     Убираем padding у ul, чтобы пункт занимал всю ширину блока. */
  .nav_in { padding: 0 !important; }
  /* height:auto + overflow:visible снимают унаследованную от десктопа height:40px/overflow:hidden,
     из-за которой у двухстрочных пунктов обрезалась вторая строка */
  .nav_in li { width: 100% !important; height: auto !important; min-height: 40px; overflow: visible !important;
    background-size: 100% 100% !important; box-sizing: border-box; }
  .nav_in li a { width: auto !important; height: auto !important; float: none !important; display: block;
    padding: 12px 14px 12px 37px !important; font-size: 17px !important; line-height: 1.3; box-sizing: border-box; }

  /* ---- Пагинация ---- */
  .page_numbers_in { padding: 0 !important; float: none !important; text-align: center; }
  .page_numbers_in li { float: none !important; display: inline-block; padding: 0 10px !important; }

  /* ---- Списки картинок / сертификаты ---- */
  .img_list_in li { padding: 12px 16px 12px 0 !important; }
  .img_list_in li img { max-width: 100%; height: auto; }
  .certificate_in li { width: 45% !important; padding: 12px 2% 20px !important; box-sizing: border-box; }
  .certificate_in li img { max-width: 100%; height: auto; }

  /* ---- Формы: резиновые поля + тап-таргеты ≥44px по высоте ---- */
  .input, .textarea { box-sizing: border-box; width: 100% !important; }
  .input { height: 44px !important; padding: 0 12px !important; display: flex !important; align-items: center; }
  .input input { box-sizing: border-box; width: 100% !important; height: 100% !important; min-height: 44px; padding: 0 !important; float: none !important; line-height: 44px; }
  .textarea textarea { box-sizing: border-box; }
  .button, .button button, .button input { height: 44px !important; }
  .button { width: 100% !important; max-width: 280px; }
  .button span { top: 12px !important; }
  .contact_us_in .captcha_input { width: 100% !important; float: none !important; margin-top: 8px; }

  /* ---- Яндекс-карта на /contacts/: фикс. ширина 630px → адаптив ---- */
  .map { overflow: hidden !important; max-width: 100% !important; }
  .map .bx-yandex-view-map, .bx-yandex-map, .bx-yandex-map > div,
  [id^="BX_YMAP"], [id^="bx_map"] {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }

  /* ---- (6) Таблицы: каждая — в свой горизонтальный скролл-контейнер ----
     Обёртка .tbl-scroll навешивается скриптом на каждую <table>.
     min-width + nowrap не дают тексту переноситься в 3 строки — цена читаема,
     а широкая таблица уезжает в собственный скролл, не растягивая страницу. */
  .tbl-scroll {
    position: relative;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e4ebf3;
    border-radius: 4px;
    scrollbar-width: thin;   /* для Firefox */
    margin-bottom: 10px;
  }

  /* Стили для WebKit (всегда показываем полосу) */
  .tbl-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .tbl-scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
  }
  .tbl-scroll::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 3px;
  }
  .tbl-scroll::-webkit-scrollbar-thumb:hover {
    background: #909090;
  }

  /* Признак прокрутки: градиент-тень у правого края (position:absolute к контейнеру — не скроллится) */

  /* Таблица внутри — ширина по содержимому, без min-width */
  .tbl-scroll > table,
  .price-table,
  .price table {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Сохраняем nowrap (текст не переносится) */
  .tbl-scroll th,
  .tbl-scroll td,
  .price-table th,
  .price-table td {
    white-space: nowrap !important;
    padding: 8px 10px;
  }
  .price { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ---- Футер: из фикс-996 в обычный центрированный блок ---- */
  .footer {
    position: static !important; height: auto !important; margin-top: 0 !important;
    background: rgba(0,0,0,.85) !important; padding: 12px 10px !important; text-align: center;
  }
  .copyright1, .copyright2 {
    width: auto !important; float: none !important; text-align: center !important;
    padding: 4px 0 !important; line-height: 1.5 !important;
  }
  .copyright1 span, .copyright2 span { background: none !important; padding: 0 !important; line-height: 1.5 !important; }
}

/* ==================== ≤ 480px: узкие телефоны ==================== */
@media (max-width: 480px) {
  .content_in { padding: 12px 10px 0 !important; }
  .logo img { max-width: 82%; }
  .title h1, .title h4, .title_right h1, .title_right h4 { font-size: 18px !important; }
  .certificate_in li { width: 100% !important; }
  .work_in li .work_brief h4 a { font-size: 18px !important; }
  .nav_in li a { font-size: 16px !important; }
}