/* Zaezzd — хаб кластера (T2). Подключается только на /shtrafy/.
   Всё, чего нет в main.css: верхний блок хаба, плитка подтем и мелкие правки сеток.
   Mobile-first, брейкпоинты 768 и 1200 (§14). */

/* ─── Внутренняя мобильная шапка: логотип уступает место крошке ───── */
/* ─── Верхний блок: описание кластера + закреплённый инструмент ───── */
.hub-top { display: grid; gap: 14px; }
.hub-top__lead { margin-top: 8px; }
.hub-tool__name { margin: 10px 0 6px; }
.hub-tool__note { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-bottom: 12px; }
.hub-tool__search { margin-bottom: 9px; }

@media (min-width: 768px) {
  .hub-top { grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
  .hub-top__text { grid-column: span 7; }
  .hub-tool { grid-column: span 5; }
  .hub-top__lead { margin-top: 12px; max-width: 600px; }
  .hub-tool__note { font-size: 14px; margin-bottom: 16px; }
  .hub-tool__search { margin-bottom: 12px; }
}
@media (min-width: 1200px) {
  .hub-top__text { grid-column: span 7; }
  .hub-tool { grid-column: 9 / span 4; }
}

/* ─── Частые запросы в первом экране ──────────────────────────────
   Слева под лидом оставалось полторы сотни пикселей пустоты — ровно до
   высоты карточки инструмента справа. Закрываем её не воздухом, а самыми
   частыми составами: человек, пришедший с одним вопросом, получает ответ
   не пролистывая. */
.hub-top__chips { margin-top: 14px; }
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ─── Составы раздела по темам ────────────────────────────────────
   Один блок вместо трёх пересказов справочника. Колонки — не ради
   красоты: двадцать одна строка в один столбец даёт простыню на два
   экрана, в три столбца весь раздел виден целиком. */
/* Колоночная раскладка, а не сетка: в сетке под короткой группой
   («Пешеходы» — один состав) оставалась дыра во всю высоту соседней
   («Скорость» — шесть). Колонки перетекают и выравниваются сами,
   break-inside держит группу целой. */
.fcols { column-gap: 24px; }
.fgroup { display: grid; gap: 6px; break-inside: avoid; margin-bottom: 22px; }
.fgroup__t {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 2px;
}
.fgroup__n { font-size: 11.5px; font-weight: 600; color: var(--ink-4); }
.fgroup .row-link { min-height: 46px; }
.fgroup .row-link b { white-space: nowrap; }

@media (min-width: 768px) { .fcols { columns: 2; } }
@media (min-width: 1200px) { .fcols { columns: 3; } }

/* ─── Плитка подтем: 2×2 на 360, 4 в ряд на десктопе ──────────────── */
/* Кандидат в main.css: та же плитка нужна хабам ДТП, ПДД и растаможки. */
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topic {
  display: block; min-height: 62px; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  color: inherit; text-decoration: none;
}
.topic:hover { border-color: var(--ink); color: inherit; text-decoration: none; }
.topic__n { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; margin-bottom: 3px; }
.topic__d { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .topics { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .topic { min-height: 104px; padding: 18px 20px; border-radius: 12px; }
  .topic__n { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
  .topic__d { font-size: 13.5px; }
}
@media (min-width: 1200px) { .topics { gap: 32px; } }

/* ─── Список «Спрашивают чаще всего» ──────────────────────────────── */
.rowlinks { display: grid; gap: 9px; }
.rowlinks .row-link > span { min-width: 0; }
@media (min-width: 768px) { .rowlinks { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (min-width: 1200px) { .rowlinks { gap: 16px; } }

/* ─── Разборы: два в ряд, а не три ────────────────────────────────── */
@media (min-width: 768px) { .posts--2 { grid-template-columns: 1fr 1fr; } }

/* ─── Рекламный слот A4: нативный формат 300×250 не растягиваем ───── */
@media (min-width: 768px) { .hub-ad { max-width: 336px; margin: 0 auto; } }

/* ─── FAQ: длинная строка неудобна для чтения ───────────────────────
   Ограничиваем не коробку, а текст внутри: иначе справа от аккордеона
   остаётся треть пустого экрана и блок читается как обрубленный. */
@media (min-width: 1200px) {
  .hub-faq .acc__body,
  .hub-faq summary { max-width: 860px; }
}

/* ─── Строка источника ────────────────────────────────────────────── */
.hub-src { max-width: 720px; }
.hub-src a { color: var(--ink-4); text-decoration: underline; }
.hub-src a:hover { color: var(--acc); }