/* content.css — типографика контентных страниц хаба (#424, R-2.1).
 *
 * ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ДОПИСКОЙ В `site.css`. Хаб переиспользует всю базу лендинга —
 * токены, шрифт, `.container`, `.topbar`, `.btn`, `footer`, `.qa` — и добавляет только то, чего
 * на лендинге нет, потому что там нет статей: поток абзацев, байлайн, хлебные крошки, список
 * раздела, блок выходных данных. Дописка в `site.css` увезла бы эти правила ещё и во все шесть
 * лендингов, где они мёртвые.
 *
 * ⚠️ ЗАВИСИМОСТЬ, КОТОРУЮ НАДО ЗНАТЬ: файл подключается ПОСЛЕ `site.css` и опирается на его
 * переменные (`--sp-*`, `--measure`, `--muted`, `--line`, `--accent`, `--on-dark-soft`). Один
 * без другого не работает — оба стоят в шаблоне рядом, порядок значим.
 *
 * `p { margin: 0 }` в `site.css` — не оплошность, а решение лендинга (там каждый абзац стоит в
 * своей сетке). Для статьи это означает, что вертикальный ритм задаётся ЗДЕСЬ и только внутри
 * `.article-body`/`.hub-intro`, чтобы не задеть лендинг, если файл когда-нибудь подключат вместе.
 */

.content-page main { padding-block: clamp(2rem, 6vw, 4rem) var(--section); }

/* ---------- хлебные крошки ---------- */
.crumbs { margin-bottom: var(--sp-6); font-size: 0.9375rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--line); }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--text); }

/* ---------- заголовок и байлайн ---------- */
.content-page h1 { max-width: var(--measure); }
.byline {
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

/* ---------- поток статьи ---------- */
.article-body, .hub-intro { max-width: var(--measure); margin-top: var(--sp-8); }
.article-body > p, .hub-intro > p { margin-top: var(--sp-5); }
.article-body > p:first-child, .hub-intro > p:first-child { margin-top: 0; }
.article-body > h2 { margin-top: clamp(2.25rem, 5vw, 3.25rem); font-size: clamp(1.4rem, 2.2vw + 0.6rem, 1.9rem); }
.article-body > h3 { margin-top: var(--sp-8); }
.article-body ul, .article-body ol { margin: var(--sp-5) 0 0; padding-left: 1.35em; }
.article-body li + li { margin-top: var(--sp-2); }
.article-body a { color: var(--accent); text-underline-offset: 3px; }
.article-body .lead { font-size: 1.1875rem; line-height: 1.55; color: var(--text); }
/* Широкая таблица не имеет права растягивать страницу — прокручивается сама. */
.article-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }

/* ---------- ссылка на скачиваемый бланк (#425, R-2.2) ---------- */
/* Артефактная страница отдаёт файл, и он обязан читаться как действие, а не как ссылка внутри
   абзаца: по замеренной выдаче (`R-1.5_SERP_LOG` §3, запрос 2) на этот запрос приходят ЗА
   БЛАНКОМ, а не за текстом. Это не `.btn`: главная кнопка страницы одна — CTA в стор, и две
   одинаковые кнопки спорили бы за один клик. Поэтому обводка, а не заливка. */
.article-body .download { margin-top: var(--sp-6); }
.article-body .download a {
  display: inline-block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}
.article-body .download a:hover { background: var(--accent); color: var(--bg); }
/* Клавиатурный фокус НЕ наследуется от `:hover` — без этого правила ссылка-кнопка была бы
   единственным элементом страницы, у которого фокус виден слабее, чем наведение. */
.article-body .download a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- видимый Q&A (из него же строится FAQPage) ---------- */
/* ⚠️ `padding-block: 0` — не косметика, а СНЯТИЕ ЧУЖОГО ПРАВИЛА. В `site.css` стоит
   `section { padding-block: var(--section) }` (на лендинге каждая секция — экран), и мой
   `<section class="faq">` молча унаследовал ~160 px сверху и снизу: на собранной странице между
   текстом и «Preguntas frecuentes» зиял провал. Видно только глазами — ни один ассерт вёрстку
   не меряет, поймано на скриншоте приёмки. */
.article-body .faq { display: block; margin-top: clamp(2.5rem, 6vw, 4rem); padding-block: 0; }
/* Заголовок FAQ вставляет ШАБЛОН, поэтому он не попадает под `.article-body > h2` (там прямой
   потомок) и рендерился глобальным размером — КРУПНЕЕ собственных H2 статьи. Находка ревью-гейта. */
.article-body .faq > h2 {
  margin-bottom: var(--sp-4);
  font-size: clamp(1.4rem, 2.2vw + 0.6rem, 1.9rem);
}

/* ---------- список статей на странице раздела ---------- */
/* `h2 { margin: 0 }` из site.css прижимал заголовок списка вплотную к интро — на скриншоте
   «Articles» стоял на абзаце. Отступ задаётся здесь, чтобы не трогать лендинг. */
.content-page main > .container > h2 { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.hub-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-width: var(--measure); }
.hub-list li + li { margin-top: var(--sp-4); }
.hub-list a {
  display: block; padding: var(--sp-5); border: 1px solid var(--line);
  border-radius: var(--r-card); text-decoration: none; color: inherit;
}
.hub-list a:hover { border-color: var(--accent); }
.hub-list strong { display: block; font-size: 1.125rem; }
.hub-list span { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: 0.9375rem; }

.content-page .cta-block { margin-top: clamp(2.5rem, 6vw, 4rem); max-width: var(--measure); }

/* ---------- подвал: выходные данные ---------- */
/* Мелко и приглушённо, но НЕ мельче 0.8125rem: это выходные данные, к ним нормы предъявляют
   «leicht erkennbar» — нечитаемый шрифт спорил бы с самим смыслом блока. */
.content-foot .imprint { margin-top: var(--sp-6); font-size: 0.8125rem; line-height: 1.6; color: var(--on-dark-soft); }
.content-foot .imprint p + p { margin-top: var(--sp-2); }
.content-foot .foot-links { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-5); }