/* ─────────────────────────────────────────────────────────────
   auto-transport.less — блок «Перевозка личного авто».

   Макет Figma  rMWJxuw3uLvAMW60DCI1oV
       desktop  node 1:79   (кадр 1136 px)
       mobile   node 1:141  (кадр 450 px)

   Все классы с префиксом .at-* — блок намеренно изолирован. В прежней
   версии имена были общие (.text-block, .main-title, .service-item,
   .step-item, .number-block, .btn-call, .partOne…) и объявлялись без
   привязки к блоку. На трёх страницах переездов это пока ни с чем
   не пересекалось, но .text-block уже занят калькулятором грузоперевозок
   (#calc-new .calc #gruz .row .text-block в site.css, calc-mini-map.css,
   calc-price-box.css) — стоило поставить блок на страницу с этим
   калькулятором, и правила поехали бы друг на друга.

   Компиляция:
     node_modules/.bin/lessc --clean-css public_html/css/auto-transport.less public_html/css/auto-transport.css
   ───────────────────────────────────────────────────────────── */
/* ─── Токены макета ─────────────────────────────────────────── */
/* ─── Самохост Roboto (woff2, @fontsource) ──────────────────────────
   На страницах переездов подключается pereezd_hub.css, в котором Roboto
   НЕ объявлен, а глобально из Google грузится только Montserrat. Прежняя
   версия блока просила 'Roboto' и молча получала Arial — весь блок ехал
   мимо макета. Объявления и файлы — те же, что в gruzchiki_hub.css. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ─── Корень блока ──────────────────────────────────────────── */
/* Figma 1:79 — вертикальная авто-раскладка, шаг 36 px. */
.at-block {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin: 36px 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #1D1D1D;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Блок вставляется в .container страницы, поэтому свою ширину не задаёт.
       Поля абзацев задаются каждому классу поимённо: общий сброс `p{margin:0}`
       по специфичности перебивал бы компенсацию trim у .at-service__desc
       и .at-cta__subtitle. */
}
/* ─── Шапка: надзаголовок, H2, лид, иллюстрация ─────────────── */
/* Figma 1:80 — колонка, шаг 16 px. */
.at-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.at-pretitle {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 2.1px;
  /* в макете 15% от 14 px */
  text-transform: uppercase;
  color: #2E5B35;
  margin: 0;
}
.at-title {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.5;
  color: #1D1D1D;
  /* В макете у этого текста включён text-box-trim: бокс обрезан по высоте
       заглавной буквы, и отступы 16 px отмеряются от самих букв. Браузер так
       не умеет (text-box поддержан не везде), поэтому срезаем полуинтерлиньяж
       отрицательным полем. 0.4em = (1.5 − 0.7cap) / 2 — не зависит от кегля. */
  margin: -0.4em 0;
}
/* Figma 1:83 — обёртка лида с вертикальным padding 20 px. */
.at-lead {
  padding: 20px 0;
}
.at-lead p {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: rgba(29, 29, 29, 0.6);
  margin: -0.295em 0;
  /* text-box-trim, Roboto: (1.3 − 0.711cap) / 2 */
}
.at-hero {
  display: block;
}
.at-hero img {
  display: block;
  width: 100%;
  height: auto;
}
/* ─── Инфо-часть: услуги + шаги ─────────────────────────────── */
/* Figma 1:86 — колонка, шаг 10 px. */
.at-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ─── Три услуги ────────────────────────────────────────────── */
/* Figma 1:87 — строка, шаг 30 px, колонки равной ширины. */
.at-services {
  display: flex;
  gap: 30px;
}
.at-service {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 16px;
  border-radius: 10px;
}
/* Подложка иконки: 60×60 (48 + padding 6). Штрихи иконок в макете
   вылезают за 48-й бокс — поэтому картинка 52×52 по центру. */
.at-service__icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: rgba(148, 193, 33, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-service__icon img {
  display: block;
  width: 52px;
  height: 52px;
}
.at-service__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.at-service__title {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #333333;
  margin: 0;
  overflow-wrap: break-word;
}
.at-service__desc {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: rgba(29, 29, 29, 0.6);
  margin: -0.295em 0;
  /* text-box-trim, как в макете */
  overflow-wrap: break-word;
}
/* ─── Три шага ──────────────────────────────────────────────── */
/* Figma 1:106 — колонка, padding 32 px по вертикали, шаг 24 px. */
.at-steps {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.at-steps__title {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #1D1D1D;
  margin: 0;
}
/* Figma 1:109 — строка, шаг 36 px. */
.at-steps__row {
  display: flex;
  gap: 36px;
  position: relative;
}
/* Пунктирная кривая между карточками (Figma 1:107). Лежит под карточками
   и видна только в просветах между ними. */
.at-steps__line {
  position: absolute;
  left: 3.345%;
  /*   38   / 1136 */
  top: 45.92%;
  /*   98.27 / 214 */
  width: 93.79%;
  /* 1065.5 / 1136 */
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.at-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  border: 1px solid #F5F7F8;
  border-radius: 16px;
  background: #F5F5F5;
}
.at-step__num {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.5;
  color: #D7D7D7;
  white-space: nowrap;
  margin: -0.4em 0;
  /* text-box-trim: в макете бокс номера 28 px, а не 60 */
}
.at-step__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.at-step__title {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #0F502C;
  margin: 0;
  overflow-wrap: break-word;
}
/* В макете у описания фиксированная высота 86 px — она и выравнивает
   три карточки по нижнему краю. Ставим min-height, чтобы длинный текст
   не обрезался. */
.at-step__desc {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: rgba(29, 29, 29, 0.6);
  min-height: 86px;
  margin: 0;
  overflow-wrap: break-word;
}
/* ─── Зелёный CTA ───────────────────────────────────────────── */
/* Figma 1:125 — padding 36, радиус 16, шаг 36. */
.at-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 36px;
  border-radius: 16px;
  background: linear-gradient(247.375deg, #2F9D36 8.886%, #145D3A 95.245%);
}
/* Иллюстрация: в макете вылезает за правый край и обрезается рамкой.
   Экспорт уже обрезан по кадру, поэтому просто прижимаем вправо. */
.at-cta__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 568px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.at-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.at-cta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 16px;
  background: linear-gradient(to right, #94C121, #DBDD01);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  color: #1D1D1D;
  white-space: nowrap;
}
.at-cta__text {
  max-width: 600px;
  color: #fff;
}
.at-cta__title {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  overflow-wrap: break-word;
}
.at-cta__subtitle {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  margin: -0.295em 0;
  /* text-box-trim, как в макете */
}
/* Figma 1:133 — строка кнопок, шаг 10 px. */
.at-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/*  Telegram и MAX — всегда рядом, одной парой.

    Если оставить все три кнопки прямыми детьми .at-cta__actions, при переносе
    строки на первой строке может остаться главная кнопка вместе с Telegram, а
    MAX уехать вниз в одиночестве. Группа переносится целиком и внутри себя
    не рвётся. */
.at-cta__messengers {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
}
.at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 24px;
  background: #FFE500;
  color: #333333;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.1s;
}
.at-btn:hover,
.at-btn:focus {
  background: #FFE500;
  color: #333333;
  opacity: 0.85;
  text-decoration: none;
}
.at-btn:active {
  transform: scale(0.97);
}
.at-btn img {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}
.at-btn--main {
  gap: 5px;
  height: 50px;
  padding: 12px 32px;
}
.at-btn--main span {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
}
.at-btn--icon {
  width: 50px;
  height: 50px;
  padding: 12px;
}
/* ═══ ≤1199 px — контейнер 940 px ════════════════════════════════
   Три колонки ещё помещаются (карточка услуги 293 px, шага 289 px),
   поэтому раскладка не меняется. */
/* ═══ <992 px — контейнер 720 px ═════════════════════════════════
   На трёх колонках карточка услуги ужалась бы до 220 px, а заголовок
   «Междугородние переезды» в 24 px требует 175 px без учёта иконки —
   текст полез бы наружу. Переходим на мобильную раскладку макета
   1:141: обе сетки в одну колонку. */
@media (max-width: 991.98px) {
  .at-services {
    flex-direction: column;
    gap: 30px;
  }
  .at-steps__row {
    flex-direction: column;
    gap: 36px;
  }
  /* Кривая соединяет карточки по горизонтали — в столбце она не нужна
       (в мобильном макете она тоже за кадром). */
  .at-steps__line {
    display: none;
  }
  /* Иллюстрация CTA в мобильном макете уезжает за кадр и не видна. */
  .at-cta__deco {
    display: none;
  }
  .at-cta__text {
    max-width: 100%;
  }
  /* Figma 1:195 — на мобильном кнопки центрируются и переносятся. */
  .at-cta__actions {
    justify-content: center;
  }
}
/* ═══ <768 px — контейнер резиновый ══════════════════════════════
   Мобильный макет 1:141 нарисован на 450 px и кегли там те же, что на
   десктопе. Оставляем их как есть — до 480 px они помещаются. */
@media (max-width: 767.98px) {
  .at-block {
    gap: 30px;
    margin: 24px 0;
  }
  .at-steps {
    padding: 24px 0;
  }
  /* Подпись «Рассчитать стоимость» не переносится, поэтому её кегль и поля
       плавно тянутся за шириной экрана: на 576 px и шире — ровно 26 px, как
       в макете, на 320 px кнопка всё ещё помещается целиком. */
  .at-btn--main {
    padding: 12px clamp(16px, 4vw, 32px);
  }
  .at-btn--main span {
    font-size: clamp(15px, 4.4vw, 26px);
  }
}
/* ═══ <480 px — телефоны 320…479 px ══════════════════════════════
   Кегли НЕ трогаем: в мобильном макете (кадр 450 px) они те же, что на
   десктопе, и на 320 px ни одна строка за край не выходит. Ужимаем только
   отступы — иначе на узком экране на текст остаётся слишком мало места,
   а кнопка «Рассчитать стоимость» упирается в край плашки. */
@media (max-width: 479.98px) {
  .at-lead {
    padding: 12px 0;
  }
  .at-service {
    gap: 12px;
  }
  .at-services {
    gap: 24px;
  }
  .at-steps__row {
    gap: 24px;
  }
  .at-step {
    gap: 16px;
  }
  .at-cta {
    gap: 24px;
    padding: 20px;
  }
  .at-cta__content {
    gap: 16px;
  }
  .at-cta__actions,
  .at-cta__messengers {
    gap: 8px;
  }
}
/* ─── Уважаем «уменьшить движение» ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .at-btn {
    transition: none;
  }
  .at-btn:active {
    transform: none;
  }
}
/* ─── Печать ─────────────────────────────────────────────────── */
@media print {
  .at-cta {
    background: none;
    color: #1D1D1D;
  }
}