/* ============================================================
   /blog/ — журнал сайта аудита

   Раздел существует ради поиска: статьи отвечают на запросы
   вроде «как посчитать текучесть кадров» и приводят человека
   к калькулятору и к заявке на аудит.

   Оформление — общая «газетная» система сайта, ничего своего.
   ============================================================ */

.blog-page{--max:1080px}

/* ---------------- шапка раздела ---------------- */

.blog-head{padding:64px 0 36px}
.blog-head h1{font-size:clamp(30px,4.6vw,46px);max-width:20ch;margin-top:14px}
.blog-head p{margin-top:16px;color:var(--muted);max-width:62ch;font-size:18px}

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

.posts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:72px}
.post-card{
  background:var(--paper);padding:28px 30px;display:block;text-decoration:none;color:inherit;
  transition:background .18s ease;
}
.post-card:hover{background:#fff}
.post-card__meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;
}
.post-card__meta b{color:var(--red);font-weight:500}
.post-card h2{font-size:clamp(21px,2.6vw,27px);max-width:26ch}
.post-card p{margin-top:10px;color:var(--muted);font-size:16px;max-width:70ch}
.post-card__more{
  display:inline-block;margin-top:14px;font-size:15px;color:var(--red);font-weight:600;
}

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

.article{padding:56px 0 24px;background:var(--white);border-bottom:1px solid var(--line)}
.article .wrap{max-width:760px}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--ink)}
.article h1{font-size:clamp(28px,4.2vw,42px);margin-bottom:16px}
.article__meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.article__lead{font-size:19.5px;line-height:1.55;color:#26282C;margin-bottom:34px}

.article h2{font-size:clamp(22px,2.8vw,28px);margin:40px 0 14px}
.article h3{font-size:19px;margin:28px 0 10px}
.article p{margin-bottom:16px;color:#26282C;font-size:17px}
.article ul,.article ol{margin:0 0 18px 22px;color:#26282C;font-size:17px}
.article li{padding:4px 0}
.article li::marker{color:var(--red)}
.article a{color:var(--red)}
.article b{font-weight:600}

.article table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 20px}
.article th,.article td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.article th{background:var(--paper);font-weight:600}
.article td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tw{overflow-x:auto;margin-bottom:20px}

/* формула */
.f-box{
  background:var(--paper);border-left:3px solid var(--red);border-radius:0 6px 6px 0;
  padding:16px 20px;margin:0 0 20px;font-family:var(--mono);font-size:14.5px;line-height:1.8;
  overflow-x:auto;white-space:pre;
}

/* врезка */
.note-box{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:20px 24px;margin:0 0 22px;font-size:16px;
}
.note-box h3{margin:0 0 8px;font-size:17px}
.note-box p{margin:0;font-size:16px}
.note-box p+p{margin-top:8px}

/* призыв внутри статьи */
.cta-inline{
  background:var(--red-soft);border:1px solid var(--red-line);border-radius:8px;
  padding:24px 28px;margin:30px 0;display:flex;align-items:center;justify-content:space-between;
  gap:22px;flex-wrap:wrap;
}
.cta-inline p{margin:0;font-size:16.5px;max-width:52ch}
.cta-inline b{font-weight:600}
.cta-inline .btn{flex:none}

/* читайте также */
.also{padding:44px 0 80px}
.also h2{font-size:24px;margin-bottom:20px}
.also__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.also__item{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px;
  text-decoration:none;color:inherit;display:block;
}
.also__item:hover{border-color:var(--red)}
.also__item span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
.also__item h3{font-size:18px;margin:0}

@media(max-width:860px){
  .blog-head{padding:44px 0 28px}
  .post-card{padding:24px 22px}
  .article{padding:36px 0 20px}
  .also__grid{grid-template-columns:1fr}
  .cta-inline{padding:20px 22px}
  .cta-inline .btn{width:100%;text-align:center}
}