/* ============================================================
   Компактная карточка оффера — для узких колонок вне каталога:
   блок каталога на главной и блок финансовых продуктов
   на посадочной «Работа». Там три карточки в ряд по 376,
   а карточки каталога рассчитаны на 1160 и туда не встают.

   Отрисовки на неё не заказывали: токены, кегли, цвета, кнопки
   и правила слотов те же, что в каталоге, меняется только
   раскладка. Своих красок и шрифтов файл не вводит.

   Три параметра вместо шести — разбор выбора в отчёте:
   на 344 пикселях содержимого пара «подпись — значение» встаёт
   в одну строку, но шесть таких строк дают 182 пикселя и делают
   карточку выше блока, в котором она стоит. Блок на главной —
   это витрина-приглашение, а не таблица сравнения: полный набор
   параметров лежит в разделе каталога, куда ведёт заголовок блока.

   Высота 240 — число, как и везде. Ряд плашек здесь не выводится:
   в 344 пикселя влезают две плашки из шести, и обрезанный ряд
   читался бы как поломка, а не как приём.
   ============================================================ */

/*
 * Свой класс контейнера, а не общий .fc-cards.
 *
 * .fc-cards уже занят списком карточек каталога — там колонка
 * в одну карточку во всю ширину. Сетка в три колонки, объявленная
 * на том же классе, ужимала карточку дебетовых карт до трети колонки,
 * и её внутренний ряд вылезал за край страницы.
 */
.of-minis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 1024px) {
  .of-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

.of-mini {
  box-sizing: border-box;
  height: 240px;                    /* 16 + 58 + 10 + 86 + 10 + 44 + 16 */
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-soft);
  box-shadow: inset 0 0 0 1px var(--color-border);
  border-radius: 8px;
  font-family: var(--font-main);
  color: var(--color-text);
  transition: background-color 120ms ease-out;
}

@media (hover: hover) {
  .of-mini:hover { background: var(--color-bg-hover); }
}

/* ---------- шапка ---------- */

.of-mini__head { flex: none; height: 58px; display: flex; gap: 10px; align-items: flex-start; min-width: 0; }

.of-mini__slot {
  flex: none; box-sizing: border-box;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--color-text-muted);
}
/* Иконка набора нарисована своими красками — рамка вокруг неё лишняя. */
.of-mini__slot--icon { border: 0; background: none; }
.of-mini__slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.of-mini__letter { font: 700 18px/1 var(--font-head); color: var(--color-text-muted); }

.of-mini__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/*
 * Название в одну строку. Лимит на длину стоит в админке, поэтому
 * обрезки многоточием здесь нет — как и во всех карточках каталога.
 */
.of-mini__name {
  font: 700 16px/1.3 var(--font-main);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.of-mini__name:hover { color: var(--color-accent-ink); text-decoration: underline; }
.of-mini__name:active { color: var(--color-accent-ink-hover); }

.of-mini__sub { font: 400 13px/1.4 var(--font-main); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; }
.of-mini__rating { display: flex; align-items: center; gap: 4px; font: 700 13px/1 var(--font-main); color: var(--color-text); }
.of-mini__star { font-weight: 400; color: var(--color-accent-ink); }

/* ---------- параметры ---------- */

.of-mini__params { flex: none; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.of-mini__row { height: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.of-mini__label { font: 400 13px/1.3 var(--font-main); color: var(--color-text-muted); white-space: nowrap; }
.of-mini__value { font: 400 15px/1.3 var(--font-main); color: var(--color-text); white-space: nowrap; overflow: hidden; }
.of-mini__value--empty { color: var(--color-text-muted); }

/* ---------- действие ---------- */

/* Распорка прижимает кнопки к низу: у всех карточек ряда они на одной линии. */
.of-mini__spacer { flex: 1; min-height: 10px; }

.of-mini__actions { flex: none; height: 44px; display: flex; gap: 12px; }

.of-mini__btn {
  flex: 1; min-width: 0;
  height: 44px; box-sizing: border-box; padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 700 16px/1 var(--font-main);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease-out;
}
.of-mini__btn:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.of-mini__btn:active { background: var(--color-accent-pressed); color: var(--color-on-accent); }

.of-mini__round {
  flex: none; box-sizing: border-box;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font: 700 17px/1 var(--font-head);
  text-decoration: none;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.of-mini__round:hover,
.of-mini__round:focus-visible { color: var(--color-accent-ink); border-color: var(--color-accent-ink); }

.of-mini__name:focus-visible,
.of-mini__btn:focus-visible,
.of-mini__round:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }