@charset "UTF-8";
/**
 * Первый экран /uslugi: плашка и заголовок — НА снимке (планшет и телефон).
 *
 * Решение Павла 19.10.2026: на ширинах ≤980 поднять метку раздела и H1
 * на изображение, лид/кнопки/сноску оставить под ним.
 *
 * Почему отдельным файлом: sections.css и responsive.css заперты как чужие
 * слайсы (норма карусели кейсов), правки — только своим файлом, подключённым
 * последним. Приём тот же, что у главной (responsive.css, блоки 10а–10е:
 * карточка — сетка в одну колонку, .hero__text отдаёт детей наверх через
 * display: contents), но с двумя отличиями:
 *   — на телефоне плашка тоже остаётся на снимке (у главной ниже 492px она
 *     выносится над кадром);
 *   — ширина заголовка ограничена левой частью кадра: на фото «консультация»
 *     люди справа, левый верх светлый (яркость ~219), тёмный текст читается.
 *
 * Десктоп (≥981) не задет: все правила внутри @media и под body.page-id-6
 * (у /uslugi/ WP отдаёт только page-id-6 — проверено на живой странице).
 */

@media (max-width: 980px) {
  body.page-id-6 .hero__card {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 0 24px;
  }

  /* Коробка текста уходит, дети становятся ячейками сетки карточки. */
  body.page-id-6 .hero__text { display: contents; }

  body.page-id-6 .hero__bg {
    grid-row: 1;
    grid-column: 1;
  }

  body.page-id-6 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }

  /* 71px = 22px поля плашки + 37px её высота + 12px зазор (как у главной).
     50% справа — на планшете лицо начинается примерно с середины кадра. */
  body.page-id-6 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 50% 0 18px;
    font-size: 34px;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  body.page-id-6 .hero__lead { grid-row: 2; }
  body.page-id-6 .hero__text .btn-row { grid-row: 3; }

  body.page-id-6 .hero__note,
  body.page-id-6 .hero__notes { grid-row: 4; }
}

@media (max-width: 640px) {
  /* Кадр сдвинут влево: на фото «консультация» люди стоят центр-справа,
     при object-position 60% лицо оказывалось под заголовком (замер 19.10:
     лицо начинается на x≈196 при тексте до x≈295). */
  body.page-id-6 .hero__bg { object-position: 20% center; }

  body.page-id-6 .hero__pill {
    margin: 16px 0 0 14px;
    font-size: 13px;
    max-width: calc(100% - 28px);
  }

  /* 60px = 16px поля плашки + 32px высота на кегле 13px + 12px зазор.
     40% справа — колонка кончается до лица (на 390: текст до x≈231,
     лицо с x≈244). */
  body.page-id-6 .hero__text h1 {
    margin: 60px 40% 0 14px;
    font-size: 22px;
    line-height: 1.18;
    overflow-wrap: break-word;
  }

  body.page-id-6 .hero__lead { margin-top: 22px; }
}

/* 320-360: колонка уже, длинное слово «Бухгалтерские» на 22px в неё
   не влезает — ступенькой вниз кегль, как у главной в блоке 10в. */
@media (max-width: 360px) {
  body.page-id-6 .hero__text h1 {
    margin-right: 38%;
    font-size: 19px;
  }
}

/* ------------------------------------------------------------------
 * Карточки услуг на планшете: нечётная последняя карточка.
 *
 * blocks.css (@media ≤960) задаёт карточке `flex: 1 1 calc(50% - 8px)`.
 * Если в блоке нечётное число карточек (у «Разовых услуг» их три), третья
 * остаётся одна в ряду и из-за flex-grow растягивается на всю ширину —
 * замер 19.10 на 768: 736px против 360px у соседних. Держим половину.
 * ------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-6 .services-block .service-card {
    flex: 0 0 calc(50% - 8px);
  }
}

/* ------------------------------------------------------------------
 * Карточка услуги на телефоне: описание не должно уходить под цену.
 *
 * blocks.css держит описание и чек-лист абсолютными (hover-своп на десктопе):
 * `.content-wrapper` из-за этого имеет нулевую высоту, и на узком экране
 * длинное описание выходит за пределы карточки и наезжает на блок цены.
 * Замер 19.10 на 390: карточка «Бухгалтерское сопровождение под ключ» —
 * описание заканчивалось на 20px НИЖЕ начала цены; у остальных карточек
 * запас был всего 5px.
 *
 * На тач-экране своп не нужен: показываем описание в потоке, чек-лист
 * (состояние наведения) скрываем, карточка растёт по содержимому. Отступы
 * внутри карточки выравниваем: 16px между описанием и ценой, одинаковый
 * padding у всех карточек.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body.page-id-6 .services-block .service-card {
    min-height: 0;
  }

  body.page-id-6 .services-block .card-top {
    flex-grow: 0;
    margin-bottom: 0;
  }

  body.page-id-6 .services-block .content-wrapper {
    position: static;
    flex-grow: 0;
  }

  body.page-id-6 .services-block .service-description {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Чек-лист — состояние наведения; на телефоне наведения нет. */
  body.page-id-6 .services-block .checklist {
    display: none;
  }

  body.page-id-6 .services-block .card-bottom {
    margin-top: 16px;
    /* Кнопка есть только у выделенной карточки и выше цены на 24px:
       при align-items: flex-end цена уезжала вниз и зазор до описания
       становился 40px вместо 16. Прижимаем оба элемента к верху строки. */
    align-items: flex-start;
  }
}