/* Блог: типографика длинного текста. Всё остальное (шапка, подвал, шрифты, цвета)
   берётся из styles.css — блог не заводит собственный визуальный язык. */

.blog-nav{margin-left:auto;display:flex;gap:20px}
.blog-nav a{font-size:13px;font-weight:500;color:#4B5563;text-decoration:none}
.blog-nav a:hover{color:#2563EB}

/* Поиск в шапке блога — та же `.header-search` из styles.css, но здесь рядом с ним
   ещё и nav, поэтому на узких экранах шапка переносит поле на вторую строку:
   втроём в 360px они дают поле шириной в пару слов */
@media (max-width:768px){
  .header{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;row-gap:10px}
  .header-search{order:3;flex-basis:100%;margin-left:0;max-width:none}
}

.blog-page{max-width:760px}

.breadcrumb{font-size:12px;color:#9CA3AF;margin:20px 0 24px;display:flex;gap:8px;align-items:center}
.breadcrumb a{color:#6B7280;text-decoration:none}
.breadcrumb a:hover{color:#2563EB}

/* ── Список статей ────────────────────────────────────────────────────── */
.blog-intro{margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid #E5E8F0}
.blog-intro h1{font-size:32px;font-weight:700;letter-spacing:-.6px;margin-bottom:10px}
.blog-intro p{font-size:15px;color:#4B5563;line-height:1.65;max-width:60ch}

.post-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.post-list a{display:block;text-decoration:none;color:inherit;padding:20px;margin:0 -20px;
  border-radius:12px;transition:background .15s}
.post-list a:hover{background:#F8F9FC}
.post-list time{font-size:11.5px;font-family:'JetBrains Mono',ui-monospace,monospace;
  color:#9CA3AF;letter-spacing:.02em}
.post-list h2{font-size:19px;font-weight:600;letter-spacing:-.3px;margin:6px 0 6px;color:#111827}
.post-list p{font-size:14px;color:#4B5563;line-height:1.6;margin-bottom:8px}
.post-list-meta{font-size:11.5px;color:#9CA3AF}

/* ── Статья ───────────────────────────────────────────────────────────── */
.post{max-width:66ch}
.post h1{font-size:clamp(26px,4.4vw,36px);line-height:1.18;font-weight:700;
  letter-spacing:-.7px;margin-bottom:12px;text-wrap:balance}
.post-meta{font-size:12px;color:#9CA3AF;font-family:'JetBrains Mono',ui-monospace,monospace;
  margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #E5E8F0}
.post-lead{font-size:17px;line-height:1.65;color:#374151;font-weight:500;margin-bottom:28px}

.post p{font-size:15.5px;line-height:1.75;color:#374151;margin-bottom:18px}
.post h2{font-size:22px;font-weight:700;letter-spacing:-.4px;color:#111827;
  margin:36px 0 14px;padding-top:28px;border-top:1px solid #E5E8F0;text-wrap:balance}
.post h3{font-size:17px;font-weight:600;color:#111827;margin:26px 0 10px;text-wrap:balance}
.post ul,.post ol{margin:0 0 18px 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.post li{font-size:15.5px;line-height:1.7;color:#374151;padding-left:2px}
.post li::marker{color:#2563EB}
.post strong{font-weight:600;color:#111827}
.post a{color:#2563EB;text-underline-offset:3px}
.post blockquote{margin:0 0 18px;padding:14px 18px;background:#F8F9FC;
  border-left:3px solid #2563EB;border-radius:0 8px 8px 0;font-size:14.5px;
  line-height:1.65;color:#4B5563}

.post code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.87em;
  background:#F3F4F6;padding:.12em .4em;border-radius:4px;color:#111827}
.post figure.code{margin:0 0 20px;background:#F8F9FC;border:1px solid #E5E8F0;
  border-radius:10px;overflow:hidden;position:relative}
.post figure.code::before{content:attr(data-lang);position:absolute;top:0;right:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#9CA3AF;background:#fff;padding:4px 10px;
  border-left:1px solid #E5E8F0;border-bottom:1px solid #E5E8F0;border-radius:0 10px 0 8px}
.post figure.code pre{margin:0;padding:20px 18px 18px;overflow-x:auto}
.post figure.code code{background:none;padding:0;font-size:13px;line-height:1.6}

.table-wrap{overflow-x:auto;margin-bottom:20px}
.post table{width:100%;border-collapse:collapse;font-size:14px}
.post th{text-align:left;font-weight:600;color:#111827;padding:9px 12px;
  border-bottom:1.5px solid #E5E8F0;white-space:nowrap}
.post td{padding:9px 12px;border-bottom:1px solid #F0F2F7;color:#4B5563;
  font-variant-numeric:tabular-nums}

/* ── Другие статьи ────────────────────────────────────────────────────── */
.related{margin-top:44px;padding-top:24px;border-top:1px solid #E5E8F0;max-width:66ch}
.related h2{font-size:13px;font-weight:600;color:#9CA3AF;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:12px}
.related ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.related a{font-size:14.5px;color:#2563EB;text-decoration:none;line-height:1.5}
.related a:hover{text-decoration:underline}

@media (max-width:768px){
  .blog-page{padding-left:16px;padding-right:16px}
  .post-list a{padding:16px;margin:0 -16px}
  .post figure.code pre{padding:16px 14px}
}