/* ======================================================================
   #CATALOG — «Какой автомобиль вы можете приобрести?»
   ПК (≥992px): 3 карточки в ряд (как было).
   iPad портрет (768–991.98px): карточка раскладывается «в строку»: слева изображение, справа текст+кнопка.
   Высота секции: всегда по контенту (без 100vh).
   Скоуп: ТОЛЬКО внутри #catalog (ничего не течёт в другие секции).
   ====================================================================== */


/* =========================
   1) СЕКЦИЯ И СТРОКА
   ========================= */
#catalog{
  padding-block: 64px;               /* вертикальные отступы секции */
}
#catalog .row{
  row-gap: 28px;                     /* доп. вертикальный зазор между карточками на мобиле */
}


/* =========================
   2) ЗАГОЛОВОК СЕКЦИИ
   ========================= */
#catalog .catalog-title{
  margin-bottom: 90px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .3px;
  text-align: center;
}
#catalog .catalog-title span{ color: var(--terracotta); }


/* =========================
   3) КАРТОЧКА — БАЗОВЫЙ ВИД
   ========================= */
#catalog .card{
  background: var(--paper-100);
  border: 2px solid var(--paper-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Зона изображения (по умолчанию) */
#catalog .catalog-card .card-img-top{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 12;             /* единая «зона высоты» по умолчанию */
  background: var(--paper-200);
  object-fit: cover;                  /* дефолт (локально переопределяется) */
  object-position: 50% 50%;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 2px solid var(--paper-300);
  padding: 0;                         /* без внутренних отступов */
}

/* Тело карточки тянется; кнопка прижата вниз */
#catalog .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
#catalog .catalog-card{
  display: flex;
  flex-direction: column;            /* по умолчанию — вертикальная карточка */
  height: 100%;
}
#catalog .catalog-card .btn-terracotta{
  margin-top: auto;                  /* кнопка у дна карточки */
}


/* =========================
   4) ИНДИВИДУАЛЬНЫЕ НАСТРОЙКИ КАРТОЧЕК
   ========================= */

/* 1-я карточка (логотипы): вписываем без кропа */
#catalog .col-md-4:nth-child(1) .card-img-top,
#catalog .catalog-card .img-logos{
  object-fit: contain;
  aspect-ratio: 4 / 3;
  padding: 0px;
}

/* 2-я карточка (бюджет): вписываем целиком, ровная подложка */
#catalog .col-md-4:nth-child(2) .card-img-top,
#catalog .catalog-card .img-budget{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;                /* финально — без кропа */
  object-position: 50% 50%;
  background: var(--paper-200);
  padding: 0px;
  border-bottom: 1px solid var(--paper-300);
  overflow: hidden;
}

/* 3-я карточка (новые/б/у): аналогично 2-й — вписываем целиком */
#catalog .catalog-card .img-newused{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;                /* без кропа */
  object-position: 50% 50%;
  background: var(--paper-200);
  padding: 0px;
  border-bottom: 1px solid var(--paper-300);
  overflow: hidden;
}


/* =========================
   5) СЕТКА НА ПК (≥992px): три карточки в ряд
   ========================= */
@media (min-width: 992px){
  #catalog .col-md-4{
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}


/* =========================
   6) ОЧЕНЬ УЗКИЕ ЭКРАНЫ (≤575.98px)
   — зона изображения чуть выше; у второй карточки убираем кроп
   ========================= */
@media (max-width: 575.98px){
  #catalog .catalog-card .card-img-top{ aspect-ratio: 16 / 13; }

  /* у второй карточки — вписывание + небольшой padding */
  #catalog .col-md-4:nth-child(2) .card-img-top,
  #catalog .catalog-card .img-budget{
    object-fit: contain;
    padding: 6px;
    aspect-ratio: 16 / 12;
  }
}


/* =========================
   7) ПОВЕДЕНИЕ .screen ДЛЯ КАТАЛОГА (историческое)
   — ниже переопределим на «по контенту», оставляем для совместимости
   ========================= */
#catalog.screen{
  display: flex;
  align-items: center;               /* вертикальное выравнивание содержимого */
  padding-block: clamp(24px, 5vh, 56px);
  overflow: hidden;                   /* прячем стык/тени */
  position: relative;
}
#catalog.screen .container{
  flex: 0 1 auto;                    /* не растягиваем контейнер лишнего */
}
#catalog + section{
  margin-top: 0 !important;          /* аккуратный стык со следующей секцией */
}


/* =========================
   8) iPad (портрет: 768–991.98px)
   — стек карточек (по одной в ряд);
   — внутри карточки: горизонтальная раскладка (изображение слева, текст справа)
   ========================= */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* по одной карточке в строке */
  #catalog .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* внутренняя раскладка — горизонтально */
  #catalog .catalog-card {
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
    height: auto;
    padding: clamp(12px, 2vw, 24px);
  }

  /* картинка слева, фиксируем ширину блока изображения */
  #catalog .catalog-card .card-img-top {
    flex: 0 0 40%;
    max-width: 40%;
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
    border-bottom: none;
    border-right: 2px solid var(--paper-300);
    border-radius: var(--radius) 0 0 var(--radius);
  }

  /* контент справа, кнопка под текстом */
  #catalog .catalog-card .card-body {
    flex: 1 1 auto;
    padding-left: clamp(12px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }

  #catalog .catalog-card .btn-terracotta {
    align-self: flex-start;
    margin-top: clamp(12px, 2vh, 24px);
  }

  /* тонкости: рамка карточки — как в общем стиле */
  #catalog .catalog-card .card {
    border: 2px solid var(--paper-300);
  }
}


/* =========================
   9) ФИНАЛЬНЫЙ ФИКС: #catalog ВСЕГДА «ПО КОНТЕНТУ»
   — переопределяет любые 100vh/центрирование .screen для каталога
   — действует на ПК, планшет и мобилку; на другие секции не влияет
   ========================= */
#catalog,
#catalog .container,
#catalog .row{
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}
#catalog.screen{
  display: block !important;         /* снимаем флекс-центрирование */
  align-items: stretch !important;
}