/* ============================================================================
   КАРТИТЕ С ГЛАВНИТЕ КАТЕГОРИИ — снимка вляво, име, подзаглавие и „Виж повече".
   Общи за началната (home, #cats) и страницата на колата (car-hub) — изнесени от
   home.css на 05.11.2026 (Мариян: „да е като на индекса"). Обвивката е .h-cats.
   ========================================================================== */
.h-cats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.h-cats .h-cat.card--photo {
  display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: none; align-items: center; gap: 16px;
  padding: 14px 18px 14px 12px; border-radius: 10px; border: 1px solid #e6e9e3; box-shadow: none;
  background: var(--h-soft, #f4f6f3); color: var(--dark); text-decoration: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s;
}
.h-cats .h-cat.card--photo:hover {
  border-color: var(--accent); background: #fff; box-shadow: 0 10px 26px rgba(17,24,15,.08); transform: translateY(-2px);
}
/* Снимката стъпва направо върху картата — прозрачен фон, без каре (концепцията) */
.h-cat__img { width: 124px; height: 108px; display: grid; place-items: center; }
.h-cat__img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(17,24,15,.14)); transition: transform .3s;
}
.h-cats .h-cat.card--photo:hover .h-cat__img img { transform: scale(1.05); }
.h-cat__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h-cat__name { font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.h-cat__sub {
  font-size: 13px; line-height: 1.45; color: #5b6358;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h-cat__more { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.h-cat__more svg { width: 22px; height: 10px; transition: transform .2s; }
.h-cats .h-cat.card--photo:hover .h-cat__more svg { transform: translateX(3px); }
@media (max-width: 1023px) {
  .h-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* Всички главни категории — по две на ред, снимката отгоре; описанието чака модала. */
  .h-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .h-cats .h-cat.card--photo {
    grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 10px; padding: 14px 10px 12px;
  }
  .h-cat__img { width: 100px; height: 84px; }
  .h-cat__body { align-items: center; gap: 4px; }
  .h-cat__name { font-size: 14px; }
  .h-cat__sub { display: none; }
  .h-cat__more { font-size: 12.5px; }
  /* нечетен брой — последната не стои сама в половин ред */
  .h-cats .h-cat.card--photo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}