/*
 * blocks.css - компоненты nodepositcasinospin.click поверх заготовки (layout.php подключает
 * файл по наличию, после pages.css). Дизайн-язык - DESIGN.md и _разбор/дизайн-направление.md.
 * Правила: mobile-first, брейкпоинты 480/768/1024/1280 только min-width; ни одного
 * literal-цвета - только токены tokens.css и скина spin-ice (skins.css); скругления по
 * трём ролям: контейнер 14px (--r-card), действие и поле 10px (--r-act), перечисление -
 * пилюля. Промокод - единственный коралл (--promo), действие - бирюза (--brand).
 * 22.09.2026 (шаг 4, верстальщик): таблицы фактов (.compare) с карточным режимом ниже 768,
 * тизер-карточка хаба, шапка обзора с баннером в правой колонке, призыв .cta-box, шапка
 * статьи в две колонки с 1024, цели касания 44px у кнопок и полей.
 */

html[data-skin="spin-ice"] {
  --r-card: 14px;
  --r-act:  10px;
  /* Кольцо фокуса ВИДИМОЕ: сплошная бирюза бренда (5.3:1 на --bg, 8.2:1 в тёмной) плюс
   * отбивка цветом поверхности, чтобы кольцо не сливалось с рамкой самого элемента.
   * До 23.09.2026 здесь стояла заливка --brand-soft (10% альфы, 1.15:1): правило
   * `outline: none` рядом гасило обводку заготовки, и фокус с клавиатуры пропадал
   * совсем (критик дизайна, P1). */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}

/* ---- каталог-герой: H1, короткий лид, панель подбора, сразу карточки ----
 * Форма героя grid-of-elements: витрина и есть первый экран (принцип живого сайта
 * «товар выше слов»). Никакой иллюстрации, никаких двух колонок. */
.catalog-hero { padding-block: var(--s-6) var(--s-4); }
.catalog-hero h1 { font-size: clamp(1.75rem, 6.2vw, 2.75rem); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--s-3); }
.catalog-hero__lede { font-size: calc(var(--t-body) * 1.08); color: var(--text-dim); margin: 0 0 var(--s-5); }

/* ---- шапка страницы (хабы, обзоры, статьи): H1 и лид без панели подбора ---- */
.page-head { padding-block: var(--s-6) var(--s-2); }
.page-head h1 { font-size: clamp(1.75rem, 6.2vw, 2.75rem); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--s-3); }
.page-head .lede { margin: 0 0 var(--s-4); }

/* Заголовок витрины между панелью и сеткой: ритм прозы base.css (48px сверху) ему не нужен. */
.grid-head, main section .grid-head { margin-block: 0 var(--s-4); font-size: var(--t-h3); }

/* ---- панель подбора (form.filter-bar.bonus-filters) ---- */
/* На 360 два числовых селекта стоят в одну строку, счётчик и «Сбросить» - в одну: панель
 * короче на два ряда, первая карточка ближе к первому экрану (DESIGN.md: «число видно
 * раньше слова»). Поле поиска и страна - во всю ширину. */
.bonus-filters {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-card); margin-block: 0 var(--s-4);
}
.bonus-filters__field--q, .bonus-filters__field--geo { grid-column: 1 / -1; }
.bonus-filters__reset { grid-column: 2; justify-self: end; }
.bonus-filters__field { display: grid; gap: var(--s-1); font-size: var(--t-small); color: var(--text-mute); font-weight: var(--fw-medium); min-width: 0; }
.bonus-filters__field input,
.bonus-filters__field select {
  width: 100%; min-height: 44px; padding: 0 var(--s-3); font: inherit; font-size: var(--t-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--r-act);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
/* Плейсхолдер - --text-mute (6.1 на --bg): --text-faint давал 3.61, ниже 4.5 (критик дизайна, P1). */
.bonus-filters__field input::placeholder { color: var(--text-mute); }
.bonus-filters__field input:focus-visible,
.bonus-filters__field select:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
/* Поле лежит на --bg внутри белой панели: отбивка кольца - цветом поля, не панели. */
.bonus-filters__field input:focus-visible,
.bonus-filters__field select:focus-visible { --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
/* Счётчик и подсказка - одна строка панели: подсказка объясняет, что панель делает, и
 * висит рядом со счётчиком, а не в тексте страницы (23.09.2026). */
.bonus-filters__status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.bonus-filters__count {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-small); color: var(--brand);
  font-weight: var(--fw-semi); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bonus-filters__hint { margin: 0; font-size: var(--t-tiny); color: var(--text-mute); line-height: var(--lh-snug); }
.bonus-filters__reset { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-small); border-radius: var(--r-act); }
/* Кнопка сброса - только когда есть что сбрасывать (класс ставит часть 2 app.js): пустая
 * форма не тратит на неё ряд панели. Без скрипта класса нет, и кнопка видна всегда. */
.bonus-filters:not(.is-dirty) .bonus-filters__reset { display: none; }
/* ---- свёрнутые второстепенные поля панели (details[data-filter-extra]) ----
 * Поиск и счётчик видны всегда, размер / вейджер / страна - под строкой «Ещё условия»:
 * панель на 360 короче на ~190px, и первая карточка попадает в первый экран (критик
 * дизайна 23.09.2026). Строка - цель касания 44px, маркер свой (треугольник UA в разных
 * браузерах разный), кольцо фокуса общее. */
.bonus-filters__more { grid-column: 1 / -1; }
.bonus-filters__summary {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px;
  font-size: var(--t-small); font-weight: var(--fw-semi); color: var(--brand);
  cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
}
.bonus-filters__summary::-webkit-details-marker { display: none; }
.bonus-filters__summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-bottom: 3px;
  transition: transform var(--dur-quick) var(--ease);
}
.bonus-filters__more[open] > .bonus-filters__summary::before { transform: rotate(-135deg); margin-bottom: -3px; }
.bonus-filters__summary:focus-visible { outline: none; border-radius: var(--r-act); box-shadow: var(--focus-ring); }
.bonus-filters__more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); padding-top: var(--s-3); }
.bonus-filters__more-grid .bonus-filters__field--geo { grid-column: 1 / -1; }
.filter-empty { padding: var(--s-5); text-align: center; background: var(--surface-2); border-radius: var(--r-card); margin-block: var(--s-4); }

/* ---- сетка карточек ---- */
.bonus-grid { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.bonus-grid > li[hidden] { display: none; }

/* ---- карточка бонуса: белая плитка, картинка сверху, пять строк, кнопка ----
 * Без надзаголовка над H3 (craft-floor: eyebrow - запрет). Строки - dl без рамок на каждой (taste 9.F); значения выровнены по правому краю,
 * ключи гаснут в --text-mute, чтобы читались значения, а не подписи. */
.bonus-card {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: visible;
  background: var(--surface); border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .bonus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
}
.bonus-card__media { border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; background: var(--surface-2); aspect-ratio: 700 / 250; }
.bonus-card__media a { display: block; }
.bonus-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bonus-card__head { padding: var(--s-4) var(--s-4) 0; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); }
.bonus-card__title, main section .bonus-card__title { font-family: var(--font-display); font-size: 1.2rem; line-height: var(--lh-snug); margin: 0; }
/* Заголовок карточки - ссылка в обзор, и это видно БЕЗ наведения (критик дизайна P1,
 * 23.09.2026: бирюза только на hover, с телефона наведения нет вовсе, и путь в обзор
 * читался как обычный текст). Подчёркивание приглушённое, цвет чернил остаётся - карточка
 * не превращается в лес синих ссылок; на hover линия и текст набирают цвет бренда. */
.bonus-card__title a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease), text-decoration-color var(--dur-quick) var(--ease);
}
.bonus-card__title a:hover { color: var(--brand); text-decoration-color: var(--brand); }
/* Баннер - вторая цель той же ссылки: рамка бренда при наведении говорит, что он нажимаем. */
@media (hover: hover) {
  .bonus-card:hover .bonus-card__media { box-shadow: inset 0 0 0 2px var(--brand); }
}
.bonus-card__tag {
  flex: 0 0 auto; display: inline-flex; align-items: center; margin-top: 2px;
  padding: 4px 10px; font-size: var(--t-tiny); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-brand); background: var(--brand); border-radius: var(--r-pill);
}
.bonus-card__rows { margin: var(--s-3) 0 0; padding: 0 var(--s-4); display: grid; gap: 0; }
.bonus-card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; min-height: 40px; }
.bonus-card__row + .bonus-card__row { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.bonus-card__row dt { margin: 0; font-size: var(--t-small); color: var(--text-mute); flex: 0 0 auto; }
.bonus-card__row dd { margin: 0; text-align: right; font-weight: var(--fw-semi); color: var(--text); min-width: 0; }
.bonus-card__row--size dd { font-family: var(--font-display); font-size: 1.15rem; color: var(--brand); font-weight: var(--fw-bold); }
.bonus-card__row--wager dd { font-family: var(--font-mono); font-size: 1.05rem; color: var(--brand-2); }
.bonus-card__row--promo dd { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.bonus-card__row--geo { align-items: flex-start; position: relative; }
.bonus-card__row--geo dd { flex: 1 1 auto; }
.bonus-card__foot { padding: var(--s-4); margin-top: auto; }
.bonus-card__cta { border-radius: var(--r-act); }

/* ---- кнопки в теле страницы не выпирают за своё место ----
 * Подписи кнопок собираются из фактов и из текста писателя и бывают длиннее экрана
 («Забрать 100 фриспинов в Beer Casino» - 377px при ширине 360). Примитив .btn
 * (base.css заготовки) несёт white-space: nowrap, и такая кнопка распирала grid-родителя
 * (.cta-box, .review-hero__actions), а следом весь документ: приёмка намерила
 * горизонтальную прокрутку на девяти страницах (отказ «прокрутка» 23.09.2026).
 * Внутри main кнопка переносится по словам и не шире своего места; высота цели касания
 * держится min-height примитива, в шапке и подвале правило не действует. */
main .btn { white-space: normal; max-width: 100%; line-height: var(--lh-snug); padding-block: var(--s-2); text-align: center; }
main .btn, main .promo-copy { overflow-wrap: anywhere; }

/* Тизер хаба обзоров: те же плитка и строки, вместо кода и кнопки - ссылка в обзор
 * (иначе один список на двух адресах). Цель касания - вся строка ссылки, 44px. */
.bonus-card__more {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3); font-size: var(--t-small); font-weight: var(--fw-semi);
  color: var(--brand); text-decoration: none; background: var(--brand-soft); border-radius: var(--r-act);
  transition: background var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.bonus-card__more svg { flex: 0 0 auto; transition: transform var(--dur-quick) var(--ease); }
.bonus-card__more:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); text-decoration: none; }
.bonus-card__more:hover svg { transform: translateX(3px); }
.bonus-card__more:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- промокод: одна форма на сайт (карточка, обзор, паспорт, таблица) ----
 * Вся кнопка - цель касания (min 44), код - моно, состояние «скопировано» - бирюза. */
.promo-copy {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3); max-width: 100%;
  font-family: var(--font-mono); font-size: var(--t-small); font-weight: var(--fw-bold); letter-spacing: .06em;
  color: var(--promo); background: var(--promo-soft); border: 1px solid var(--promo-line); border-radius: var(--r-act);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.promo-copy__code { font: inherit; color: inherit; background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-copy__icon { flex: 0 0 auto; opacity: .85; transition: transform var(--dur-quick) var(--ease), opacity var(--dur-quick) var(--ease); }
.promo-copy:hover { border-color: var(--promo); }
.promo-copy:hover .promo-copy__icon { opacity: 1; transform: scale(1.06); }
.promo-copy:active { transform: translateY(1px); }
.promo-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }
.promo-copy.is-copied { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
.promo-copy--lg { min-height: 52px; padding: 0 var(--s-5); font-size: var(--t-body); letter-spacing: .08em; }
.promo-copy--inline, .promo-copy--table { min-height: 44px; padding: 0 var(--s-3); }
.promo-copy--none { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-mute); font-size: var(--t-small); }

/* ---- панель промокода в тексте (aside.promo-panel) ----
 * Код слева, что он даёт - справа, кнопка снизу: до 24.09.2026 промокод стоял одинокой
 * строкой под заголовком, и правая половина строки пустовала (замечание владельца).
 * Коралл остаётся только на самом коде: подложка панели - поверхность, не promo-soft. */
.promo-panel {
  display: grid; gap: var(--s-4); margin-block: var(--s-5);
  padding: var(--s-4); background: var(--surface); border: var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.promo-panel__code { display: grid; gap: var(--s-2); justify-items: start; align-content: start; }
.promo-panel__label { font-size: var(--t-tiny); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.promo-panel__btn { width: 100%; justify-content: space-between; }
.promo-panel__hint { font-size: var(--t-tiny); color: var(--text-mute); }
.promo-panel__facts { margin: 0; display: grid; gap: 0; align-content: start; }
.promo-panel__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; min-height: 36px; }
.promo-panel__row + .promo-panel__row { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.promo-panel__row dt { margin: 0; font-size: var(--t-small); color: var(--text-mute); }
.promo-panel__row dd { margin: 0; font-weight: var(--fw-semi); color: var(--text); text-align: right; overflow-wrap: anywhere; }
.promo-panel__note { margin: 0; font-size: var(--t-small); color: var(--text-dim); }
.promo-panel__actions { display: flex; }
.promo-panel__cta { width: 100%; border-radius: var(--r-act); }

/* ---- страны: три пилюли и «+N» с поповером ---- */
/* .geo без position: поповер позиционируется от строки карточки (.bonus-card__row--geo) и
 * занимает её ширину - пилюли стран ложатся в несколько колонок, а не столбиком в 150px. */
.geo { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  font-size: var(--t-tiny); font-weight: var(--fw-semi); color: var(--brand-2);
  background: var(--brand-soft); border-radius: var(--r-pill); white-space: nowrap;
}
.chip--more {
  position: relative; cursor: pointer; border: 0; font: inherit; font-size: var(--t-tiny); font-weight: var(--fw-bold);
  color: var(--on-brand); background: var(--grad-brand); min-width: 40px; justify-content: center;
}
/* Цель касания 44px без роста самой пилюли: невидимое поле вокруг кнопки. */
.chip--more::before { content: ""; position: absolute; inset: -8px; }
.chip--more:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chip--more[aria-expanded="true"] { background: var(--brand-2); }
.geo__pop {
  position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: var(--z-popover);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-act);
  box-shadow: var(--shadow-pop); padding: var(--s-3) var(--s-4); text-align: left;
}
.geo__pop[hidden] { display: none; }
.geo__pop-title { margin: 0 0 var(--s-2); font-size: var(--t-tiny); font-weight: var(--fw-bold); color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }
.geo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.geo__list li { font-size: var(--t-tiny); color: var(--text-dim); padding: 3px 8px; background: var(--bg-2); border-radius: var(--r-pill); }

/* ---- обзор: первый экран ----
 * Плитки фактов - dl: подпись в dt, значение в dd; на экране значение выше подписи (order),
 * читалка идёт по DOM «подпись: значение». Справа (с 1024) баннер бонуса и промокод. */
.review-hero { padding-block: var(--s-4) var(--s-6); display: grid; gap: var(--s-5); }
.review-hero__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.fact-tile {
  display: grid; gap: 2px; padding: var(--s-4); min-width: 0; background: var(--surface); border: var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.fact-tile__v { order: 1; margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Текстовое значение плитки рвать посреди слова нельзя: anywhere из правила выше давал
 * «Десятикратна / я сумма бонуса» на 360 (осмотр 24.09.2026). Числа и коды выше рвутся
 * по-прежнему - там это нужно, слово там одно длинное (Д-18). */
.fact-tile__v--text { font-size: 1.05rem; line-height: var(--lh-snug); color: var(--text); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.fact-tile__k { order: 2; margin: 0; font-size: var(--t-small); color: var(--text-mute); }
.review-hero__lede { margin: 0; }
.review-hero__aside { display: grid; gap: var(--s-3); min-width: 0; }
.review-hero__media { border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); aspect-ratio: 700 / 250; }
.review-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-hero__promo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--surface-2); border-radius: var(--r-card);
}
.review-hero__promo-k { font-size: var(--t-small); color: var(--text-mute); font-weight: var(--fw-medium); }
.review-hero__actions { display: flex; flex-direction: column; gap: var(--s-3); }
.review-hero__actions .btn { border-radius: var(--r-act); }

/* ---- паспорт бонуса (table.passport в .table-scroll) ---- */
.passport { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.passport caption, .compare caption {
  text-align: left; padding: var(--s-3) var(--s-4) var(--s-2);
  font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-small);
  color: var(--text-dim); line-height: var(--lh-snug);
}
.passport th, .passport td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; }
.passport th { width: 40%; font-weight: var(--fw-medium); color: var(--text-mute); font-size: var(--t-small); background: var(--surface-2); }
.passport td { color: var(--text); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.passport tr + tr th, .passport tr + tr td { border-top: 1px solid var(--rule); }
/* На 360 паспорт тоже раскладывается парами: ключ строкой сверху, значение под ним во всю
 * ширину. В два столбца длинные значения («2 000 ₽; СБП: 2 000 ₽; P2P...») ломались по два
 * слова в строку и занимали шесть строк (осмотр 24.09.2026). С 768 возвращается таблица. */
.passport, .passport tbody, .passport tr, .passport th, .passport td { display: block; }
.passport caption { display: block; }
.passport tr { padding: var(--s-3) var(--s-4); }
.passport tr + tr { border-top: 1px solid var(--rule); }
.passport th, .passport td { width: auto; padding: 0; background: none; border: 0; }
.passport tr + tr th, .passport tr + tr td { border-top: 0; }
.passport th { margin-bottom: var(--s-1); }
.passport td { font-size: var(--t-body); }

/* ---- другие бонусы казино (dl.facts-list) ---- */
.facts-list { margin: var(--s-4) 0; display: grid; gap: var(--s-3); }
.facts-list__row { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--hairline); border-radius: var(--r-act); min-width: 0; }
.facts-list dt { font-size: var(--t-small); color: var(--text-mute); }
.facts-list dd { margin: 0; font-weight: var(--fw-semi); color: var(--text); overflow-wrap: anywhere; }

/* ---- шаги «как получить» (ol.steps) ---- */
.steps { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: step; }
.steps > li { position: relative; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 44px); background: var(--surface); border: var(--hairline); border-radius: var(--r-card); counter-increment: step; min-width: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: var(--s-4); top: var(--s-4); width: 32px; height: 32px;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--t-small);
  color: var(--on-brand); background: var(--brand); border-radius: var(--r-act);
}
.steps > li > :first-child { margin-top: 0; }
.steps > li > :last-child { margin-bottom: 0; }
.steps h3 { font-size: var(--t-h4); margin: 0 0 var(--s-1); }
main section .steps h3 { margin-block: 0 var(--s-1); }

/* ---- призыв в теле (aside.cta-box) ---- */
.cta-box {
  display: grid; gap: var(--s-3); padding: var(--s-5); margin-block: var(--s-6); min-width: 0;
  background: var(--surface); border: 1px solid var(--brand); border-radius: var(--r-card); box-shadow: var(--shadow-glow);
}
.cta-box > * { min-width: 0; }
.cta-box p { margin: 0; color: var(--text-dim); }
.cta-box__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--text); }
.cta-box h2, .cta-box h3 { margin: 0; font-size: var(--t-h3); }
.cta-box__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-box .btn { border-radius: var(--r-act); }

/* ---- блог: карточки статей (ul.post-grid > li.post-card) ---- */
.post-grid { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.post-card { display: flex; flex-direction: column; padding: 0; background: var(--surface); border: var(--hairline); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) { .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); } }
.post-card__media { aspect-ratio: 16 / 9; background: var(--surface-2); }
.post-card__media a { display: block; height: 100%; }
.post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--s-4); display: grid; gap: var(--s-2); }
/* Ритм прозы base.css (main section h3 { margin-block }) на заголовки карточек не распространяется. */
.post-card__title, main section .post-card__title { font-family: var(--font-display); font-size: 1.15rem; line-height: var(--lh-snug); margin: 0; }
.post-card__title a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease), text-decoration-color var(--dur-quick) var(--ease);
}
.post-card__title a:hover { color: var(--brand); text-decoration-color: var(--brand); }
.post-card__excerpt { margin: 0; color: var(--text-dim); font-size: var(--t-small); }
.post-card__more { font-size: var(--t-small); font-weight: var(--fw-semi); color: var(--brand); }

/* ---- статья: шапка под H1 - лид и иллюстрация ---- */
.post-hero { padding-block: var(--s-2) var(--s-5); display: grid; gap: var(--s-4); }
.post-hero__lede { margin: 0; }
.post-hero__figure,
.prose-figure { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); }
.post-hero__figure img,
.prose-figure img { display: block; width: 100%; height: auto; }
.post-hero__figure figcaption,
.prose-figure figcaption { padding: var(--s-2) var(--s-4); font-size: var(--t-tiny); color: var(--text-mute); }

/* ---- встроенная иллюстрация в прозе (figure.prose-figure) ----
 * Вид тот же, что у фигуры шапки статьи, но имя своё (она стоит не в герое) и отступы свои:
 * картинку можно ставить в любом месте раздела. До 23.09.2026 зазор до следующего заголовка
 * держался только правилом main section h2:first-child в base.css, и у картинки в КОНЦЕ
 * раздела он был 0px (замер дизайнера) - приходилось ставить её первым ребёнком перед H2.
 * Временный селектор со старым именем снят 23.09.2026, когда контент переименовали. */
.prose-figure { margin-block: var(--s-5) var(--s-6); }

/* ---- хаб: список разделов (ul.hub-list) ---- */
.hub-list { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.hub-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--hairline); border-radius: var(--r-card); color: var(--text); font-weight: var(--fw-semi); text-decoration: none; transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease); }
.hub-list a svg { flex: 0 0 auto; color: var(--brand); transition: transform var(--dur-quick) var(--ease); }
.hub-list a:hover { border-color: var(--brand); color: var(--brand); }
.hub-list a:hover svg { transform: translateX(3px); }
.hub-list__n { font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-mute); }

/* ---- таблицы фактов (table.compare в .table-scroll) ----
 * Вид (24.09.2026, замечание владельца «добавить современности в таблицы»): шапка тише
 * строк и держится при прокрутке, у строк своя подсветка под курсором и фокусом, главный
 * столбец (казино) не уезжает вбок и набран плотнее прочих, числа - табличными цифрами.
 * Базовый слой (360) у .compare--stack - карточки: строка становится плиткой с рамкой и
 * подписями из data-label; с 768 - обычная таблица со скроллом в рельсе .table-scroll. */
.table-scroll { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
/* Пока таблица показана карточками, рамка и фон принадлежат карточкам, а не рельсе:
 * иначе рамка в рамке, а подпись читается как заголовок чужой коробки. С 768 рельса
 * возвращает свой вид - там внутри настоящая таблица. */
.table-scroll--cards { border: 0; border-radius: 0; overflow: visible; }
/* Длинная таблица (от двенадцати строк) прокручивается внутри своей рельсы: шапка столбцов
 * остаётся на виду, страница не растягивается на пятьдесят три строки. Высота - доля экрана,
 * не пиксели: на телефоне рельса не съедает весь экран. */
/* Своя высота - только с 768: на телефоне таблица уже показана карточками, и вложенная
 * прокрутка там мешает пальцу (правило ниже, в блоке 768). */
.table-scroll--cards > .compare > caption { padding-inline: 0; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-small); }
.compare caption { text-align: left; }
.compare th, .compare td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; }
.compare thead th {
  /* Липкость шапки работает ТОЛЬКО внутри рельсы со своей высотой (.table-scroll--tall):
   * .table-scroll с overflow-x: auto - сам контейнер прокрутки, и sticky в нём считается
   * от него, а не от окна. Без высоты шапка просто уезжала вверх вместе со страницей -
   * то есть липкости не было, хотя в CSS она стояла (осмотр 24.09.2026). */
  position: sticky; top: 0; z-index: var(--z-base);
  background: var(--surface-2); color: var(--text-mute);
  font-size: var(--t-tiny); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 1px solid var(--rule-strong);
}
.compare tbody th { font-weight: var(--fw-semi); color: var(--text); }
.compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--rule); }
.compare tbody tr:nth-child(even) th, .compare tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
@media (hover: hover) {
  .compare tbody tr:hover th, .compare tbody tr:hover td { background: var(--brand-soft); }
}
.compare tbody tr:focus-within th, .compare tbody tr:focus-within td { background: var(--brand-soft); }
.compare td.num, .compare th.num { font-family: var(--font-mono); white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.compare td.cell-long { overflow-wrap: anywhere; }
.compare a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-semi); }
.compare tbody tr[hidden] { display: none; }

.compare--stack, .compare--stack tbody, .compare--stack tr, .compare--stack th, .compare--stack td { display: block; }
/* Подпись при block-таблице остаётся table-caption и сжимается в столбик по ширине слова
 * (замер 24.09.2026 на 360) - возвращаем её в поток блоком. */
.compare--stack caption { display: block; }
.compare--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Строка на узком экране - настоящая карточка: своя подложка, рамка и радиус, а не полоса
 * между волосяными линиями (замечание владельца о виде таблиц). */
.compare--stack tbody tr {
  padding: var(--s-3) var(--s-4) var(--s-4); margin-bottom: var(--s-3);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.compare--stack tbody tr:last-child { margin-bottom: 0; }
.compare--stack tbody tr:nth-child(even) th, .compare--stack tbody tr:nth-child(even) td { background: none; }
.compare--stack tbody tr + tr { border-top: var(--hairline); }
.compare--stack tbody th, .compare--stack tbody td { padding: 0; border: 0; }
.compare--stack tbody tr + tr th, .compare--stack tbody tr + tr td { border-top: 0; }
.compare--stack tbody th { font-family: var(--font-display); font-size: 1.1rem; line-height: var(--lh-snug); margin-bottom: var(--s-2); }
.compare--stack tbody th a { display: flex; min-height: 44px; align-items: center; color: var(--text); text-decoration: none; }
.compare--stack tbody th a:hover { color: var(--brand); }
.compare--stack tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 40px; padding-block: var(--s-1); }
.compare--stack tbody td + td { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.compare--stack tbody td::before { content: attr(data-label); flex: 0 0 auto; font-family: var(--font-body); font-size: var(--t-small); font-weight: var(--fw-medium); color: var(--text-mute); white-space: nowrap; }
.compare--stack tbody td.num { text-align: right; white-space: normal; font-weight: var(--fw-semi); }
.compare--stack tbody td.cell-long { display: grid; gap: var(--s-1); justify-content: stretch; }
.compare--stack tbody td.cell-promo { justify-content: space-between; }
.compare--stack tbody td.cell-promo .promo-copy { max-width: 62%; }
.compare--stack tbody td.is-empty { display: none; }

/* НАДПИСЬ «НЕ УКАЗАН» НА МЕСТЕ ФАКТА, КОТОРОГО НЕТ (24.09.2026). Приглушена до --text-mute
 * (контраст 6,08 на --bg и 7,31 в тёмной - планку держит), чтобы не читаться как значение
 * условия: это признание незнания, а не цифра. Обычным весом, без курсива: курсив на
 * кириллице мелким кеглем читается хуже, чем прямое начертание. */
/* Селекторы перечислены с родителем: у dd карточки и панели свой цвет и вес (0,1,1), и
 * один класс им проигрывал - надпись выходила такой же жирной, как настоящее значение. */
.cell-unknown,
.promo-panel__row dd.cell-unknown,
.bonus-card__row dd.cell-unknown,
.passport td .cell-unknown,
.compare tbody td .cell-unknown {
  color: var(--text-mute); font-weight: var(--fw-body); font-variant-numeric: normal;
}
.compare tbody .cell-unknown, .passport .cell-unknown { white-space: nowrap; }

/* Указатель «слот -> казино» - две колонки, обычная таблица на любой ширине; казино -
 * пилюли-ссылки (цель касания 36px в перечислении, а не запятые между строчными ссылками). */
.compare--index { min-width: 0; }
.compare--index th[scope="row"] a { min-height: 36px; }
.link-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.link-chips a, .link-chips span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3);
  font-size: var(--t-small); font-weight: var(--fw-semi); color: var(--brand-2);
  background: var(--brand-soft); border-radius: var(--r-pill); text-decoration: none; white-space: nowrap;
}
.link-chips a:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }

/* ---- на 360 ничего не шире экрана ---- */
.bonus-card, .post-card, .fact-tile, .cta-box { min-width: 0; }

/* ======================================================================
 * ЧЕМ ЛОМАТЬ СТЕНУ ТЕКСТА (24.09.2026, blocks/proza.php)
 * Формы для писателя: заголовок со знаком, врезка, две колонки сравнения,
 * шаги, цитата-выноска, «коротко о главном», ряд «картинка + текст».
 * Знаки - инлайновый SVG на currentColor: без шрифтов иконок и файлов.
 * ====================================================================== */

/* ---- заголовок со знаком ---- */
/* Знак выровнен по ПЕРВОЙ строке заголовка, а не по центру блока: на трёхстрочном
 * заголовке центрированный знак повисал в воздухе сбоку (замер 24.09.2026 на 360). */
.heading--icon { display: flex; align-items: flex-start; gap: var(--s-3); }
.heading__icon { flex: 0 0 auto; width: 28px; height: 28px; margin-top: .12em; color: var(--brand); }
main section h2.heading--icon > span, main section h3.heading--icon > span { min-width: 0; }

/* ---- врезка-плашка ---- */
.callout-box {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  align-items: start; margin-block: var(--s-5); padding: var(--s-4);
  background: var(--surface); border: var(--hairline); border-left: 3px solid var(--brand);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.callout-box__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-act); background: var(--brand-soft); color: var(--brand); }
.callout-box__icon { width: 20px; height: 20px; }
.callout-box__body > :first-child { margin-top: 0; }
.callout-box__body > :last-child { margin-bottom: 0; }
.callout-box__title { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text); }
.callout-box p { color: var(--text-dim); }
.callout-box--warn { border-left-color: var(--warning); }
.callout-box--warn .callout-box__mark { background: var(--warning-soft); color: var(--warning); }
.callout-box--ok { border-left-color: var(--success); }
.callout-box--ok .callout-box__mark { background: var(--success-soft); color: var(--success); }
.callout-box--tip { border-left-color: var(--brand-2); }
.callout-box--tip .callout-box__mark { background: var(--brand-soft); color: var(--brand-2); }

/* ---- две колонки сравнения ---- */
.split-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-block: var(--s-5); }
.split-lists__col { padding: var(--s-4); background: var(--surface); border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-card); min-width: 0; }
.split-lists__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text); }
.split-lists__icon { width: 22px; height: 22px; flex: 0 0 auto; }
.split-lists__col--yes .split-lists__icon { color: var(--success); }
.split-lists__col--no .split-lists__icon { color: var(--danger); }
.split-lists__items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.split-lists__items li { position: relative; padding-left: var(--s-4); color: var(--text-dim); }
.split-lists__items li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); }
.split-lists__col--yes .split-lists__items li::before { background: var(--success); }
.split-lists__col--no .split-lists__items li::before { background: var(--danger); }

/* ---- цитата-выноска ---- */
.pull-quote {
  margin-block: var(--s-6); padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--brand); background: var(--bg-2); border-radius: var(--r-card);
}
.pull-quote p { margin: 0; font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--text); }
.pull-quote footer { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-mute); }

/* ---- коротко о главном (без ярлыка-коробки) ---- */
.key-points { list-style: none; margin: var(--s-5) 0; padding: var(--s-4); display: grid; gap: var(--s-3); background: var(--bg-2); border-radius: var(--r-card); }
.key-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; color: var(--text); }
.key-points__icon { width: 20px; height: 20px; margin-top: 2px; color: var(--brand); }

/* ---- ряд «картинка + текст» ---- */
.media-row { display: grid; gap: var(--s-4); margin-block: var(--s-5); }
.media-row__figure { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); }
.media-row__figure img { display: block; width: 100%; height: auto; }
.media-row__figure figcaption { padding: var(--s-2) var(--s-4); font-size: var(--t-tiny); color: var(--text-mute); }
.media-row__body > :first-child { margin-top: 0; }
.media-row__body > :last-child { margin-bottom: 0; }
.media-row--text { display: block; }

/* ---- брейкпоинты ---- */
@media (min-width: 480px) {
  .bonus-filters--short { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .bonus-filters--short .bonus-filters__field--q { grid-column: auto; }
  .bonus-filters--short   .bonus-filters--short .bonus-filters__reset { grid-column: 2; }
  .review-hero__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 768px) {
  .split-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-row { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; column-gap: var(--s-6); }
  .media-row--right .media-row__figure { order: 2; }
  .media-row--right { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  /* Код слева, условия справа: пустоты по правую сторону нет (замечание владельца). */
  .promo-panel { grid-template-columns: minmax(200px, 360px) minmax(0, 1fr); align-items: start; column-gap: var(--s-6); }
  .promo-panel__facts { grid-column: 2; grid-row: 1 / span 2; }
  .promo-panel__note { grid-column: 1 / -1; }
  .promo-panel__actions { grid-column: 1; }
  .promo-panel__cta { width: auto; }
  .catalog-hero { padding-block: var(--s-7) var(--s-5); }
  .page-head { padding-block: var(--s-7) var(--s-3); }
  /* Четыре плитки в ряд только с 768: на 480-767 плитка уже 110px и слово «ограничен» ломалось. */
  .review-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { gap: var(--s-4); }
  /* Паспорт возвращается в две колонки: места хватает. */
  .passport { display: table; }
  .passport tbody { display: table-row-group; }
  .passport tr { display: table-row; padding: 0; border-top: 0; }
  .passport th, .passport td { display: table-cell; padding: var(--s-3) var(--s-4); }
  .passport th { width: 40%; margin: 0; background: var(--surface-2); }
  .passport tr + tr th, .passport tr + tr td { border-top: 1px solid var(--rule); }
  .passport caption { display: table-caption; }
  .table-scroll--tall { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
  .table-scroll--cards { border: var(--hairline); border-radius: var(--r-md); overflow-x: auto; }
  .table-scroll--cards > .compare > caption { padding-inline: var(--s-4); }
  .compare { min-width: 560px; }
  .compare--index { min-width: 0; }
  .compare--index th[scope="row"] { white-space: nowrap; width: 1%; }
  /* Главный столбец (казино) держится у левого края при прокрутке рельсы: иначе на узком
   * ноутбуке уезжает имя, и числа читаются без хозяина. Фон обязателен - иначе строки
   * просвечивают под ним при скролле. */
  .compare tbody th[scope="row"], .compare thead th:first-child {
    position: sticky; left: 0; z-index: var(--z-base);
    background: var(--surface); box-shadow: 1px 0 0 var(--rule);
  }
  .compare thead th:first-child { background: var(--surface-2); z-index: calc(var(--z-base) + 1); }
  .compare tbody tr:nth-child(even) th[scope="row"] { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }

  /* Карточный режим снимается: возвращаем таблицу. */
  .compare--stack { display: table; }
  /* Подпись тоже возвращается в table-caption. Блочная подпись внутри таблицы становится
   * анонимной строкой, а <thead> по правилам таблицы рисуется первым - и подпись уезжала
   * ПОД шапку столбцов, читаясь как первая строка данных (осмотр 24.09.2026, 1280). */
  .compare--stack caption { display: table-caption; }
  .compare--stack thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .compare--stack tbody { display: table-row-group; }
  .compare--stack tr, .compare--stack tbody tr { display: table-row; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .compare--stack th, .compare--stack td, .compare--stack tbody th, .compare--stack tbody td { display: table-cell; padding: var(--s-3) var(--s-4); min-height: 0; }
  .compare--stack tbody tr + tr th, .compare--stack tbody tr + tr td { border-top: 1px solid var(--rule); }
  .compare--stack tbody td + td { border-top: 0; }
  .compare--stack tbody tr + tr td + td { border-top: 1px solid var(--rule); }
  .compare--stack tbody th { font-family: var(--font-body); font-size: var(--t-small); margin: 0; }
  .compare--stack tbody th a { display: inline-flex; color: var(--brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
  .compare--stack tbody td::before { content: none; }
  .compare--stack tbody td.num { text-align: left; white-space: nowrap; font-weight: var(--fw-body); }
  .compare--stack tbody td.cell-long { display: table-cell; }
  .compare--stack tbody td.cell-promo .promo-copy { max-width: 100%; }
}
@media (min-width: 1024px) {
  /* Условия встают в две пары в ряд: на широком экране одноколоночный список растягивался
   * на 600px, и между подписью и значением зияла пустота (осмотр 24.09.2026). */
  .promo-panel__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .promo-panel__row { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
  .promo-panel__row:nth-child(-n+2) { border-top: 0; }
  /* На 1024 места хватает всем полям: строку «Ещё условия» не показываем, блок полей
   * становится обычной колонкой формы и раскладывает свои три поля в три столбца.
   * Атрибут open ставит часть 2 app.js; правило ниже показывает поля и без скрипта. */
  .bonus-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) auto; align-items: end; }
  .bonus-filters__summary { display: none; }
  .bonus-filters__more { grid-column: auto; }
  .bonus-filters__more-grid,
  .bonus-filters__more:not([open]) > .bonus-filters__more-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0;
    content-visibility: visible;
  }
  /* Страна растягивалась на всю строку правилом мобильного слоя (оно специфичнее одного
   * класса) - на широком экране она обычная колонка. */
  .bonus-filters__more-grid .bonus-filters__field--geo { grid-column: auto; }
  .bonus-filters__field--q, .bonus-filters__field--geo { grid-column: auto; }
  .bonus-filters__status { grid-column: auto; flex-direction: column; align-items: flex-start; padding-bottom: 8px; }
  .bonus-filters__reset { grid-column: auto; }
  .bonus-filters--short { grid-template-columns: 2fr 1fr auto auto; }
  .bonus-filters--short .bonus-filters__reset { grid-column: auto; }
  .bonus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Обзор 7/5: плитки во всю ширину, слева лид и кнопки, справа баннер и код. */
  .review-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "facts facts" "lede aside" "actions aside"; align-items: start; column-gap: var(--s-6); }
  .review-hero__facts { grid-area: facts; }
  .review-hero__lede { grid-area: lede; }
  .review-hero__aside { grid-area: aside; }
  .review-hero__actions { grid-area: actions; align-self: start; }
  .post-hero--figure { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; column-gap: var(--s-6); }
}