/*
 * Витрины офферов и вакансий.
 *
 * Разметку выдаёт плагин `fincer-offers` — он не зависит от темы, поэтому
 * имена классов здесь менять нельзя: витрина должна пережить смену темы.
 *
 * Стили перенесены из прежней темы. Изменение одно: жёстко вписанные цвета
 * заменены переменными, чтобы оформление витрин менялось вместе с сайтом,
 * а не жило своей жизнью.
 */

/* ---------- Разделы витрины ---------- */

/*
 * Переключатель типов продуктов. Каждый ведёт на свой адрес, а не меняет
 * параметр в ссылке: у агрегаторов под каждый продукт отдельный раздел,
 * и запросам вроде «дебетовые карты» есть куда приземляться.
 */
.showcase__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

/*
 * На узком экране разделы не переносятся, а прокручиваются вбок.
 *
 * Одиннадцать разделов в столбик занимали 347 пикселей — почти половину
 * экрана телефона до первой карточки. Полоса с прокруткой оставляет
 * от них одну строку.
 */
/* ---------- Свёрнутая панель фильтров на посадочной «Работы» ---------- */

/*
 * Зачем. На посадочной пять полей стояли между заголовком и выдачей:
 * списки на y359–731, строка «Найдено вакансий» на y773, первая вакансия
 * на y867 — за краем первого экрана и на 360×800, и на 375×667. Человек
 * с рекламы видел форму вместо работы.
 *
 * Порог из ТЗ раздела не трогаем: панель по-прежнему появляется только
 * там, где вакансий больше шести. Меняется не наличие панели, а её высота
 * до раскрытия.
 *
 * На витрине `/vakansii/` панель остаётся развёрнутой: туда приходят
 * подбирать, и первый экран там ничего не решает.
 */
.showcase__filtersbox {
  margin-bottom: 18px;
}

/* На широком экране панель всегда раскрыта, и подпись над ней лишняя. */
.showcase__filterstoggle {
  display: none;
}

@media (max-width: 600px) {

  .showcase__filterstoggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    font-weight: 600;
    cursor: pointer;
    /* Свой знак раскрытия вместо треугольника браузера. */
    list-style: none;
  }

  .showcase__filterstoggle::-webkit-details-marker {
    display: none;
  }

  .showcase__filterstoggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  .showcase__filtersbox[open] .showcase__filterstoggle {
    margin-bottom: 12px;
  }

  .showcase__filtersbox[open] .showcase__filterstoggle::after {
    transform: translateY(2px) rotate(-135deg);
  }
}

@media (max-width: 782px) {
  .showcase__sections {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Поля по краям, чтобы крайние плашки не липли к границе экрана */
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .showcase__sections::-webkit-scrollbar {
    display: none;
  }

  .showcase__section {
    scroll-snap-align: start;
  }
}

.showcase__section {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--size-small);
  font-weight: 600;
  white-space: nowrap;
}

.showcase__section:hover {
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
}

.showcase__section.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.showcase__section.is-active:hover {
  color: #fff;
}

.showcase__section-count {
  font-size: var(--size-tiny);
  font-weight: 400;
  color: var(--color-text-light);
}

.showcase__section.is-active .showcase__section-count {
  color: rgba(255, 255, 255, .7);
}

/* ---------- Обзор разделов ---------- */

.showcase-group {
  margin-bottom: 40px;
}

.showcase-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.showcase-group__title {
  margin: 0;
  font-size: 28px;
}

@media (max-width: 1023px) {
  .showcase-group__title { font-size: 22px; }
}

/*
 * Название раздела ведёт в раздел — 06.09. Краской заголовка, а не
 * ссылки: строка в 28 пунктов оранжевым перетягивала бы на себя всё
 * внимание страницы. Что это переход, видно по наведению.
 *
 * Правила `.showcase-group__all` убраны вместе с самой строкой «Все 13»:
 * переход теперь на названии, а число ушло в счётчик над карточками —
 * такой же, как в самом разделе.
 */
.showcase-group__title a {
  color: var(--color-text);
}

.showcase-group__title a:hover {
  color: var(--color-accent-ink);
}

/* ---------- Вход в подбор займов ---------- */

/*
 * Полоса над фильтрами в разделе займов.
 *
 * Правила стоят здесь, а не в `quiz.css`: тот подключается только
 * на самой странице подбора, и блок в разделе оставался без оформления —
 * заголовок, строка текста и кнопка шли простым текстом. Поймано
 * по разбору владельца 06.09.
 *
 * Вид взят с макета: персиковая карточка с рамкой, слева заголовок
 * с числом предложений и одна строка объяснения, справа кнопка.
 */

.showcase__podbor {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
  padding: 22px 28px;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  background: var(--color-bg-accent);
}

.showcase__podbor-text {
  flex: 1 1 380px;
  min-width: 0;
}

.showcase__podbor-title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-text);
}

.showcase__podbor-lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.showcase__podbor-go {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 13px 26px;
  white-space: nowrap;
}

/*
 * Телефон: кнопка во всю ширину и под текстом.
 *
 * В строку они не помещаются — при ширине 335 на кнопку остаётся меньше
 * половины, и подпись «Подобрать заём» переносится по слогам.
 */
@media (max-width: 640px) {

  .showcase__podbor {
    padding: 18px 16px;
    gap: 14px;
  }

  .showcase__podbor-title {
    font-size: 18px;
  }

  .showcase__podbor-go {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------- Вводный текст страницы подбора ---------- */

/*
 * Стоит под анкетой и блоком «как устроен подбор», поэтому ему нужен
 * отступ сверху — тот же, что между самими блоками.
 */
.quiz-intro {
  margin: 32px 0 0;
}

/* ---------- Фильтры ---------- */

.showcase__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.showcase__filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 180px;
}

.showcase__filter span {
  font-size: var(--size-tiny);
  color: var(--color-text-muted);
  font-weight: 600;
}

.showcase__filter select,
.showcase__filter input[type="number"] {
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-bg);
  font-size: var(--size-small);
  color: var(--color-text);
  max-width: 100%;
}

/*
 * Поля фильтров на телефоне — кегль 16, иначе Safari на iOS увеличивает
 * страницу при фокусе.
 *
 * Общее правило в `base.css` сюда не достаёт: у этих полей специфичность
 * выше. Правило стоит сразу после базового намеренно — при равной
 * специфичности выигрывает то, что ниже, и первая попытка поставить его
 * в начало файла ничего не изменила.
 */
@media (max-width: 640px) {
  .showcase__filter select,
  .showcase__filter input[type="number"] {
    font-size: 16px;
  }
}

.showcase__submit {
  align-self: flex-end;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: var(--size-small);
}

.showcase__submit:hover {
  background: var(--color-accent-hover);
}

.showcase__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 18px;
  color: var(--color-text-muted);
}

/* Границы текущей страницы — рядом с общим числом, но тише */
.showcase__range {
  font-size: var(--size-small);
  color: var(--color-text-light);
}

/* Витрина вне колонки текста — на всю ширину области содержимого */
.entry-showcase {
  margin-top: 28px;
}

/* ---------- Сетка карточек ---------- */

.showcase__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  /*
   * В одном разделе каталога все карточки одного размера. Всегда.
   *
   * `grid-auto-rows: 1fr` равняет между собой ряды, растягивание по ряду —
   * карточки внутри ряда. Вместе это значит, что высота у всех карточек
   * раздела одна: у самой длинной. Нет параметра — на его месте пропуск,
   * но размер карточки тот же.
   *
   * Прежде здесь стояло `align-items: start`, и повод был: у старой карточки
   * набор параметров плавал от пяти строк до нуля, пустая растягивалась
   * до 418 пикселей, из которых 270 — пустота между названием и кнопкой.
   * Карточку переделали 06.09: блок выгоды печатается всегда тремя строками,
   * примечание держит две, кнопка стоит всегда. Разнобоя, ради которого
   * правило заводили, больше нет — а само правило делало ряд рваным,
   * как только у одной карточки появлялась строка, которой нет у соседа.
   */
  grid-auto-rows: 1fr;
}

.showcase__list--finance {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---------- Карточка вакансии ---------- */

.voffer {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
  /*
   * Ячейка сетки по умолчанию не сжимается уже своего содержимого.
   * Строки параметров выводятся в одну строку, из-за этого минимальная
   * ширина карточки выросла до 420 пикселей, и на телефоне появлялась
   * горизонтальная прокрутка.
   */
  min-width: 0;
}

.voffer:hover {
  border-color: var(--color-accent-ink);
  box-shadow: var(--shadow);
}

/* Под название всегда две строки, даже если оно уместилось в одну */
.voffer__title {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-text);
  height: calc(18px * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Название ведёт на страницу вакансии. Цветом не выделяется: в карточке
 * уже есть оранжевая кнопка отклика, и вторая цветная строка спорила бы
 * с ней за внимание.
 */
.voffer__link {
  color: inherit;
}

.voffer__link:hover {
  color: var(--color-accent-ink);
}

.voffer__employer {
  font-size: var(--size-small);
  color: var(--color-text-light);
  margin-bottom: 12px;
}

/*
 * Доход — одна строка. На средних экранах вилка вида
 * «120 000 – 180 000 ₽ в месяц» переносилась на вторую строку у части
 * карточек, и высоты снова расходились. Неразрывный пробел внутри числа
 * ставится при выводе, здесь ограничиваем строку.
 */
/* Кегль 28, как у чисел в каталоге и на главной: сверка 06.09 */
.voffer__income {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  /* Число дохода — той же краской, что все числа на сайте: этап 06.09.
     Было зелёным `--color-success`, при том что на главной то же число
     набиралось акцентом, а в каталоге чёрным. */
  color: var(--color-number);
  margin-bottom: 8px;
  height: calc(28px * 1.15);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «На руки» или «до вычета» — сразу под вилкой, тише её, но читаемо */
.voffer__income-type {
  margin: -6px 0 8px;
  font-size: var(--size-tiny);
  color: var(--color-text-light);
  height: calc(var(--size-tiny) * 1.4);
}

@media (max-width: 1100px) {
  /* На узкой колонке уменьшаем кегль, чтобы вилка помещалась целиком */
  .voffer__income {
    font-size: 19px;
    height: calc(19px * 1.3);
  }
}

/*
 * Пояснение к доходу — ровно три строки.
 *
 * Тексты разной длины: от 47 до 113 знаков. Без фиксированной высоты
 * карточки в ряду разъезжались.
 */
.voffer__note {
  margin: 0 0 14px;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--color-text-muted);
  height: calc(var(--size-small) * 1.5 * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voffer__params,
.foffer__params {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--size-small);
}

.voffer__params li,
.foffer__params li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

/*
 * Строка параметра — одна строка текста, значение прижато вправо.
 * Длинное значение обрезается многоточием, а не переносится: перенос
 * менял высоту карточки и ломал сетку.
 */
.voffer__param {
  align-items: baseline;
}

.voffer__param-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * География — исключение: городов бывает несколько, и обрезать их
 * в одну строку значит скрыть половину. Отводим две строки всегда,
 * даже если указана одна «Россия».
 */
.voffer__param--geo .voffer__param-value {
  white-space: normal;
  height: calc(var(--size-small) * 1.45 * 2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.voffer__params li:last-child,
.foffer__params li:last-child {
  border-bottom: none;
}

.voffer__params span,
.foffer__params span {
  color: var(--color-text-light);
  flex-shrink: 0;
}

/*
 * Требования — до трёх строк, высота закреплена: у одних вакансий
 * два условия, у других пять, и без этого карточки разъезжались.
 */
.voffer__req {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-small);
  font-size: var(--size-small);
  line-height: 1.45;
  height: calc(var(--size-small) * 1.45 * 3 + 20px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voffer__req span {
  color: var(--color-text-light);
}

.voffer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.voffer__cta {
  display: inline-block;
  padding: 11px 24px;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}

.voffer__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/*
 * Пометка «реклама». Обязательна по закону о рекламе, но не должна
 * перетягивать внимание — поэтому мелко и приглушённо.
 */
.voffer__ad {
  font-size: 12px;
  color: var(--color-text-light);
}

/* ---------- Карточка финансового оффера ---------- */

.foffer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
  min-width: 0; /* см. пояснение у .voffer */
}

/*
 * При наведении карточка слегка приподнимается.
 *
 * На изученных витринах карточки статичны, и в плотной сетке трудно понять,
 * какая из них сейчас под курсором. Сдвиг на два пикселя решает это, не мешая
 * читать: перемещение отключается для тех, кто просил уменьшить движение.
 */
.foffer:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .foffer:hover {
    transform: none;
  }
}

.foffer__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.foffer__logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.foffer__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.foffer__naming {
  min-width: 0;
}

/* Название продукта — две строки всегда, чтобы карточки не разъезжались */
.foffer__title {
  margin: 0 0 3px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-text);
  height: calc(17px * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.foffer__org {
  font-size: var(--size-small);
  color: var(--color-text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Лицензия ЦБ — вместо рейтинга и отзывов, которых у нас нет */
.foffer__license {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-light);
}

/*
 * Главный параметр вынесен вперёд и набран крупно: в каждой категории
 * выбирают по своему — по ставке, по кешбэку, по льготному периоду.
 * У агрегаторов всё набрано одним кеглем, и глазу не за что зацепиться.
 */
.foffer__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-soft);
}

/*
 * Подпись стоит над числом, а не рядом с ним.
 *
 * Рядом она сливалась с самим значением в одну строку, и взгляд не понимал,
 * где заканчивается «22%» и начинается «Ставка». Сверху мелким — читается
 * как заголовок, и число остаётся единственным крупным элементом карточки.
 */
.foffer__lead-label {
  order: -1;
  font-size: var(--size-tiny);
  line-height: 1.5;
  color: var(--color-text-light);
  /* Одна строка: «Платёж в месяц» в узкой колонке переносился на две */
  height: calc(var(--size-tiny) * 1.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foffer__lead-value {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  /* Зелёный логотипа, углублённый до читаемого: одна краска на все числа */
  color: var(--color-number);
  letter-spacing: -.02em;
  /* Высота задана явно: у пустого значения кегль меньше, а место то же */
  height: 31px;
  display: flex;
  align-items: baseline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Незаполненное значение — тише остальных, но на своём месте */
.foffer__lead-value--empty {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-light);
}

.foffer__param-value--empty {
  color: var(--color-border-strong);
}

/* ---------- Плашки особенностей ---------- */

/*
 * Высота блока закреплена: у одних офферов плашек две, у других ни одной,
 * и без этого карточки в ряду снова разъезжались.
 */
.foffer__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  height: 24px;
  overflow: hidden;
}

.foffer__feature {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--color-bg-soft);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/*
 * Высота подвала закреплена под кнопку.
 *
 * У оффера без ссылки кнопки нет, и карточка оказывалась на 23 пикселя ниже
 * соседних. Пустое место честнее, чем кнопка, ведущая в никуда.
 */
.foffer__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  min-height: 49px;
}

.foffer__cta {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 12px 18px;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--size-small);
  font-weight: 700;
  /* Одна строка: перенос подписи менял высоту карточки */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease;
}

.foffer__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.foffer__compare {
  font-size: var(--size-small);
  color: var(--color-text-light);
  border-bottom: 1px dashed var(--color-border-strong);
  white-space: nowrap;
}

.foffer__compare.is-active {
  color: var(--color-accent-ink);
  border-bottom-color: var(--color-accent-ink);
}

/*
 * Пометка рекламы — под кнопкой, где читатель смотрит перед нажатием.
 * У агрегаторов её прячут в угол мелким шрифтом; здесь она на виду.
 *
 * Дата проверки условий и предупреждение о последствиях банкротства убраны
 * 17.08.2026 вместе со своими стилями — см. DECISIONS.md.
 */
.foffer__note {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  /*
   * Кегль 12 вместо 11 — этап 54. Междустрочный подобран так, чтобы ряд
   * остался в 17 пикселей: 12 × 1,4 = 16,8. Высота ряда держит высоту
   * карточки 499, а её сверяют слепком при каждой правке витрины.
   */
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-light);
  /* Высота под одну строку: пометка есть не у всех, а карточки одинаковы */
  height: 17px;
  overflow: hidden;
}

.foffer__ad {
  font-size: 12px;
  color: var(--color-text-light);
}

/*
 * Ссылка на инструкцию по оформлению.
 *
 * Стоит после пометки рекламы и ничего не двигает: карточки без инструкции
 * выглядят ровно как раньше. Перенос запрещён на уровне ряда, поэтому при
 * узкой карточке ссылка обрежется целиком, а не растянет строку и не изменит
 * высоту карточки.
 */
/*
 * Пустой раздел обзора — 07.09. Раздел с термином, но без предложений
 * выводится с этой строкой, а не прячется: правило владельца от 05.09,
 * пустой блок показывается с заглушкой. Сроков не обещаем — их нам
 * никто не давал.
 */
.showcase-group__empty {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: var(--size-small);
}

/* ---------- Пусто и сброс ---------- */

.showcase__empty {
  padding: 28px 24px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  text-align: center;
}

.showcase__empty p {
  margin: 0 0 10px;
}

.showcase__reset {
  display: inline-block;
  margin-top: 6px;
  color: var(--color-accent-ink);
  font-weight: 700;
}

/*
 * Смена города — рядом со счётчиком найденного и в пустом состоянии.
 * Тише «Сбросить фильтры»: это не действие с выдачей, а возврат к первому
 * шагу, и перебивать им главную ссылку блока не нужно.
 */
.showcase__change {
  color: var(--color-accent-ink);
  font-size: var(--size-small);
}

.showcase__empty .showcase__change {
  display: inline-block;
  margin-left: 12px;
}

/*
 * Мелкие цели витрины на телефоне — этап 55.
 *
 * Было: «Сменить город» 103,2×24,8, «Сравнить» 64,8×25,8, «Очистить
 * сравнение» 159,7×26,4 — все три вдвое ниже нормы, и все три означают
 * действие, а не пояснение.
 *
 * Ширину не трогаем: она задаётся длиной подписи, и растягивать ссылку
 * во всю строку значило бы делать из неё кнопку, которой она не является.
 */
@media (max-width: 640px) {
  .showcase__change,
  .foffer__compare,
  .showcase__reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Таблица сравнения ---------- */

.compare {
  margin: 0 0 26px;
  padding: 20px 22px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.compare__title {
  margin: 0 0 14px;
  font-size: 19px;
}

/* Таблица шире экрана прокручивается внутри себя, а не растягивает страницу */
.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.compare__table th,
.compare__table td {
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--size-small);
}

.compare__table thead th {
  background: var(--color-bg);
  vertical-align: top;
}

.compare__table thead th small {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: var(--size-tiny);
}

.compare__table tbody th {
  color: var(--color-text-light);
  font-weight: 600;
  width: 25%;
}

/* ---------- Офферы внутри статьи ---------- */

/*
 * Блок офферов: внутри текста и под статьёй.
 *
 * Ширина ограничена по колонке текста. Внутри статьи ограничение ни на что
 * не влияет — там колонка и так уже; а блоку под текстом оно нужно: без него
 * он выходил за правый край текста на 48 пикселей и стоял криво.
 */
.inline-offers {
  position: relative;
  max-width: 760px;
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
}

/* Вакансии — зелёным: читателю видно, что это другой тип предложения */
.inline-offers--vacancy {
  background: var(--color-bg-success);
  border-color: var(--color-border-success);
}

.inline-offers__title {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--color-text);
}

.inline-offers__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-offer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-bg);
  border-radius: var(--radius-small);
}

.inline-offer__logo {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inline-offer__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.inline-offer__body {
  flex: 1;
  min-width: 0;
}

.inline-offer__name {
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.inline-offer__org {
  font-size: var(--size-small);
  color: var(--color-text-light);
  margin-top: 2px;
}

.inline-offer__params {
  font-size: var(--size-small);
  color: var(--color-number);
  font-weight: 600;
  margin-top: 4px;
}

.inline-offer__cta {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: var(--size-small);
  white-space: nowrap;
}

.inline-offer__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.inline-offers__ad {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-light);
  text-align: right;
}

/*
 * Постраничная навигация витрин. Плагин выводит её с классом `pgn`,
 * оставшимся от прежней темы: менять его в плагине нельзя, поэтому
 * оформление повторяет общую навигацию сайта.
 */
/*
 * «Показать ещё» — 15.09.
 *
 * Постраничной навигации у витрин больше нет, и правила `.pgn*` ушли
 * вместе с ней: номера страниц, стрелки и подпись «Страница 1 из 4».
 *
 * Кнопка стоит под списком по центру и набрана спокойно: это не призыв
 * к действию, а продолжение списка. Поэтому обводка, а не заливка
 * краской — краска на витрине означает переход к рекламодателю.
 */
.fmore__row {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}

.fmore__btn {
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: none;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--size-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}

.fmore__btn:hover,
.fmore__btn:focus-visible {
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
}

/*
 * Спрятанная карточка убирается из потока целиком: `display: none`
 * не даёт сетке оставить под неё место и не запускает отложенную
 * загрузку картинки.
 *
 * Селектор длинный намеренно. Каждый из пяти наборов карточек задаёт
 * своей карточке способ показа — `.of-card` объявлена гибким блоком,
 * `.fc-card` тоже, — и короткое правило с ними спорит на равных весах.
 * Побеждает то, что записано ниже по файлам, а порядок подключения
 * стилей меняться не должен ради одной строки.
 */
.fmore .js-cards > .fmore__hidden {
  display: none;
}

/* ---------- Адаптив ---------- */

@media (max-width: 600px) {
  .showcase__list {
    grid-template-columns: 1fr;
  }

  .showcase__filter {
    flex: 1 1 100%;
  }

  .showcase__submit {
    align-self: stretch;
  }
}

@media (max-width: 560px) {
  .inline-offer {
    flex-wrap: wrap;
  }

  .inline-offer__cta {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Текст раздела витрины ---------- */

/*
 * Стоит под карточками: раздел — посадочная страница под запрос, но пришли
 * на неё за условиями. Ширина ограничена, как у статьи: витрина идёт сеткой
 * на всю ширину, а текст в строку на 1160 пикселей читать тяжело.
 */
/*
 * Текст раздела под сеткой.
 *
 * Ширина не ограничивается — по той же причине, что и у вводного текста
 * над сеткой: край блока обязан совпадать с краем сетки и меню.
 * Тексты пишутся на этапах 11 и 12 и должны иметь структуру:
 * подзаголовки, абзацы, списки — сплошное полотно во всю ширину
 * не читается.
 */
.showcase-text {
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--color-border);
}

.showcase-text > *:first-child {
  margin-top: 0;
}

.showcase-text > *:last-child {
  margin-bottom: 0;
}

.showcase-text p {
  margin: 0 0 16px;
}

.showcase-text h2 {
  margin: 28px 0 12px;
  font-family: var(--font-head);
  font-size: 28px;
}

@media (max-width: 1023px) {
  .showcase-text h2 { font-size: 22px; }
}

.showcase-text h3 {
  margin: 22px 0 10px;
  font-family: var(--font-head);
  font-size: 19px;
}

.showcase-text ul,
.showcase-text ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.showcase-text li {
  margin: 0 0 8px;
}


/* ---------- Разделы каталога — ячейки мозаики ---------- */

/*
 * С 05.09 разделы каталога набраны теми же ячейками, что мозаика разделов
 * на главной. Правила выше писались под прежнюю строку плашек с боковой
 * прокруткой на телефоне; они остаются для совместимости, но здесь
 * перебиваются: сетка та же, что на главной, — две колонки на телефоне
 * и четыре на десктопе.
 *
 * Цена решения: одиннадцать разделов в сетке занимают на телефоне шесть
 * рядов вместо одной прокручиваемой строки. Так решил владелец —
 * одинаковый вид важнее высоты.
 */
.showcase__sections.fc-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex-wrap: initial;
  overflow: visible;
  gap: 8px;
  margin-inline: 0;
  padding-inline: 0;
  margin-bottom: 18px;
}

@media (min-width: 1024px) {
  .showcase__sections.fc-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 374px) {
  .showcase__sections.fc-mosaic {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Ввод города на посадочной «Работы» ---------- */

/*
 * С 05.09 вместо плиток городов — поле с подсказкой. Плитки были ровно
 * на шесть городов: у кого город в списке, тому одно нажатие, остальным
 * выбора не было вовсе.
 *
 * Подсказка нативная, через `datalist`, поэтому своей разметки выпадающего
 * списка здесь нет и стилизовать нечего: браузер рисует её сам.
 */
.citypick__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.citypick__label {
  flex: 0 0 100%;
  margin-bottom: 2px;
  color: var(--color-text-muted);
  font-size: var(--size-small);
}

.citypick__input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--color-text);
  /* 16 обязательны: при меньшем кегле телефон масштабирует страницу */
  font-size: 16px;
  font-family: inherit;
}

.citypick__input:focus {
  border-color: var(--color-accent-ink);
  outline: none;
}

.citypick__submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

.citypick__submit:hover { background: var(--color-accent-hover); }
.citypick__submit:active { background: var(--color-accent-pressed); }

@media (max-width: 480px) {
  .citypick__input,
  .citypick__submit { flex: 1 1 100%; }
}
/*
 * Название в ячейке каталога может занять две строки: групп с длинными
 * именами хватает — «Услуги для бизнеса» в одну строку не помещалось
 * и обрезалось. На главной названия короткие и в одну строку влезают,
 * поэтому там правило `nowrap` остаётся.
 */
.showcase__sections .fc-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
/* Общая оговорка о рекламе — вместо пометки на каждой карточке */
.showcase__ad-note {
  margin: 18px 0 0;
  color: var(--color-text-light);
  font-size: var(--size-tiny);
  line-height: 1.5;
}

/* ---------- Первый экран «Работы» как воронка ---------- */

/*
 * Раздел заменяет собой лендинг с подбором вакансий, и первый экран
 * должен читаться с одного взгляда: где вы ищете работу — поле — кнопка.
 * До 06.09 под формой сразу шло 4 900 знаков текста, и понять,
 * что здесь делать, можно было только вчитавшись.
 */
.citypick {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--color-bg-soft);
}

.citypick__title {
  margin: 0 0 4px;
  line-height: 1.2;
}

.citypick__form {
  margin-top: 14px;
  margin-bottom: 10px;
}

.citypick__input {
  min-height: 52px;
  background: #fff;
}

.citypick__submit {
  min-height: 52px;
}

/* Три шага — короткая опора для глаза вместо абзацев */
.citypick__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.citypick__steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--size-small);
  line-height: 1.4;
}

.citypick__steps span {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .citypick { padding: 18px; }

  .citypick__steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Свёрнутый текст раздела на первом экране */
/*
 * Тот же свёрнутый блок используется на странице подбора займов:
 * заголовок, действие, а объяснения — внизу и по щелчку. Правила общие,
 * чтобы два места сайта не разъехались по виду.
 */
/* Отступ по шкале: было 28 — своё число, которого в шкале нет.
   Ближайшее значение 24, и на нём блок стоит там же на глаз. */
.rabota-more,
.quiz-more {
  margin-top: var(--s-24);
  border-top: 1px solid var(--color-border);
}

.rabota-more__head,
.quiz-more__head {
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-text);
}

.rabota-more__head::-webkit-details-marker,
.quiz-more__head::-webkit-details-marker { display: none; }

.rabota-more__head::after,
.quiz-more__head::after {
  content: " ↓";
  color: var(--color-text-muted);
}

.rabota-more[open] .rabota-more__head::after,
.quiz-more[open] .quiz-more__head::after { content: " ↑"; }

.rabota-more__body .showcase-text,
.rabota-more__body .faq {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* ---------- Сетка карточек в каталоге ---------- */

/*
 * Четыре в ряд на широком экране и две на телефоне — решение владельца
 * 06.09: карточки по три занимали слишком много места и наполовину
 * пустовали. Сама карточка та же, что на главной; здесь плотнее сетка.
 */
.showcase__list--finance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px) {
  .showcase__list--finance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

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

/*
 * Две в ряд на широком экране, одна на телефоне — пункт 3.5 указаний
 * владельца от 07.09. Прежде на широком экране ставили три: карточка была
 * узкой и состояла из названия, дохода и двух строк данных. Новая карточка
 * широкая — баннер, город, работодатель, доход крупно и ряд из двух
 * кнопок, — и третий столбец сжимал её так, что название переставало
 * помещаться в отведённые две строки.
 */
.showcase__list--vacancy,
.showcase__list:not(.showcase__list--finance) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (min-width: 768px) {
  .showcase__list--vacancy,
  .showcase__list:not(.showcase__list--finance) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }
}
/* ---------- Облако тегов ---------- */

/*
 * Полоса тегов над списком — этап 98.
 *
 * Показываются только теги, по которым в текущей выдаче что-то есть,
 * и рядом число. Ветка, ведущая в пустую выдачу, из облака убрана:
 * нажать и получить «ничего не найдено» — это ловушка, а не отбор.
 *
 * Выбранные стоят первыми и с крестиком: их снимают чаще, чем добавляют,
 * и искать их в общем ряду по подсветке — лишняя работа глазами.
 */
.showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

/*
 * На узком экране облако не переносится, а листается вбок — решение
 * владельца от 15.09.
 *
 * Замер до правки: у страхования 21 тег разворачивался в 16 рядов
 * высотой 632 точки, и первая карточка уезжала под экран. Теперь ряд
 * один, высота 32.
 *
 * Полосу прокрутки прячем: она крадёт восемь точек высоты и на телефоне
 * не нужна — палец и так тянет. Затухание у правого края показывает,
 * что список продолжается; без него обрезанный тег читается как брак.
 *
 * `scroll-padding` и липкие края не ставим: облако короткое, и доводка
 * до ближайшего тега мешала бы листать быстро.
 */
@media (max-width: 1023px) {

  .showcase__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Полю справа взяться неоткуда при прокрутке — держим отступом. */
    padding-right: 20px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }

  .showcase__tags::-webkit-scrollbar { display: none; }

  /* Тег не сжимается: при `nowrap` флекс иначе давит их до нечитаемого. */
  .showcase__tag { flex: 0 0 auto; }
}

.showcase__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--size-small);
  line-height: 1;
  text-decoration: none;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.showcase__tag:hover {
  border-color: var(--color-accent-ink);
  color: var(--color-text);
}

.showcase__tag-n {
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

/* Выбранный тег: заливка вместо обводки, крестик вместо числа. */
/*
 * Главный тег раздела — вид полиса в страховании.
 *
 * Выделен бледной заливкой акцента и акцентной рамкой. Сплошной акцент
 * не берём: им закрашен выбранный тег, и один цвет говорил бы о двух
 * разных состояниях. Насыщенность подписи поднята на ступень —
 * цвета одного бы не хватило тем, кто его не различает.
 */
.showcase__tag--primary {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  font-weight: 600;
}

.showcase__tag--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.showcase__tag.is-chosen {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}

.showcase__tag.is-chosen:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.showcase__tag-x {
  font-size: 16px;
  line-height: 1;
}

.showcase__tag:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 2px;
}

/* Сброс всего — тише, чем возврат на шаг назад: он нужен реже. */
.showcase__reset--all {
  color: var(--color-text-muted);
}