/* ==========================================================================
   GPM — Услуги и цены (категория). Этап 3.
   Секции ниже каталога берутся КАК НА ГЛАВНОЙ (services.css/home-figma.css + JS).
   Здесь — только уникальное для страницы: заголовок, крошки, каталог услуг.
   Файл подключается последним → переопределяет services.css для каталога.
   ========================================================================== */

/* Хлебные крошки — компонент .page_breadcrumbs / .B_crumbBox в design-system.css. */

/* -------------------------------------------------------------------------
   Каталог услуг — сетка карточек-категорий (уникально для этой страницы)
   ------------------------------------------------------------------------- */
/* сброс легаси Bootstrap media-object / grid внутри каталога */
.intro_section2 .row.columns_margin_bottom_20 { display: block !important; }
.intro_section2 .content-block-left { width: 100% !important; max-width: 100% !important; }
.intro_section2 .services-grid { display: grid !important; }
.intro_section2 .services-grid-col { width: auto !important; float: none !important; max-width: none !important; }
.uslugi-svc-card .media,
.uslugi-svc-card .media.teaser { display: flex !important; width: auto !important; margin: 0; }
.uslugi-svc-card .media-body { display: block !important; width: auto !important; }
.uslugi-svc-card .media-left { display: block !important; float: none !important; padding: 0; width: auto !important; }

.intro_section2 { font-family: var(--ds-font); color: var(--ds-text); padding: 20px 0 60px; }
.intro_section2 .container-fluid {
  max-width: var(--ds-container);       /* единый статичный контейнер */
  margin: 0 auto;
  padding: 0 var(--ds-gutter);          /* единый гуттер (было 24px) */
  width: 100%;
}
.intro_section2 .content-block-left { padding: 0 !important; background: transparent; }  /* обнуляем легаси ~53px (иначе двойной отступ → каталог на 91 вместо 68) */

.intro_section2 .services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
.intro_section2 .services-grid-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  max-width: none;
  flex: initial;
}

/* карточка категории (переопределяет services.css .a_service2) */
/* .ds-card + чуть сильнее тень (--elevated не через класс — только тень) */
.uslugi-svc-card { padding: 22px 26px; margin: 0; box-shadow: var(--ds-shadow-card); }
.uslugi-svc-card .media.teaser { display: flex; gap: 18px; align-items: flex-start; margin: 0; }
.uslugi-svc-card .media-left { flex: 0 0 auto; }
.uslugi-svc-card .teaser_icon {
  width: 52px; height: 52px;
  border-radius: var(--ds-r-md);
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  display: flex; align-items: center; justify-content: center;
}
.uslugi-svc-card .teaser_icon img,
.uslugi-svc-card .teaser_icon svg { width: 28px; height: 28px; object-fit: contain; }
.uslugi-svc-card .media-body { flex: 1 1 auto; min-width: 0; }
.uslugi-svc-card .media-body ul { list-style: none; margin: 0; padding: 0; }
.uslugi-svc-card .media-body li { margin: 0; }

/* строка услуги: название слева, цена справа */
.intro_section2 a.service_as_table {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 12px; margin: 0 -12px;
  border-radius: var(--ds-r-sm);
  text-decoration: none; color: var(--ds-text);
  border-bottom: 1px solid var(--ds-border-soft);
  transition: background var(--ds-transition), color var(--ds-transition);
}
.uslugi-svc-card .media-body li:last-child a.service_as_table { border-bottom: 0; }
.intro_section2 a.service_as_table > div:first-child {
  font-size: var(--ds-body-m); line-height: 1.35; font-weight: var(--ds-fw-medium);
}
.intro_section2 a.service_as_table > div:last-child {
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--ds-body-m); font-weight: var(--ds-fw-semibold);
  color: var(--ds-brand);
}
.intro_section2 a.service_as_table:hover { background: var(--ds-brand-soft); }
.intro_section2 a.service_as_table:hover > div:first-child { color: var(--ds-brand); }

/* -------------------------------------------------------------------------
   Адаптив каталога
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .intro_section2 .services-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .uslugi-svc-card { padding: 18px; }
  .intro_section2 a.service_as_table { flex-wrap: wrap; gap: 4px; }
  .intro_section2 a.service_as_table > div:last-child { font-size: var(--ds-body-s); }
}

/* ==========================================================================
   Секции ниже каталога — чисто на ДС (без services.css)
   ========================================================================== */
/* заголовки секций — единый размер --ds-h2 (28px на мобилке, 50px на десктопе)
   вместе со всеми остальными section_header на сайте. Раньше здесь h2 ужимался
   до h4 (23px), а на самой узкой мобилке — до h5 (34px), из-за чего заголовки
   «ФОТО ПЕРСОНАЛА», «Районы выезда» отличались от остальных по размеру. */
.page_testimonials .section_header,
.our_guarantees .section_header,
.ls.section_padding_40 h2,
.reviews-section .section_header {
  font-family: var(--ds-font);
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-h2);
  line-height: var(--ds-h2-lh);
  letter-spacing: -0.02em;
  color: var(--ds-text);
  text-align: center;
  margin: 0 0 34px;
}
.page_testimonials .section_header .small { font-size: inherit; font-weight: inherit; }

/* «Наши гарантии» — компонент .our_guarantees в design-system.css. */

/* Районы выезда — карта */
.ls.section_padding_40 iframe,
.ls.section_padding_40 ymaps,
.ls.section_padding_40 [class*="ymaps-2"] {
  border-radius: var(--ds-r-card);
  overflow: hidden;
}
.ls.section_padding_40 .container { max-width: var(--ds-content); }

/* адаптив нижних секций — заголовки унифицированы выше через --ds-h2. */

/* ==========================================================================
   Фиксы: горизонтальный скролл + центрирование контента как на Главной
   ========================================================================== */
/* overflow-x: clip, а НЕ hidden — hidden делает html/body scroll-контейнером и ломает
   position:sticky у шапки (проверено: при hidden шапка уезжает). clip так же режет
   горизонтальный скролл, но не создаёт scroll-контейнер. */
html, body { overflow-x: clip; max-width: 100%; }
.grecaptcha-badge { display: none !important; }

/* центрируем ВСЕ контентные контейнеры страницы (форма/карта/отзывы/крошки) */
.page_breadcrumbs > .container,
.intro_section2 > .container-fluid,
.page_testimonials > .container,
.ls.section_padding_40 > .container,
.ls.section_padding_100 > .container,
.ls.section_padding_40 > .container-fluid,
.ls.section_padding_100 > .container-fluid,
.our_guarantees .pixel-guarantees {
  max-width: var(--ds-container) !important;   /* было --ds-content(1320) — единый статичный контейнер */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}
/* карусель не должна пушить ширину страницы */
.ds-carousel { max-width: 100%; overflow: hidden; }
.ds-carousel .ds-carousel__track { max-width: 100%; }

/* ==========================================================================
   Форма «Оставьте заявку» (main.form / AjaxForm) — чисто на ДС
   ========================================================================== */
.ls.section_padding_100 .ajax_form {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-r-card);
  box-shadow: var(--ds-shadow-card);
  padding: 36px 40px;
  max-width: 760px; margin: 0 auto;
  display: block;
}
.ls.section_padding_100 .ajax_form > .col-md-6,
.ls.section_padding_100 .ajax_form > [class*="col-"] { width: 100% !important; max-width: 100% !important; padding: 0; float: none !important; }
/* .form-group ритм — компонент в design-system.css. */
.ajax_form .fio-group { display: none !important; }              /* honeypot */
/* .sr-only — утилита в design-system.css. */
.ajax_form .input-group { display: block; position: relative; }
.ajax_form .input-group > i[class*="flaticon"],
.ajax_form .input-group-addon { display: none !important; }       /* сломанные flaticon-иконки */
/* Поля — компонент .ds-field. Раньше здесь был свой вид (54px, радиус 12,
   фон страницы вместо белого) — расходился с остальными формами сайта. */
.ajax_form label { font-family: var(--ds-font); font-size: var(--ds-body-s); color: var(--ds-text-2); }
.ajax_form .required { color: var(--ds-brand); }
/* кнопка */
/* Кнопка отправки — компонент .ds-btn; здесь только размер под форму.
   Радиус был 999px (единственная «таблетка» на сайте) — приведён к общему. */
.ajax_form button, .ajax_form .btn, .ajax_form [type="submit"] {
  height: 54px; padding: 0 34px; margin-top: 6px;
}
/* заголовок формы */
.ls.section_padding_100 .container > .row > .col-md-12 > .to_animate p span { color: var(--ds-text); }

/* ==========================================================================
   Полиш: единый фон (серый body + белые карточки) + видимые стрелки карусели
   ========================================================================== */
/* чередование фона как на Главной: серый → белый → серый → белый → серый.
   .ls.page_breadcrumbs (0,2,0) — перебиваем home-figma `body>section.ls`(белый),
   иначе крошки белые над серым каталогом («белый только сверху»). */
.ls.page_breadcrumbs,
.page_breadcrumbs,
.section_padding_140.intro_section2 { background: transparent; }   /* серый: заголовок+каталог */
.ls.page_testimonials { background: var(--ds-surface); }            /* белый: ФОТО ПЕРСОНАЛА */
.ls.section_padding_40 { background: transparent; }                 /* серый: карта */
.our_guarantees { background: var(--ds-surface); }                  /* белый: гарантии */
.ls.section_padding_100 { background: transparent; }               /* серый: форма */
.page_testimonials.parallax { background-image: none; background-attachment: initial; }
/* карусель: стрелки не обрезаются */
.ds-carousel { overflow: visible !important; }
.ds-carousel .ds-carousel__track { border-radius: var(--ds-r-card); }

/* ==========================================================================
   Отзывы — блок рейтинга Яндекс (reviews.soc.block); пустая owl-карусель скрыта JS
   ========================================================================== */
.reviews-soc__wrapper { max-width: 480px; margin: 6px auto 0; padding: 0 24px; }
.reviews-soc__wrapper > .row { margin: 0; }
.reviews-soc__item { width: 100% !important; max-width: 100% !important; padding: 0; float: none !important; }
/* компонент .ds-card + усиленная тень */
.reviews-soc__item-border {
  margin: 0; display: block; box-shadow: var(--ds-shadow-card); padding: 20px 28px;
  transition: box-shadow var(--ds-transition), transform var(--ds-transition);
}
.reviews-soc__item-border:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(2,6,23,.10); }
.reviews-soc__item-border > a {
  display: flex !important; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; text-decoration: none;
}
.reviews-soc__item-border > a > [class*="col-"] { width: auto !important; max-width: none !important; padding: 0; float: none !important; }
.reviews-soc__info { display: flex; align-items: center; gap: 14px; }
.reviews-soc__logo img { height: 34px; width: auto; display: block; }
.reviews-soc__rating {
  font-family: var(--ds-font); font-size: var(--ds-h5); line-height: 1;
  font-weight: var(--ds-fw-semibold); color: var(--ds-brand);
}
/* CSS-звёзды и Ya-badge — компонент в design-system.css. */

/* ==========================================================================
   Единый вертикальный ритм секций
   (иконки полей формы не используем — форма как на Главной)
   ========================================================================== */
.ajax_form .input-group { position: relative; }

/* ---- ритм разделов — как на Главной: контентные секции 40px сверху/снизу ---- */
.section_padding_140.intro_section2 { padding: 16px 0 40px; }
.ls.page_testimonials { padding: 40px 0; }
.ls.section_padding_40 { padding: 40px 0; }
.reviews-section { padding: 40px 0; }
.our_guarantees { padding: 40px 0; }
.ls.section_padding_100 { padding: 40px 0; }
/* заголовок раздела — единый нижний отступ */
.page_testimonials .section_header,
.our_guarantees .section_header,
.ls.section_padding_40 h2,
.reviews-section .section_header { margin: 0 0 40px; }
/* пустая owl-карусель отзывов — не занимает место */
.reviews-carousel_wrapper { display: none !important; }
.reviews-soc__wrapper { margin: 0 auto; }

/* ==========================================================================
   Полиш формы — как на Главной (ширина, крупная кнопка, файл-инпут)
   ========================================================================== */
.ls.section_padding_100 .ajax_form { max-width: 640px !important; padding: 32px 36px; }
/* .form-group ритм — компонент в design-system.css. */
/* кнопка — крупная красная pill на всю ширину */
.ajax_form [type="submit"], .ajax_form button, .ajax_form .btn {
  width: 100%; height: 56px; margin-top: 12px;
  font-size: var(--ds-body-l); font-weight: var(--ds-fw-medium);
  letter-spacing: .01em;
}
/* файл-инпут — аккуратно */
.ajax_form input[type="file"] {
  height: auto !important; padding: 12px 0; padding-left: 46px;
  font-size: var(--ds-body-s); color: var(--ds-text-3);
  background: transparent; border: 0;
}
.ajax_form input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-pill); background: var(--ds-bg); color: var(--ds-text-2);
  font-family: var(--ds-font); font-size: var(--ds-body-s); cursor: pointer;
  transition: background var(--ds-transition);
}
.ajax_form input[type="file"]::file-selector-button:hover { background: var(--ds-brand-soft); color: var(--ds-brand); }
/* согласие — компонент .ds-check-label (design-system.css) */

.ajax_form input[type="file"] { padding-left: 0; }

/* ==========================================================================
   Навигация (крошки) — НАД заголовком, органично
   ========================================================================== */
/* внутренний порядок «крошки → h1» — специфика этой страницы */
.page_breadcrumbs .col-sm-12 { display: flex; flex-direction: column; }
.page_breadcrumbs .B_crumbBox { order: 1; margin: 0 0 12px; }
.page_breadcrumbs h1 { order: 2; margin: 0; }
.page_breadcrumbs .price-under-h1 { order: 3; }

/* форма-секция не растягивается на всю высоту экрана (min-height:100vh с легаси) */
.bl.section_padding_100, .ls.section_padding_100 { min-height: 0 !important; height: auto !important; }

/* .ya-badge* — компонент в design-system.css. */

/* ==========================================================================
   Контент по ширине хедера — как на Главной (.container max-width 1440 + padding 60)
   ========================================================================== */
.page_breadcrumbs .container,
.intro_section2 .container-fluid,
.our_guarantees .pixel-guarantees,
.page_testimonials .container,
.ls.section_padding_40 .container,
.ls.section_padding_100 .container,
.reviews-section .container,
.reviews-carousel_wrapper.container {
  max-width: var(--ds-container) !important;   /* было 1440 — растягиваем на широких (статичный гуттер) */
  padding-left: var(--ds-gutter);
  padding-right: var(--ds-gutter);
  margin-left: auto;
  margin-right: auto;
}
/* …но плашка Яндекс-отзывов — узкая и по центру, как на Корпоративной (480px),
   а НЕ на всю ширину (иначе .page_testimonials .container растягивает её на 1440) */
.reviews-soc__wrapper.container {
  max-width: 480px !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* КАТАЛОГ УСЛУГ: жёстко фиксируем единый гуттер (что-то легаси перебивало на ~30px) */
.section_padding_140.intro_section2 > .container-fluid {
  padding-left: var(--ds-gutter) !important;
  padding-right: var(--ds-gutter) !important;
}

/* ==========================================================================
   Форма «Оставьте заявку»: картинка оператора меньше + форма компактнее
   ========================================================================== */
.ls.section_padding_100 .order-img,
.ls.section_padding_100 .col-md-7 img {
  max-width: 340px !important; max-height: 320px !important;
  width: auto !important; height: auto !important;
  display: block; margin: 0 auto;
}
.ls.section_padding_100 .ajax_form .form-group,
.ls.section_padding_100 .quote-form .form-group { margin-bottom: 8px; }
/* Высота полей и кнопки — общая (компоненты .ds-field / .ds-btn). */

/* ФИКС формы: main.form.ux = .bl.section_padding_100 (не .ls); целюсь в .quote-form напрямую.
   Размер картинки НЕ переопределяем — она рендерится единым компонентом из
   design-system.css (`.bl.section_padding_100:has(picture) picture` = портрет 400×600,
   один-в-один с Главной). Раньше здесь была шринковка .order-img до 320×300 —
   на /uslugi-i-tseny/ выглядело мельчиной по сравнению с Главной. */
.bl.section_padding_100 { min-height: 0 !important; height: auto !important; }
.quote-form .form-group { margin-bottom: 8px; }
/* высота textarea — стандартная (--ds-field-h-ta 118px), как во всех формах. */
.quote-form [type="submit"], .quote-form button.theme_button { margin-top: 4px; }

/* ==========================================================================
   Адаптив: отступы контейнеров под ширину экрана + форма
   ========================================================================== */
/* адаптивные гуттеры контейнеров теперь берутся из единого токена --ds-gutter
   (design-system.css: 1100→40, 768→24, 480→16) — как у шапки; кастомные 32/16 убраны */
@media (max-width: 640px) {
  /* #11 каталог услуг на всю ширину: content-block-left держал ~53px паддинга
     с каждой стороны (не сброшен), сжимая карточки и сдвигая их вправо. */
  .intro_section2 .content-block-left { padding-left: 0 !important; padding-right: 0 !important; }
  .intro_section2 .services-grid { grid-template-columns: 1fr !important; }
  .intro_section2 .services-grid-col { width: 100% !important; max-width: 100% !important; }
  /* иконка категории — сверху, список услуг во всю ширину карточки (шире) */
  .uslugi-svc-card .media.teaser { flex-direction: column; gap: 12px; }
  .uslugi-svc-card .media-left { align-self: flex-start; }
  .uslugi-svc-card .media-body { width: 100%; }
  /* форма: колонки в стек, карусель-фото уже */
  .bl.section_padding_100 .col-md-5, .bl.section_padding_100 .col-md-7 { width: 100% !important; max-width: 100% !important; float: none !important; }
  /* картинку .order-img на мобилке НЕ шринкуем: компонент из design-system.css
     сам делает 100% ширины до max-width:400px, портрет 2:3 (как на Главной). */
  .testimonials-carousel.ds-carousel__track > div { width: 260px !important; }
  /* Мобильный H1 — компонент задан в design-system.css (28px при ≤600px);
     здесь ничего не переопределяем, иначе значения из двух файлов расходятся. */
}

/* Адаптив плашки Яндекс-отзывов (мобилка) — контент карточки был шире её
   контент-бокса, «4.9» уходило за правую границу (визуально не оставалось
   правого паддинга). Ужимаем логотип/звёзды/шрифты так, чтобы info + rating
   умещались, а правый паддинг был симметричен левому. */
@media (max-width: 640px) {
  .reviews-soc__wrapper { max-width: 100% !important; padding: 0 16px; }
  .reviews-soc__item-border { padding: 16px 18px; box-sizing: border-box; }
  .reviews-soc__item-border > a { gap: 8px !important; }
  .reviews-soc__info { gap: 8px !important; }
  .ya-badge { font-size: 15px !important; }
  .ya-badge__logo { width: 22px !important; height: 22px !important; }
  .reviews-soc__stars { width: 74px !important; }
  .reviews-soc__stars::before,
  .reviews-soc__stars > div::before { font-size: 14px; letter-spacing: 2px; }
  .reviews-soc__rating { font-size: var(--ds-h6) !important; }
}