/* ============================================================
   Карточки офферов — займы, банкротство, регистрация бизнеса,
   вакансия. Четыре категории, выбивающиеся из общей схемы:
   стиль общий, компоновка у каждой своя.

   Основа — четвёртый пакет дизайнера от 08.09,
   `карточки/handoff/Передача разработчику.dc.html`.

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

   1. Рамка нарисована внутренней тенью, а не `border`. У дизайнера
      объявленная высота включает две рамки (306, 164, 130, 362);
      с тенью те же слоты складываются в 304, 162, 128 и 360.
      Так банкротство встаёт ровно в 162 — высоту, принятую
      во всех остальных разделах каталога, решение владельца от 08.09.
   2. Токены не объявляются заново: палитра сайта уже есть в `base.css`.
   3. Плашки банкротства: первые две зелёные. Пакет отдал их в общем
      сером виде, владелец 08.09 вернул зелёные — как на референсе,
      где цветом выделено то, что снимает страх.
   4. Регистрация бизнеса: включены `--dark` у кнопки и `--caps`
      у плашек. Дизайнер оставил их закомментированными «на случай
      возврата»; владелец 08.09 вернул.
   5. Иконка категории внутри баннера вакансии не выводится: набора
      `vac-*` в переданной папке нет. Баннер — заливка по категории.
   ============================================================ */

/* ---------- ряд каталога ---------- */

/*
 * Сетки считаются от ширины полосы, а не от числа 1160 — этап 111.
 *
 * До этого все три были заданы намертво: `width: 1160px` и колонки
 * в точных пикселях, а складывались они единственным переломом на 767.
 * На всём промежутке от 768 до 1160 сетка торчала за край полосы:
 * замер на витрине займов дал 427 точек перебора на 768, 171 на 1024
 * и 35 на 1160. Планшет и оконный режим показывали страницу
 * с горизонтальной прокруткой.
 *
 * Поломка одна на три сетки и родом из перехода: пакеты «fo» и «oc»
 * перевели на запросы к контейнеру, а этот остался на десктопной сетке.
 *
 * Числа дизайнера при этом сохранены. На полосе 1160 доли дают ровно
 * то, что было задано пикселями: у займов (1160 − 3 × 20) / 4 = 275,
 * у вакансий (1160 − 24) / 2 = 568.
 */
.of-grid { display: grid; box-sizing: border-box; justify-content: start; }

/*
 * Займы: сколько поместится, но не уже 240.
 *
 * Число взято из самой карточки, а не на глаз, и считается по ряду
 * действий — он у займов самый широкий. В ряду круглая кнопка 44,
 * зазор 12 и кнопка с подписью «Получить деньги»: подпись 134 при
 * кегле 16 плюс поля 12 с двух сторон — 158. Вместе 214, плюс поля
 * карточки 24 — карточка не может быть уже 238. Округлено до 240.
 *
 * Сначала здесь стояло 230, и это было мало: на 240 разница в шесть
 * точек, но именно она отделяет целую подпись от обрезанной.
 *
 * Получается четыре в ряд до окна около 1024, три до 890, две до 560,
 * ниже одна. На 1280 колонка выходит ровно 275, как в макете.
 */
.of-grid--loan { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; width: 100%; }

.of-grid--wide { grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }

/*
 * Вакансии: две в ряд, пока карточка не уже 520.
 *
 * Сначала здесь стояли две равные доли без нижнего предела — и на 768
 * карточка выходила 345 при задуманных 568. Замер показал, что при такой
 * ширине её внутренности не просто теснятся, а рвутся: в колонке
 * параметров оставалось восемь точек, и «Складской комплекс» с «Яндекс
 * Доставкой» обрезались до неразличимости. Мобильная раскладка карточки
 * включается только на 767 и помочь здесь не может.
 *
 * Поэтому предел: не помещаются две по 520 — встаёт одна во всю полосу.
 * Две держатся от 1160 и выше, ниже идёт одна широкая. Растянутая
 * карточка выглядит хуже задуманного, но читается вся, а сжатая теряла
 * половину подписей.
 */


/* ---------- карточка ---------- */
.of-card {
  box-sizing: border-box;
  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-card:hover { background: var(--color-bg-hover); }
}

/* ---------- шапка ---------- */
.of-head { flex: none; display: flex; gap: 10px; align-items: center; min-width: 0; }
.of-head__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Название и рейтинг в одну строку — только регистрация бизнеса.
   У дизайнера это встроенный стиль; в вёрстке ему нужен класс. */
.of-head__line { display: flex; align-items: center; gap: 10px; }

.of-slot {
  flex: none; box-sizing: border-box;
  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-slot--40 { width: 40px; height: 40px; }
.of-slot--84 { width: 84px; height: 52px; }
.of-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Иконка набора нарисована своими красками — рамка вокруг неё лишняя. */
.of-slot--icon { border: 0; background: none; }
.of-slot__letter { font: 700 22px/1 var(--font-head); color: var(--color-text-muted); }

.of-name { font: 700 17px/1.3 var(--font-main); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.of-name:hover { color: var(--color-accent-ink); text-decoration: underline; }
.of-name:active { color: var(--color-accent-ink-hover); }
.of-sub { font: 400 13px/1.4 var(--font-main); color: var(--color-text-muted); }
.of-sub--caps { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.of-rating { display: flex; align-items: center; gap: 4px; font: 700 13px/1 var(--font-main); color: var(--color-text); }
.of-rating__star { font-weight: 400; color: var(--color-accent-ink); }

/* ---------- параметры ---------- */
.of-params { flex: none; display: flex; flex-direction: column; }
.of-row { height: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.of-row--left { justify-content: flex-start; }
.of-label { font: 400 13px/1.3 var(--font-main); color: var(--color-text-muted); white-space: nowrap; }
.of-value { font: 400 15px/1.3 var(--font-main); color: var(--color-text); white-space: nowrap; }
.of-value--empty { color: var(--color-text-muted); }
.of-value--big { font: 700 22px/1.2 var(--font-main); }

/* ---------- плашки ---------- */
/*
 * Лента тегов — одна строка с прокруткой вбок, 15.09.
 *
 * Резать её по одному тегу больше не нужно: что не поместилось в полосу
 * карточки, уезжает за край и достаётся пальцем или колесом. Полоса
 * прокрутки скрыта — она съедала бы высоту ряда; у правого края
 * растворение, чтобы было видно, что лента продолжается.
 */
.of-pills {
  flex: none; height: 26px; display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

.of-pills::-webkit-scrollbar { display: none; }

/* Лента с запасом тянется мышью, поэтому курсор об этом говорит. */
.of-pills { cursor: grab; }
.of-pills.is-dragging { cursor: grabbing; user-select: none; }
.of-pill {
  flex: none; height: 26px; box-sizing: border-box; padding: 0 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font: 400 13px/24px var(--font-main);
  color: var(--color-text-muted);
  white-space: nowrap;
}
/*
 * Ручные пометки — 15.09.
 *
 * Стоят своим рядом сверху карточки, отдельно от ленты тегов. Разница
 * не в оформлении, а в смысле: тег описывает условие продукта и берётся
 * из справочника раздела, пометка — выбор редакции из всего ассортимента.
 *
 * Ряд держит 26 и пустым: карточки в ряду обязаны быть одной высоты,
 * а пометки есть далеко не у всех.
 *
 * Краски бледные, обводка цветная: сплошная заливка на витрине означает
 * кнопку, то есть действие, а пометка — не действие.
 */
/*
 * Ряд вынесен за верхний край карточки и висит над ним — решение
 * владельца от 15.09, по рисунку на скриншоте.
 *
 * Своего места в потоке он не занимает, поэтому высота карточки
 * не меняется вовсе: она вернулась к прежним 338. Ряд стоял
 * обычным блоком и поднимал её до 374 — от этого отказались.
 *
 * Половина ряда заходит на карточку, половина — в зазор между рядами.
 * Зазор у займов 20, половина ряда 13: помещается.
 */
.of-marks {
  position: absolute; top: -13px; left: 14px; right: 14px;
  height: 26px; display: flex; gap: 8px; overflow: hidden;
  pointer-events: none;
}

/*
 * Пометка непрозрачная: она наполовину висит над фоном страницы,
 * а не над карточкой, и просвечивающий край читался бы как брак.
 */
.of-mark {
  flex: none; height: 26px; box-sizing: border-box; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 13px/24px var(--font-main);
  white-space: nowrap;
}

/*
 * Заливка сплошная, а не бледная — 16.09: бледная сливалась с карточкой
 * и пометку не было видно.
 *
 * «Топ выбор» — оранжевый логотипа #FE6A00. Это третья краска знака,
 * и на сайте она до сих пор не использовалась: текст графитовый, числа
 * зелёные, действие персиковое. Пометке она подходит именно поэтому —
 * ни с чем не путается. Персиковый брать нельзя: им залита кнопка
 * «Получить деньги» в той же карточке, и пометка читалась бы как вторая
 * кнопка. Контраст тёмной подписи на оранжевом 6,28, самого оранжевого
 * на подложке карточки 2,65 — видно сразу.
 *
 * «Лояльные» — зелёный логотипа #2AA419, как просил владелец. Тёмная
 * подпись даёт 5,54, сам цвет на подложке 3,00. Белую подпись взять
 * нельзя: на этом зелёном она даёт 3,27 при норме 4,5.
 */
.of-mark--top {
  background: #fe6a00;
  border-color: #fe6a00;
  color: var(--color-on-accent);
}

.of-mark--loyal {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-accent);
}

/* Зелёная плашка банкротства: цветом выделено то, что снимает страх. */
.of-pill--green { background: var(--color-bg-success); border-color: var(--color-border-success); color: #1f7a15; }
/* Правило `--caps` убрано 15.09: прописными теги стояли только
   у регистрации бизнеса, и владелец их снял. */

/* ---------- действие ---------- */
.of-actions { flex: none; display: flex; gap: 12px; }
.of-spacer { flex: 1; }
/*
 * Подпись кнопки никогда не переносится и не режется.
 *
 * `nowrap` — заслон: не влезающая подпись должна бросаться в глаза
 * при первой же проверке, а не тихо разъезжаться на две строки.
 * 09.09 «Получить консультацию» так и разъехалось, когда кнопка
 * сузилась с 220 до общих 170.
 *
 * Поля 12, а не 16: подпись «Отправить заявку» занимает 140, и при
 * полях 16 в 170 остаётся 138 — не хватало двух точек на пять разделов
 * сразу. При полях 12 остаётся 146.
 */
.of-btn {
  height: 52px; box-sizing: border-box; padding: 0 12px;
  white-space: nowrap;
  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;
  transition: background-color 120ms ease-out;
}
.of-btn:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.of-btn:active { background: var(--color-accent-pressed); color: var(--color-on-accent); }
/* Тёмная кнопка — только регистрация бизнеса. */
.of-btn--dark { background: var(--color-text); color: var(--color-bg); }
.of-btn--dark:hover { background: #332f36; color: var(--color-bg); }

.of-round {
  width: 52px; height: 52px; flex: none; box-sizing: border-box;
  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-round:hover,
.of-round:focus-visible { color: var(--color-accent-ink); border-color: var(--color-accent-ink); }

.of-name:focus-visible,
.of-btn:focus-visible,
.of-round:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }

/* ======== Займы · четыре в ряд ========
   338 = 14 + 44 + 10 + 26 + 10 + 158 + 10 + 52 + 14
   Параметры 158 = 5 рядов × 22 + 4 зазора × 12

   Пятый ряд — «Одобрение», добавлен 09.09 по ТЗ владельца. Карточка
   выросла на 34: ряд параметров держит постоянную высоту, и лишнюю
   строку некуда деть, кроме как прибавить её к карточке. Сжимать
   зазоры нельзя — ритм строк общий с остальными разделами. */
/*
 * Ширину задаёт колонка сетки, а не карточка — этап 111.
 *
 * Здесь стояло 275: то же число, что в сетке, и той же природы поломка.
 * Карточка не ужималась вместе с полосой и вылезала за неё.
 */
/*
 * Высота прежняя: ряд пометок висит над карточкой и места в ней
 * не занимает. `position: relative` нужен ему как точка отсчёта.
 */
.of-card--loan { position: relative; width: 100%; height: 338px; padding: 14px; }
.of-card--loan .of-head { height: 44px; }
.of-card--loan .of-pills { margin-top: 10px; }
.of-card--loan .of-params { margin-top: 10px; gap: 12px; }
.of-card--loan .of-actions { height: 52px; }
.of-card--loan .of-btn { flex: 1; }

/* ======== Банкротство · одна в ряд ========
   162 = 20 + 86 + 10 + 26 + 20 — та же высота, что у остальных разделов */
.of-card--bankruptcy { width: 100%; height: 162px; padding: 20px; }
.of-card--bankruptcy .of-main {
  height: 86px; display: grid; gap: 40px;
  grid-template-columns: 280px 534px 226px;   /* 534 = 247 + 40 + 247 */
}
.of-card--bankruptcy .of-head { align-items: flex-start; }
/*
 * Шесть параметров, раскладка по столбцам — как в пакете дизайнера:
 * слева «Стоимость от», «Общая стоимость», «Выгода», справа
 * «Длительность», «Сумма долга», «Рассрочка».
 *
 * У дизайнера это два отдельных блока `.of-params` в четырёхколоночной
 * сетке. Здесь один блок с `grid-auto-flow: column` — на экране то же
 * самое до пикселя, но на телефоне тот же блок разворачивается в сетку
 * 1fr 1fr высотой 137, как у него же. Двумя блоками мобильная давала
 * 88 + 88 и карточка не сходилась.
 *
 * До 09.09 стояла раскладка по строкам, и колонки карточки шли
 * не в том порядке, что в макете.
 */
.of-card--bankruptcy .of-params {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 247px 247px;
  grid-template-rows: repeat(3, 22px);
  column-gap: 40px;
  row-gap: 10px;
}
/*
 * Кнопка того же размера, что во всех остальных разделах каталога:
 * 170 x 44. Замечание владельца от 09.09.
 *
 * У дизайнера в этих двух карточках она 220 x 52 — шире и выше, чем
 * на дебетовых картах, кредитах, вкладах и РКО. В отдельно взятом макете
 * это не видно, а в каталоге, где человек листает разделы подряд,
 * кнопка прыгает в размере от раздела к разделу.
 *
 * Зона действия сужена с 220 до 170, освободившиеся 50 отданы колонкам
 * параметров.
 *
 * С 15.09 в зоне появилась вторая кнопка — круглая, 44, со своим
 * зазором 12. Зона выросла со 170 до 226, и 56 вернулись из колонок
 * параметров: они стали 247 вместо 275. Замер на всех четырёх офферах
 * раздела: самая длинная строка — «Обслуживание счёта» плюс «бесплатно»
 * с зазором 8 — занимает 211, то есть в 247 помещается с запасом 36.
 * Итог ряда прежний: 280 + 247 + 247 + 226 и три зазора по 40 — 1120.
 *
 * Ширина зоны постоянная, независимо от того, есть ли вторая кнопка:
 * иначе основная кнопка гуляла бы по горизонтали от карточки к карточке.
 * Круглая стоит слева, основная прижата к правому краю.
 */
/* По середине зоны — см. `offer-card.css`, правка 08.09. */
.of-card--bankruptcy .of-action {
  width: 226px; display: flex; align-items: center;
  justify-content: flex-end; gap: 12px; margin-bottom: -36px;
}
.of-card--bankruptcy .of-btn { width: 170px; height: 44px; }
.of-card--bankruptcy .of-round { width: 44px; height: 44px; }
.of-card--bankruptcy .of-pills { margin-top: 10px; }

/* ======== Регистрация бизнеса ========
   С 09.09 рисуется разметкой банкротства: категория пересобрана
   под шесть параметров, и прежняя карточка на один параметр
   высотой 128 стала невозможна. Высота теперь общая, 162.
   Своими остаются только плашки — прописными. */

/* ======== Вакансия · две в ряд ========
   Баннер — горизонтальная полоса сверху во всю ширину: 568 x 160.
   Решение владельца от 08.09: прежние 120 были мелковаты для картинки,
   высота карточки при этом остаётся 360.

   360 = 160 баннера + 200 текста. Прежде текст занимал 240 и в них
   не было ни одного лишнего пикселя, поэтому сорок отданных баннеру
   собраны с отступов, а не со строк: ни название, ни город,
   ни работодатель, ни доход из карточки не убраны.

   Кегли названия и параметров подняты 08.09 по замечанию владельца —
   было слишком мелко.

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

   374 = 160 баннера + 214 текста,
   214 = 14 + 48 + 6 + 30 + 8 + 46 + 4 + 44 + 14. */
/*
 * Высота полосы задана отношением, а не числом — 15.09.
 *
 * Стояло жёсткое 160. Карточка при этом в ряду бывает и одна,
 * растянутая на всю полосу содержимого: на окне 960 она выходит 920,
 * и место под баннер получалось 920 на 160 — отношение 5,75 против
 * 3,55 у файла. Картинка заполняла место по ширине, и у неё срезалось
 * 99 точек из 259, по 50 сверху и снизу.
 *
 * Теперь место всегда 568 к 160 по форме, какой бы ширины ни вышла
 * карточка. Файл ложится точь-в-точь на любой ширине, обрезки нет.
 * На карточке 568 высота остаётся прежней, 160.
 *
 * Высота карточки поэтому плавающая, а текстовая часть — нет:
 * у неё свои 214, и все слоты под баннером стоят как стояли.
 * В ряду карточки одной ширины, значит и высоты у них одинаковые.
 */
/*
 * Форма кадра одна на все ширины — 2,79 к 1, решение владельца
 * от 15.09. Было две: 3,55 выше перелома 767 и 2,79 ниже. Широкая
 * убрана целиком, вместе с парой файлов на вакансию.
 */


/*
 * Контур по периметру и черта под баннером — решение владельца
 * от 15.09.
 *
 * У всех карточек набора контур уже был, но нарисованный внутренней
 * тенью. Баннер лежит поверх неё и закрывает верхнюю сторону: сверху
 * карточка выглядела без края. Здесь поэтому настоящая рамка —
 * она занимает своё место, а не рисуется поверх.
 *
 * Внутренняя тень у карточки вакансии снимается, иначе край выйдет
 * в два пикселя.
 */

/*
 * Обёртка `picture` появляется, когда у вакансии залит второй файл
 * под телефон. Своей высоты у неё нет, а картинка внутри меряет
 * проценты от родителя — без этой строки полоса схлопывается.
 */

.of-banner--ill-light { background: var(--ill-light); }
.of-banner--ill-n { background: var(--ill-n); }
.of-banner--ill-accent { background: var(--color-border-accent); }
.of-city { height: 18px; margin-top: 8px; display: flex; align-items: center; gap: 4px; font: 400 13px/1.3 var(--font-main); color: var(--color-text-muted); }
.of-city svg { width: 14px; height: 14px; flex: none; }
.of-employer { height: 18px; margin-top: 8px; font: 400 13px/1.3 var(--font-main); color: var(--color-text-muted); overflow: hidden; }
.of-salary { height: 31px; margin-top: 8px; display: flex; align-items: baseline; gap: 6px; font: 700 28px/1.1 var(--font-main); color: var(--color-number); white-space: nowrap; }
.of-salary__period { font: 400 15px/1.1 var(--font-main); color: var(--color-number); }
/*
 * Дохода нет — на его месте фраза. Она набрана мельче числа, и её буквы
 * заняли бы в слоте не то же место: замер показал расстояние до
 * параметров 28 вместо 14, а до названия 15.
 *
 * Межстрочное поле растянуто на всю высоту слота, и буквы встают
 * по его середине. Идеально не выйдет — ростом они меньше числа, —
 * но отклонение расходится поровну на обе стороны вместо перекоса
 * в одну. Вакансий без дохода сейчас три из пятнадцати.
 */
.of-salary--empty { font: 400 17px/31px var(--font-main); color: var(--color-text-muted); }
/*
 * Кегли текстовой части.
 *
 * Название 18 вместо 16, город и работодатель 15 вместо 13: с баннером
 * во всю ширину строки под ним выглядели подписями к картинке, а не
 * содержанием карточки.
 *
 * Название по-прежнему в две строки: 48 — это ровно две строки кегля 18
 * при интерлиньяже 1,3. Ширина текстового поля 568, поэтому доход
 * набран макетными 28: самая длинная строка «120 000 – 180 000 ₽
 * за смену» занимает 332 и укладывается в 528 с запасом.
 */
/*
 * Название вакансии — кегль 20, одна строка.
 *
 * Коробка держит ровно строку. Две строки она держала до 15.09,
 * и у названия в одну строку под ним висели пустые 25 точек:
 * расстояние до суммы выходило 36 вместо 14, хотя по коробкам
 * замер показывал ровные 14. Названий в две строки не будет —
 * правило владельца.
 *
 * Сама ссылка строчная: раньше она была блоком во всю ширину,
 * и нажатие срабатывало на пустом месте правее последнего слова.
 */


/*
 * Четыре расстояния равны — требование владельца: от баннера
 * до названия, от названия до суммы, от суммы до параметров
 * и от параметров до кнопки. Все четыре по 14.
 *
 * Числа отступов при этом разные, и это не описка. Считать надо
 * по буквам, а не по коробкам: у строки в 28 пунктов при межстрочном
 * 1,1 коробка на 3 точки выше самих букв, у названия наоборот —
 * выносные элементы торчат за коробку на точку. Замер по коробкам
 * давал ровные 14, а глаз видел 13, 10, 11 и 14.
 *
 * Поэтому отступы гасят разницу: 15, 18, 17 и 14 дают по буквам
 * ровно 14 в каждом из четырёх мест.
 *
 * Высота текстовой части отсюда и берётся:
 * 15 + 26 + 18 + 31 + 17 + 48 + 14 + 44 + 14 = 227.
 */


/*
 * Сетка параметров: два столбца, два ряда, порядок чтения по строкам.
 * Высота ряда 20 и зазор 6 — 46 на весь блок, число постоянное:
 * пустое значение даёт прочерк, и блок не съезжает.
 */
/*
 * Столбцы неравные: левый 190, правый забирает остальное.
 *
 * Слева стоят короткие значения — «вахта», «Москва»; справа опыт
 * и работодатель, и второму нужно место: «Сервис доставки продуктов»
 * занимает 192 при подписи «Работодатель» в 90. При равных столбцах
 * значению оставалось 169, и оно резалось многоточием — а обрезки
 * в карточках нет, лимиты стоят на вводе.
 */


/* ============================================================
   МОБИЛЬНАЯ · до 767 включительно
   ============================================================ */
@media (max-width: 767px) {

  /*
   * Займы: столько в ряд, сколько помещается целиком — этап 112.
   *
   * Здесь стояли жёсткие две в ряд, и на 375 карточка выходила 162.
   * Под содержимое в ней оставалось 138, а ряду действий нужно 214:
   * круглая кнопка 44, зазор 12 и кнопка с подписью «Получить деньги»
   * шириной 158. Кнопка не ужимается — подпись стоит с `nowrap`, —
   * и уходила правым краем на 246 при краю карточки 182. Обрезало
   * её `overflow: hidden` самой карточки, поэтому до горизонтальной
   * прокрутки не доходило и глазом это читалось как «кнопка без конца».
   *
   * Число колонок снова считает сетка по своему пределу 240: на 375
   * выходит одна карточка во всю ширину, с 560 — две. Две в ряд
   * на телефоне были в разметке дизайнера, но там же кнопка была
   * нарисована влезающей; влезть в 138 она не может ни при каком кегле.
   * Выбрано то, что сохраняет карточку целиком, а не число колонок.
   *
   * Зазор остаётся мобильный, 12.
   */
  .of-grid--loan { gap: 12px; }
  /*
   * 314 = 12 + 40 + 10 + 26 + 10 + 142 + 10 + 44 + 12, было 282.
   * Пятый ряд параметров прибавил 32: на мобильной ряды идут
   * с зазором 10, то есть 5 × 22 + 4 × 10 = 142 вместо 118.
   */
  /*
   * `overflow` здесь снят: он обрезал бы ряд пометок, висящий
   * над верхним краем.
   */
  .of-card--loan { position: relative; width: 100%; height: 314px; padding: 12px; }
  .of-card--loan .of-head { height: 40px; gap: 6px; }
  .of-card--loan .of-slot--40 { width: 32px; height: 32px; }
  .of-card--loan .of-slot__letter { font-size: 18px; }
  .of-card--loan .of-name { font-size: 15px; }
  .of-card--loan .of-params { gap: 10px; }
  .of-card--loan .of-value { font-size: 13px; }
  .of-card--loan .of-actions { height: 44px; }
  .of-card--loan .of-btn { height: 44px; }
  .of-card--loan .of-round { width: 44px; height: 44px; }

  .of-grid--wide { grid-template-columns: minmax(0, 1fr); }

  /* Банкротство: 313 = 16 + 44 + 10 + 137 + 10 + 26 + 10 + 44 + 16 */
  .of-card--bankruptcy { height: 313px; padding: 16px; }
  .of-card--bankruptcy .of-main { display: contents; }
  .of-card--bankruptcy .of-head { height: 44px; }
  .of-card--bankruptcy .of-slot--84 { width: 64px; height: 40px; }
  .of-card--bankruptcy .of-params {
    margin-top: 10px; height: 137px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 39px);
    grid-auto-flow: row;
    column-gap: 16px; row-gap: 10px;
  }
  .of-card--bankruptcy .of-row {
    height: 39px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0;
  }
  /*
   * На узком экране зона действия занимает всю ширину, и фиксировать
   * её незачем: основная кнопка растягивается по остатку, круглая
   * держит свои 44 слева.
   */
  .of-card--bankruptcy .of-action { width: auto; margin-top: 10px; margin-bottom: 0; }
  .of-card--bankruptcy .of-btn { width: auto; flex: 1; height: 44px; }

  /*
   * На телефоне баннер тоже подрос — со 96 до 120, — и карточка
   * с ним: 332 = 120 + 212. Текстовая часть та же, что на десктопе,
   * поэтому и высоты слотов общие; отдельно задан только кегль дохода:
   * в 303 точки внутренней ширины строка кегля 28 не влезает.
   */
  /*
   * 356 = 120 баннера + 236 текста,
   * 236 = 14 + 48 + 6 + 30 + 8 + 68 + 4 + 44 + 14.
   *
   * Кегли названия и дохода те же, что на десктопе: правка 08.09 подняла
   * их по всей карточке, и мельчить обратно на телефоне незачем.
   *
   * Параметры идут теми же двумя столбцами, но подпись встаёт
   * над значением: «Работодатель» с названием компании в одну строку
   * в 148 точек не помещается.
   *
   * Замер до правки показал 348 при содержимом 236: восемь пикселей
   * съедались у нижнего поля, и оно выходило 6 вместо 14.
   */
  /*
   * Форма кадра здесь та же, что на широком экране, — 2,79 задано
   * в общем правиле и не переопределяется. Своей остаётся только
   * высота текстовой части: подписи параметров встают над значениями
   * и ряд вырастает.
   */

  /*
   * Поправка на межстрочные поля своя: здесь доход набран кеглем 24
   * вместо 28, а подпись параметра стоит над значением. С десктопными
   * отступами по буквам выходило 13, 15, 19 и 15 вместо ровных 14.
   *
   * Высота: 16 + 26 + 17 + 31 + 12 + 84 + 13 + 44 + 14 = 257.
   */

  /*
   * Столбцы параметров становятся равными — этап 112.
   *
   * На десктопе они 190 и остаток: в первом «Формат» и «Опыт», во втором
   * «Работодатель» и «График». На телефоне карточка вдвое уже, и остаток
   * сжимался до 97, а во втором столбце стоят самые длинные значения:
   * «Складской комплекс» занимает 137, «Контактный центр» — 121.
   * Оба обрезались.
   *
   * Равные доли дают по 148 — влезает и то и другое. К шрифту это
   * отношения не имело: с запасным те же значения занимали 133 и 118,
   * то есть тоже не помещались.
   */

  /*
   * Значение не шире своей клетки, длинное кончается многоточием.
   *
   * `overflow: hidden` у него стоял и раньше, но обрезать было нечего:
   * без ограничения ширины коробка вырастала по содержимому. «Строительная
   * организация» занимала 181 при клетке 148 и вылезала за карточку.
   *
   * Многоточие здесь уместно, в отличие от подписей кнопок: название
   * работодателя приходит из данных, его длину мы не выбираем.
   */

}