/* ==========================================================================
   Веб-Советник — адаптив и интерактивные доработки (оверрайды поверх дизайна).
   Десктоп сохраняем; на планшете/мобиле схлопываем сетки и включаем мобильный UX.
   ========================================================================== */
svg, img, video { max-width: 100%; }
html { overflow-x: clip; }

/* ---- Бургер (скрыт на десктопе) ---- */
.burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-shrink: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: none; background: transparent; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #0A1628;
  transition: transform .25s, opacity .2s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Мобильное меню и нижняя кнопка (по умолчанию скрыты, включаются на мобиле) ---- */
.mobile-menu { display: none; }
.mobile-cta  { display: none; }

/* ---- «Наш подход»: активный этап + подпись ---- */
.approach-step { cursor: pointer; }
.approach-step.is-active .step-circle { background: #2AB1EB !important; border-color: #2AB1EB !important; color: #fff !important; }
.approach-caption { text-align: center; max-width: 640px; margin: 26px auto 0; padding: 0 20px;
  font-size: 15px; line-height: 1.6; color: #93a1bb; min-height: 46px; transition: color .2s; }
.approach-caption.is-filled { color: #0A1628; }

/* ======================= Планшет ======================= */
@media (max-width: 1024px){
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  .section,.section-soft,[style*="padding: 120px 0px"]{padding-top:80px!important;padding-bottom:80px!important}
}

/* ======================= Мобайл ======================= */
@media (max-width: 760px){
  /* Сетки в одну колонку */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"]{grid-template-columns:1fr!important}
  .container,[style*="padding: 0px 32px"]{padding-left:20px!important;padding-right:20px!important}
  .section,.section-soft,[style*="padding: 120px 0px"]{padding-top:48px!important;padding-bottom:48px!important}
  h1{font-size:clamp(30px,8vw,42px)!important}

  /* (2) Шапка: только логотип + бургер */
  header nav, .header-actions { display:none !important; }
  .burger { display:flex; }
  .header-inner { gap:12px !important; }
  .mobile-menu:not([hidden]) { display:flex; flex-direction:column; position:fixed; top:72px; left:0; right:0;
    background:#fff; border-bottom:1px solid #E7EDF5; box-shadow:0 14px 26px rgba(4,31,107,.10);
    padding:10px 22px 20px; z-index:40; }
  .mobile-menu a { padding:14px 2px; font-size:16px; font-weight:500; color:#0A1628; text-decoration:none;
    border-bottom:1px solid #F0F4FA; }
  .mobile-menu .mm-phone { color:#2AB1EB; font-weight:700; border-bottom:none; margin-top:8px; }
  body.menu-open { overflow:hidden; }

  /* (3) HERO: убираем инфографику, текст и кнопки на всю ширину */
  .hero-grid { grid-template-columns:1fr !important; gap:20px !important; padding:36px 20px 44px !important; }
  .hero-visual { display:none !important; }
  [data-hero]{ min-height:auto !important; }
  .hero-actions-btns { flex-direction:column; gap:12px; }
  .hero-actions-btns > a { width:100%; justify-content:center; box-sizing:border-box; }

  /* (1) «Наш подход»: горизонтальный скролл ленты этапов */
  .approach-scroll { margin:0 -20px; padding:4px 20px 8px !important; -webkit-overflow-scrolling:touch; }
  .approach-scroll > div { justify-content:flex-start !important; }

  /* (4) «Почему компании обращаются к нам» — компактнее */
  #prb { padding-top:34px !important; padding-bottom:34px !important; }
  #prb [style*="grid-template-columns"] { gap:14px !important; }
  #prb [style*="grid-template-columns"] > * { padding:4px 0 !important; }
  #prb svg { width:46px !important; height:46px !important; }

  /* (5) «Создаём цифровую инфраструктуру» — карточки одинаково и по порядку вертикально */
  .svc-grid { grid-template-columns:1fr !important; grid-template-rows:none !important; gap:16px !important; }
  .svc-grid > * { grid-area:auto !important; }

  /* (6) Футер: убрать иллюстрацию + плавающая кнопка «Обсудить проект» */
  .cta-visual { display:none !important; }
  .mobile-cta { display:flex; position:fixed; left:16px; right:16px; bottom:16px; z-index:50;
    align-items:center; justify-content:center; gap:8px; padding:16px; border-radius:14px;
    font-weight:700; font-size:16px; text-decoration:none; color:#fff;
    background:linear-gradient(135deg,#2AB1EB,#063AA9); box-shadow:0 10px 26px rgba(4,31,107,.30); }
  body { padding-bottom:84px !important; }
}


/* ======================= Страницы услуг: мобильные доработки ======================= */
@media (max-width: 760px){
  /* (2 детальные) пустоту между блоками — примерно в 2 раза */
  .svc-page main > section { padding-top:56px !important; padding-bottom:56px !important; }

  /* (1 детальные) HERO: убрать инфографику, текст и кнопки на всю ширину, тизеры в 1 ряд */
  .svc-hero-grid { grid-template-columns:1fr !important; gap:22px !important; }
  .svc-hero-grid > *:nth-child(2){ display:none !important; }
  .svc-hero-btns { flex-direction:column; }
  .svc-hero-btns > a { width:100% !important; justify-content:center; box-sizing:border-box; }
  .svc-teasers { flex-wrap:nowrap !important; gap:12px !important; }
  .svc-teasers > * { flex:1 1 0 !important; min-width:0 !important; }

  /* (4 детальные) синий баннер: столбцы по 2 в ряд */
  .svc-banner4 { grid-template-columns:repeat(2,1fr) !important; }

  /* (3 детальные / 3 листинг) инфографику в нижнем CTA убрать, текст и кнопки на всю ширину */
  .svc-cta-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .svc-cta-grid > *:nth-child(2){ display:none !important; }

  /* (1 листинг) «Что мы делаем» — одна услуга в ряд */
  .svc-list-grid { grid-template-columns:1fr !important; }

  /* (2 листинг) «Как выглядит результат» — стек + стрелка вниз по центру */
  .svc-result-flex { display:block !important; }
  .svc-result-flex > *{ margin-bottom:24px !important; }
  .svc-result-arrow { transform:rotate(90deg); margin:2px auto !important; }
}


/* ===== Листинг «Услуги»: доп. мобильные правки ===== */
@media (max-width: 760px){
  /* (1) «Порядок работы» — горизонтальный скролл */
  .svc-process-grid{ display:flex !important; grid-template-columns:none !important; overflow-x:auto;
    gap:14px !important; margin:0 -20px; padding:4px 20px 10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .svc-process-grid > *{ flex:0 0 74% !important; min-width:0; scroll-snap-align:start; }

  /* (2) Нижняя кнопка не должна выходить за край экрана */
  .mobile-cta{ box-sizing:border-box; }

  /* (3) Инфографики «Был хаос» / «Стала единая система» — убрать пустой низ */
}

/* ===== Блог / Кейсы / Контакты / Статья: мобильные ===== */
@media (max-width: 760px){
  /* контентные 2-колоночные сетки → в одну колонку */
  [style*="grid-template-columns: 1.02fr 0.98fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.02fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 150px 1fr"],
  [style*="grid-template-columns: minmax(0px, 1fr) 268px"],
  [style*="grid-template-columns: 1fr auto 1fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }

  /* контактная форма и подобные — просто стек, ничего не прячем */
  .svc-stack{ grid-template-columns:1fr !important; gap:22px !important; }

  /* стрелка в блоке «было → стало» (1fr auto 1fr) — вниз, по центру */
  [style*="grid-template-columns: 1fr auto 1fr"] > *:nth-child(2){ transform:rotate(90deg); margin:2px auto; }
}

/* ===== Фикс переполнения: сжатие грид-колонок ниже ширины контента ===== */
@media (max-width: 760px){
  main [style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; }
  main [style*="grid-template-columns: repeat(4, 1fr)"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  main [style*="grid-template-columns"] > *{ min-width:0; }
  main img, main svg, main table, main pre{ max-width:100% !important; height:auto; }
  main p, main li, main h1, main h2, main h3{ overflow-wrap:anywhere; }
}

/* ===== Блог / Статья / Кейсы / Кейс — мобильные доработки (v2) ===== */
@media (max-width: 760px){
  /* Фильтр категорий — горизонтальный скролл */
  .cat-filter-bar{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 -20px; padding:2px 20px 10px; scroll-snap-type:x proximity; }
  .cat-filter-bar::-webkit-scrollbar{ display:none; }
  .cat-filter-bar > *{ flex:0 0 auto !important; scroll-snap-align:start; }

  /* Кнопки на всю ширину контента */
  .m-fullbtns{ flex-direction:column !important; }
  .m-fullbtns > a, .m-fullbtns > button{ width:100% !important; justify-content:center; box-sizing:border-box; }

  /* Блок рассылки — поле и кнопка на всю ширину */
  .m-newsletter{ flex-direction:column !important; max-width:none !important; }
  .m-newsletter > *{ width:100% !important; box-sizing:border-box; }

  /* Скрыть на мобилке (Содержание, «Считаем потери») */
  .m-hide-mobile{ display:none !important; }

  /* Кнопка «Поделиться» — только иконка */
  .m-share{ padding:11px !important; gap:0 !important; }
  .m-share > span, .m-share > .sc-interp{ display:none !important; }

  /* Кейс: hero-кнопки на всю ширину */
  .case-hero-btns{ flex-direction:column !important; }
  .case-hero-btns > a{ width:100% !important; justify-content:center; box-sizing:border-box; }

  /* Кейс: карточки результата по вертикали (одна в ряд) */
  main .case-result-grid{ grid-template-columns:1fr !important; }
  main .case-review-grid{ grid-template-columns:1fr !important; }

  /* Подвал: контент по левому краю */
  .site-footer{ justify-content:flex-start !important; }
  .footer-links{ justify-content:flex-start; flex-wrap:wrap; }
}

/* ===== dev-shop (Разработка интернет-магазина): мобильные доработки ===== */
@media (max-width: 760px){
  /* 1) Тизеры — по вертикали, одна в ряд */
  .page-shop .svc-teasers{ flex-direction:column !important; flex-wrap:wrap !important; gap:16px 0 !important; }
  .page-shop .svc-teasers > *{ flex:0 0 auto !important; width:100%; }

  /* 2) «Что вы получаете» — иконка на одной строке с заголовком */
  .page-shop .res-card{ display:grid !important; grid-template-columns:46px 1fr !important;
    column-gap:12px !important; row-gap:0 !important; align-items:center !important; }
  .page-shop .res-card > div:first-child{ margin-bottom:0 !important; }
  .page-shop .res-card > h4{ margin-top:0 !important; }
  .page-shop .res-card > p{ grid-column:1 / -1 !important; margin-top:8px !important; }

  /* 3) «Платформа» (Почему 1С-Битрикс) — фон на всю ширину экрана (как Hero) */
  .page-shop .platform-box{
    margin-left:-20px !important; margin-right:-20px !important;
    border-radius:0 !important;
    padding:30px 20px !important;
  }

  /* 4) «Процесс» — текст на одной линии с шагом, срок в 2 раза уже */
  .page-shop main .proc-step{ grid-template-columns:40px 1fr !important;
    column-gap:14px !important; row-gap:10px !important; align-items:start !important; }
  .page-shop .proc-step > [data-step-num]{ width:40px !important; height:40px !important; font-size:15px !important; }
  .page-shop .proc-step > span{ grid-column:2 / -1 !important; justify-self:start !important; max-width:50% !important; }

  /* 5) Низ страницы под закреплённой кнопкой — тёмный, как футер (тянем CTA-секцию вниз) */
  body.page-shop{ padding-bottom:0 !important; }
  body.page-shop #lead{ padding-bottom:96px !important; }
}


/* ===== Статья: мобильные доработки ===== */
@media (max-width: 760px){
  /* Скрыть фото автора */
  .page-shop [data-author]{ grid-template-columns:1fr !important; }
  .page-shop [data-author] > div:first-child{ display:none !important; }
}

@media (max-width: 760px){

  /* Кнопка «Поделиться» — на верхнюю строку хэштегов (top-right) */
  .art-tags{ position:relative; padding-right:50px; }
  .art-tags .m-share{ position:absolute !important; top:24px; right:0; margin:0 !important; }
}

/* ===== Contact / Article: доп. мобильные правки ===== */
@media (max-width: 760px){
  /* Contact: форма Б24 — меньше отступы от границ блока */
  .contact-form-card{ padding:18px 16px !important; }

  /* Article: интервал хэштеги→автор ≈ как автор→«Читайте также» */
  .page-shop .m-artbody{ padding-bottom:40px !important; }
  .page-shop .m-author{ padding-top:8px !important; }
}

/* ===== Services: карточки услуг + блок результата (мобилка) ===== */
@media (max-width: 760px){
  /* Интернет-магазин / CRM: порядок как у Интеграции/Поддержки — заголовок, текст, картинка, плашки, кнопка */
  .svc-flip > *:first-child{ order: 2; }
  .svc-flip > *:last-child{ order: 1; }
  .svc-flip{ gap: 18px !important; }
  /* CRM: картинку уменьшить */
  .svc-flip-sm > *:first-child{ max-width: 150px !important; }

  /* «Как выглядит результат»: инфографики почти во всю ширину блока */
  .svc-result-panel{ padding: 12px !important; }
}

/* ===== Index: «Почему компании» + «Что мы создаём» (мобилка) ===== */
@media (max-width: 760px){
  /* «Почему компании обращаются к нам»: иконка на одной строке с заголовком */
  #prb .hover-lift{ display:grid !important; grid-template-columns:46px 1fr !important;
    column-gap:12px !important; align-items:center !important; }
  #prb .hover-lift > svg{ margin:0 !important; }
  #prb .hover-lift > h4{ margin:0 !important; align-self:center; }
  #prb .hover-lift > p{ grid-column:1 / -1 !important; margin-top:8px !important; }

  /* «Что мы создаём»: карточки одинакового размера (эталон — CRM), картинки одной высоты */
  .svc-grid > * > *:first-child{ height:170px !important; min-height:170px !important;
    flex:0 0 170px !important; overflow:hidden; }
}

/* ===== Services: инфографики — плашки. Стили РАЗДЕЛЕНЫ по инфографикам ===== */
/* Hero (svc-ig-hero) НЕ масштабируется — плашки нормального размера на любой ширине */
/* Плотные инфографики уменьшаем ТОЛЬКО пока контейнер реально узкий (< натуральной ширины) */
@media (max-width: 479px){
  .svc-ig-chaos [style*="translate(-50%"]{ transform: translate(-50%,-50%) scale(0.72) !important; }
  .svc-ig-unified [style*="translate(-50%"]{ transform: translate(-50%,-50%) scale(0.72) !important; }
  .svc-ig-uni2 [style*="translate(-50%"]{ transform: translate(-50%,-50%) scale(0.78) !important; }
}

/* ===== Index: карточка Интернет-магазины — картинка целиком в область (без обрезки) ===== */
@media (max-width: 760px){
  .svc-grid > *:first-child > *:first-child > svg{
    width:auto !important; max-width:100% !important;
    height:100% !important; max-height:100% !important;
    padding:0 !important; box-sizing:border-box !important;
  }
}

/* ===== Index: «Наш подход» — нижний интервал как верхний ===== */
.approach-desc{ margin-top:12px !important; min-height:22px !important; }

/* ===== Services: «Стала единая» — вернуть aspect-ratio (SVG не должен переполнять контейнер) ===== */
@media (max-width: 760px){
}