/* Блог поверх styles.css: шапка/футер/кнопки/токены — общие с витриной.
   Здесь только контентная типографика списка и статьи. */

/* ---------- Индекс: герой + сетка карточек ---------- */
.blog-hero { padding: 56px 0 10px; }
.blog-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); max-width: 24ch; }
.blog-lead { max-width: 640px; margin-top: 10px; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.blog-list { padding: 30px 0 90px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-card, .blog-empty, .editorial-note, .article-next {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.blog-card { display: flex; flex-direction: column; padding: 24px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.blog-card:hover { transform: translateY(-2px); border-color: #C5D2E2; box-shadow: 0 10px 24px rgba(13,27,42,.08); }
.blog-card h2 { margin: 10px 0 10px; font-size: 1.18rem; line-height: 1.32; }
.blog-card h2 a { color: var(--ink); text-decoration: none; }
.blog-card h2 a:hover { color: var(--signal-dark); }
.blog-card p { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.blog-date, .blog-byline { color: var(--muted); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; }
.blog-read { margin-top: auto; padding-top: 16px; color: var(--signal-dark); font-weight: 700; font-size: .95rem; text-decoration: none; }
.blog-read::after { content: " →"; }
[dir="rtl"] .blog-read::after { content: " ←"; }
.blog-read:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-empty { padding: 30px; }
.blog-empty p { margin: 0 0 18px; color: var(--muted); }

/* ---------- Статья: узкая колонка чтения ---------- */
.article-container { max-width: 768px; }
.article-wide-container { max-width: 1120px; }
.blog-article-head { padding: 44px 0 26px; border-bottom: 1px solid var(--line); }
.article-crumb { margin-bottom: 16px; }
.article-crumb a {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--signal-dark); text-decoration: none;
}
.article-crumb a::before { content: "← "; }
[dir="rtl"] .article-crumb a::before { content: "→ "; }
.article-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-article-head h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; margin: 0 0 14px; }
.blog-article-head .blog-lead { font-size: 1.06rem; }
.blog-byline { margin-top: 18px; }

.article-hero-figure { margin: 0; padding: 28px 0 0; }
.article-hero-media { position: relative; }
.article-hero-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--line); border-radius: clamp(16px, 2.5vw, 28px);
  background: var(--paper); box-shadow: 0 18px 50px rgba(13,27,42,.08);
}
.article-hero-figure figcaption { max-width: 768px; margin: 10px auto 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

.article-prose { padding-top: 36px; padding-bottom: 90px; }
.article-prose section { padding: 10px 0 16px; }
.article-prose h2 { font-size: clamp(1.28rem, 2.4vw, 1.6rem); line-height: 1.25; margin: 0 0 12px; }
.article-prose p, .article-prose li { font-size: 1.03rem; line-height: 1.72; }
.article-prose p { margin: 0 0 14px; }
.article-prose ul, .article-prose ol { padding-inline-start: 22px; }
.article-prose li { margin: 7px 0; }
.article-prose a { color: var(--signal-dark); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-prose a:hover { color: var(--ink); }
.article-prose .btn, .article-prose .btn:hover { color: #fff; text-decoration: none; }

.editorial-note { margin-bottom: 24px; padding: 14px 18px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.answer-capsule {
  margin: 0 0 26px; padding: 16px 18px;
  border-inline-start: 4px solid var(--signal); border-radius: 0 12px 12px 0;
  background: var(--paper); color: var(--ink); font-size: 1.04rem; font-weight: 600;
}
[dir="rtl"] .answer-capsule { border-radius: 12px 0 0 12px; }

.article-toc { margin: 0 0 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.article-toc > p, .decision-label, .timeline-label {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--signal-dark);
}
.article-toc ol { columns: 2; gap: 30px; margin: 0; padding-inline-start: 20px; }
.article-toc li { break-inside: avoid; font-size: .93rem; line-height: 1.45; }
.rich-block { scroll-margin-top: 24px; }
.claim-citations { white-space: nowrap; font-family: var(--font-mono); font-size: .72em; font-weight: 700; }
.claim-citations a { text-decoration: none; }

.decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.decision-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.decision-grid h3, .rich-timeline h3, .rich-annotated-steps h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.35; }
.decision-grid ul { margin: 0; padding-inline-start: 18px; }
.decision-grid li { font-size: .94rem; line-height: 1.55; }
.decision-note { color: var(--muted); font-size: .94rem !important; }

.rich-checklist { margin: 16px 0 24px; padding: 22px; border: 1px solid #b9ddc9; border-radius: var(--radius); background: #f4fbf7; }
.rich-checklist ul { list-style: none; margin: 12px 0 0; padding: 0; }
.rich-checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.rich-checklist li span { width: 18px; height: 18px; margin-top: 5px; border: 2px solid var(--signal-dark); border-radius: 5px; background: #fff; }

.rich-callout, .rich-cta { margin: 22px 0; padding: 22px; border-radius: var(--radius); }
.rich-callout { border: 1px solid #e4c477; background: #fff9e8; }
.rich-callout h2, .rich-cta h2 { font-size: 1.15rem; }
.rich-cta { border: 1px solid var(--line); background: var(--ink); color: #fff; }
.rich-cta h2, .rich-cta p { color: #fff; }

.table-scroll { overflow-x: auto; margin: 16px 0; }
.rich-table table { width: 100%; min-width: 560px; border-collapse: collapse; }
.rich-table caption { padding: 0 0 10px; text-align: start; color: var(--muted); }
.rich-table th, .rich-table td { padding: 12px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.rich-table thead th { background: var(--paper); font-family: var(--font-mono); font-size: .82rem; }
.rich-timeline ol { list-style: none; margin: 16px 0; padding: 0; border-inline-start: 2px solid var(--signal); }
.rich-timeline li { position: relative; padding: 0 0 20px 24px; }
[dir="rtl"] .rich-timeline li { padding: 0 24px 20px 0; }
.rich-timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); }
.rich-annotated-steps > ol { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 14px; }
.rich-annotated-steps > ol > li { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.annotated-step-head { display: grid; grid-template-columns: minmax(72px, auto) 1fr; gap: 14px; align-items: center; padding: 14px 18px; background: var(--ink); color: #fff; }
.annotated-step-head h3 { color: #fff; }
.annotated-step-label { margin: 0; color: var(--signal); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rich-annotated-steps dl { margin: 0; padding: 16px 18px 18px; display: grid; gap: 12px; }
.rich-annotated-steps dl > div { display: grid; grid-template-columns: minmax(120px, .32fr) 1fr; gap: 14px; }
.rich-annotated-steps dt { color: var(--muted); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; }
.rich-annotated-steps dd { margin: 0; }
.rich-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.rich-figure figcaption, .article-change-note { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.article-change-note { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--line); }
.article-change-note p { font-size: .88rem; }

/* Мостик к продукту после прочтения: следующие шаги + CTA каталога */
.article-next { padding: 24px; margin-top: 30px; }
.article-next h2 { font-size: 1.18rem; margin: 0 0 10px; }
.article-next ul { padding-inline-start: 22px; margin: 0 0 6px; }
.article-next .btn { margin-top: 14px; }

.article-sources { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px; }
.article-sources h2 { font-size: 1.05rem; }
.article-sources p, .article-sources li { font-size: .9rem; color: var(--muted); }

@media (max-width: 720px) {
  .blog-hero { padding: 36px 0 4px; }
  .blog-article-head { padding: 32px 0 22px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-list, .article-prose { padding-bottom: 60px; }
  .article-hero-figure { padding-top: 18px; }
  .article-toc ol { columns: 1; }
  .decision-grid { grid-template-columns: 1fr; }
  .rich-checklist, .rich-callout, .rich-cta { padding: 18px; }
  .annotated-step-head, .rich-annotated-steps dl > div { grid-template-columns: 1fr; gap: 5px; }
  .claim-citations { white-space: normal; }
}