/* Раздел статей. Подключается ПОСЛЕ kac-site.css и перебивает его там, где нужно.

   Оглавление и футер живут здесь, а не в общем листе, хотя правила у них те же,
   что на правовых страницах и на лендинге. Причина: там они лежат инлайном в
   каждой странице, и перенос в общий лист означал бы правку пяти чужих файлов
   ради этой работы. Стилей .toc в общем листе нет вовсе, поэтому правило цели
   нажатия для .toc a обязано стоять здесь, рядом с ними: тач-проход общего
   листа поднимает до 44 px всё остальное, а оглавление обходит стороной
   (см. tests/test_site_toc_touch_target.py). */

/* ===== Шапка ===== */
/* kac-site.css не прячет ссылки шапки на узком экране: на лендинге это делает
   его собственный инлайновый блок вместе с бургер-меню. Бургера здесь нет —
   значит, ссылки просто уходят, а бренд и кнопки остаются; навигация в этих
   ширинах остаётся в подвале.
   Порог тот же, что на лендинге (1100), и он не произвольный: замер в браузере дал
   схлопывание названия «Конъюнктура» в ноль уже на 1000 px — бренду негде
   ужаться рядом с четырьмя ссылками и двумя кнопками. На 1100 px помещается. */
@media (max-width: 1100px) { .nav-links { display: none; } }

/* ===== Заголовок ===== */
.blog-head { max-width: 920px; margin: 0 auto; padding: 44px 28px 0; }
.blog-head h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; margin-top: 16px; }
.blog-head .lead { font-size: 19px; color: var(--fg-muted); margin-top: 16px; line-height: 1.6; max-width: 620px; }
.crumbs { font-size: 13px; color: var(--fg-muted); font-family: var(--font-mono); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--fg); }
.blog-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; color: var(--fg-muted); font-family: var(--font-mono); }
.blog-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft-fg); background: var(--accent-tint); border: 1px solid var(--accent-soft); padding: 4px 10px; border-radius: 999px; }

/* ===== Раскладка статьи ===== */
.blog-main { max-width: 920px; margin: 0 auto; padding: 28px 28px 60px; display: grid; grid-template-columns: 222px 1fr; gap: 44px; align-items: start; }
.blog-body { max-width: 620px; }

/* ===== Оглавление =====
   Разметка: <nav class="toc-box"><details><summary>…</summary><div class="toc">.
   Внешний класс отличается от внутреннего намеренно — расширение toc даёт свой
   .toc, и один класс на обоих применял бы каждое правило дважды. */
.toc-box { position: sticky; top: 88px; font-size: 13px; }
.toc-box summary { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); margin-bottom: 12px; cursor: pointer; }
.toc-box summary:hover { color: var(--fg); }
.toc a { display: block; color: var(--fg-muted); padding: 5px 0; line-height: 1.4; transition: color .15s; border-left: 2px solid transparent; padding-left: 12px; margin-left: -12px; }
.toc a:hover { color: var(--fg); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { display: none; }               /* только h2: h3 раздули бы колонку */
@media (pointer: coarse) { .toc a { min-height: 44px; display: flex; align-items: center; } }
/* Сама подпись — тоже цель нажатия: на телефоне ею оглавление и открывают. */
@media (pointer: coarse) { .toc-box summary { min-height: 44px; display: flex; align-items: center; } }

/* На десктопе оглавление раскрыто всегда: <details> нужен только телефону, а
   держать две разные разметки — верный способ, чтобы они разъехались. Порог тот
   же, на котором колонка оглавления уезжает под текст. */
@media (min-width: 821px) {
  .toc-box details::details-content { content-visibility: visible; }
  .toc-box details:not([open]) > *:not(summary) { display: block; }
  .toc-box summary { list-style: none; }
  .toc-box summary::-webkit-details-marker { display: none; }
}

/* ===== Тело статьи ===== */
.blog-body h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 14px; scroll-margin-top: 88px; }
.blog-body h2:first-child { margin-top: 0; }
.blog-body h3 { font-size: 19px; font-weight: 600; margin: 28px 0 10px; scroll-margin-top: 88px; }
.blog-body p { font-size: 17px; color: var(--fg-2); margin: 0 0 14px; line-height: 1.68; }
.blog-body ul, .blog-body ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.blog-body li { font-size: 17px; color: var(--fg-2); line-height: 1.62; }
.blog-body strong { color: var(--fg); font-weight: 600; }
.blog-body a { color: var(--accent-soft-fg); text-decoration: underline; text-underline-offset: 2px; }
.blog-body blockquote { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--accent-soft); background: var(--accent-tint); border-radius: 0 var(--radius) var(--radius) 0; }
.blog-body blockquote p:last-child { margin-bottom: 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-soft); }
.blog-body code { font-family: var(--font-mono); font-size: 14px; background: var(--bg-3); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 6px; }
.blog-body pre { overflow-x: auto; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; }
.blog-body pre code { background: none; border: 0; padding: 0; }
.blog-body table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.blog-body th, .blog-body td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
.blog-body th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); font-weight: 600; }

/* ===== Подвал статьи ===== */
.blog-cta { max-width: 920px; margin: 0 auto; padding: 0 28px; }
.blog-cta .inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow-card); }
.blog-cta p { font-size: 15px; color: var(--fg-muted); max-width: 460px; }
.related { max-width: 920px; margin: 0 auto; padding: 46px 28px 80px; }
.related h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }

/* ===== Карточки ===== */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px 24px; transition: border-color .2s, transform .12s; }
.post-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.post-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.34; }
.post-card h3 a { color: var(--fg); }
.post-card p { font-size: 15px; color: var(--fg-muted); line-height: 1.55; }
.post-card .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-top: auto; }

/* ===== Страница списка ===== */
.blog-list { max-width: 1080px; margin: 0 auto; padding: 8px 28px 80px; }
.blog-list section { margin-top: 48px; }
.blog-list section:first-child { margin-top: 0; }
.blog-list .sec-tag { display: block; margin-bottom: 18px; }

/* ===== Футер ===== */
/* Копия правил из site/index.html: там они лежат инлайном и общему листу неизвестны. */
footer { border-top: 1px solid var(--border-soft); padding: 52px 0 calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--bg-2); }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand p { font-size: 15px; color: var(--fg-muted); margin-top: 16px; }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); font-weight: 600; margin: 0 0 14px; }
.foot-col a { display: block; font-size: 15px; color: var(--fg-muted); padding: 5px 0; transition: color .15s; }
.foot-col a:hover { color: var(--fg); }
/* Общий лист глушит нативную подсветку тапа у всех ссылок, поэтому отклик на
   палец надо вернуть руками — иначе тап по подвалу не даёт никакой реакции.
   На лендинге это правило есть, в общий лист его не вынесли. */
.foot-col a:active, .foot-bot a:active { opacity: .6; }
/* Тач-проход общего листа поднимает ссылки подвала до 44 px через inline-flex,
   но правило .foot-col a выше по каскаду возвращает display:block — высота
   остаётся, а центрирование пропадает, и текст липнет к верху коробки.
   Возвращаем ровно то, что задумано общим листом. */
@media (pointer: coarse) { .foot-col a { display: inline-flex; align-items: center; min-height: 44px; } }
.foot-bot { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--fg-muted); }

/* ===== Адаптив ===== */
@media (max-width: 1000px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .blog-main { grid-template-columns: 1fr; gap: 22px; }
  .toc-box { position: static; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; }
  .toc-box summary { margin-bottom: 0; }
  .toc-box details[open] summary { margin-bottom: 12px; }
  .toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .blog-body { max-width: none; }
}
@media (max-width: 680px) {
  .card-grid { grid-template-columns: 1fr; }
  /* Два CTA рядом с кнопкой темы не помещаются в 375 px: «Попробовать» наезжал
     на знак бренда, а название схлопывалось в ноль. У лендинга главный CTA в
     шапке не живёт вовсе — здесь на узком экране тоже остаётся только «Войти». */
  .nav-cta .btn-primary { display: none; }
  /* Оглавление — в одну колонку. Две достались от правовых страниц, где пункты
     короткие («1. Общие положения»), а заголовки статей — целые фразы: замер на
     375 px дал колонку в 163 px и по три-четыре строки на пункт. */
  .toc ul { grid-template-columns: 1fr; }
}