/* =========================================================================
 * myProfit theme — кастомные override'ы под WP prod 2026-04-24.
 *
 * Базовый style.min.css (минифицированная тема) отдаёт hero padding-top до
 * 200px на широких экранах — из-за этого top-секция визуально "растянута"
 * и фото Рашида не заполняет доступную высоту контейнера. На WP prod
 * используется уменьшенный вдвое паддинг (max 6.5rem = 104px), что
 * реально совпадает со скриншотами, которые прислал владелец.
 *
 * Подключается последним в base.html → окончательное слово за нами.
 * ========================================================================= */

/* Smooth-scroll для якорных ссылок в шапке («Продукты», «О проекте»,
 * «Вопросы»). + scroll-padding-top чтобы якорь не прятался под хедером. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

.home-page__hero {
  padding-top: clamp(6.25rem, 3.78695rem + 6.31527vw, 6.5rem);
}

@media (max-width: 767.98px) {
  .home-page__hero {
    padding-bottom: 25px;
  }
}

@media (max-width: 576px) {
  section.home-page__hero {
    padding-top: 50px;
  }
}

/* На узких экранах (до 998px) прячем фото — как на WP prod. Hero
 * превращается в одноколоночный текст, фото только в desktop-варианте. */
@media (max-width: 998px) {
  .hero__img {
    display: none;
  }
}

/* Блок «Внедряем финансы 20 лет» (home.team) — скрываем фото спикера
 * в мобильной версии по просьбе клиента (2026-04-24). На WP prod фото
 * остаётся, у нас — убирается, чтобы мобильный блок был компактнее. */
@media (max-width: 998px) {
  .home-page__employee .right-employee__img {
    display: none;
  }
}

/* Content padding: на WP padding-top = 100px (a не 42px). Делает content box
 * выше и grid-row — тогда hero__img (height:100%) тянется больше. */
.hero__content {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Override базовой темы: на WP prod корневой /wp-content/themes/myProfit/
 * style.css задаёт всем home-секциям ровный padding 100px 0 (вместо clamp-
 * формулы из assets/css/style.min.css, которая на 1200px даёт 98/102px).
 * Мы скопировали только assets/css/, корневой style.css темы остался
 * на WP — переносим его правила сюда.  Сверено прямым замером на
 * mprib.ru через getBoundingClientRect (2026-04-24). */
.hero__content,
.home-page__steps,
.page__consult,
.home-page__products,
.home-page__work,
.home-page__employee,
.home-page__reviews,
.page-reviews__reviews,
footer.footer {
  padding: 100px 0 !important;
}
/* На prod work идёт впритык к products (padding-top: 0, bottom: 100). */
.home-page__work {
  padding-top: 0 !important;
}

@media (max-width: 998px) {
  /* Секции на мобиле компактнее (клиент, 2026-04-24): 40 → 20. */
  .home-page__steps,
  .page__consult,
  .home-page__products,
  .home-page__work,
  .home-page__employee,
  .home-page__reviews,
  .page-reviews__reviews,
  footer.footer {
    padding: 20px 0 !important;
  }
  /* Сохраняем впритык к products (как на desktop). */
  .home-page__work {
    padding-top: 0 !important;
  }
  /* Followup consult на мобиле ставит картинку над текстом. */
  .consult__container_1 {
    flex-direction: column-reverse;
  }
  /* Followup media (картинка) меньше и плотнее к тексту. */
  .consult__container_1 .consult__media {
    margin-bottom: 12px;
  }
  /* Hero-заголовок увеличиваем (base theme даёт 22/26 — мелко). */
  .home-page__hero .content-hero__title h1 {
    font-size: 28px;
    line-height: 1.2;
  }
  /* Слайд-меню: base theme использует `right: -100%` когда закрыто,
   * что делает элемент физически за правой границей viewport и порождает
   * горизонтальный скролл (body overflow-x: hidden не обрезает
   * position: fixed). Переходим на transform: translateX(100%) — он не
   * расширяет scroll bbox, так что горизонтального скролла нет. */
  .menu {
    right: 0 !important;
    left: auto !important;
    max-width: 100vw !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease;
  }
  .menu.active {
    transform: translateX(0) !important;
  }
  /* Предохранитель: даже если меню вылезло за правый край, скролл
   * не появится. clip (не hidden) — чтобы window.scrollTo продолжало
   * работать. */
  html, body {
    overflow-x: clip;
  }
}

/* На самых узких экранах сайдбар занимает всю viewport (совпадает с
 * prod-правилом `@media (max-width: 575.98px) .menu { width: 100% }`).
 * На промежуточных (576-1191.98) ширина default, content-based —
 * около 346 px, как на prod. */
@media (max-width: 575.98px) {
  .menu {
    width: 100% !important;
  }
  /* SEO-тексты в футере (вкладки services) на мобиле мельче —
   * клиент попросил, чтобы они визуально меньше нагружали экран. */
  .footer-tabs__body p {
    font-size: 12px;
    line-height: 1.4;
  }
  .footer-tabs__body h5 {
    font-size: 14px;
  }
}

/* Плавающая кнопка «Наверх»: fixed справа-снизу, появляется JS-ом
 * (атрибут hidden снимается после 400 px scroll). Стиль — тот же, что
 * у footer.scroll-to-top, но position: fixed + z-index над контентом. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--secondaryColor, #fff);
  box-shadow: 0 4px 16px rgba(19, 23, 29, 0.18);
  border: 1px solid rgba(19, 23, 29, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease;
  color: var(--accentColor, #1A6ACD);
}
.back-to-top[hidden] {
  display: none;
}
.back-to-top:hover {
  transform: translateY(-2px);
}

/* Подстраницы без hero-секции (kontakty, reviews, policy, sitemap,
 * thank-you) получают class "without-hero" на <body>. На prod из
 * корневого style.css:
 *   .without-hero main { padding-top: 93px }
 *   .without-hero .header { top: unset; padding: 20px 0 }
 *   .without-hero .header._header-scroll, .header.open { padding: 0 }
 * Без этого header перекрывал заголовок «Наши контакты» и т.п. */
.without-hero main {
  padding-top: 93px;
}
.without-hero .header {
  top: unset;
  padding: 20px 0;
}
.without-hero .header._header-scroll,
.without-hero .header.open {
  padding: 0;
}

/* Reviews preview на главной: обе колонки (yandex-виджет и блок steps-
 * items) должны занимать равную ширину ~560 px. Base тема даёт
 * flex: 0 1 560px только виджету, а steps-items остаётся на
 * flex: 0 1 auto — из-за чего content-max-width (особенно при длинных
 * текстах пунктов) уезжает влево на всю оставшуюся ширину. Фиксируем
 * flex-basis 560, min-width: 0 чтобы item мог сжаться по тексту.
 * ТОЛЬКО на desktop — на мобиле inner становится flex-column, и
 * 560 превращается в принудительную высоту с пустым местом снизу. */
@media (min-width: 999px) {
  .home-page__reviews .reviews-inner__steps-items {
    flex: 0 1 560px;
    min-width: 0;
  }
}

/* Products карточки:
 * — base тема даёт .item-products { height: fit-content }, что отменяет
 *   grid-stretch и выравнивание высот. На prod три карточки 604px всё
 *   равно одинаковы только потому что контент случайно совпадает; в
 *   нашем случае 1-я выше из-за <br> в heading — чиним явно.
 * — content flex column с flex:1 + spoller margin-top:auto прижимает
 *   кнопку «Что вы получите» и кнопку «Узнать стоимость» к низу, как
 *   пользователь просил.
 * — FAQ-блок в 3-м товаре («Ответ на вопросы:») — заголовок синим жирным
 *   16px/margin-bottom 16px, по замерам prod. */
.home-page__products .item-products {
  height: auto;
}
.home-page__products .item-products__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Block с сегментами имеет фиксированную min-height 300 на desktop (768+),
 * чтобы во всех трёх карточках «Что вы получите» стартовал с одной
 * линии — как на prod. На мобиле ограничение снимается. */
@media (min-width: 768px) {
  .home-page__products .content-products__block {
    min-height: 300px;
  }
}
.home-page__products .spollers-products__faq-title {
  color: #1A6ACD;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
  margin-top: 6px;
}

/* Swiper-стрелки: на prod корневой style.css темы перекрывает white
 * фон на rgba(255,255,255,0.4), чтобы стрелки на голубом hero-фоне
 * выглядели как матовое стекло. Переносим. */
.swiper-arrow {
  background-color: rgba(255, 255, 255, 0.4);
}

/* Пункты spoller-list: галочка/вопрос-иконка выровнена с первой строкой
 * текста (align-items: flex-start), а не по центру многострочного p.
 * На prod `.products_list { display: flex }` идёт из корневого style.css
 * темы, которого у нас нет — портируем. */
.home-page__products .products_list {
  display: flex;
  align-items: flex-start;
}
.home-page__products .products_list img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 8px;
  margin-top: 0;
}

/* Подсветка незаполненных required-полей после попытки submit — выглядит
 * как красная обводка на .form-popup__input-wrap (цвет #F43838, как в
 * базовой теме для класса .item--error). Триггер — class .was-validated
 * на форме, который проставляется JS ниже при неудачной нативной
 * валидации. Цвет label не меняем — на prod (image #14) он остаётся
 * обычным серым. */
.form-popup.was-validated .form-popup__input-wrap:has(:invalid) {
  outline-color: #F43838 !important;
}

/* Popup «Отправить заявку» — сверено с WP prod через getBoundingClientRect:
 * — поля: 54px (base padding 8/7 из темы, не трогаем);
 * — gap между textarea-row и popup__btns: 32px (WP делает это через
 *   <br><br> прямо в форме; у нас margin-bottom на textarea-wrap);
 * — textarea сводим в одну строку (на WP это <input>, у нас <textarea
 *   rows="1" + resize:none + min-height:0).
 * Селектор с «+» таргетит строго textarea-wrap (прямой сосед inner-row),
 * иначе margin-bottom попадает в flex-row и через align-items: stretch
 * вытягивает соседний поле (баг 2026-04-24). */
.popup .form-popup__input-inner + .form-popup__input-wrap {
  margin-bottom: 2rem;
}
/* Popup #price (single-field форма «Узнать стоимость»): нет textarea-wrap
 * после inner, поэтому gap inner→btns = 58 (на prod: 26 inner.mb + 32 от
 * <br><br> между ними). Навешиваем одним margin-bottom на inner, чтобы
 * не ломать высоту самой кнопки через padding-top. */
#price .form-popup__input-inner {
  margin-bottom: 58px;
}
.popup .form-popup__textarea {
  min-height: 0;
  resize: none;
  overflow: hidden;
}

/* =========================================================================
 * Страница «Спасибо за заявку» (/zayavka-prinyata/) — переписана
 * 2026-04-24. Раньше использовала чужой класс .home-page__steps, отчего
 * блок выглядел "сиротливо". Теперь — самостоятельная карточка.
 * ========================================================================= */

.page-thanks {
  padding: 60px 0 80px;
}
.thanks__container.container {
  max-width: 760px;
}
.thanks__card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(26, 106, 205, 0.10),
              0 2px 6px rgba(19, 23, 29, 0.05);
  padding: 56px 48px 48px;
  text-align: center;
}
.thanks__icon {
  margin: 0 auto 24px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thanks__title {
  margin: 0 0 14px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--main-font-color, #13171D);
}
.thanks__subtitle {
  margin: 0 0 32px;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: #555F6E;
}
.thanks__body {
  margin: 0 0 24px;
  color: #555F6E;
}
.thanks__body p {
  margin: 0 0 8px;
}
.thanks__actions {
  margin: 0 0 36px;
}
.thanks__actions .button {
  /* Та же высота/радиус, что у основной .button темы — чуть уже паддинги
   * по горизонтали, чтобы кнопка не выглядела гигантской на узком блоке. */
  padding: 1.125rem 2.25rem;
  font-size: 1rem;
}
.thanks__faster {
  border-top: 1px solid #EEF2F8;
  padding-top: 28px;
}
.thanks__faster-title {
  margin: 0 0 18px;
  font-size: 1rem;
  color: #555F6E;
}
.thanks__socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* В теме .contacts__social-btn спроектированы под секцию контактов с
 * тёмным фоном — на белой карточке выглядят бледно. Локально усиливаем
 * рамку и контраст. */
.thanks__socials .contacts__social-btn {
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid #E0E7F2;
  background: #F7F9FC;
  color: var(--main-font-color, #13171D);
  font-weight: 600;
  transition: all 0.2s ease;
}
.thanks__socials .contacts__social-btn:hover {
  border-color: #1A6ACD;
  background: #1A6ACD;
  color: #fff;
}

@media (max-width: 575.98px) {
  .page-thanks {
    padding: 40px 0 60px;
  }
  .thanks__card {
    padding: 36px 20px 32px;
    border-radius: 12px;
  }
  .thanks__title {
    font-size: 1.5rem;
  }
  .thanks__subtitle {
    font-size: 1rem;
    margin-bottom: 24px;
  }
  .thanks__actions .button {
    padding: 1rem 1.75rem;
    width: 100%;
  }
  .thanks__socials .contacts__social-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}