/* Блог viznai.ru. Токены - из ThemeInit.*.css лендинга, светлая тема
   переключается ими же. Шапка и подвал стилизуются index.*.css главной. */

.blog {
  --post-w: 720px;
  --wide-w: 1120px;
  padding: var(--vz-space-7) var(--vz-space-5) var(--vz-space-9);
}

.crumbs { max-width: var(--wide-w); margin: 0 auto var(--vz-space-6); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--vz-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--vz-fs-sm); color: var(--vz-ink-faint); }
.crumbs li + li::before { content: "/"; margin-right: var(--vz-space-2); color: var(--vz-ink-faint); }
.crumbs a { color: var(--vz-ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--vz-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- список статей */

.blog-hero { max-width: var(--wide-w); margin: 0 auto var(--vz-space-7); }
.blog-hero h1 { font-family: var(--vz-font-display); font-size: var(--vz-fs-3xl); line-height: var(--vz-lh-tight); margin: 0 0 var(--vz-space-4); }
.blog-hero p { color: var(--vz-ink-muted); font-size: var(--vz-fs-lg); max-width: 60ch; margin: 0; }

.blog-list { max-width: var(--wide-w); margin: 0 auto; display: grid; gap: var(--vz-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.blog-card { background: var(--vz-surface); border: 1px solid var(--vz-line); border-radius: var(--vz-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--vz-dur-fast) var(--vz-ease), transform var(--vz-dur-fast) var(--vz-ease); }
.blog-card:hover { border-color: var(--vz-violet-2); transform: translateY(-2px); }
.blog-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vz-surface-2); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.blog-card__body { padding: var(--vz-space-5); }
.blog-card h2 { font-family: var(--vz-font-display); font-size: var(--vz-fs-lg); line-height: var(--vz-lh-head); margin: var(--vz-space-2) 0 var(--vz-space-3); }
.blog-card h2 a { color: var(--vz-ink); text-decoration: none; }
.blog-card h2 a::after { content: ""; position: absolute; inset: 0; }
.blog-card { position: relative; }
.blog-card p { color: var(--vz-ink-muted); margin: 0; font-size: var(--vz-fs-sm); }

/* ---------- статья */

.post { max-width: var(--post-w); margin: 0 auto; font-size: var(--vz-fs-md); line-height: 1.7; }
.post-kicker { font-size: var(--vz-fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--vz-violet-2); font-weight: 600; margin: 0 0 var(--vz-space-3); }
.post h1 { font-family: var(--vz-font-display); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: var(--vz-lh-tight); margin: 0 0 var(--vz-space-4); text-wrap: balance; }
.post-meta { color: var(--vz-ink-faint); font-size: var(--vz-fs-sm); margin: 0; }
.post-lead { font-size: var(--vz-fs-lg); color: var(--vz-ink); margin: var(--vz-space-5) 0 0; }
.post-head { margin-bottom: var(--vz-space-6); }

.post h2 { font-family: var(--vz-font-display); font-size: var(--vz-fs-xl); line-height: var(--vz-lh-head); margin: var(--vz-space-8) 0 var(--vz-space-4); scroll-margin-top: 96px; text-wrap: balance; }
.post p, .post ul, .post ol { margin: 0 0 var(--vz-space-4); color: var(--vz-ink-muted); }
.post li { margin-bottom: var(--vz-space-2); }
.post li::marker { color: var(--vz-violet-2); }
.post strong { color: var(--vz-ink); font-weight: 600; }
.post a { color: var(--vz-violet-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post a:hover { text-decoration-thickness: 2px; }

.post-toc { background: var(--vz-surface); border: 1px solid var(--vz-line); border-radius: var(--vz-radius-md); padding: var(--vz-space-5) var(--vz-space-6); margin: 0 0 var(--vz-space-6); }
.post-toc__title { font-weight: 600; color: var(--vz-ink) !important; margin: 0 0 var(--vz-space-3) !important; }
.post-toc ol { margin: 0 !important; padding-left: 1.3em; columns: 2 280px; column-gap: var(--vz-space-6); }
.post-toc li { break-inside: avoid; margin-bottom: var(--vz-space-1); font-size: var(--vz-fs-sm); }
.post-toc a { color: var(--vz-ink-muted); text-decoration: none; }
.post-toc a:hover { color: var(--vz-ink); text-decoration: underline; }

.post-fig { margin: var(--vz-space-6) 0; }
.post-fig--wide { margin-inline: calc((min(var(--wide-w), 100vw - 2 * var(--vz-space-5)) - var(--post-w)) / -2); }
@media (max-width: 760px) { .post-fig--wide { margin-inline: 0; } }
.post-fig__link { display: block; border-radius: var(--vz-radius-md); overflow: hidden; border: 1px solid var(--vz-line); box-shadow: var(--vz-shadow-card); background: var(--vz-surface-2); }
.post .post-fig__link { text-decoration: none; }
.post-fig img { display: block; width: 100%; height: auto; }
.post-fig figcaption { font-size: var(--vz-fs-sm); color: var(--vz-ink-faint); margin-top: var(--vz-space-3); line-height: 1.5; }

.post-table { overflow-x: auto; margin: 0 0 var(--vz-space-5); border: 1px solid var(--vz-line); border-radius: var(--vz-radius-md); }
.post-table table { width: 100%; border-collapse: collapse; font-size: var(--vz-fs-sm); }
.post-table th, .post-table td { text-align: left; vertical-align: top; padding: var(--vz-space-3) var(--vz-space-4); border-bottom: 1px solid var(--vz-line); }
.post-table tr:last-child th, .post-table tr:last-child td { border-bottom: 0; }
.post-table thead th { color: var(--vz-ink-faint); font-weight: 600; background: var(--vz-surface); }
.post-table tbody th { color: var(--vz-ink); font-weight: 600; white-space: nowrap; }
.post-table td { color: var(--vz-ink-muted); }
@media (max-width: 560px) { .post-table tbody th { white-space: normal; } }

.post-faq { border-top: 1px solid var(--vz-line); margin-bottom: var(--vz-space-5); }
.post-faq details { border-bottom: 1px solid var(--vz-line); }
.post-faq summary { cursor: pointer; list-style: none; padding: var(--vz-space-4) var(--vz-space-6) var(--vz-space-4) 0; font-weight: 600; color: var(--vz-ink); position: relative; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4em; color: var(--vz-violet-2); transition: transform var(--vz-dur-fast) var(--vz-ease); }
.post-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.post-faq details p { margin: 0 0 var(--vz-space-4); }

.post-cta { margin-top: var(--vz-space-8); padding: var(--vz-space-6); border-radius: var(--vz-radius-lg); border: 1px solid var(--vz-line-strong); background: var(--vz-surface); }
.post-cta__title { font-family: var(--vz-font-display); font-size: var(--vz-fs-xl); color: var(--vz-ink) !important; margin: 0 0 var(--vz-space-3) !important; line-height: var(--vz-lh-head); }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: var(--vz-space-3); margin: var(--vz-space-5) 0 0 !important; }
.post .post-cta__actions a { text-decoration: none; }
.post .post-cta__actions .btn--primary { color: var(--vz-on-brand); }
.post .post-cta__actions .btn--ghost { color: var(--vz-ink); }

.nav__link[aria-current="page"] { color: var(--vz-ink); }

/* крошки статьи - по колонке текста */
.crumbs--post { max-width: var(--post-w); }

/* первая статья в списке - крупной карточкой */
@media (min-width: 900px) {
  .blog-card:first-child { grid-column: 1 / -1; flex-direction: row; }
  .blog-card:first-child .blog-card__img { flex: 0 0 58%; aspect-ratio: auto; min-height: 300px; }
  .blog-card:first-child .blog-card__body { padding: var(--vz-space-7); align-self: center; }
  .blog-card:first-child h2 { font-size: var(--vz-fs-xl); }
}
.post-fig--narrow { max-width: 360px; margin-inline: auto; }