/* Блоки главной страницы 2026 (ТЗ «ГЛАВНАЯ», пункты 1–5).
   Подключается только на главной — template/index.php, после style3.css.

   Модули-потребители:
     .home-svc       — system/modules/home_services      (п.1 услуги)
     .home-trust-bar — system/modules/home_trust         (п.2 полоса преимуществ)
     .home-trust     — system/modules/home_trust         (п.2 бренды)
     .home-feed      — system/modules/articles_category/views/home_tabs.php (п.3 новости/статьи)
     .home-works     — system/modules/home_portfolio     (п.4 реализованные проекты)
     .home-map       — system/modules/home_map           (п.5 карта объектов)
   Категории каталога — штатный модуль catalog со своими .catalog_* из style.css;
   здесь только правки его шапки (в конце файла).

   ВАЖНО: стили и размеры взяты у ТЕКУЩЕГО сайта (style.css), а не у вёрстки verstka/ —
   она не внедрена, и новые блоки должны читаться как родные:
     радиус карточек      20px      (.catalog_item)
     крупный заголовок    40px/700 uppercase letter-spacing .03em   (.off_text-1)
     красная плашка       #FF2E47, радиус 10px                      (.catalog_text-2)
     фон секции           rgba(54,146,197,.05)                      (.buy, .catalog)
     стрелки слайдера     52px круг, border rgba(0,0,0,.2), hover #FF2E47   (.off_two .slick-arrow)
     карточка бренда      100px, радиус 20px, opacity .5 → 1 у активного    (.off_two a)

   Скоуп: у всех классов уникальные префиксы home-*, пересечений с монолитом нет,
   поэтому обёртка .v2 из docs/PORTING-VERSTKA.md §2B не нужна.

   Брейкпоинты — движка (1199 / 1023 / 767), НЕ вёрстки: блоки лежат внутри .c,
   а он меняет ширину именно на этих порогах (1200px → 990 → 750 → 100%/max-480).

   CLS: у всех <img> проставлены width/height; трекам Slick задан min-height + overflow:hidden,
   поэтому до инициализации слайды не разъезжаются колонкой и высота блока не меняется. */

/* ============================================================
   Общие примитивы в стилистике сайта
   ============================================================ */

.home-svc,
.home-trust,
.home-trust-bar,
.home-feed,
.home-works,
.home-map {
  font-family: "Gilroy", Arial, sans-serif;
  color: #000;
}

/* крупный заголовок секции — как .off_text-1 */
.home-svc__title,
.home-trust__title,
.home-works__title,
.home-map__title {
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* красная плашка внутри заголовка */
.home-svc__title span,
.home-map__title span {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 10px;
  background: #ff2e47;
  color: #fff;
  transform: rotate(-3deg);
}

/* стрелки слайдеров — как .off_two .slick-arrow.
   Стрелка рисуется ФОНОМ: инлайн-SVG внутрь кнопок не класть, иначе печатаются две. */
.home-trust__arrows,
.home-works__arrows {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}

.home-trust__arrow,
.home-works__arrow {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  background: #f5f5f5 no-repeat 50%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='12' viewBox='0 0 24 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5303 6.53033C23.8232 6.23744 23.8232 5.76256 23.5303 5.46967L18.7574 0.696699C18.4645 0.403806 17.9896 0.403806 17.6967 0.696699C17.4038 0.989593 17.4038 1.46447 17.6967 1.75736L21.9393 6L17.6967 10.2426C17.4038 10.5355 17.4038 11.0104 17.6967 11.3033C17.9896 11.5962 18.4645 11.5962 18.7574 11.3033L23.5303 6.53033ZM0 6.75H23V5.25H0V6.75Z' fill='black'/%3E%3C/svg%3E");
  font-size: 0;
  cursor: pointer;
  transition: border-color 0.3s;
}

.home-trust__arrow--prev,
.home-works__arrow--prev {
  transform: rotate(180deg);
}

.home-trust__arrow:hover,
.home-works__arrow:hover {
  border-color: #ff2e47;
}

.home-trust__arrow.slick-disabled,
.home-works__arrow.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Slick: выравнивание слайдов по высоте */
.home-trust__brands-track .slick-track,
.home-works__track .slick-track {
  display: flex;
}

.home-trust__brands-track .slick-slide,
.home-works__track .slick-slide {
  height: auto;
}

.home-trust__brands-track .slick-slide > div,
.home-works__track .slick-slide > div {
  height: 100%;
}

/* ============================================================
   1. Блок услуг — .home-svc
      Карточка белая, акцент — тёмная плашка иконки.
      Две компоновки на выбор: --a (лесенка) и --b (витрина).
   ============================================================ */

.home-svc {
  padding: 48px 0 10px;
}

.home-svc__title {
  margin-bottom: 28px;
}

.home-svc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* A — лесенка: 1 на две колонки сверху, 2–5 обычные, 6 полосой во всю ширину */
.home-svc--a .home-svc__card--1 {
  grid-column: span 2;
}
.home-svc--a .home-svc__card--6 {
  grid-column: span 3;
}

/* B — витрина: 1 высокая на два ряда слева, 2–5 сеткой 2×2, 6 полосой во всю ширину */
.home-svc--b .home-svc__card--1 {
  grid-row: span 2;
}
.home-svc--b .home-svc__card--6 {
  grid-column: span 3;
}

.home-svc__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 212px; /* = высота .catalog_item, ритм совпадает с блоками сайта */
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.home-svc__card:hover {
  border-color: transparent;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08);
}

.home-svc__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* тёмная плашка иконки — единственное акцентное пятно карточки.
   filter делает белым любой значок, который выберут в админке (SVG или PNG). */
.home-svc__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #2c2b40;
}

.home-svc__card-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.home-svc__card-name {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #2c2b40;
  text-decoration: none;
  transition: color 0.3s;
}

/* заголовок-ссылка растянут на всю карточку — кнопка «Подробнее» не нужна */
a.home-svc__card-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.home-svc__card:hover .home-svc__card-name {
  color: #ff2e47;
}

.home-svc__card-text {
  margin-top: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #2c2b40;
  opacity: 0.8;
}

.home-svc__card-pic {
  flex-shrink: 0;
  align-self: flex-end;
  width: 200px;
  height: 170px;
  margin: 0 -8px -24px 0;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}

/* карточка 1: в компоновке A — горизонтальная, в B — вертикальная колонка */
.home-svc--a .home-svc__card--1 .home-svc__card-name {
  font-size: 28px;
  text-transform: uppercase;
}
.home-svc--b .home-svc__card--1 {
  flex-direction: column;
  justify-content: flex-start;
}
.home-svc--b .home-svc__card--1 .home-svc__card-name {
  font-size: 26px;
  text-transform: uppercase;
}

.home-svc--b .home-svc__card--1 .home-svc__card-pic {
  align-self: center;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: auto 0 -24px;
}

/* карточка 6 — полоса во всю ширину: слева заголовок, справа подуслуги */
.home-svc__card--6 {
  align-items: center;
  min-height: 0;
  padding: 24px 28px;
}

.home-svc__card--6 .home-svc__card-body {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.home-svc__card--6 .home-svc__card-icon {
  margin-bottom: 0;
}

.home-svc__card--6 .home-svc__card-name {
  font-size: 24px;
  text-transform: uppercase;
}

.home-svc__card--6 .home-svc__card-text {
  display: none;
}

.home-svc__card--6 .home-svc__card-pic {
  display: none;
}

.home-svc__subs {
  position: relative;
  z-index: 2; /* поверх растянутой ссылки заголовка */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.home-svc__sub {
  padding: 10px 16px;
  border-radius: 999px;
  background: #f5f9fc;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #2c2b40;
  text-decoration: none;
  transition:
    color 0.3s,
    background 0.3s;
}

a.home-svc__sub:hover {
  background: #ff2e47;
  color: #fff;
}

/* ============================================================
   2a. Полоса преимуществ — .home-trust-bar
       Четыре равные колонки, фон на всю ширину экрана без скруглений.
   ============================================================ */

.home-trust-bar {
  margin-top: 48px;
  background: rgba(54, 146, 197, 0.05); /* = фон .buy на текущем сайте */
}

.home-trust-bar__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 26px 0;
}

.home-trust-bar__item {
  display: flex;
  align-items: center;
  min-width: 0;
}

.home-trust-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #fff;
}

.home-trust-bar__icon img {
  width: 39px;
  height: 39px;
  object-fit: contain;
}

/* заголовок строго в одну строку, подпись под ним — иначе пункт расползается на 2–3 переноса */
.home-trust-bar__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-left: 18px;
}

.home-trust-bar__name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.home-trust-bar__sub {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.5);
}

/* ============================================================
   2b. Бренды — .home-trust
   ============================================================ */

.home-trust {
  padding: 48px 0 60px;
}

/* заголовок слева, стрелки прижаты вправо и центрированы относительно него */
.home-trust__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* заголовок ровный: ничего внутри не выделяется */
.home-trust__title {
  color: #000;
}

/* слайдер уходит за правый край экрана — как .off_two на текущем сайте */
.home-trust__brands-track {
  width: calc(100% + 35px);
  min-height: 100px; /* держит место до инициализации Slick */
  overflow: hidden;
}

.home-trust__brands-track.slick-initialized {
  overflow: visible;
}
.home-trust__brands-track .slick-list {
  overflow: visible;
}

.home-trust__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 35px);
  height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  background: #fff;
  opacity: 0.5;
  transition:
    opacity 0.3s,
    border-color 0.3s;
}

.home-trust__brands-track .slick-active .home-trust__brand {
  opacity: 1;
}
.home-trust__brands-track .slick-active .home-trust__brand:hover {
  border-color: #ff2e47;
}

.home-trust__brand img {
  width: 115px;
  height: 60px;
  object-fit: contain;
}

/* ============================================================
   3. Новости и статьи — .home-feed  (1 крупная + 3 списком)
   ============================================================ */

.home-feed {
  padding: 48px 0;
  background: rgba(54, 146, 197, 0.05);
}

.home-feed__head {
  margin-bottom: 24px;
}

.home-feed__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* вкладки — заголовки секции, но спокойнее прежнего: неактивная приглушена */
.home-feed__tab {
  padding: 0 0 5px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.home-feed__tab:hover {
  color: rgba(0, 0, 0, 0.6);
}

.home-feed__tab.is-active {
  border-color: #ff2e47;
  color: #000;
}

.home-feed__panel {
  display: none;
}
.home-feed__panel.is-active {
  display: block;
}

.home-feed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.home-feed__date {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.5);
}

/* -- крупная карточка -- */

.home-feed__lead {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.home-feed__lead-pic {
  display: block;
  aspect-ratio: 16 / 9; /* держит место до загрузки — без скачка */
  background: #ecf3f9;
}

.home-feed__lead-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.home-feed__lead:hover .home-feed__lead-pic img {
  transform: scale(1.03);
}

.home-feed__lead-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.home-feed__lead-title {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #2c2b40;
  transition: color 0.3s;
}

.home-feed__lead:hover .home-feed__lead-title {
  color: #ff2e47;
}

.home-feed__lead-text {
  font-size: 14px;
  line-height: 1.45;
  color: #2c2b40;
  opacity: 0.8;
}

/* -- список из трёх -- */

.home-feed__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.home-feed__card {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.home-feed__card-pic {
  display: block;
  width: 128px;
  flex-shrink: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 12px;
  background: #ecf3f9;
}

.home-feed__card-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-feed__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.home-feed__card-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: #2c2b40;
  transition: color 0.3s;
}

.home-feed__card:hover .home-feed__card-title {
  color: #ff2e47;
}

.home-feed__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.3s,
    color 0.3s;
}

.home-feed__all:hover {
  border-color: #ff2e47;
  color: #ff2e47;
}

/* ============================================================
   4. Реализованные проекты — .home-works
   ============================================================ */

.home-works {
  padding: 60px 0 30px;
}

.home-works__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.home-works__head-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.home-works__all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.3s,
    color 0.3s;
}

.home-works__all:hover {
  border-color: #ff2e47;
  color: #ff2e47;
}

.home-works__track {
  min-height: 360px;
  overflow: hidden;
}

/* Только прямой потомок: вложенный слайдер фото — тоже .slick-list внутри .home-works__track,
   и общий селектор сдвигал его на 10px влево. Справа из-под фото выглядывала полоска фона. */
.home-works__track > .slick-list {
  margin: 0 -10px;
}
.home-works__slide {
  padding: 0 10px;
}

/* карточки одной высоты: название прижато к низу через margin-top:auto */
.home-works__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Обёртка над движковым вью portfolio/views/desktop_images.php
   (.goods-2_item-pics + кнопки .b1..b5 и картинки .i1..i5, переключение на :hover — чистый CSS).
   Вью общий с разделом /portfolio и не правится: всё подгоняется здесь, в своём скоупе.
   CLS: высоту держит aspect-ratio у обёртки, картинки внутри position:absolute. */
.home-works__pics {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 20px;
  background: #f5f9fc;
}

/* margin-left:-20px и скругление только снизу — из .works_item-pics монолита:
   внутри карточки они сдвигали фото влево и обрезали верхние углы */
.home-works__pics .works_item-pics,
.home-works__pics .goods-2_item-pics {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; /* в монолите 10px сверху/снизу — внутри карточки не нужны */
  border-radius: inherit;
  background: none;
}

/* разделительная линия монолита внутри скруглённой карточки лишняя */
.home-works__pics .goods-2_item-pics::after {
  display: none;
}

.home-works__pics img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* в монолите contain — в крупной карточке нужен именно cover */
}

/* бейджи над названием: тип парной читается раньше заголовка */
.home-works__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.home-works__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.home-works__badge--360 {
  background: #eee;
  color: #2c2b40;
}

.home-works__badge--type {
  background: #eee;
  color: #2c2b40;
}

.home-works__badge--type img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.home-works__name {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: #2c2b40;
  text-decoration: none;
  transition: color 0.3s;
}

.home-works__name:hover {
  color: #ff2e47;
}

/* ============================================================
   5. Карта объектов — .home-map
      Список, карта и легенда — одна белая панель.
   ============================================================ */

.home-map {
  padding: 60px 0 70px;
  background: rgba(54, 146, 197, 0.05);
}

.home-map__head {
  margin-bottom: 26px;
}

.home-map__subtitle {
  margin-top: 14px;
  max-width: 720px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: #2c2b40;
  opacity: 0.8;
}

.home-map__panel {
  padding: 16px;
  border-radius: 20px;
  background: #fff;
}

/* список слева + карта справа — компоновка по референсу input/karta-1.jpg */
.home-map__row {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: stretch;
}

.home-map__aside {
  display: flex;
  flex-direction: column;
  height: 560px; /* = высота карты, обе колонки одинаковые */
  min-width: 0;
}

.home-map__aside-count {
  padding: 6px 8px 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* Скроллбар НЕ переопределяем: в style.css уже есть глобальное правило сайта
   (::-webkit-scrollbar 4px, трек #dce1e3, ползунок #3696c5 radius 999px), оно применяется и здесь.
   Не задавать scrollbar-width / scrollbar-color: при наличии этих стандартных свойств
   Chrome игнорирует ::-webkit-scrollbar и рисует системный скроллбар — толстый и со стрелками. */
.home-map__list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

.home-map__item {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.home-map__item + .home-map__item {
  margin-top: 10px;
}

.home-map__item:hover,
.home-map__item.is-active {
  border-color: transparent;
  background: #f5f9fc;
}

.home-map__item.is-active {
  box-shadow: inset 3px 0 0 #ff2e47;
}

.home-map__item:focus-visible {
  outline: 2px solid #3696c5;
  outline-offset: -2px;
}

.home-map__item-kind {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.home-map__item-kind img {
  width: 13px;
  height: 16px;
  object-fit: contain;
}

.home-map__item-name {
  margin-top: 9px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: #2c2b40;
}

.home-map__item-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #3696c5;
  text-decoration: none;
  border-bottom: 1px solid rgba(54, 146, 197, 0.3);
}

.home-map__item-link:hover {
  color: #ff2e47;
  border-color: rgba(255, 46, 71, 0.4);
}

.home-map__canvas {
  position: relative;
  height: 560px; /* задано до загрузки скрипта — карта не двигает страницу */
  overflow: hidden;
  border-radius: 14px;
  background: #ecf3f9;
}

.home-map__canvas.is-failed::after {
  content: "Карта временно недоступна";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.5);
}

/* легенда — внутри той же панели, отделена линией */
.home-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.home-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.6);
}

.home-map__legend-item img {
  width: 16px;
  height: 20px;
  object-fit: contain;
}

/* -- две колонки под картой, центрированные друг относительно друга -- */

.home-map__footer {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  margin-top: 30px;
  align-items: center;
}

.home-map__contacts-title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.home-map__contacts-body {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
}

.home-map__contacts-body ul,
.home-map__note-body ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.home-map__contacts-body li,
.home-map__note-body li {
  position: relative;
  padding-left: 18px;
  margin-top: 10px;
}

.home-map__contacts-body li::before,
.home-map__note-body li::before {
  content: "–";
  position: absolute;
  left: 0;
  opacity: 0.5;
}

.home-map__contacts-body a {
  font-weight: 700;
  color: #3696c5;
  text-decoration: none;
}

.home-map__contacts-body a:hover {
  color: #ff2e47;
}

.home-map__note {
  padding: 28px 30px;
  border-radius: 20px;
  background: #fff;
}

.home-map__note-title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
}

.home-map__note-body {
  font-size: 15px;
  line-height: 1.5;
  color: #2c2b40;
}

/* балун — рендерится Яндекс.Картами внутри своего контейнера */
.home-map__balloon {
  display: block;
  width: 240px;
  color: #000;
  text-decoration: none;
}

.home-map__balloon-pic {
  display: block;
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  border-radius: 12px;
  object-fit: cover;
}

.home-map__balloon-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}

a.home-map__balloon:hover .home-map__balloon-title {
  color: #ff2e47;
}

.home-map__balloon-kind {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

.home-map__balloon-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3696c5;
}

/* ============================================================
   Штатный блок категорий (модуль catalog): шапка в одну строку
   ============================================================ */

.catalog_toper {
  flex: 1;
  min-width: 0;
}

.catalog .catalog_text-1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0;
}

.catalog .catalog_text-2 {
  margin: 0;
  line-height: 43px;
}

.home-trust + .catalog {
  padding-top: 70px;
  padding-bottom: 100px;
}

/* Дубль кнопки «Все категории» внутри сетки категорий — нужен только на мобиле.
   Перенести туда исходную кнопку из .catalog_row средствами CSS нельзя: разные родители. */
.catalog_item-all {
  display: none;
}

/* ============================================================
   Адаптив — брейкпоинты движка (контейнер .c: 1200 → 990 → 750 → 100%)
   ============================================================ */

@media (max-width: 1199px) {
  .home-svc__title,
  .home-trust__title,
  .home-works__title,
  .home-map__title {
    font-size: 30px;
  }

  .home-feed__tab {
    font-size: 24px;
  }

  .home-svc__card {
    min-height: 190px;
    padding: 20px;
  }
  .home-svc__card-name {
    font-size: 19px;
  }
  .home-svc--a .home-svc__card--1 .home-svc__card-name,
  .home-svc--b .home-svc__card--1 .home-svc__card-name,
  .home-svc__card--6 .home-svc__card-name {
    font-size: 22px;
  }
  .home-svc__card-pic {
    width: 150px;
    height: 140px;
  }

  .home-trust-bar__icon {
    width: 62px;
    height: 62px;
  }
  .home-trust-bar__text {
    padding-left: 14px;
  }
  .home-trust-bar__name {
    font-size: 16px;
  }
  .home-trust-bar__sub {
    font-size: 12px;
  }

  .home-feed__lead-title {
    font-size: 19px;
  }
  .home-feed__card-pic {
    width: 112px;
  }

  .home-works__track {
    min-height: 320px;
  }

  .home-map__row,
  .home-map__footer {
    grid-template-columns: 300px 1fr;
  }

  .home-map__aside,
  .home-map__canvas {
    height: 500px;
  }
}

@media (max-width: 1023px) {
  .home-svc {
    padding-top: 32px;
  }

  /* с 1023px раскладка блока — мобильная (обе компоновки, --a и --b, схлопываются в одну):
     карточка 1 вертикальная на два ряда с картинкой, карточка 6 полосой. Размеры крупнее,
     чем на телефоне: их уменьшает уже блок 767px. */
  .home-svc__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-svc--a .home-svc__card--1,
  .home-svc--b .home-svc__card--1 {
    grid-column: span 1;
    grid-row: span 2;
    flex-direction: column;
    justify-content: flex-start;
  }

  .home-svc--a .home-svc__card--6,
  .home-svc--b .home-svc__card--6 {
    grid-column: span 2;
  }

  .home-svc--a .home-svc__card--1 .home-svc__card-pic,
  .home-svc--b .home-svc__card--1 .home-svc__card-pic {
    align-self: center;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: auto 0 -20px;
  }

  .home-svc__card--6 {
    flex-wrap: wrap;
  }
  .home-svc__subs {
    justify-content: flex-start;
  }

  /* полоса преимуществ — сетка 2×2, как на мобиле, но размеры крупнее: место позволяет */
  .home-trust-bar__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    padding: 24px 0;
  }
  .home-trust-bar__icon {
    width: 58px;
    height: 58px;
  }
  .home-trust-bar__icon img {
    width: 30px;
    height: 30px;
  }
  .home-trust-bar__text {
    padding-left: 14px;
  }
  .home-trust-bar__name {
    font-size: 17px;
    white-space: normal;
  }
  .home-trust-bar__sub {
    font-size: 13px;
  }

  /* заголовок каталога квадратом: «6480+ товаров» / «в каталоге» */
  .catalog .catalog_text-line {
    flex-basis: 100%;
  }

  .home-trust__head {
    margin-bottom: 24px;
  }

  .home-feed__grid {
    grid-template-columns: 1fr;
  }
  .home-feed__lead-pic {
    aspect-ratio: 16 / 8;
  }

  .home-works__track {
    min-height: 300px;
  }

  /* карта: список уходит под карту и становится горизонтальной лентой */
  .home-map__row,
  .home-map__footer {
    grid-template-columns: 1fr;
  }

  .home-map__aside {
    height: auto;
    order: 2;
  }

  .home-map__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 6px;
  }

  /* «Перейти к проекту» всегда у нижнего края карточки */
  .home-map__item {
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
  }
  .home-map__item-link {
    margin-top: auto;
    padding-top: 12px;
  }
  .home-map__item + .home-map__item {
    margin-top: 0;
  }

  .home-map__canvas {
    height: 440px;
    order: 1;
  }
}

@media (max-width: 767px) {
  /* Баннер-слайдер (легаси .banner из style.css, есть только на главной).
     Слайды разной высоты, а стрелки прижаты к низу всего блока — на высоком слайде они
     наезжали на фотографию. Резервируем под них полосу под треком, и держим их у края
     контентной колонки: .c на мобиле не шире 480px и центрируется, поэтому на широком
     телефоне стрелки уезжали в пустое поле слева от контента. */
  .banner {
    padding-bottom: 54px;
  }

  .banner .slick-arrow {
    bottom: 6px;
    left: max(10px, calc(50% - 230px));
  }

  .home-svc {
    padding: 26px 0 0;
  }
  .home-trust {
    padding: 20px 0 30px;
  }
  .home-trust__head {
    margin-bottom: 16px;
  }
  .home-trust + .catalog {
    padding: 30px 0;
  }
  .home-trust-bar {
    margin-top: 20px;
  }
  .home-feed {
    padding: 30px 0;
  }
  .home-works {
    padding: 34px 0;
  }
  .home-map {
    padding: 34px 0 40px;
  }

  .home-svc__title,
  .home-trust__title,
  .home-works__title,
  .home-map__title {
    font-size: 22px;
  }

  .home-feed__tab {
    font-size: 20px;
  }

  .home-svc__title {
    margin-bottom: 18px;
  }

  /* две колонки: карточка 1 вертикальная на два ряда с картинкой, карточка 6 полосой */
  .home-svc__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .home-svc--a .home-svc__card--1,
  .home-svc--b .home-svc__card--1 {
    grid-column: span 1;
    grid-row: span 2;
    flex-direction: column;
    justify-content: flex-start;
  }

  .home-svc--a .home-svc__card--6,
  .home-svc--b .home-svc__card--6 {
    grid-column: span 2;
  }

  .home-svc__card {
    min-height: 0;
    padding: 12px;
    gap: 10px;
  }

  .home-svc__card-icon,
  .home-svc__card--6 .home-svc__card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }

  .home-svc__card--6 .home-svc__card-icon {
    margin-bottom: 0;
  }

  .home-svc__card-icon img {
    width: 24px;
    height: 24px;
  }

  .home-svc__card-name,
  .home-svc--a .home-svc__card--1 .home-svc__card-name,
  .home-svc--b .home-svc__card--1 .home-svc__card-name,
  .home-svc__card--6 .home-svc__card-name {
    font-size: 14px;
    text-transform: none;
  }

  .home-svc__card-text {
    margin-top: 8px;
    font-size: 12px;
  }

  /* картинка остаётся только у первой карточки — она вытянута на два ряда */
  .home-svc__card-pic {
    display: none;
  }

  .home-svc--a .home-svc__card--1 .home-svc__card-pic,
  .home-svc--b .home-svc__card--1 .home-svc__card-pic {
    display: block;
    align-self: center;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: auto 0 -10px;
  }

  .home-svc__card--6 .home-svc__card-body {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .home-svc__sub {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* сетка 2×2 с мелкими размерами: всё должно влезать в 360px без переносов-обрывов */
  .home-trust-bar__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
  }
  .home-trust-bar__icon {
    width: 30px;
    height: 30px;
  }
  .home-trust-bar__icon img {
    width: 20px;
    height: 20px;
  }
  .home-trust-bar__text {
    gap: 1px;
    padding-left: 8px;
  }
  .home-trust-bar__name {
    font-size: 13px;
    white-space: normal; /* nowrap на 360px выталкивает текст за карточку */
  }
  .home-trust-bar__sub {
    font-size: 10px;
  }

  /* стрелки брендов на мобиле не нужны — листается свайпом (arrows:false в настройках Slick) */
  .home-trust__arrows {
    display: none;
  }

  /* «Официальный дилер» — первой строкой, число брендов — второй */
  .home-trust__title-line {
    display: block;
  }

  .home-trust__brands-track {
    width: calc(100% + 8px);
    min-height: 84px;
  }
  .home-trust__brand {
    width: calc(100% - 8px);
    height: 84px;
  }
  .home-trust__brand img {
    width: 96px;
    height: 48px;
  }

  .home-feed__tabs {
    gap: 14px;
  }
  .home-feed__lead-body {
    padding: 14px;
  }
  .home-feed__lead-title {
    font-size: 17px;
  }
  .home-feed__lead-text {
    display: none;
  }

  .home-feed__card {
    padding: 10px;
    gap: 12px;
  }
  .home-feed__card-pic {
    width: 100px;
    border-radius: 10px;
  }
  .home-feed__card-title {
    font-size: 14px;
  }

  .home-feed__all {
    padding: 13px;
    font-size: 13px;
  }

  .home-works__track {
    min-height: 260px;
  }
  .home-works__name {
    font-size: 17px;
  }

  /* кнопка и стрелки одной высоты 40px, вертикальные отступы блока сжаты */
  .home-works__head {
    margin-bottom: 14px;
    gap: 12px;
  }
  .home-works__head-right {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .home-works__all {
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
  }
  .home-works__arrows {
    gap: 8px;
  }
  .home-works__arrow {
    width: 40px;
    height: 40px;
    background-size: 18px 9px;
  }

  /* фото внутри карточки листаются свайпом: hover-кнопки монолита не нужны,
     картинки из абсолютных становятся слайдами Slick */
  .home-works__pics .goods-2_item-pics.slick-initialized > button {
    display: none;
  }

  /* Монолит стилизует ЛЮБОЙ div внутри .goods-2_item-pics как кнопку-переключатель фото:
     position:absolute, width:20%, height:100%. Под это правило попадали и обёртки, которые
     создаёт Slick, — .slick-list получал ширину ровно в пятую часть карточки, и слайдер
     считал слайды по ней. Отсюда узкая полоска фото и пустое место справа. */
  .home-works__pics .slick-list,
  .home-works__pics .slick-track {
    position: relative;
    bottom: auto;
    z-index: auto;
    border: none;
  }

  .home-works__pics .slick-list {
    width: 100%;
  }

  .home-works__pics .slick-list,
  .home-works__pics .slick-track,
  .home-works__pics .slick-slide {
    height: 100%;
  }

  /* слайд — сама картинка: из абсолютной она становится обычным блоком на всю карточку */
  .home-works__pics .slick-initialized img {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    height: 100%;
    opacity: 1;
    object-fit: cover;
  }

  /* пагинация — снизу, кнопки крупные: палец должен попадать без прицеливания */
  .home-works__pics .slick-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-works__pics .slick-dots li {
    width: 20px;
    height: 12px;
  }

  .home-works__pics .slick-dots button {
    width: 20px;
    height: 12px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    background: #f5f5f5;
    font-size: 0;
    /* одним объявлением на оба свойства — иначе рамка догоняет фон с запозданием */
    transition:
      background 0.3s,
      border-color 0.3s;
  }

  .home-works__pics .slick-dots .slick-active button {
    border-color: var(--color-accent-hover, #e6233b);
    background: var(--color-accent, #ff2e47);
  }

  .home-works__pics .slick-dots button:hover {
    border-color: var(--color-accent-hover, #e6233b);
  }

  .home-map__head {
    margin-bottom: 16px;
  }
  .home-map__subtitle {
    font-size: 15px;
    margin-top: 10px;
  }
  .home-map__item-link {
    border-bottom: none;
  }
  .home-map__legend {
    gap: 6px 8px;
  }
  .home-map__legend-item {
    font-size: 11px;
    gap: 4px;
  }
  .home-map__panel {
    padding: 10px;
  }
  .home-map__canvas {
    height: 340px;
  }
  .home-map__item {
    flex-basis: 220px;
    padding: 14px;
  }

  .home-map__note {
    padding: 20px;
  }
  .home-map__contacts-title,
  .home-map__note-title {
    font-size: 18px;
  }

  /* карточка объекта в модалке — на всю ширину окна, а не 240px как в балуне карты */
  .modal--map {
    padding: 16px;
  }
  .modal--map .home-map__balloon {
    width: auto;
  }
  .modal--map .home-map__balloon-pic {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* ---- категории (штатный модуль catalog) ---- */

  /* заголовок в одну строку: flex:1 / min-width:0 из десктопной шапки здесь мешают */
  .catalog_toper {
    flex: none;
    min-width: auto;
    width: 100%;
  }
  .catalog .catalog_text-1 {
    font-size: 22px;
    gap: 0 8px;
  }
  .catalog .catalog_text-2 {
    padding: 0 10px;
    font-size: 16px;
    line-height: 28px;
  }
  .catalog .catalog_text-line {
    flex-basis: auto; /* на телефоне заголовок снова в одну строку */
  }

  .catalog_items {
    width: calc(100% + 8px);
  }
  .catalog_items > div {
    padding-right: 8px;
    margin-top: 8px;
  }

  /* кнопка «Все категории» уезжает вниз, в сетку: занимает свободную ячейку,
     а при чётном числе категорий — узкую полосу на две колонки */
  .catalog_row .catalog_button-2 {
    display: none;
  }
  .catalog_item-all {
    display: block;
  }
  .catalog_items > div.catalog_item-all--wide {
    width: 100%;
  }
  /* Плитка в стиле соседних категорий: заголовок сверху, стрелка в кружке слева снизу,
     стопка обложек на фоне. Кнопка-полоса остаётся только для чётного числа категорий,
     когда ячейка вытягивается на две колонки и плитка туда не помещается. */
  .catalog_item-all .catalog_button-2 {
    display: none;
  }

  .catalog_all {
    position: relative;
    display: block;
    height: 140px;
    padding: 10px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    color: #2c2b40;
    text-decoration: none;
  }

  .catalog_all-title {
    position: relative;
    z-index: 2;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.03em;
    line-height: 1.15;
  }

  /* Стопка обложек в свободном углу справа. Наезжают друг на друга и наклонены по-разному —
     иначе читается как ровный список, а не как «там ещё много всего». Край намеренно
     уходит за границу плитки: стопка выглядит продолжающейся. */
  .catalog_all-pics {
    position: absolute;
    right: -20px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
  }

  /* contain, а не cover: обложки категорий — товар на светлом фоне, кроп съедал его наполовину */
  .catalog_all-pic {
    width: 78px;
    height: 74px;
    flex-shrink: 0;
    margin-left: -30px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
  }

  .catalog_all-pic:nth-child(1) {
    transform: rotate(-7deg);
  }
  .catalog_all-pic:nth-child(2) {
    transform: rotate(4deg) translateY(-8px);
  }
  .catalog_all-pic:nth-child(3) {
    transform: rotate(-3deg) translateY(4px);
  }

  /* стрелка «наружу», под 45° — как «открыть весь раздел», а не «следующий пункт» */
  .catalog_all-arrow {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #2c2b40;
    color: #fff;
    transition: background 0.3s;
  }

  .catalog_all:hover .catalog_all-arrow {
    background: #ff2e47;
  }

  /* чётное число категорий — ячейка на две колонки, там остаётся обычная кнопка */
  .catalog_item-all--wide .catalog_all {
    display: none;
  }
  .catalog_item-all--wide .catalog_button-2 {
    display: flex;
    height: 48px;
    margin-top: 0;
    padding: 0 12px;
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
  }
  .catalog_item-all--wide .catalog_button-2 svg {
    margin-left: 10px;
  }
}