/* ==========================================================================
   Блог (09.10.2026): /blog и /blog/<slug>. Подключается из blog_index.html /
   blog_post.html поверх tokens.css + public.css. Только токены (--color-*, --lp-*):
   светлая/тёмная тема переключаются сами. Мобильные - от 360px, текст статьи
   не шире 760px (≈70 знаков в строке).
   ========================================================================== */
.blog-wrap{padding-top:24px;padding-bottom:64px}
@media (min-width:1024px){.blog-wrap{padding-top:32px;padding-bottom:96px}}

.blog-crumbs{margin-bottom:20px;font-size:14px;color:var(--color-text-muted)}
.blog-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0}
.blog-crumbs li{display:inline-flex;align-items:center;min-width:0}
.blog-crumbs li+li::before{content:"/";margin:0 8px;color:var(--color-text-subtle)}
.blog-crumbs li[aria-current]{color:var(--color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,520px)}
.blog-crumbs a{color:var(--color-link)}

.blog-head{max-width:820px;margin-bottom:32px}
.blog-head h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;letter-spacing:-.025em;font-weight:700}
.blog-lead{margin-top:16px;font-size:18px;line-height:1.6;color:var(--color-text-muted)}

.blog-start{max-width:820px;margin:0 0 40px;padding:20px 24px;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);background:var(--color-surface)}
.blog-start h2{font-size:18px;margin-bottom:10px}
.blog-start ul{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.5}
.blog-start a{color:var(--color-link)}

.blog-cat{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-accent-text)}
.blog-meta{margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px;color:var(--color-text-muted)}

/* --- сетка карточек ----------------------------------------------------- */
.blog-grid{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:640px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog-card{display:flex;min-width:0}
.blog-card article{display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-xs);
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}
.blog-card article:hover,.blog-card article:focus-within{border-color:var(--color-border-strong);box-shadow:var(--shadow-md,0 8px 24px rgba(15,39,71,.12));transform:translateY(-2px)}
.blog-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-3);border-bottom:1px solid var(--color-border)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.blog-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.blog-card-body h2,.blog-card-body h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:0}
.blog-card-body h2 a,.blog-card-body h3 a{color:var(--color-heading);text-decoration:none}
.blog-card-body h2 a:hover,.blog-card-body h3 a:hover{color:var(--color-link);text-decoration:underline}
.blog-card-text{margin:0;font-size:15px;line-height:1.55;color:var(--color-text-muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-body .blog-meta{margin-top:auto;padding-top:6px}

.blog-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:32px 0;color:var(--color-text-muted)}

/* --- статья -------------------------------------------------------------- */
.blog-article{max-width:760px;margin:0 auto}
.blog-article-head h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;letter-spacing:-.025em;font-weight:700;margin-bottom:14px}

.blog-tldr{margin:24px 0;padding:16px 20px;border-left:4px solid var(--color-accent);border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--color-accent-soft);color:var(--color-text);font-size:17px;line-height:1.6}
.blog-tldr p{margin:0}
.blog-formula{margin:20px 0;padding:14px 18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2,var(--color-surface-3));overflow-x:auto}
.blog-formula p{margin:0;font-size:17px;line-height:1.5}

.blog-fig{margin:28px 0}
.blog-fig picture{display:block}
.blog-fig img{display:block;width:100%;height:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);box-shadow:var(--shadow-sm)}
.blog-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--color-text-muted);text-align:center}
.blog-cover{margin-top:8px}
.blog-cover img{max-height:460px;object-fit:cover;object-position:top center}

.blog-toc{margin:28px 0 36px;padding:18px 22px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.blog-toc h2{font-size:16px;margin-bottom:8px;letter-spacing:0}
.blog-toc ol{margin:0;padding-left:22px;display:grid;gap:4px;line-height:1.5}
.blog-toc a{color:var(--color-link)}

.blog-body{font-size:17px;line-height:1.7;color:var(--color-text)}
.blog-body>*:first-child{margin-top:0}
.blog-body h2{font-size:clamp(23px,3vw,30px);line-height:1.25;margin:2.2em 0 .6em;scroll-margin-top:84px}
.blog-body h3{font-size:clamp(19px,2.2vw,22px);line-height:1.3;margin:1.8em 0 .5em;scroll-margin-top:84px}
.blog-body p{margin:0 0 1.1em}
.blog-body ul,.blog-body ol{margin:0 0 1.2em;padding-left:1.4em}
.blog-body li{margin:.3em 0}
.blog-body li>p{margin:0 0 .4em}
.blog-body a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}
.blog-body a:hover{color:var(--color-link-hover)}
.blog-body strong{font-weight:650;color:var(--color-heading)}
.blog-body blockquote{margin:1.4em 0;padding:12px 18px;border-left:4px solid var(--color-border-strong);background:var(--color-surface-2);
  border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-2)}
.blog-body blockquote p:last-child{margin-bottom:0}
.blog-body code{font-family:var(--font-mono);font-size:.92em;padding:1px 6px;border-radius:var(--radius-xs);background:var(--color-surface-3)}
.blog-body hr{border:0;border-top:1px solid var(--color-border);margin:2em 0}
.blog-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px;line-height:1.5;display:block;overflow-x:auto}
.blog-body th,.blog-body td{padding:10px 12px;border:1px solid var(--color-border);text-align:left;vertical-align:top}
.blog-body th{background:var(--color-surface-2);color:var(--color-heading);font-weight:600}

.blog-faq{margin-top:48px}
.blog-faq h2{font-size:clamp(23px,3vw,30px);margin-bottom:16px}
.blog-faq-item{padding:16px 0;border-top:1px solid var(--color-border)}
.blog-faq-item:last-child{border-bottom:1px solid var(--color-border)}
.blog-faq-item h3{font-size:18px;line-height:1.35;margin:0 0 8px}
.blog-faq-item p{margin:0;font-size:16px;line-height:1.65;color:var(--color-text-2)}

.blog-cta{margin:48px auto 0;max-width:760px;padding:32px 24px;border-radius:20px;text-align:center;color:var(--lp-band-text);
  background:radial-gradient(420px 220px at 92% 0%,rgba(240,116,15,.16),transparent 70%),linear-gradient(150deg,var(--lp-band-bg) 0%,var(--lp-band-bg-2) 100%);
  border:1px solid var(--lp-band-border)}
.blog-cta h2{color:var(--lp-band-text);font-size:clamp(22px,3vw,28px);letter-spacing:-.02em}
.blog-cta p{margin:12px auto 0;max-width:560px;color:var(--lp-band-muted);font-size:16px;line-height:1.6}
.blog-cta .blog-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;max-width:none}
.blog-wrap>.blog-cta{max-width:none}

.blog-note{margin:28px 0 0;font-size:13px;line-height:1.55;color:var(--color-text-subtle)}
.blog-rss{margin-top:20px;text-align:center;font-size:14px}
.blog-rss a{color:var(--color-text-muted)}

.blog-related{max-width:1200px;margin:64px auto 0}
.blog-related>h2{font-size:clamp(22px,3vw,28px);margin-bottom:20px}

@media (max-width:480px){
  .blog-body{font-size:16px}
  .blog-tldr{font-size:16px;padding:14px 16px}
  .blog-start{padding:16px}
  .blog-cta{padding:24px 16px}
  .blog-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.blog-card article{transition:none}.blog-card article:hover{transform:none}}

/* 09.10.2026: зона касания хлебных крошек на телефоне (адаптивность). */
.blog-crumbs a{display:inline-flex;align-items:center;min-height:32px}