/* Раздел «Статьи» — надстройка над style.css: типографика длинных текстов и карточки списка. */

/* ---------- список статей ---------- */
.blog-head{padding:46px 0 10px;max-width:44em}
.blog-head .sub{margin-top:14px;color:var(--dim);font-size:16px}

.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:28px 0 10px}
@media(max-width:760px){.posts{grid-template-columns:1fr}}
.post-card{border:1px solid var(--line);background:var(--surface);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s ease,border-color .15s ease}
.post-card:hover{transform:translateY(-3px);border-color:rgba(245,196,81,.35);text-decoration:none}
.post-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.post-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h2{font-size:22px;line-height:1.2;color:var(--text)}
.post-card p{color:var(--dim);font-size:14px}
.post-card .meta{margin-top:auto;color:var(--faint);font-size:12.5px}

/* ---------- страница статьи ---------- */
.article{max-width:47em;margin:0 auto;padding:34px 0 20px}
.article .crumbs{font-size:13px;color:var(--faint)}
.article .crumbs a{color:var(--dim)}
.article h1{margin-top:14px}
.article .lead{margin-top:16px;font-size:17px;line-height:1.7;color:var(--dim)}
.article .meta{margin-top:14px;color:var(--faint);font-size:12.5px}
.article .cover{margin:26px 0 6px;border-radius:20px;border:1px solid var(--line);overflow:hidden}
.article .cover img{display:block;width:100%}
.article .cover figcaption{padding:10px 14px;color:var(--faint);font-size:12.5px;border-top:1px solid var(--line)}

.article h2{font-size:clamp(24px,3vw,32px);margin:38px 0 0;scroll-margin-top:80px}
.article h3{font-size:19px;margin:26px 0 0}
.article p{margin-top:14px;font-size:16.5px;line-height:1.75}
.article ul,.article ol{margin:14px 0 0;padding-left:22px;color:var(--text)}
.article li{margin-top:8px;line-height:1.7}
.article li::marker{color:var(--gold-dim)}
.article strong{color:var(--text);font-weight:600}

/* оглавление */
.toc{margin:26px 0 0;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:18px 20px}
.toc .kicker{display:block;margin-bottom:10px}
.toc ol{margin:0;padding-left:20px}
.toc a{color:var(--dim)}
.toc a:hover{color:var(--gold)}

/* врезка «важно» */
.note{margin:24px 0 0;border:1px solid rgba(245,196,81,.32);background:rgba(245,196,81,.07);
  border-radius:18px;padding:16px 20px}
.note p{margin-top:8px;font-size:15.5px}
.note p:first-child{margin-top:0}

/* таблица */
.article .tbl{width:100%;margin-top:18px;border-collapse:collapse;font-size:15px}
.article .tbl th,.article .tbl td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.article .tbl th{color:var(--gold-dim);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.tbl-scroll{overflow-x:auto}

/* вопрос-ответ */
.faq{margin-top:16px}
.faq details{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px 18px;margin-top:10px}
.faq summary{cursor:pointer;font-weight:600;color:var(--text);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+ ';color:var(--gold)}
.faq details[open] summary::before{content:'– '}
.faq p{margin-top:10px;color:var(--dim);font-size:15.5px}

/* призыв к установке внутри статьи */
.cta-box{margin:34px 0 0;border:1px solid rgba(245,196,81,.3);border-radius:20px;padding:22px;
  background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(139,92,246,.10))}
.cta-box h3{font-size:22px}
.cta-box p{margin-top:8px;color:var(--dim);font-size:15px}
.cta-box .btn{margin-top:16px}

/* соседние статьи */
.next{margin:44px 0 10px;border-top:1px solid var(--line);padding-top:22px}
.next .kicker{display:block;margin-bottom:12px}
.next ul{list-style:none;margin:0;padding:0}
.next li{margin-top:10px}