/* Каталог на главной — фильтр по брендам + сетка авто (см. js/catalog-home.js). */

#catalog-home { padding: 40px 0 8px; }
.cathome__head { max-width: 1180px; margin: 0 auto 18px; padding: 0 20px; }
.cathome__head .heading-h2-size { margin: 0 0 6px; }
.cathome__sub { margin: 0; color: #5b6578; font-size: 1rem; line-height: 1.45; }

.cathome { max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.cathome__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 18px;
}
.cathome__brands {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: thin; flex: 1 1 auto; min-width: 0;
}
.cathome__brands::-webkit-scrollbar { height: 4px; }
.cathome__brands::-webkit-scrollbar-thumb { background: rgba(10,40,97,.2); border-radius: 4px; }

.cathome-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .92rem; font-weight: 600; line-height: 1; cursor: pointer;
  padding: 10px 15px; border-radius: 999px; border: 1px solid rgba(10,40,97,.16);
  background: #fff; color: #0a2861; transition: background .15s, color .15s, border-color .15s;
}
.cathome-chip:hover { border-color: rgba(10,40,97,.4); }
.cathome-chip.is-active { background: #0a2861; color: #fff; border-color: #0a2861; }
.cathome-chip__ev {
  font-size: .64rem; font-weight: 700; letter-spacing: .03em; padding: 2px 5px;
  border-radius: 4px; background: #1a9c5b; color: #fff;
}
.cathome-chip.is-active .cathome-chip__ev { background: #d75a21; }

.cathome__controls { display: flex; gap: 10px; flex: 0 0 auto; }
.cathome__sel {
  font-size: .9rem; font-weight: 600; color: #0a2861;
  padding: 10px 34px 10px 14px; border-radius: 10px; border: 1px solid rgba(10,40,97,.16);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230a2861' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cathome-chip__n {
  font-size: .74rem; font-weight: 600; opacity: .6; margin-left: 1px;
}
.cathome-chip.is-active .cathome-chip__n { opacity: .85; }

.cathome__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  /* резервируем высоту под 12 карточек ДО отрисовки JS, иначе поздняя
     подстановка сетки двигает всё ниже (CLS). Имена в одну строку -> высота
     карточки детерминированная. JS снимает min-height после первой отрисовки,
     чтобы при неполной выдаче (фильтр по году) карточки не растягивались. */
  min-height: 1012px; transition: opacity .15s;
  align-content: start; align-items: start;
}
#catalog-home.is-loading .cathome__grid { opacity: .5; pointer-events: none; }

/* скелетоны-заглушки, пока грузится /api/cars */
.cathome-card--skel { pointer-events: none; }
.cathome-card--skel .cathome-card__img,
.skln {
  background: linear-gradient(100deg, #eef1f6 30%, #e2e7f0 50%, #eef1f6 70%);
  background-size: 200% 100%; animation: cathome-shimmer 1.3s ease-in-out infinite;
}
.skln { display: block; height: 12px; border-radius: 5px; margin-top: 8px; }
.skln--t { height: 15px; width: 70%; }
.skln--m { width: 90%; }
.skln--p { height: 17px; width: 45%; margin-top: 12px; }
@keyframes cathome-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.cathome-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid rgba(10,40,97,.1); border-radius: 14px;
  overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.cathome-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(10,40,97,.22); border-color: rgba(215,90,33,.35); }
.cathome-card__img { position: relative; aspect-ratio: 4 / 3; background: #eef1f6; overflow: hidden; }
.cathome-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cathome-card:hover .cathome-card__img img { transform: scale(1.05); }
/* бейдж электрокара на фото */
.cathome-card__ev {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em; padding: 4px 9px;
  border-radius: 999px; background: #1a9c5b; color: #fff; box-shadow: 0 2px 8px rgba(26,156,91,.42);
}
.cathome-card__body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cathome-card__name { font-size: 1rem; font-weight: 700; color: #0a2861; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* спеки плашками — в одну строку (детерминированная высота -> CLS) */
.cathome-card__specs { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-bottom: auto; }
.cathome-spec { font-size: .74rem; font-weight: 600; color: #5b6578; white-space: nowrap;
  background: #f1f4f9; border-radius: 6px; padding: 3px 8px; line-height: 1.2; }
.cathome-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 2px; }
.cathome-card__price { font-size: 1.08rem; font-weight: 800; color: #0a2861; display: flex; flex-direction: column; line-height: 1.1; }
.cathome-card__cap { font-size: .66rem; font-weight: 500; color: #8a93a6; margin-top: 3px; letter-spacing: .01em; }
.cathome-card__go { font-size: 1.15rem; font-weight: 800; color: #d75a21; flex: 0 0 auto;
  opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.cathome-card:hover .cathome-card__go { opacity: 1; transform: translateX(0); }

/* ── промо-карточки (подмешиваются в сетку ~раз в 3 ряда) ── */
.cathome-promo { align-self: stretch; text-decoration: none; color: inherit; }
.cathome-promo__in { display: flex; flex-direction: column; gap: 7px; height: 100%; box-sizing: border-box; padding: 16px 15px; justify-content: center; }
.cathome-promo__kicker { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #d75a21; }
.cathome-promo__h { font-size: 1.04rem; font-weight: 800; line-height: 1.22; }
.cathome-promo__p { font-size: .83rem; line-height: 1.4; opacity: .9; }
.cathome-promo__cta { font-size: .88rem; font-weight: 700; margin-top: auto; }

/* !important: на ссылки в сетке навешивается fancybox (js-fancybox-ready) и
   перебивает фон белым — форсим градиент. */
.cathome-card.cathome-promo--partners { background: linear-gradient(150deg, #0a2861, #123a86) !important; color: #fff; border-color: transparent; }
.cathome-promo--partners .cathome-promo__kicker { color: #ffb37a; }
.cathome-promo--partners .cathome-promo__cta { color: #ffce9e; }

.cathome-promo--blog .cathome-card__body { gap: 5px; }
.cathome-promo__title2 { font-size: .96rem; font-weight: 700; color: #0a2861; line-height: 1.24;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cathome-promo--blog .cathome-promo__cta { color: #d75a21; font-weight: 800; margin-top: auto; padding-top: 2px; }
.cathome-promo--blog.is-noimg .cathome-card__img { display: none; }

/* бейдж-плашка на картинке блог/кейс-карточки — чтобы не сливались с авто */
.cathome-badge { position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: 5px 11px;
  border-radius: 999px; background: #0a2861; color: #fff; box-shadow: 0 2px 8px rgba(10,40,97,.35); }
.cathome-badge--case { background: #d75a21; text-transform: uppercase; box-shadow: 0 2px 10px rgba(215,90,33,.5); }
/* яркая рамка у кейса клиента */
.cathome-promo--case { border: 2px solid #d75a21; }

.cathome-promo--social { background: #f6f1e6; }
.cathome-promo--social .cathome-promo__h { color: #0a2861; margin-bottom: 4px; }
.cathome-soc { display: flex; flex-direction: column; gap: 1px; text-align: center; text-decoration: none;
  padding: 7px 10px; border-radius: 9px; color: #fff; transition: opacity .15s; }
.cathome-soc:hover { opacity: .88; }
.cathome-soc__name { font-weight: 700; font-size: .88rem; line-height: 1.1; }
.cathome-soc__why { font-weight: 500; font-size: .7rem; line-height: 1.15; opacity: .92; }
.cathome-soc--tg { background: #29a9eb; }
.cathome-soc--max { background: #7d5cff; }
.cathome-soc--vk { background: #0077ff; }

.cathome__more-wrap { text-align: center; margin: 26px 0 8px; }
.cathome__more {
  font-size: .98rem; font-weight: 700; color: #0a2861; cursor: pointer;
  padding: 13px 34px; border-radius: 12px; border: 1.5px solid #0a2861; background: #fff;
  transition: background .15s, color .15s;
}
.cathome__more:hover { background: #0a2861; color: #fff; }
.cathome__more[disabled] { opacity: .5; cursor: default; }

.cathome__empty {
  grid-column: 1 / -1; text-align: center; color: #6b7488; font-size: 1rem;
  padding: 40px 20px; line-height: 1.5;
}
.cathome__empty a { color: #d75a21; font-weight: 600; }

@media (max-width: 991px) { .cathome__grid { grid-template-columns: repeat(3, 1fr); min-height: 1360px; } }
@media (max-width: 700px) {
  .cathome__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; min-height: 1480px; }
  .cathome-card__name { font-size: .94rem; }
  .cathome-card__price { font-size: 1rem; }
  .cathome__bar { gap: 10px; }
}