/* Рефератус — блог: список статей, страница статьи, типографика текста из md_to_html().
   Только то, чего нет в style.css; базовые классы (.wrap, .card, .btn, .pager, .tbl-wrap) — оттуда. */

/* ── список: сетка карточек ── */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-1);position:relative;transition:box-shadow .15s,border-color .15s,transform .15s}
.post-card:hover{box-shadow:var(--sh-2);border-color:var(--brand-line);transform:translateY(-1px)}
.post-card h2,.post-card h3{font-size:1.1rem;line-height:1.35;margin:0 0 10px}
.post-card h2 a,.post-card h3 a{color:var(--ink)}
.post-card h2 a::after,.post-card h3 a::after{content:"";position:absolute;inset:0}   /* вся карточка — ссылка */
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--brand)}
.post-card p{color:var(--ink-2);font-size:.93rem;line-height:1.55;margin:0 0 14px;flex:1}
.pc-meta{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:.82rem;margin-bottom:10px}
.pc-more{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:.9rem;margin-top:auto}
.blog-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.blog-cta h3{margin-bottom:4px}
.blog-cta p{margin:0}

/* ── статья ── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--mut);font-size:.86rem;padding-top:26px}
.crumbs a{color:var(--mut)}.crumbs a:hover{color:var(--brand)}
.crumbs .ic{color:var(--mut-2)}
.page-head .crumbs{padding-top:0;margin-bottom:14px}   /* в списке блога крошки стоят внутри .page-head */
.rss-link{display:inline-flex;align-items:center;gap:4px;color:var(--mut);font-size:.88rem;white-space:nowrap;margin-left:6px}
.rss-link:hover{color:var(--brand)}
/* «По теме» — тонкая строка ссылок на страницы типов работ перед призывом к действию */
.post-topics{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;color:var(--mut);font-size:.9rem;margin:0 0 16px}
.post-topics span{color:var(--mut-2)}
.post-topics a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.post-topics a:hover{color:var(--brand);border-color:var(--brand-line)}
.post-head{padding:18px 0 22px;border-bottom:1px solid var(--line);margin-bottom:28px}
.post-head h1{font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.2;margin-bottom:14px}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--mut);font-size:.88rem;margin-bottom:14px}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.post-lead{color:var(--ink-2);font-size:1.08rem;line-height:1.6;margin:0}

/* типографика текста статьи (теги генерирует только md_to_html) */
.post-body{font-size:1.02rem;line-height:1.72;color:var(--ink-2)}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 1.15em}
.post-body h2{font-size:1.45rem;color:var(--ink);margin:2em 0 .6em;padding-top:.2em}
.post-body h3{font-size:1.15rem;color:var(--ink);margin:1.6em 0 .5em}
.post-body h4{font-size:1.02rem;color:var(--ink);margin:1.4em 0 .4em}
.post-body ul,.post-body ol{padding-left:26px;margin:0 0 1.15em}
.post-body li{margin-bottom:.4em}
.post-body li::marker{color:var(--brand)}
.post-body ol li::marker{font-weight:600}
.post-body blockquote{margin:1.4em 0;padding:14px 20px;border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink)}
.post-body blockquote p{margin:0}
.post-body blockquote p+p{margin-top:.6em}
.post-body a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--brand-line)}
.post-body a:hover{text-decoration-color:var(--brand)}
.post-body strong{color:var(--ink);font-weight:700}
.post-body code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border-radius:5px;padding:1px 6px;color:var(--ink)}
.post-body hr{margin:2em 0}
.post-body img{display:block;max-width:100%;height:auto;border-radius:var(--r-s);margin:1.4em auto;border:1px solid var(--line)}
.post-body .tbl-wrap{margin:1.4em 0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.post-body table{font-size:.92rem;min-width:420px}
.post-body th{background:var(--surface-2);white-space:nowrap}
.post-body td,.post-body th{padding:10px 12px;vertical-align:top}
.post-body tr:last-child td{border-bottom:0}

/* подвал статьи: призыв к действию */
.post-foot{margin-top:40px}
.post-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--brand-line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-1)}
.post-cta b{display:block;font-size:1.05rem;margin-bottom:4px;color:var(--ink)}
.post-cta span{color:var(--mut);font-size:.93rem;line-height:1.5;display:block;max-width:520px}
.post-near{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.post-near h2{font-size:1.35rem;margin:0}
.post-near .row.between{margin-bottom:16px}
.post-near .btn-link{display:inline-flex;align-items:center;gap:6px;font-weight:600}

@media (max-width:900px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .post-grid{grid-template-columns:1fr}
  .post-card{padding:18px}
  .post-body{font-size:1rem}
  .post-cta,.blog-cta{padding:18px}
  .post-cta .row,.blog-cta .row{width:100%}
  .post-cta .btn,.blog-cta .btn{flex:1}
}