/* ==========================================================================
   Лизинг — /lizing

   Своего на странице почти ничего: шапка раздела, карточка-факт и плитки —
   общие кирпичи из base.css. Здесь только блок лизингодателей: пояснение,
   строка из трёх компаний и пометка «Реклама».
   ========================================================================== */

.partner {
  display: grid;
  gap: 24px;
  margin-top: 16px;
  padding: 24px 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
}

.partner__text { display: grid; gap: 10px; }

/* ---------- Строка лизингодателей ----------
   Компаний три, и ни одна не «главная»: одинаковые карточки в ряд —
   это и есть ответ на вопрос «через кого оформлять». */
.lessors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 620px) {
  .lessors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lessor {
  display: grid;
  gap: 10px;
  align-content: start;
}
.lessor p { margin: 0; }

/* Логотип чужой и в чужих цветах — ставим его на светлую подложку, иначе
   он тонет в тёмной карточке. Подложка одного размера у всех трёх, даже
   если логотипа нет: строка должна стоять ровно, а не прыгать по высоте.

   Высота фиксированная, а не через aspect-ratio. С пропорцией 16:7 подложка
   тянулась за шириной колонки: на широком мониторе это 560 на 245 пикселей
   белого поля, в котором одно слово по центру. Плашка должна быть размером
   с логотип, а не с картинку. */
.lessor__plate {
  --plate-h: 84px;
  --plate-pad: 12px;
  display: grid;
  place-items: center;
  height: var(--plate-h);
  padding: var(--plate-pad) 18px;
  background: var(--c-100);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Логотипы приходят от чужих компаний, и привести их к одному виду заранее
   нельзя: у одного пропорция 7:1, у другого почти квадрат, у третьего
   в файл запечены широкие поля. Поэтому каждому даётся ОДНА И ТА ЖЕ рамка,
   а вписывается он в неё сам, через object-fit: contain. Тогда логотип
   не может ни вылезти, ни прижаться к краю, и центрируется без усилий.

   Потолок высоты в пикселях, а не в процентах. max-height: 100% у картинки
   внутри grid-ячейки не срабатывает — проценты считаются не от той высоты,
   и логотип Арензы разворачивался в свои 336×192, из которых в плашку
   попадала только полоска снизу. Высота считается из тех же переменных,
   что и сама плашка, — разъехаться они не могут.

   Ширина ограничена 220 пикселями. Без неё широкий логотип растягивается
   на всю плашку и упирается в поля: у Интерлизинга при пропорции 6:1
   оставалось по 18 пикселей на зазор против 133 у соседа, и ряд читался
   как «один логотип не по центру», хотя центрированы были все.

   width: 100% нужен, чтобы маленький логотип ПОДРАСТАЛ до рамки. SVG
   Балтлизинга имеет свой размер 140×20, и при width: auto он так и выводился
   двадцатью пикселями в высоту — вчетверо мельче соседей. */
.lessor__plate img {
  width: 100%;
  max-width: 220px;
  height: calc(var(--plate-h) - var(--plate-pad) * 2);
  object-fit: contain;
}

/* Название вместо логотипа. Набирается тем же Oswald, что заголовки,
   но в цвет тёмного текста — на светлой подложке золото не читается.
   Кегль соразмерен логотипу Арензы в соседней плашке, не крупнее. */
.lessor__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--c-900);
}


/* Пометка обязательная: это реклама чужих услуг. На старой странице она
   тоже стояла — убирать её при переносе нельзя. */
.partner__mark {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- Сколько нужно на старте ----------
   Четыре строки: модель, цена по прайсу и аванс двумя долями. Это таблица
   по сути, но не по разметке: на телефоне четыре колонки пришлось бы
   прокручивать вбок, а здесь строка просто разворачивается в столбик.

   Цифры считаются из прайса (см. lizing.php), поэтому колонка цены —
   табличными цифрами: иначе суммы разной ширины не встают в столбик. */
.avans {
  display: grid;
  gap: 1px;
  background: var(--card-bd);
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}

.avans__row {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
  background: var(--card-bg);
  transition: background-color 0.2s var(--ease);
}

.avans__row:hover { background: var(--c-700); }

@media (min-width: 900px) {
  .avans__row {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
  }
}

.avans__model { display: grid; gap: 3px; }

.avans__power {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.avans__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  justify-self: start;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.avans__name:hover { color: var(--gold); border-bottom-color: var(--gold-line); }

.avans__sub { font-size: 0.8125rem; color: var(--text-mute); }

.avans__cell { display: grid; gap: 4px; align-content: start; }

.avans__label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.avans__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Золотом — та доля, с которой сделка начинается чаще всего. */
.avans__value--gold { color: var(--gold); }

.avans__foot {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-note);
}