/* ============================================================
   FINCER · КАРТОЧКА ОФФЕРА ВИТРИНЫ
   Один файл на четыре категории: кредитные карты, кредиты,
   автокредиты, ипотека.

   Основа — пакет дизайнера от 08.09, «Fincer — карточка оффера,
   передача в разработку». Значения оттуда, разбор расхождений
   с эталоном — там же, раздел «Расхождения со спекой эталона».

   Что изменено при реализации и почему:

   1. Токены не объявляются заново, а ссылаются на общие токены сайта.
      У дизайнера значения вписаны числами, чтобы документ открывался
      сам по себе; на сайте палитра одна и живёт в `base.css`.
   2. Ширина карточки — по колонке витрины, а не 1000. Так же сделан
      принятый эталон дебетовых карт: две категории рядом не должны
      иметь поля разной ширины. Внешняя сетка при этом перестроена
      с `290 / 466 / 1fr` на `290 / 1fr / 170`: иначе лишние 160
      пикселей достались бы зоне действия, и кнопка 170 повисла бы
      посреди пустого места. Внутренние колонки параметров 210 и 240
      остались как есть.
   3. Заведён слот иконки. У дизайнера в шапке два вида — логотип
      и изображение продукта; третий, иконка из набора двадцати,
      добавлен по общему правилу владельца от 08.09.

   Рамка карточки нарисована внутренней тенью, а не `border`, —
   решение дизайнера, и оно верное: `border` при `box-sizing:border-box`
   отнял бы 2 px у содержимого и сжал пиксельные ряды сетки. Поэтому
   здесь высота ровно 162 и 333, без поправки на рамки, которая
   понадобилась эталону.
   ============================================================ */

.fo-shell {
  --fo-text: var(--color-text);
  --fo-text-muted: var(--color-text-muted);
  --fo-accent: var(--color-accent);
  --fo-accent-hover: var(--color-accent-hover);
  --fo-accent-pressed: var(--color-accent-pressed);
  --fo-on-accent: var(--color-on-accent);
  --fo-accent-ink: var(--color-accent-ink);
  --fo-accent-ink-hover: var(--color-accent-ink-hover);
  --fo-bg: var(--color-bg);
  --fo-bg-soft: var(--color-bg-soft);
  --fo-bg-hover: var(--color-bg-hover);
  --fo-border: var(--color-border);
  --fo-border-strong: var(--color-border-strong);
  --fo-font-main: var(--font-main);
  --fo-font-head: var(--font-head);
  --fo-radius: 8px;
  --fo-pad-d: 20px;
  --fo-pad-m: 16px;
  --fo-gap: 10px;
  --fo-anim: 120ms ease-out;
}

/* Контейнер списка офферов. container-type включает переключение
   карточки на мобильную раскладку по ШИРИНЕ КОНТЕЙНЕРА, а не окна:
   один и тот же код работает и на телефоне, и в узкой колонке. */
.fo-shell {
  container-type: inline-size;
  font-family: var(--fo-font-main);
  color: var(--fo-text);
}

/* --- Список ---------------------------------------------- */
.fo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;            /* зазор между карточками, десктоп и мобильная */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Карточка. Высота задаётся сеткой ---------------------
   Десктоп: 20 + 86 + 10 + 26 + 20 = 162
   grid-template-rows перечисляет ОБА слота в пикселях, поэтому
   высота карточки не зависит от содержимого. Ни min-height,
   ни ellipsis, ни line-clamp в файле нет. -------------------- */
.fo-card {
  box-sizing: border-box;
  width: 100%;
  height: 162px;
  padding: var(--fo-pad-d);
  background: var(--fo-bg-soft);
  border-radius: var(--fo-radius);
  /* рамка внутренней тенью: border добавил бы 2px к высоте
     и сжал слоты — бюджет высоты должен оставаться ровным */
  box-shadow: inset 0 0 0 1px var(--fo-border);
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 170px;
  grid-template-rows: 86px 26px;
  column-gap: 16px;
  row-gap: var(--fo-gap);
  grid-template-areas:
    "head params actions"
    "features features features";
  transition: background-color var(--fo-anim);
}

@media (hover: hover) {
  .fo-card:hover { background: var(--fo-bg-hover); }
}

/* --- Зона 1. Организация и продукт ------------------------ */
.fo-head { grid-area: head; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }

.fo-head .fo-logo {
  box-sizing: border-box; width: 56px; height: 56px; flex: none;
  border-radius: var(--fo-radius); border: 1px solid var(--fo-border);
  background: var(--fo-bg); object-fit: contain;
  display: flex; align-items: center; justify-content: center;
  font: 700 22px/1 var(--fo-font-head); color: var(--fo-text-muted);
}

/*
 * Иконка из набора двадцати — третий вид слота, по правилу владельца.
 * Рамки нет: у иконок своя заливка со скруглением, и рамка вокруг неё
 * читалась бы вторым контуром. Геометрия та же, что у логотипа.
 */
.fo-head .fo-logo--icon {
  border: 0;
  background: none;
}

/* только кредитные карты: изображение продукта вместо логотипа */
.fo-head .fo-art {
  box-sizing: border-box; width: 84px; height: 52px; flex: none;
  border-radius: var(--fo-radius); border: 1px solid var(--fo-border-strong);
  background: var(--fo-bg); object-fit: contain;
}

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

.fo-title {
  font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--fo-text);
  text-decoration: none; white-space: nowrap; transition: color var(--fo-anim);
}
.fo-title:hover { color: var(--fo-accent-ink); text-decoration: underline; }

.fo-sub { font-size: 13px; line-height: 1.4; color: var(--fo-text-muted); white-space: nowrap; }
.fo-rating { margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.fo-rating__star { font-size: 13px; line-height: 1; color: var(--fo-accent-ink); }
.fo-rating__num { font-size: 13px; font-weight: 700; line-height: 1; color: var(--fo-text); }

/* --- Зоны 2 и 3. Параметры --------------------------------
   Один контейнер на две колонки: нечётные параметры уходят
   в колонку 210, чётные — в колонку 240. Порядок в разметке
   всегда 1..6, поэтому мобильная раскладка читает те же узлы
   построчно и не требует другой разметки. ------------------- */
.fo-params {
  grid-area: params;
  display: grid;
  /* Шире первый столбец — см. пояснение в offer-card.css. */
  grid-template-columns: 280px 240px;
  grid-auto-rows: 22px;   /* 3 ряда × 22 + 2 × 10 = 86 */
  column-gap: 16px;
  row-gap: var(--fo-gap);
  align-content: start;
}
.fo-param { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fo-param__label { font-size: 13px; line-height: 1; color: var(--fo-text-muted); white-space: nowrap; }
.fo-param__value { font-size: 15px; line-height: 1; color: var(--fo-text); white-space: nowrap; }
/* прочерк на месте пустого значения: слот сохраняется */
.fo-param__value--empty { color: var(--fo-text-muted); }

.fo-hint {
  /* Отступ положительный: отрицательный затягивал кружок на букву «К». */
  box-sizing: border-box; width: 14px; height: 14px; flex: none; align-self: center; margin-left: 4px;
  border: 1px solid var(--fo-border-strong); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--fo-font-head); color: var(--fo-text-muted); cursor: help;
  text-decoration: none;
}

/* --- Зона 4. Действие ------------------------------------- */
/*
 * По середине зоны, а не у её верха: ссылки «Инструкция» под кнопкой
 * нет ни у одного оффера, и кнопка висела вверху с пустотой под собой.
 * Правка 08.09, та же во всех четырёх наборах карточек.
 */
.fo-actions { grid-area: actions; position: relative; display: flex; flex-direction: column; gap: var(--fo-gap); align-items: flex-start; justify-content: center; margin-bottom: -36px; }

/* Поля 12 — см. `offer-card-of.css`, правка 09.09. */
.fo-btn {
  box-sizing: border-box; width: 170px; height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--fo-radius);
  background: var(--fo-accent); color: var(--fo-on-accent);
  font-family: var(--fo-font-main); font-size: 16px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--fo-anim);
}
.fo-btn:hover { background: var(--fo-accent-hover); color: var(--fo-on-accent); }
.fo-btn:active { background: var(--fo-accent-pressed); color: var(--fo-on-accent); }

/* Под кнопкой и вне потока — чтобы кнопка стояла по центру всегда.
   Разбор решения — в `offer-card.css`, правка 08.09. */
.fo-instr {
  position: absolute; left: 0; top: calc(50% + 32px);
  height: 20px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1; color: var(--fo-text-muted); text-decoration: none;
  transition: color var(--fo-anim);
}
.fo-instr:hover { color: var(--fo-accent-ink); text-decoration: underline; }

.fo-i {
  box-sizing: border-box; width: 16px; height: 16px; flex: none;
  border: 1px solid currentColor; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--fo-font-head);
}

/* --- Плашки. Ровно одна строка ---------------------------- */
.fo-features {
  grid-area: features;
  height: 26px;                 /* слот сохраняется и при нуле плашек */
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: nowrap; overflow: hidden; gap: 8px;
}
.fo-feature {
  box-sizing: border-box; flex: none; height: 26px; padding: 4px 12px;
  border-radius: 999px; background: var(--fo-bg); border: 1px solid var(--fo-border);
  font-size: 13px; line-height: 1.3; color: var(--fo-text-muted);
  white-space: nowrap; display: inline-flex; align-items: center;
}

/* --- Фокус ------------------------------------------------ */
.fo-btn:focus-visible { outline: 2px solid var(--fo-accent-ink); outline-offset: 2px; }
.fo-instr:focus-visible,
.fo-icon:focus-visible { outline: 2px solid var(--fo-accent-ink); outline-offset: 3px; }
.fo-title:focus-visible { outline: 2px solid var(--fo-accent-ink); outline-offset: 3px; border-radius: 4px; }

/* --- Круглая кнопка «Инструкция», только мобильная -------- */
.fo-icon {
  box-sizing: border-box; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid var(--fo-border-strong);
  background: var(--fo-bg); color: var(--fo-text-muted);
  display: none; align-items: center; justify-content: center;
  font: 700 17px/1 var(--fo-font-head); text-decoration: none; cursor: pointer;
  transition: color var(--fo-anim), border-color var(--fo-anim);
}
.fo-icon:hover { color: var(--fo-accent-ink); border-color: var(--fo-accent-ink); }

/* ============================================================
   Мобильная раскладка. Та же разметка, другая сетка.
   343 = 375 − 2 × 16 поля страницы
   333 = 16 + 64 + 10 + 137 + 10 + 26 + 10 + 44 + 16
   137 = 3 × 39 + 2 × 10
   ============================================================ */
@container (max-width: 743px) {
  .fo-card {
    width: 100%;
    height: 333px;
    padding: var(--fo-pad-m);
    grid-template-columns: 1fr;
    grid-template-rows: 64px 137px 26px 44px;
    column-gap: 0;
    row-gap: var(--fo-gap);
    grid-template-areas: "head" "params" "features" "actions";
  }
  .fo-head .fo-logo { width: 48px; height: 48px; font-size: 18px; }
  .fo-head .fo-art { width: 64px; height: 40px; }
  .fo-title { font-size: 16px; }
  .fo-params { grid-template-columns: 1fr 1fr; grid-auto-rows: 39px; column-gap: 16px; }
  .fo-param { flex-direction: column; align-items: stretch; gap: 0; }
  .fo-param__label { display: flex; align-items: center; gap: 4px; line-height: 1.3; }
  .fo-param__value { line-height: 1.45; }
  .fo-hint { align-self: center; margin-left: 0; }
  .fo-actions { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0; }
  .fo-btn { flex: 1; width: auto; }
  .fo-instr { display: none; position: static; }   /* текстовая ссылка скрыта */
  .fo-icon { display: flex; }    /* её место занимает круглая кнопка 44 */
}