/* ===== blog.html: карточки записей ===== */
.blog-grid{display:grid;gap:24px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.bcard{background:#fff;border:1px solid #ECEEF0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.bcard:hover{transform:translateY(-6px);box-shadow:0 30px 54px -26px rgba(26,26,26,.26);border-color:#FFD9BE}
.bcard__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#EEF0F2;z-index:1} /* ← добавили z-index */
.bcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);position:relative;z-index:0} /* ← добавили z-index */
.bcard:hover .bcard__media img{transform:scale(1.06)}
.bcard__media .badge{position:absolute;top:12px;left:12px;z-index:2} /* ← добавили z-index */
.bcard__body{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
.bcard__meta{display:flex;gap:18px;font-size:13px;color:var(--muted)}
.bcard__date{font:500 12.5px var(--fm);letter-spacing:.04em}
.bcard__views{display:inline-flex;align-items:center;gap:6px}
.bcard__views .ic{width:16px;height:16px}
.bcard h3{font-size:19px;font-weight:700;line-height:1.35}
.bcard h3 a{color:var(--ink);text-decoration:none;transition:color .2s}
.bcard h3 a:hover{color:var(--accent)}
.bcard__excerpt{font-size:14.5px;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard__foot{margin-top:auto;padding-top:6px}
.bcard__foot .btn{gap:7px}

/* ===== blog-post.html ===== */
.badge--static{position:static;display:inline-block}
.post{padding-top:30px}
.post-head h1{font:800 clamp(28px,4.4vw,44px)/1.18 var(--fd);color:var(--ink);margin:16px 0 0;/*max-width:840px*/}
.post-meta{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:20px;font-size:14px;color:var(--muted)}
.meta-item{display:inline-flex;align-items:center;gap:8px}
.meta-item .ic{width:16px;height:16px;color:var(--accent)}
.share{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto}
.share__label{font:600 11px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.share-btn{width:42px;height:42px;border-radius:10px;border:1.5px solid #E3E6E9;background:#fff;color:var(--text);display:grid;place-items:center;text-decoration:none;transition:.25s}
.share-btn .ic{width:19px;height:19px}
.share-btn:hover{transform:translateY(-3px);color:#fff;border-color:transparent}
.share-btn--tg:hover{background:#229ED9}
.share-btn--vk:hover{background:#0077FF}
.share-btn--wa:hover{background:#25D366}
.share-btn--copy:hover{background:var(--accent)}
.share-btn.copied{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:860px){.share{margin-left:0}}

.post-cover{margin:28px 0 36px;border-radius:14px;overflow:hidden;position:relative}
.post-cover img{width:100%;aspect-ratio:2/1;object-fit:cover}
.post-cover figcaption{position:absolute;left:14px;bottom:14px;font:500 12px var(--fm);background:rgba(15,18,24,.62);backdrop-filter:blur(6px);color:#fff;padding:7px 12px;border-radius:6px;max-width:80%}

/* оглавление + контент */
.post-layout{display:grid;gap:44px;align-items:start}
.post-side{min-width:0}
.toc{background:var(--bg-alt);border:1px solid #ECEEF0;border-radius:12px;padding:22px}
.toc__title{display:flex;align-items:center;gap:9px;font:700 15px var(--fd);color:var(--ink);margin-bottom:12px}
.toc__title .ic{width:18px;height:18px;color:var(--accent)}
.toc__list a{display:block;padding:8px 12px;border-left:2px solid #E3E6E9;color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.45;transition:.2s}
.toc__list a.toc-h3{padding-left:26px;font-size:12.5px;color:var(--muted)}
.toc__list a:hover{color:var(--accent);border-color:#FFB27A}
.toc__list a.on{color:var(--accent);border-color:var(--accent);background:#fff;font-weight:600}
@media(min-width:1000px){
  .post-layout{grid-template-columns:280px minmax(0,1fr)}
  .post-side{position:sticky;top:100px}
}

/* типографика записи */
.post-content{max-width:760px;min-width:0}
.post-content h2{font-size:clamp(22px,2.6vw,28px);margin:46px 0 16px;scroll-margin-top:100px}
.post-content h3{font-size:20px;margin:32px 0 12px;scroll-margin-top:100px}
.post-content h2:first-child{margin-top:0}
.post-content p{font-size:16.5px;line-height:1.75;margin-bottom:16px}
.post-content ul,.post-content ol{margin:0 0 18px 22px;display:grid;gap:8px;font-size:16px}
.post-content li::marker{color:var(--accent)}
.post-content a{color:var(--accent)}
.post-content img{width:100%;border-radius:12px;margin:6px 0 20px}
.post-content blockquote{margin:24px 0;padding:18px 24px;border-left:3px solid var(--accent);background:var(--bg-alt);border-radius:0 10px 10px 0;font-style:italic;color:var(--ink);font-size:16.5px}
.post-note{display:flex;gap:13px;align-items:flex-start;background:#FFF7EE;border:1px solid #FFD9BE;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:14.5px;line-height:1.55}
.post-note .ic{width:22px;height:22px;color:var(--accent);flex:none;margin-top:2px}
.h-anchor{margin-left:9px;color:#D9DDE2;text-decoration:none;font-weight:600;transition:color .2s,opacity .2s;opacity:0}
.post-content h2:hover .h-anchor,.post-content h3:hover .h-anchor{opacity:1}
.h-anchor:hover{color:var(--accent)}

/* ===== пагинация ===== */
.navigation.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1.5px solid #E3E6E9;
    background: #fff;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: .25s;
}

.navigation.pagination .page-numbers:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.navigation.pagination .page-numbers.current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.navigation.pagination .page-numbers .ic {
    width: 16px;
    height: 16px;
}