/* KLIOSO — blog.css
   Стили блога поверх существующей дизайн-системы (style.css).
   Используются токены из :root, поэтому тёмная тема работает автоматически.
   Проза статьи наследует .legal-doc; FAQ переиспользует .faq-* классы. */

/* ── Обёртка страницы ─────────────────────────────────────────────────── */
.blog-wrap { padding:120px 0 96px; }
@media (max-width:768px){ .blog-wrap { padding:96px 0 64px; } }

.blog-article { max-width:760px; margin:0 auto; }

/* ── Хлебные крошки ───────────────────────────────────────────────────── */
.blog-breadcrumbs {
  max-width:760px; margin:0 auto 20px; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-size:13px; color:var(--muted);
}
.blog-breadcrumbs a { color:var(--muted); text-decoration:none; }
.blog-breadcrumbs a:hover { color:var(--coral); }
.blog-breadcrumbs span { color:var(--border-strong); }

/* ── Шапка статьи ─────────────────────────────────────────────────────── */
.blog-article-head { margin-bottom:24px; }
.blog-eyebrow {
  font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--muted);
  text-transform:none; margin-bottom:14px;
}
.blog-eyebrow time { color:var(--muted); }
.blog-article h1 {
  font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:-0.03em;
  line-height:1.12; color:var(--black); margin:0 0 16px;
}
.blog-lead { font-size:18px; line-height:1.6; color:var(--text); margin:0; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.blog-hero { margin:28px 0 8px; }
.blog-hero img {
  width:100%; height:auto; display:block; border-radius:var(--r);
  border:1px solid var(--border); background:var(--bg-subtle);
}

/* ── Оглавление (TOC) ─────────────────────────────────────────────────── */
.blog-toc {
  margin:28px 0; border:1px solid var(--border); border-radius:var(--rs);
  background:var(--bg-subtle); padding:6px 18px;
}
.blog-toc summary {
  cursor:pointer; font-size:13px; font-weight:700; letter-spacing:-0.01em;
  color:var(--black); padding:12px 0; list-style:none;
}
.blog-toc summary::-webkit-details-marker { display:none; }
.blog-toc summary::after { content:'▾'; float:right; color:var(--muted); transition:transform 0.2s var(--ease); }
.blog-toc details[open] summary::after { transform:rotate(180deg); }
.blog-toc ul { list-style:none; padding:0 0 14px; margin:0; }
.blog-toc li { margin:0; }
.blog-toc a {
  display:block; padding:7px 0; font-size:14px; color:var(--muted);
  text-decoration:none; border-top:1px solid var(--border);
}
.blog-toc a:hover { color:var(--coral); }

/* ── Тело статьи ──────────────────────────────────────────────────────── */
.blog-body { max-width:none; }           /* .legal-doc задаёт 720px; здесь колонка уже ограничена .blog-article */
.blog-body h2 {
  font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-0.02em;
  color:var(--black); margin:38px 0 12px; scroll-margin-top:96px;
}
.blog-body p, .blog-body li { font-size:16px; line-height:1.7; }
.blog-body h3 { margin-top:28px; }
.blog-body blockquote {
  margin:20px 0; padding:14px 20px; border-left:3px solid var(--coral);
  background:var(--bg-subtle); border-radius:var(--rs);
}
.blog-body blockquote p { margin:0; color:var(--text); font-style:italic; }

/* ── Inline CTA ───────────────────────────────────────────────────────── */
.blog-cta-inline {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; margin:32px 0; padding:24px; border-radius:var(--r);
  background:var(--coral-soft); border:1px solid var(--coral-mid);
}
.blog-cta-inline-body { flex:1 1 260px; }
.blog-cta-inline-title { font-size:16px; font-weight:800; color:var(--black); margin:0 0 4px; letter-spacing:-0.01em; }
.blog-cta-inline-text { font-size:14px; color:var(--text); line-height:1.6; margin:0; }
/* .legal-doc a перекрашивает ВСЕ ссылки внутри тела в коралловый — кнопке
   возвращаем её собственный цвет (иначе коралловый текст на коралловом фоне). */
.blog-body a.btn-coral { color:#fff; }
.blog-body a.btn-coral:hover { color:var(--black); }

/* ── FAQ (переиспользует .faq-* из style.css) ─────────────────────────── */
/* Без JS ответы видны (требование ТЗ). JS добавляет .js и включает аккордеон. */
.blog-faq { max-width:760px; margin:44px auto 0; border-top:1px solid var(--border); }
.blog-faq h2 {
  font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-0.02em;
  color:var(--black); margin:28px 0 8px;
}
.blog-faq .faq-item { border-bottom:1px solid var(--border); }
.blog-faq .faq-q { padding:20px 4px; font-size:16px; color:var(--black); }
.blog-faq .faq-q:hover { background:transparent; color:var(--coral); }
.blog-faq .faq-answer { max-height:none; overflow:visible; }
.blog-faq .faq-a { padding:0 4px 20px; font-size:15px; line-height:1.7; }
/* Режим с JS: сворачиваем */
.blog-faq.js .faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease); }
.blog-faq.js .faq-item.open .faq-answer { max-height:600px; }

/* ── Финальная CTA-карточка ───────────────────────────────────────────── */
.blog-final-cta {
  max-width:760px; margin:48px auto 0; text-align:center; padding:40px 28px;
  border-radius:var(--r); background:var(--bg-subtle); border:1px solid var(--border);
}
.blog-final-cta h2 { font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-0.02em; color:var(--black); margin:0 0 10px; }
.blog-final-cta p { font-size:15px; color:var(--muted); line-height:1.65; margin:0 auto 22px; max-width:460px; }

.blog-back { max-width:760px; margin:32px auto 0; }
.blog-back a { color:var(--coral); font-weight:700; text-decoration:none; font-size:14px; }

/* ── Кнопка «Наверх» ──────────────────────────────────────────────────── */
.blog-totop {
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--coral); color:#fff; border:none; cursor:pointer;
  opacity:0; transform:translateY(10px) scale(0.9); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:60;
}
.blog-totop.show { opacity:1; transform:none; pointer-events:auto; }
/* Лёгкий подъём только на устройствах с настоящим ховером — без смены цвета,
   чтобы кнопка не «залипала» в другом состоянии после клика/тапа. */
@media (hover:hover){ .blog-totop:hover { transform:translateY(-2px); } }
.blog-totop:focus-visible { outline:2px solid var(--coral); outline-offset:3px; }
@media (max-width:768px){ .blog-totop { right:14px; bottom:14px; width:44px; height:44px; } }

/* ── Похожие статьи (низ статьи) ───────────────────────────────────────── */
.blog-related { max-width:760px; margin:48px auto 0; border-top:1px solid var(--border); padding-top:32px; }
.blog-related h2 { font-size:clamp(20px,3vw,24px); font-weight:800; letter-spacing:-0.02em; color:var(--black); margin:0 0 18px; }
.blog-related .blog-card-grid { max-width:none; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

/* ── Индекс /blog ─────────────────────────────────────────────────────── */
.blog-index-head { max-width:760px; margin:0 auto 36px; }
.blog-index-head h1 { font-size:clamp(30px,5vw,44px); font-weight:800; letter-spacing:-0.03em; color:var(--black); margin:0 0 12px; }
.blog-index-head p { font-size:17px; color:var(--muted); margin:0; }

.blog-card-grid {
  max-width:960px; margin:0 auto; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.blog-card {
  display:flex; flex-direction:column; gap:8px; padding:24px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--bg);
  text-decoration:none; transition:border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.blog-card:hover { border-color:var(--coral); transform:translateY(-2px); }
.blog-card-cat { font-size:12px; font-weight:700; color:var(--coral); letter-spacing:0.02em; }
.blog-card-title { font-size:19px; font-weight:800; letter-spacing:-0.02em; color:var(--black); line-height:1.25; }
.blog-card-excerpt { font-size:14px; color:var(--muted); line-height:1.6; }