/* Блог: продолжение дизайн-системы лендинга — те же переменные, карточки и ритм. */

.blog-h1{font-size:clamp(64px,7vw,100px);line-height:.94;font-weight:700;letter-spacing:-.03em;margin:0}
.blog-copy .filters a{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;
  font-size:14px;font-weight:500;color:#e4e4e0;background:rgba(11,11,12,.6);border:1px solid #4a4a4f;
  transition:background .2s,color .2s,border-color .2s}
.blog-copy .filters a:hover{border-color:var(--gold-edge)}
.blog-copy .filters a[aria-current="page"]{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}

.posts{margin-top:28px}
.post .cover{background-size:cover;background-position:center;text-decoration:none}
.post .cover::after{content:"";position:absolute;inset:0;border-radius:22px;background:linear-gradient(180deg,rgba(11,11,12,.1),rgba(11,11,12,.72));z-index:0}
.post .cover .tag,.post .cover .date{position:relative;z-index:1}
.post h2{font-size:20px;line-height:25px;font-weight:700;margin:0}
.post h2 a,.post h3 a{color:inherit}
.post h2 a:hover,.post h3 a:hover{color:var(--gold)}

.blog-empty{margin-top:40px;color:var(--muted);font-size:17px}

.pager{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pager a{min-width:44px;height:44px;padding:0 14px;border-radius:22px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line-3);color:var(--fg-2);font-weight:700;transition:border-color .2s,color .2s}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- страница статьи ---------- */
.article{padding-top:36px}
.crumbs{font-size:13px;color:var(--muted-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--gold)}
.crumbs .cur{color:var(--fg-2)}

.article-head{max-width:820px;margin-top:28px;display:flex;flex-direction:column;gap:20px}
.article-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.article-head h1{font-size:clamp(30px,4.4vw,52px);line-height:1.06;font-weight:700;letter-spacing:-.02em}
.article-head .lead{font-size:19px;line-height:30px;color:var(--fg-2)}

.article-cover{width:100%;max-height:460px;object-fit:cover;border-radius:24px;margin-top:32px;border:1px solid var(--gold-edge)}

/* Текст статьи набирают в админке, поэтому оформляем все обычные теги разом */
.article-body{max-width:820px;margin-top:36px;font-size:17px;line-height:30px;color:var(--fg-2)}
.article-body > * + *{margin-top:22px}
.article-body h2{font-size:clamp(24px,3vw,34px);line-height:1.15;font-weight:700;margin-top:44px;letter-spacing:-.01em}
.article-body h3{font-size:clamp(20px,2.4vw,26px);line-height:1.2;font-weight:700;margin-top:36px}
.article-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.article-body ul,.article-body ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.article-body li{line-height:28px}
.article-body ul li::marker{color:var(--gold)}
.article-body img{border-radius:18px;border:1px solid var(--line-2)}
.article-body blockquote{margin:0;padding:20px 24px;border-left:3px solid var(--gold);background:rgba(248,227,84,.06);
  border-radius:0 14px 14px 0;color:var(--fg)}
.article-body code{background:#17171a;border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;font-size:15px}
.article-body pre{background:#17171a;border:1px solid var(--line-2);border-radius:14px;padding:18px;overflow:auto}
.article-body pre code{background:none;border:0;padding:0}
.article-body table{width:100%;border-collapse:collapse;font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line-2);padding:10px 14px;text-align:left}
.article-body th{background:#17171a;font-weight:700;color:var(--fg)}
.article-body hr{border:0;border-top:2px solid var(--line);margin:36px 0}

.article-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:2px solid var(--line)}
.related{margin-top:72px}
.related .h2{font-size:clamp(26px,3vw,36px)}
.related .posts{margin-top:24px}

@media (max-width:760px){
  .article-head{margin-top:20px;gap:14px}
  .article-head .lead{font-size:17px;line-height:27px}
  .article-body{font-size:16px;line-height:28px;margin-top:28px}
  .article-cover{margin-top:24px;border-radius:18px}
  .related{margin-top:48px}
}