/* mob/base.css
   Общая база для смартфонов и планшетов (<=1024px)
*/
:root{
  --mob-pad: 16px;
  --mob-radius: 14px;
  --mob-shadow: 0 10px 30px rgba(0,0,0,.08);
  --mob-text: #111;
  --mob-muted: rgba(17,17,17,.72);
  --mob-bg: #fff;
}

@media (max-width: 1024px){
  html, body { width: 100%; overflow-x: hidden; }

  /* убираем фиксированную ширину/минимальную ширину у основных обёрток */
  #pi-all, #page, .pi-section-w, .pi-section {
    width: 100% !important;
    min-width: 0 !important;
  }
}

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
html, body{ width:100%; overflow-x:hidden; }

@media (max-width: 1024px){
  body{
    font-size: 17px;
    line-height: 1.5;
    color: var(--mob-text);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  /* iOS: чтобы поля не увеличивали масштаб при фокусе */
  input, select, textarea{ font-size:16px; }

  /* Общие контейнеры Santafox (часто используются .pi-section) */
  .container, .pi-section{
    padding-left: var(--mob-pad);
    padding-right: var(--mob-pad);
  }

  /* Частая причина "уехало вправо" */
  [class*="pi-col"], [class*="col"]{
    max-width: 100%;
  }

  /* Тап-зоны */
  a, button, input, select, textarea{ min-height:44px; }

  /* Блокировка скролла при открытом меню */
  .mob-lock body{ overflow:hidden; }
}

/* Телефон в ландшафте — чуть компактнее */
@media (max-width: 767px) and (orientation: landscape){
  :root{ --mob-pad: 14px; }
  body{ font-size: 16px; }
}
@media (max-width: 1024px){
  /* 1) сбиваем любые "desktop min-width" */
  * { min-width: 0; }

  /* 2) ключевые обертки сайта */
  #pi-all, #page,
  .pi-section-w, .pi-section,
  .pi-row, .pi-row-sm, .pi-row-lg,
  .pi-row-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 3) классическая причина горизонтального вылета — отрицательные отступы рядов */
  .pi-row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1024px){
  /* Ключевой фикс: у шаблона #page (и иногда #pi-all) стоит width:1000px */
  #page, #pi-all{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* часто ещё держит ширину центральный контейнер */
  .pi-section{
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1024px){
  html, body{
    width: 100% !important;
    min-width: 0 !important;   /* <-- убиваем min-width:1000px */
    overflow-x: hidden;
  }

  /* контейнер шаблона тоже ограничен 1000px */
  .pi-section{
    max-width: none !important;   /* <-- убиваем max-width:1000px */
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* на всякий случай (если где-то ещё фикс ширины) */
  #page, #pi-all{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px){
  /* глобально: переносим длинные слова/ссылки */
  p, a, li, h1, h2, h3, h4, span, div{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* если какой-то блок всё равно тянет ширину */
  #pi-all, #page{
    overflow-x: hidden;
  }
}

@media (max-width: 1024px){
  /* перенос длинных слов/ссылок, чтобы ничего не выталкивало вправо */
  p, a, li, h1, h2, h3, h4, span, div{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* шаблонный десктопный фикс ширины */
  body{
    min-width: 0 !important;
  }

  /* чуть сильнее: иногда ширину держат row/lg */
  .pi-row, .pi-row-sm, .pi-row-lg, .pi-row-block{
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 1024px){
  /* ЖЁСТКО фиксируем контейнер блока "Остались вопросы" */
  .pi-section-w.zk-feedback-question .pi-section{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* ЖЁСТКО фиксируем правую колонку (там форма) */
  .pi-section-w.zk-feedback-question .pi-section > .zk-btn{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* ЖЁСТКО делаем форму и поля 100% */
  .pi-section-w.zk-feedback-question #zk-feedback-question{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .pi-section-w.zk-feedback-question #zk-feedback-question input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    display: block !important;
  }

  /* Текст после формы НЕ перекрывается */
  .pi-section-w.zk-feedback-question .zk-btn > p{
    clear: both !important;
    display: block !important;
    margin: 12px 0 0 0 !important;
  }
}
@media (max-width: 1024px){
  html, body{
    width: 100% !important;
    min-width: 0 !important;   /* ключевое */
    overflow-x: hidden !important;
  }

  /* на всякий: общий контейнер сайта */
  #pi-all, #page{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1024px){
  .pi-section-w.zk-feedback-question .pi-section::after{
    content:"";
    display:block;
    clear:both;
  }
  .pi-section-w.zk-feedback-question .zk-btn > p{
    clear: both !important;
  }
}
/* Mobile hard reset for fixed desktop layout */
html, body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#pi-all, #page {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}