/* =====================================================================
   04-responsive.css — адаптивность: планшет и смартфон
   Подключается ПОСЛЕДНИМ, чтобы перекрывать базовые стили
   ===================================================================== */

/* Страховка от горизонтальной прокрутки */
html, body { overflow-x: hidden; }
/* Табличка «Онлайн-консультация» — правее, чтобы не закрывать лицо */
.float-card {
  top: 18px;
  right: -46px;
}

/* ================= ПЛАНШЕТ (≤ 1100px) ================= */
@media (max-width: 1100px) {
  html { font-size: 15px; }                 /* весь сайт чуть мельче */

  /* Шапка: длинное меню убираем, показываем бургер */
  nav.main { display: none !important; }
  .burger { display: inline-flex !important; }
  .hdr { gap: .8rem; }
  .hdr-tel { font-size: .95rem; white-space: nowrap; }

  /* Заголовки покомпактнее */
  .hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem) !important; }
  .h2 { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }
}

/* ================= СРЕДНИЙ (≤ 900px) ================= */
@media (max-width: 900px) {
  .wrap { padding-left: 1.2rem; padding-right: 1.2rem; }

  /* Главный экран — в одну колонку */
  .hero-grid { grid-template-columns: 1fr !important; gap: 2rem; }
  .portrait-zone { max-width: 420px; margin: 1rem auto 0; }

  /* Разделы с «липкой» левой колонкой — в одну колонку */
  .two-col { grid-template-columns: 1fr !important; gap: 2rem; }
  .two-col .sticky { position: static !important; top: auto !important; }

  .stats .wrap { flex-wrap: wrap; gap: 1.2rem; }

  .cases-grid { grid-template-columns: 1fr !important; }
  .packages { grid-template-columns: 1fr !important; }
  .contacts-grid { grid-template-columns: 1fr !important; }
  .f-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ================= СМАРТФОН (≤ 640px) ================= */
@media (max-width: 640px) {
  html { font-size: 14px; }

  /* Компактная шапка */
  .hdr-tel { display: none !important; }
  .hdr .btn { display: none; }              /* кнопка есть в меню и на главном экране */
  .logo-sub { display: none; }

  /* Заголовки */
  .hero h1 { font-size: 1.9rem !important; line-height: 1.15 !important; }
  .h2 { font-size: 1.55rem !important; }
  .lead { font-size: .98rem !important; }
  .para, .para2 { display: none !important; }  /* крупные водяные знаки § и ⚖ */

  /* Кнопки главного экрана — столбиком, на всю ширину */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Декор у портрета */
  .stamp { display: none !important; }
  .float-card { font-size: .68rem; padding: .5rem .7rem; }

  /* Статистика — столбиком */
  .stats .wrap { flex-direction: column; }

  /* Прайс-лист: карточки вместо таблицы */
  .srv-head { display: none !important; }
  .srv { grid-template-columns: 1fr !important; gap: .5rem; padding: 1rem; }
  .srv .term, .srv .price { text-align: left !important; }
  .srv-btn { width: 100%; }
  .filters { flex-wrap: wrap; }

  /* Документы и подвал */
  .certs { grid-template-columns: repeat(2, 1fr) !important; gap: .8rem; }
  .f-grid { grid-template-columns: 1fr !important; }

  /* Чат — на весь экран */
  .chat-panel {
    top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important; height: 100% !important;
    border-radius: 0 !important;
  }
  .teaser { left: 1rem; right: 5rem; width: auto; }
}