/*
 * Оформление текста материала.
 *
 * Ширина строки ограничена: на широком экране текст во всю колонку
 * читается тяжело — глаз теряет начало следующей строки.
 */

/* ---------- Шапка материала ---------- */

.entry__head {
  margin-bottom: 20px;
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: var(--size-tiny);
  color: var(--color-text-light);
}

.entry__author {
  font-weight: 600;
  color: var(--color-text-muted);
}

.entry__cover {
  margin-bottom: 28px;
}

.entry__cover img {
  width: 100%;
  border-radius: var(--radius);
}

/* ---------- Текст ---------- */

.entry-content {
  max-width: 760px;
  font-size: var(--size-base);
}

/*
 * Исключение для страниц витрин.
 *
 * Там текст стоит над сеткой карточек, и при 760 пикселях его правый край
 * не совпадал ни с сеткой, ни с меню: на окне 1280 разрыв доходил
 * до 400 пикселей, и страница выглядела перекошенной. Решение от 18.08:
 * совпадение краёв важнее длины строки.
 *
 * Ограничение для статей остаётся: их текст ничем не окружён, и строка
 * в 150 знаков там читалась бы плохо без всякой выгоды.
 *
 * Плата за это решение — вводные тексты разделов нельзя писать полотном:
 * им нужны подзаголовки, абзацы и списки. Записано в BACKLOG.md к этапам 11–12.
 */
.entry-content--wide {
  max-width: none;
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.entry-content li {
  margin-bottom: 8px;
}

.entry-content ul {
  list-style: none;
  padding-left: 0;
}

.entry-content ul li {
  position: relative;
  padding-left: 24px;
}

.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-ink);
}

.entry-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content img {
  border-radius: var(--radius-small);
  margin: 8px 0 20px;
}

.entry-content figure {
  margin: 0 0 22px;
}

.entry-content figcaption {
  margin-top: 8px;
  font-size: var(--size-tiny);
  color: var(--color-text-light);
}

/* ---------- Цитата ---------- */

.entry-content blockquote {
  margin: 0 0 22px;
  padding: 16px 22px;
  border-left: 3px solid var(--color-accent-ink);
  background: var(--color-bg-soft);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ---------- Таблицы ---------- */

/*
 * Таблица на узком экране не помещается. Оборачиваем её в прокручиваемую
 * область, иначе она растягивает страницу и ломает вёрстку целиком.
 */
.entry-content table {
  width: 100%;
  margin-bottom: 22px;
  border-collapse: collapse;
  font-size: var(--size-small);
}

.entry-content th,
.entry-content td {
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.entry-content th {
  background: var(--color-bg-soft);
  font-weight: 700;
}

.entry-content tbody tr:nth-child(even) {
  background: #fafafa;
}

.table-scroll {
  overflow-x: auto;
  margin-bottom: 22px;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  margin-bottom: 0;
  min-width: 520px;
}

/* ---------- Оглавление ---------- */

.toc {
  margin: 0 0 28px;
  padding: 18px 22px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.toc__title {
  font-weight: 700;
  margin-bottom: 12px;
}

.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc__list li {
  margin-bottom: 8px;
  padding-left: 26px;
  position: relative;
  font-size: var(--size-small);
  line-height: 1.45;
}

.toc__list li::before {
  counter-increment: toc;
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  color: var(--color-text-light);
}

.toc__list li a {
  color: var(--color-text);
}

.toc__list li a:hover,
.toc__list li a.is-current {
  color: var(--color-accent-ink);
}

/*
 * Пункт оглавления на телефоне — цель в 44 пикселя.
 *
 * Было 20 при промежутке 8: четырнадцать пунктов подряд, и каждый вдвое
 * ниже нормы. Растягиваем отступами самой ссылки, а не высотой строки, —
 * тогда номер пункта остаётся на одной линии с текстом; для этого он
 * сдвигается на ту же величину, что и отступ ссылки.
 *
 * Плата известна: блок оглавления вырастает примерно на треть. Сворачивать
 * его в одну строку, как панель фильтров на этапе 53, — отдельное решение,
 * оно меняет поведение, а не размер.
 */
@media (max-width: 640px) {
  .toc__list li a {
    display: block;
    padding: 12px 0;
  }

  .toc__list li::before {
    top: 12px;
  }

  /* Свёрнутое оглавление: подпись становится кнопкой со знаком раскрытия. */
  .toc__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
  }

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

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

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

/* Знак раскрытия браузера не нужен: на широком экране блок всегда раскрыт. */
.toc__title {
  list-style: none;
}

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

/* Вложенный уровень — с отступом и мельче */
.toc__list li.toc__item--h3 {
  padding-left: 44px;
  font-size: var(--size-tiny);
}

.toc__list li.toc__item--h3::before {
  left: 22px;
  content: "—";
}

/* ---------- Блоки шаблонов типов контента ---------- */

/* Оглавление внутри текста — у инструкций и подборок */
.entry-toc {
  max-width: 760px;
  margin-bottom: 28px;
}

.entry-after {
  max-width: 760px;
  margin-top: 32px;
}

/*
 * Оговорка в конце кейсов и витрин. Обязательна по смыслу, но не должна
 * читаться как основной текст — отсюда приглушённый тон и мелкий кегль.
 */
.entry-disclaimer {
  max-width: 760px;
  margin: 28px 0 0;
  padding: 14px 18px;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Дата актуальности подборки */
/* ---------- Выпуск рейтинга ---------- */

/* Дата актуального выпуска — тише заголовка, но на виду */
.rating-date {
  margin-bottom: 20px;
  font-size: var(--size-small);
  color: var(--color-text-muted);
}

/*
 * Плашка архивного выпуска. Цвет предупреждающий, а не декоративный:
 * человек, попавший на прошлогодний рейтинг из поиска, должен понять это
 * до того, как начнёт читать условия.
 */
.rating-archive {
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #fff8e5;
  border: 1px solid #f0d9a0;
  border-radius: var(--radius-small);
  font-size: var(--size-small);
  line-height: 1.5;
}

/*
 * Оговорка о круге отбора. Тот же вид, что у остальных оговорок, —
 * читатель узнаёт её по оформлению.
 */
.rating-basis {
  margin-top: 24px;
}

.list-note {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 14px;
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-small);
  font-size: var(--size-small);
  color: var(--color-text-muted);
}

/* Дата и источник новости */
.news-date {
  margin-bottom: 16px;
  font-size: var(--size-small);
  color: var(--color-text-light);
}

.news-source {
  max-width: 760px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: var(--size-small);
  color: var(--color-text-muted);
}

/* Заметно для редактора и не похоже на обычный текст */
.news-source--missing {
  color: var(--color-danger);
  font-weight: 600;
}

/* ---------- Блок перелинковки внутри текста ---------- */

.rel-inline {
  margin: 30px 0 10px;
  padding: 20px 24px;
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent-ink);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.rel-inline h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.rel-inline ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rel-inline li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 18px;
}

.rel-inline li:last-child {
  margin-bottom: 0;
}

/* Стрелка вместо точки: это переход, а не перечисление */
.rel-inline li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--color-accent-ink);
}

.rel-inline a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.rel-inline a:hover {
  color: var(--color-accent-ink);
  border-bottom-color: var(--color-accent-ink);
}

/* ---------- Переход в каталог ---------- */

.to-catalog {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-small);
}

.to-catalog p {
  margin: 0;
  line-height: 1.55;
}

.to-catalog a {
  color: var(--color-accent-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-accent);
  white-space: nowrap;
}

.to-catalog a:hover {
  border-bottom-color: var(--color-accent-ink);
}

/* ---------- Датированные блоки данных ---------- */

/*
 * Показатели с датой и источником: ключевая ставка, налоги, лимиты.
 * Значения обновляются автоматически, поэтому дата и источник — часть блока,
 * а не подпись под ним: читатель должен видеть, на какой момент цифра верна.
 */
.fdata-block {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.fdata-block--business {
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border-accent);
}

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

.fdata-block table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: none;
  font-size: var(--size-base);
}

.fdata-block table th,
.fdata-block table td {
  padding: 9px 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  text-align: left;
  vertical-align: top;
}

.fdata-block table th {
  width: 45%;
  font-weight: 600;
  color: var(--color-text-muted);
}

.fdata-block table td {
  font-weight: 700;
  color: var(--color-text);
}

.fdata-block table tr:last-child th,
.fdata-block table tr:last-child td {
  border-bottom: none;
}

.fdata-block table tbody tr:nth-child(even) {
  background: none;
}

.fdata-block__date,
.fdata-block__source,
.fdata-block__note {
  margin: 12px 0 0;
  font-size: var(--size-small);
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .fdata-block {
    padding: 16px 18px;
  }

  .fdata-block table th {
    width: 55%;
    font-size: var(--size-small);
  }
}

/* Заголовки статьи не должны прятаться под липкой шапкой при переходе по якорю */
.entry-content h2[id],
.entry-content h3[id] {
  scroll-margin-top: 88px;
}

@media (max-width: 782px) {
  .entry-content {
    max-width: none;
  }

  .entry-content th,
  .entry-content td {
    padding: 9px 11px;
  }
}

/* ---------- Карта сайта ---------- */

.sitemap__intro {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--color-text-muted);
}

.sitemap__section {
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--color-border);
}

/* Заголовок раздела карты — общий кегль блока: 28 и 22 */
.sitemap__title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 28px;
}

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

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

/*
 * Третья ступень рубрикатора: у «Инструкций» рубрики идут в три уровня.
 * Отступ показывает вложенность — без него подрубрика «Дебетовые карты»
 * читалась бы как соседняя «Банковским продуктам», а не как её часть.
 */
.sitemap__subtitle--deep {
  margin: 16px 0 8px 20px;
  font-size: 17px;
}

/* Список третьей ступени сдвигаем вместе с её заголовком, иначе материалы
   выстраиваются по общему краю и вложенность в них не читается */
.sitemap__subtitle--deep + .sitemap__posts {
  margin-left: 20px;
}

.sitemap__title a,
.sitemap__subtitle a {
  color: var(--color-text);
  text-decoration: none;
}

.sitemap__title a:hover,
.sitemap__subtitle a:hover {
  color: var(--color-accent-ink);
}

/* Счётчик материалов рядом с названием рубрики */
.sitemap__count {
  margin-left: 8px;
  font-family: var(--font-main);
  font-size: var(--size-tiny);
  font-weight: 400;
  color: var(--color-text-light);
}

.sitemap__links,
.sitemap__posts {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Три колонки на широком экране: 302 ссылки в один столбец — это восемь экранов */
  columns: 3;
  column-gap: var(--gap);
}

.sitemap__links li,
.sitemap__posts li {
  margin: 0 0 8px;
  /* Ссылка не должна разрываться между колонками */
  break-inside: avoid;
  font-size: var(--size-small);
  line-height: 1.45;
}

.sitemap__posts a {
  color: var(--color-text);
}

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

@media (max-width: 1024px) {
  .sitemap__links,
  .sitemap__posts {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .sitemap__links,
  .sitemap__posts {
    columns: 1;
  }

  .sitemap__title {
    font-size: 21px;
  }
}

/* ---------- Страница «Вопросы и ответы» ---------- */

/*
 * Оглавление ячейками — теми же, что в мозаике разделов: одна и та же
 * роль на сайте выглядит одинаково.
 */
.voprosy__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 36px;
}

.voprosy__navitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 120ms ease-out;
}

.voprosy__navitem:hover { background: var(--color-bg-hover); color: var(--color-text); }

.voprosy__navitem span {
  color: var(--color-text-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.voprosy__gruppa { margin-bottom: 40px; }

.voprosy__gruppa-title {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.2;
}

.voprosy__razdel { margin-bottom: 28px; }

.voprosy__razdel-title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 21px;
  line-height: 1.3;
}

.voprosy__razdel-title a { color: var(--color-text); }
.voprosy__razdel-title a:hover { color: var(--color-accent-ink); }

/* Внутри страницы у блока вопросов своей линии сверху нет — их тут много */
.voprosy__razdel .faq {
  margin: 0;
  padding: 0;
  border-top: 0;
}

@media (min-width: 1024px) {
  .voprosy__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .voprosy__navitem { min-height: 64px; padding: 0 16px; font-size: 16px; }
}

@media (max-width: 1023px) {
  .voprosy__gruppa-title { font-size: 22px; }
  .voprosy__razdel-title { font-size: 19px; }
}