/* --- Blog hero (archive) --- */
.blog-hero{ background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 12%, #fff), #fff); border-bottom:1px solid var(--color-border); }
.blog-hero__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; padding:18px 0; }
.blog-title{ margin:.2em 0 .2em; font-weight:900; letter-spacing:.2px; }
.blog-subtitle{ color:var(--color-text-muted); margin:0 0 10px; }
.blog-search{ display:flex; gap:8px; align-items:center; }
.blog-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--color-border); border-radius:999px; background:#fff; font-weight:700; color:var(--color-text); text-decoration:none; }
.chip:hover{ background:var(--color-muted); }
.chip.active{ background:color-mix(in oklab,var(--color-primary) 12%,#fff); border-color:color-mix(in oklab,var(--color-primary) 40%, var(--color-border)); color:#0f172a; }
.blog-hero__thumb{ aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(180deg, rgba(24,181,196,.08), rgba(24,181,196,.02)); border:1px dashed var(--color-border); }
@media (max-width: 1024px){ .blog-hero__inner{ grid-template-columns:1fr; } }


/* --- Archive grid --- */
.post-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin:18px 0; }
.post-card{ position:relative; display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; }
.post-card:hover{ box-shadow:0 6px 20px rgba(2,6,23,.06); transform:translateY(-1px); }
.post-card__media{ position:relative; display:block; }
.post-card__media .media{ width:100%; aspect-ratio: 4 / 3; object-fit:cover; background:#fff; }
.post-card__media .media--placeholder{ background:var(--color-muted); }
.post-card__media .badge{ position:absolute; left:10px; top:10px; }
.post-card__body{ padding:0 12px; }
.post-card__title{ font-size:18px; font-weight:800; margin:.3em 0; }
.post-card__title a{ color:var(--color-text); text-decoration:none; }
.post-card__title a:hover{ color:var(--color-primary); }
.post-card__excerpt{ color:var(--color-text-muted); margin:0 0 8px; }
.post-card__meta{ display:flex; align-items:center; gap:8px; color:#64748b; padding:0 12px 12px; font-size:14px; }
.meta-dot{ opacity:.6; }


.blog-pagination{ display:flex; justify-content:center; margin:12px 0 24px; }


/* --- Single: hero --- */
.post-hero{ background: linear-gradient(135deg, rgba(24,181,196,.10), #fff); border-bottom:1px solid var(--color-border); }
.post-hero__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; padding:20px 0; }
.post-hero__img{ width:100%; aspect-ratio: 4 / 3; object-fit:cover; border:1px solid var(--color-border); border-radius:12px; background:#fff; }
.post-title{ font-size: clamp(28px, 3.2vw, 42px); line-height:1.1; font-weight:900; margin:.2em 0 .1em; }
.post-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:#64748b; }
@media (max-width: 1024px){ .post-hero__inner{ grid-template-columns:1fr; } }


/* --- Single: layout --- */
.post-layout{ display:grid; grid-template-columns: 300px 1fr; gap:24px; padding:18px 0; }
.post-sidebar{ position:sticky; top:90px; align-self:start; display:flex; flex-direction:column; gap:12px; }
.toc.card{ border:1px solid var(--color-border); border-radius:12px; background:#fff; overflow:hidden; }
.toc__head{ padding:10px 12px; font-weight:800; background:#f8fafc; border-bottom:1px solid var(--color-border); }
.toc__body{ padding:10px 12px; }
.toc__body a{ display:block; padding:6px 0; color:var(--color-text); text-decoration:none; }
.toc__body a:hover{ color:var(--color-primary); }
.post-share.card{ border:1px solid var(--color-border); border-radius:12px; background:#fff; }
.post-share__head{ padding:10px 12px; font-weight:800; border-bottom:1px solid var(--color-border); background:#f8fafc; }
.post-share__body{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; }


.post-content{ min-width:0; }
#progress{
  position: sticky;
  top: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-700));
  border-radius: 999px;
  z-index: 1000; /* чтобы не пряталась под шапкой/героем */
}


/* Typography inside post */
@media (max-width:768px){ .container{ padding-left:16px; padding-right:16px; } }