/* ============================================================
   Карточка оффера — вклады, страхование, РКО, кредиты для бизнеса.

   Основа — третий пакет дизайнера от 08.09, «Fincer offer cards
   handoff». Разметка одна на четыре категории и на оба исполнения;
   мобильного варианта разметки нет, исполнение решает контейнер.

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

   1. Рамка нарисована внутренней тенью, а не `border`. У дизайнера
      здесь `border: 1px` при `box-sizing: border-box` и высоте 162,
      а слагаемые дают 162 без рамки — два пикселя отнимались
      у содержимого и подрезали ряд плашек. В его же втором пакете
      это решено тенью; решение владельца от 08.09 — высота 162
      во всех разделах каталога, значит тень везде.
   2. Ширина `.oc-frame` не 1000, а по колонке витрины: на сайте
      она 1160, и соседние разделы не должны иметь полей разной ширины.
      Внешняя сетка перестроена с `290 / 466 / 170` на
      `290 / 1fr / 170` — иначе лишние 160 пикселей достались бы
      зоне действия и кнопка повисла бы посреди пустого места.
   3. Модификатор `.oc--logo-wide` у вкладов не ставится. Дизайнер
      отдал вклады с широким логотипом 84×52; правило владельца
      от 08.09 отдаёт прямоугольный слот только под изображение
      продукта, а физических продуктов в этой четвёрке нет.
      Модификатор оставлен в файле на случай возврата.
   4. Заведён слот иконки — третий вид шапки по тому же правилу.
   5. Стили `.showcase-group` из пакета не перенесены: на сайте этот
      класс уже занят обзором каталога, и своя ширина 1000 сломала бы
      его. Перенесено только оформление пустого раздела.
   ============================================================ */

.oc-frame {
  --oc-radius: 8px;
  --oc-radius-pill: 999px;
  --oc-pad-desktop: 20px;
  --oc-pad-mobile: 16px;
  --oc-slot-gap: 10px;
  --oc-zone-gap: 16px;
  --oc-height-desktop: 162px;
  --oc-height-mobile: 333px;
  --oc-row: 22px;
  --oc-cell-mobile: 39px;
  --oc-features-h: 26px;
  --oc-cta-h: 44px;
  --oc-cta-w: 170px;
  --oc-logo-w: 56px;
  --oc-logo-h: 56px;
  --oc-logo-w-mobile: 48px;
  --oc-logo-h-mobile: 48px;
}

/* Широкий слот. Сейчас не применяется ни в одной из четырёх категорий —
   оставлен на случай, если в группе появится физический продукт. */
.oc--logo-wide { --oc-logo-w: 84px; --oc-logo-h: 52px; --oc-logo-w-mobile: 64px; --oc-logo-h-mobile: 40px; }

/* Контейнер решает исполнение: мобильная раскладка включается
   по ширине контейнера, а не окна. */
.oc-frame { container-type: inline-size; width: 100%; }

.oc-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.oc {
  box-sizing: border-box; width: 100%;
  height: var(--oc-height-desktop);
  padding: var(--oc-pad-desktop);
  background: var(--color-bg-soft);
  box-shadow: inset 0 0 0 1px var(--color-border);
  border-radius: var(--oc-radius);
  font-family: var(--font-main);
  color: var(--color-text);
  transition: background-color 120ms ease-out;
}

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

.oc__main { display: grid; grid-template-columns: 290px minmax(0, 1fr) var(--oc-cta-w); gap: var(--oc-zone-gap); height: 86px; }
.oc__product { display: flex; gap: 12px; min-width: 0; }

.oc__product .oc__logo {
  flex: none; box-sizing: border-box;
  width: var(--oc-logo-w); height: var(--oc-logo-h);
  border-radius: var(--oc-radius); background: var(--color-bg);
  border: 1px solid var(--color-border-strong); object-fit: contain;
}

/* Заглушка: заглавная буква названия организации. */
.oc__product .oc__logo--fallback {
  display: flex; align-items: center; justify-content: center;
  border-color: var(--color-border);
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: var(--color-text-muted);
}

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

.oc__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--color-text); text-decoration: none; transition: color 120ms ease-out; }
.oc__title:hover { color: var(--color-accent-ink); text-decoration: underline; }
.oc__title:active { color: var(--color-accent-ink-hover); }
.oc__subtitle { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-text-muted); }
.oc__rating { margin: 2px 0 0; display: flex; align-items: center; gap: 4px; line-height: 1; }
.oc__star { font-size: 13px; line-height: 1; color: var(--color-accent-ink); }
.oc__rating-value { font-size: 13px; font-weight: 700; line-height: 1; color: var(--color-text); }
.oc__rating-value--empty { color: var(--color-text-muted); }

/*
 * Первый столбец плашек шире — правка от 15.09.
 *
 * Замер на дебетовых картах: подпись «Снятие без процентов» занимает 137
 * точек, значение «До 200 000 ₽/мес.» — 127, на плашку нужно 272. В прежних
 * 210 значению оставалось 65, и оно рвалось на три строки, растягивая
 * плашку с 22 до 74.
 *
 * Между вторым столбцом и кнопкой было 178 точек пустоты; 70 из них ушли
 * на расширение первого столбца, второй сдвинулся вправо на те же 70.
 * До кнопки осталось 108 — воздух сохраняется, строка больше не рвётся.
 */
.oc__params { margin: 0; display: grid; grid-template-columns: 280px 240px; column-gap: var(--oc-zone-gap); grid-template-rows: repeat(3, var(--oc-row)); row-gap: var(--oc-slot-gap); }
/*
 * Четыре плашки вместо шести — этап 120.
 *
 * Сетка сжимается до двух рядов и встаёт по центру своей зоны: высота
 * карточки задана жёстко и держится логотипом и кнопкой, а не плашками,
 * поэтому уменьшать её здесь нельзя — поедет весь ряд.
 */
.oc--params-4 .oc__params,
.oc--params-3 .oc__params {
  grid-template-rows: repeat(2, var(--oc-row));
  align-content: center;
}

.oc--params-2 .oc__params,
.oc--params-1 .oc__params {
  grid-template-rows: var(--oc-row);
  align-content: center;
}

.oc__param { display: flex; align-items: baseline; gap: 8px; height: var(--oc-row); min-width: 0; }
.oc__label { font-size: 13px; line-height: var(--oc-row); color: var(--color-text-muted); white-space: nowrap; }
.oc__value { margin: 0; font-size: 15px; line-height: var(--oc-row); color: var(--color-text); white-space: nowrap; }
.oc__value--empty { color: var(--color-text-muted); }

.oc__hint { margin-left: 4px; flex: none; box-sizing: border-box; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-head); font-size: 10px; font-weight: 700; line-height: 1; text-decoration: none; }

/* По середине зоны — см. `offer-card.css`, правка 08.09. */
.oc__action { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom: -36px; }
/* Запрет переноса подписи — см. `offer-card-of.css`, правка 09.09. */
.oc__cta { box-sizing: border-box; width: 100%; height: var(--oc-cta-h); padding: 0 12px; white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius: var(--oc-radius); background: var(--color-accent); color: var(--color-on-accent); font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color 120ms ease-out; }
.oc__cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.oc__cta:active { background: var(--color-accent-pressed); color: var(--color-on-accent); }

/* Под кнопкой и вне потока — см. `offer-card.css`, правка 08.09. */
.oc__manual { position: absolute; left: 0; top: calc(50% + 32px); height: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); text-decoration: none; transition: color 120ms ease-out, border-color 120ms ease-out; }
.oc__manual:hover { color: var(--color-accent-ink); text-decoration: underline; }
.oc__manual:active { color: var(--color-accent-ink-hover); }
.oc__manual-mark { flex: none; box-sizing: border-box; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-head); font-size: 11px; font-weight: 700; line-height: 1; }

.oc__features { margin: var(--oc-slot-gap) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 8px; height: var(--oc-features-h); }
.oc__feature { flex: none; box-sizing: border-box; height: var(--oc-features-h); padding: 4px 12px; border-radius: var(--oc-radius-pill); background: var(--color-bg); border: 1px solid var(--color-border); font-size: 13px; line-height: 16px; color: var(--color-text-muted); white-space: nowrap; }

.oc__title:focus-visible,
.oc__cta:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.oc__manual:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 3px; border-radius: 4px; }

.oc__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@container (max-width: 700px) {
  .oc { height: var(--oc-height-mobile); padding: var(--oc-pad-mobile); display: flex; flex-direction: column; gap: var(--oc-slot-gap); }
  .oc__main { display: contents; }
  .oc__product { order: 1; height: 64px; }
  .oc__product .oc__logo { width: var(--oc-logo-w-mobile); height: var(--oc-logo-h-mobile); }
  .oc__product .oc__logo--fallback { font-size: 18px; }
  .oc__title { font-size: 16px; }
  .oc__params { order: 2; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, var(--oc-cell-mobile)); }
  /*
   * То же на узком исполнении. Высота карточки здесь тоже задана жёстко
   * (333), и её сжатие надо считать по живым карточкам, а не на глаз:
   * пока плашки просто встают по центру своей зоны.
   */
  .oc--params-4 .oc__params,
  .oc--params-3 .oc__params { grid-template-rows: repeat(2, var(--oc-cell-mobile)); align-content: center; }
  .oc--params-2 .oc__params,
  .oc--params-1 .oc__params { grid-template-rows: var(--oc-cell-mobile); align-content: center; }
  .oc__param { display: block; height: var(--oc-cell-mobile); overflow: hidden; }
  .oc__label { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 17px; }
  .oc__value { line-height: 22px; }
  .oc__features { order: 3; margin: 0; }
  .oc__action { order: 4; flex-direction: row; align-items: stretch; gap: 12px; height: var(--oc-cta-h); margin-bottom: 0; }
  .oc__cta { flex: 1; }
  .oc__manual { position: static; margin-top: 0; flex: none; box-sizing: border-box; width: 44px; height: 44px; gap: 0; justify-content: center; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border-strong); }
  .oc__manual:hover { border-color: var(--color-accent-ink); text-decoration: none; }
  .oc__manual-text { display: none; }
  .oc__manual-mark { width: auto; height: auto; border: 0; font-size: 17px; }
}

/* ---------- Пустой раздел ---------- */

/*
 * Раздел без единого предложения не прячется и не притворяется
 * результатом фильтра: у него своя заглушка. Правило владельца
 * от 05.09 — пустой блок показывается с заглушкой.
 */
.showcase__empty--section {
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  background: var(--color-bg-soft);
  box-shadow: inset 0 0 0 1px var(--color-border);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-muted);
}