/* ============================================================
   Aster — astervisa.ru • blog.css
   Стили контентных блоков блога (qs-*). Подключается ПОСЛЕ styles.css
   только на страницах блога. Токены — из styles.css, новой палитры нет.
   ============================================================ */

/* ---------- Хлебные крошки ---------- */
.crumbs{padding-top:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;font-size:13.5px;color:var(--text-muted)}
.crumbs a{color:var(--text-secondary);text-decoration:none;font-weight:500}
.crumbs a:hover{color:var(--brand-primary)}
.crumbs li[aria-current]{color:var(--text-muted);max-width:46ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs svg{width:14px;height:14px;color:var(--border-strong);flex:none;display:block}

/* ---------- Обвязка статьи ---------- */
.article{max-width:720px;margin:0 auto;padding:0 var(--pad-x) 96px}
.article-hero{max-width:720px;margin:0 auto;padding:26px var(--pad-x) 0}
.article-hero .eyebrow{margin-bottom:14px}
.article-hero__title{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.12;text-wrap:pretty}
.article-hero__meta{margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:14px;color:var(--text-muted)}
.article-hero__author{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text-secondary)}
.article-hero__avatar{width:28px;height:28px;border-radius:50%;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.article-hero__dot{color:var(--border-strong)}
.article-hero__lead{margin-top:18px;font-size:18px;line-height:1.65;color:var(--text-secondary);text-wrap:pretty}
.article-hero .qs-figure{margin:28px 0 0}

/* ---------- Типографика тела ---------- */
.article>p{margin:18px 0 0;font-size:16.5px;line-height:1.7;color:var(--text-secondary)}
.article>p strong,.article li strong{color:var(--text-primary);font-weight:600}
.article a{color:var(--brand-primary);font-weight:500;text-decoration:none}
.article a:hover{text-decoration:underline}
.article h2{margin:44px 0 0;font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--text-primary);scroll-margin-top:96px;text-wrap:pretty}
.article h3{margin:30px 0 0;font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--text-primary);scroll-margin-top:96px}
.article>ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.article>ul>li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.65;color:var(--text-secondary)}
.article>ul>li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--brand-gradient)}

/* ---------- Оглавление ---------- */
.qs-toc-inline{margin:30px 0 0;padding:20px 24px;background:rgba(0,86,255,.045);border:1px solid rgba(0,86,255,.14);border-radius:var(--radius-lg)}
.qs-toc-inline__label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-primary)}
.qs-toc-inline__list{margin:12px 0 0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:7px;counter-reset:none}
.qs-toc-inline__list li{font-size:15px;line-height:1.45;color:var(--text-muted)}
.qs-toc__link{color:var(--text-secondary);font-weight:500;text-decoration:none}
.qs-toc__link:hover{color:var(--brand-primary);text-decoration:underline}

/* ---------- Иллюстрации ---------- */
.qs-figure{margin:26px 0 0}
.qs-figure__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#F4F7FB}
.qs-figure__media img{display:block;width:100%;height:auto}
.qs-figure__caption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--text-muted)}

/* ---------- Врезки ---------- */
.qs-callout{margin:26px 0 0;padding:18px 22px;border-left:4px solid var(--accent-amber);border-radius:0 var(--radius-md) var(--radius-md) 0;background:rgba(255,176,32,.09)}
.qs-callout__label{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:#8A5A00}
.qs-callout__label svg{width:19px;height:19px;flex:none;color:#C77E00}
.qs-callout__text{margin:10px 0 0;font-size:15.5px;line-height:1.65;color:var(--text-secondary)}
.qs-note{margin:26px 0 0;padding:16px 20px;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md)}
.qs-note__text{margin:0;font-size:15px;line-height:1.65;color:var(--text-secondary)}

/* ---------- Чек-лист ---------- */
.qs-checklist{margin:26px 0 0;padding:24px 26px;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:0 6px 24px rgba(15,23,42,.05)}
.qs-checklist__title{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.qs-checklist__title em{font-style:normal;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.qs-checklist__group{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--border-strong);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}
.qs-checklist__list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.qs-checklist__item{display:grid;grid-template-columns:22px 1fr;gap:11px;font-size:15.5px;line-height:1.55;color:var(--text-secondary);cursor:pointer;user-select:none}
.qs-checklist__check{width:22px;height:22px;border-radius:6px;border:2px solid var(--border-strong);background:#fff;display:grid;place-items:center;margin-top:1px;transition:background .12s,border-color .12s}
.qs-checklist__check svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .12s}
.qs-checklist__item:hover .qs-checklist__check{border-color:var(--accent-green)}
.qs-checklist__item.is-checked .qs-checklist__check{background:var(--accent-green);border-color:var(--accent-green)}
.qs-checklist__item.is-checked .qs-checklist__check svg{opacity:1}
.qs-checklist__item.is-checked>span:last-child{color:var(--text-muted);text-decoration:line-through;text-decoration-color:rgba(148,163,184,.6)}
.qs-checklist__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.qs-checklist__print{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:1px solid var(--border-strong);border-radius:999px;background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;text-decoration:none;transition:color .12s,border-color .12s}
.qs-checklist__print:hover{color:var(--brand-primary);border-color:var(--brand-primary);text-decoration:none}
.qs-checklist__print svg{width:15px;height:15px}

/* ---------- Таблица ---------- */
.qs-table-wrap{margin:26px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-strong);border-radius:var(--radius-lg)}
.qs-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.55}
.qs-table th{padding:13px 18px;text-align:left;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-primary);background:rgba(0,86,255,.05);border-bottom:1px solid var(--border-strong)}
.qs-table td{padding:14px 18px;color:var(--text-secondary);border-bottom:1px solid var(--border);vertical-align:top}
.qs-table tbody tr:last-child td{border-bottom:none}
.qs-table tbody tr:nth-child(even){background:var(--surface-alt)}
.qs-table td:first-child{font-weight:600;color:var(--text-primary);white-space:nowrap}

/* ---------- FAQ-аккордеон ---------- */
.qs-faq{margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.qs-faq__item{background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s}
.qs-faq__item[aria-expanded="true"]{border-color:rgba(0,86,255,.35)}
.qs-faq__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 20px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;font-size:16px;font-weight:600;color:var(--text-primary);line-height:1.45}
.qs-faq__btn-icon{width:18px;height:18px;flex:none;color:var(--brand-primary);transition:transform .2s}
.qs-faq__item[aria-expanded="true"] .qs-faq__btn-icon{transform:rotate(45deg)}
.qs-faq__body{display:none;padding:0 20px 18px;font-size:15.5px;line-height:1.65;color:var(--text-secondary)}
.qs-faq__item[aria-expanded="true"] .qs-faq__body{display:block}

/* ---------- CTA статьи ---------- */
.qs-cta{margin:30px 0 0;padding:28px 30px;border-radius:var(--radius-xl,20px);background:var(--brand-gradient);color:#fff}
.qs-cta__title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.qs-cta__text{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.92);text-wrap:pretty}
.qs-cta__actions{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qs-cta .btn--white{background:#fff;color:var(--brand-primary)}
.qs-cta__hint{font-size:13.5px;color:rgba(255,255,255,.8)}

/* ---------- Хаб-листинг ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(15,23,42,.1);border-color:rgba(0,86,255,.3)}
.blog-card__media{aspect-ratio:4/3;background:#F4F7FB;overflow:hidden}
.blog-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card__body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.blog-card__tag{align-self:flex-start;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-primary);background:rgba(0,86,255,.07);padding:4px 10px;border-radius:999px}
.blog-card__title{margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--text-primary);text-wrap:pretty}
.blog-card:hover .blog-card__title{color:var(--brand-primary)}
.blog-card__excerpt{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-secondary)}
.blog-card__meta{margin-top:auto;padding-top:6px;font-size:13px;color:var(--text-muted)}

/* ---------- Адаптив ---------- */
@media (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .article-hero__title{font-size:28px}
  .article h2{font-size:23px;margin-top:36px}
  .article h3{font-size:18px}
  .article-hero__lead{font-size:16.5px}
  .qs-checklist{padding:20px 18px}
  .qs-cta{padding:24px 20px}
  .qs-cta__actions .btn{width:100%;justify-content:center}
  .blog-grid{grid-template-columns:1fr}
}