/* Блог: список статей и статья. Цвета и шрифты — переменные site.css. */
.blog-hero{padding:48px 0 78px}
.blog-hero .lead{max-width:760px;margin-top:14px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--mut-3);margin-bottom:22px}
.crumbs a{color:var(--mut-2)}
.crumbs a:hover{color:var(--pur)}
.crumbs [aria-current]{color:var(--mut-3);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.post-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:18px;margin:34px 0}
.post-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:20px;
  padding:22px 24px;box-shadow:var(--shadow);color:var(--ink);transition:border-color .15s,transform .15s}
.post-card:hover{border-color:var(--lilac);transform:translateY(-2px);color:var(--ink)}
.post-card b{font-family:var(--head);font-weight:800;font-size:18px;line-height:1.25}
.post-card span{color:var(--mut-2);font-size:14.5px;line-height:1.5}
.post-card .post-card-meta{font-family:var(--mono);font-size:12px;color:var(--mut-3)}
.post-card .post-card-more{margin-top:auto;color:var(--pur);font-weight:700}
.post-card-cover{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:contain;border-radius:12px;background:var(--deep);margin-bottom:6px}
.post-cover{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:contain;border-radius:20px;margin:26px 0 0;background:var(--deep)}

.post{padding:40px 0 70px}
.post-wrap{max-width:820px}
.post-head h1{font-size:42px;line-height:1.1}
.post-head .lead{margin-top:16px}
.post-meta{font-family:var(--mono);font-size:12.5px;color:var(--mut-3);margin-top:14px}

.toc{background:var(--tint);border:1px solid var(--line-2);border-radius:18px;padding:18px 24px;margin:30px 0 8px}
.toc b{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--pur-dd)}
.toc ol{margin:10px 0 0;padding-left:22px;display:grid;gap:6px}
.toc a{color:var(--ink);font-size:15px}
.toc a:hover{color:var(--pur)}

.post-body h2{font-size:28px;line-height:1.2;margin:46px 0 14px;scroll-margin-top:90px}
.post-body h3{font-size:19px;margin:28px 0 8px}
.post-body p,.post-body li{color:var(--ink-soft,#2e2a40);font-size:17px;line-height:1.7}
.post-body p{margin:12px 0}
.post-body ul,.post-body ol{padding-left:24px;margin:12px 0}
.post-body li{margin:6px 0}
.post-body strong{color:var(--ink)}
.post-body a{text-decoration:underline;text-decoration-color:var(--chip-b);text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--pur)}
.post-body .post-cta a,.post-body .btn{text-decoration:none}
.post-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px;display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--line-2);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.5}
.post-body th{background:var(--tint);font-weight:700}
.post-body blockquote{margin:18px 0;padding:14px 20px;border-left:4px solid var(--pur);background:var(--tint);border-radius:0 14px 14px 0}
.post-body blockquote p{margin:4px 0}
.post-body .tip,.post-body .warn{border-radius:16px;padding:16px 20px;margin:20px 0;font-size:16px;line-height:1.6}
.post-body .tip{background:#ecfdf5;border:1px solid #bbf7d0}
.post-body .warn{background:#fffbeb;border:1px solid #fde68a}
.post-body .tip p,.post-body .warn p{margin:4px 0;font-size:16px}
.post-body .example{background:#fff;border:1px dashed var(--lilac);border-radius:16px;padding:14px 20px;margin:16px 0}
.post-body .example p{font-size:16px;margin:6px 0}
.post-body .faq{margin:18px 0}
.post-body .faq p{font-size:15.5px}

.post-cta{display:flex;gap:18px;align-items:flex-start;margin:34px 0;padding:26px 28px;border-radius:22px;color:#fff;
  background:radial-gradient(circle at 90% 0,rgba(177,92,240,.5),transparent 55%),linear-gradient(135deg,var(--deep),var(--pur-dd) 55%,var(--pur))}
.post-cta-ic{font-size:30px;line-height:1}
.post-cta h3{font-family:var(--head);font-size:21px;font-weight:800;color:#fff;margin:0 0 8px}
.post-cta p{color:#e6dcff;font-size:15.5px;line-height:1.6;margin:0}
.post-cta .cta-row{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.post-cta .btn-primary{background:#22c55e;box-shadow:0 12px 26px -12px rgba(34,197,94,.9)}
.post-cta .btn-primary:hover{background:#16a34a}
.post-cta .btn-g{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.post-cta .btn-g:hover{background:rgba(255,255,255,.2);color:#fff}
.post-note{font-size:13.5px;color:var(--mut-3);line-height:1.6;margin-top:26px}
.related{margin-top:46px}
.related h2{font-size:26px}
.related .post-cards{margin-top:18px}

@media (max-width:700px){
  .blog-hero{padding:28px 0 56px}
  .post{padding:24px 0 56px}
  .post-head h1{font-size:30px}
  .post-body h2{font-size:23px;margin-top:36px}
  .post-body p,.post-body li{font-size:16px}
  .post-body table{font-size:14px}
  .post-body th,.post-body td{padding:8px 9px}
  .post-cta{flex-direction:column;padding:22px 20px}
  .post-cta .cta-row .btn{width:100%}
  .crumbs [aria-current]{max-width:100%}
}
/* блок статей на главной */
.blog-teaser .post-cards{margin:0 0 26px}
.blog-teaser .center{text-align:center}