/* ═══════════════════════════════════════════════════════════════════════════
   blog-v4.css — blog index + blog post on the v4 design system (2026-09-14).
   Loaded after blog.css / blog-post.css and after inner-v4.css, so it wins on
   source order; where inner-v4's `#hv-root :where(h1,h2,h3)` (1,1,0) would
   win, selectors here are `#hv-root …` qualified. Markup, ids and the hooks
   blog-post.js uses (#sp-progress, #sp-article, #sp-toc, #sp-copy-btn,
   .sp-toc-link.active) are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared: light "hero" ground with the homepage glow ──────────────────── */
.blog-hero, .sp-hero {
    position: relative; overflow: hidden;
    background: var(--rv-page);
    border-bottom: 1px solid var(--rv-border);
}
.blog-hero::before, .sp-hero::before {
    content: ''; position: absolute; top: -220px; right: -160px; width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .14), transparent 65%); pointer-events: none;
}
.blog-hero::after, .sp-hero::after {
    content: ''; position: absolute; bottom: -240px; left: -200px; width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 80, 236, .08), transparent 65%); pointer-events: none;
}
.blog-hero > .container, .sp-hero-inner { position: relative; z-index: 2; }

/* pills */
.blog-hero-eyebrow, .sp-cat, .blog-card-cat, .sp-rcard-cat {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rv-primary-deep); background: var(--rv-surface-4); border: 1px solid var(--rv-primary-pale);
    border-radius: 999px; padding: 6px 13px; text-decoration: none;
}
a.sp-cat:hover, a.blog-card-cat:hover { background: var(--rv-primary-pale); color: var(--rv-primary-deep); text-decoration: none; }

/* ═══ BLOG INDEX ══════════════════════════════════════════════════════════ */
.blog-hero { padding: 72px 0 48px; }
#hv-root h1.blog-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(34px, 4vw, 52px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.08; color: var(--rv-ink); margin: 18px 0 14px; max-width: 760px; text-wrap: pretty;
}
.blog-hero-sub { font-size: 17.5px; line-height: 1.6; color: var(--rv-body); max-width: 560px; }
.blog-filters { padding-top: 28px; gap: 8px; }
#hv-root .blog-filter-btn {
    padding: 8px 16px !important; border-radius: 999px !important;
    border: 1px solid var(--rv-border) !important; background: var(--rv-surface) !important; color: var(--rv-body) !important;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600;
    box-shadow: none !important; transition: background .16s, color .16s, border-color .16s, transform .16s;
}
#hv-root .blog-filter-btn:hover { border-color: var(--rv-primary-pale) !important; background: var(--rv-surface-4) !important; color: var(--rv-primary-deep) !important; }
#hv-root .blog-filter-btn.active, #hv-root .blog-filter-btn.active:hover {
    background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)) !important; border-color: transparent !important; color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(88, 80, 236, .7) !important;
}

.blog-body { background: var(--rv-page); padding: 56px 0 96px; }
.blog-grid { gap: 22px; }
.blog-card, .sp-rcard {
    background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: 22px;
    box-shadow: 0 18px 46px -30px rgba(22, 22, 29, .18);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s, border-color .3s;
}
.blog-card:hover, .sp-rcard:hover { transform: translateY(-4px); border-color: var(--rv-primary-pale); box-shadow: 0 26px 56px -30px rgba(80, 63, 205, .3); }
.blog-card-img, .sp-rcard-img, .blog-card-img-placeholder, .sp-rcard-img-ph { background: var(--rv-surface-5); }
.blog-card-img-placeholder, .sp-rcard-img-ph { background: linear-gradient(135deg, var(--rv-surface-4), var(--rv-surface-2)); color: var(--rv-primary-pale); }
.blog-card-body { padding: 22px 22px 20px; }
.blog-card-cat, .sp-rcard-cat { font-size: 10.5px; padding: 4px 10px; margin-bottom: 12px; }
#hv-root h2.blog-card-title, #hv-root h3.sp-rcard-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--rv-ink);
}
.blog-card:hover .blog-card-title, .sp-rcard:hover .sp-rcard-title { color: var(--rv-primary-deep); }
.blog-card-excerpt { font-size: 14.5px; line-height: 1.6; color: var(--rv-body); }
.blog-card-footer, .sp-rcard-foot { border-top: 1px solid var(--rv-border-soft); }
.blog-card-meta, .sp-rcard-date { color: var(--rv-muted); font-size: 12.5px; }
.blog-card-read, .sp-rcard-read { color: var(--rv-primary-deep); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; }

.blog-pagination a, .blog-pagination span {
    border-radius: 999px; border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-ink-soft);
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
}
.blog-pagination a:hover { border-color: var(--rv-primary-pale); background: var(--rv-surface-4); color: var(--rv-primary-deep); }
.blog-pagination span.active { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); border-color: transparent; color: #fff; }
.blog-empty { color: var(--rv-muted); }
.blog-empty svg { color: var(--rv-border); }
#hv-root .blog-empty h3 { color: var(--rv-ink); }

/* ═══ BLOG POST ═══════════════════════════════════════════════════════════ */
.sp-wrap { background: var(--rv-page); }
.sp-hero { display: flex; flex-direction: column; min-height: 0; }
.sp-hero-bg, .sp-hero-fade { display: none; }
.sp-hero-inner { order: 1; padding: 56px 0 40px; }
.sp-hero-img {
    order: 2; position: relative; inset: auto; z-index: 2;
    width: min(1200px, calc(100% - 64px)); height: auto; max-height: 460px; aspect-ratio: 21 / 9;
    margin: 0 auto 56px; border-radius: 26px; object-fit: cover; object-position: center;
    filter: none; opacity: 1; border: 1px solid var(--rv-border); box-shadow: 0 30px 70px -40px rgba(80, 63, 205, .45);
}
.sp-back { color: var(--rv-muted); }
.sp-back:hover { color: var(--rv-primary-deep); }
.sp-cat { margin-bottom: 18px; }
#hv-root .sp-hero h1.sp-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 3.6vw, 48px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.1; color: var(--rv-ink); max-width: 820px; margin: 0 0 22px; text-wrap: pretty;
}
.sp-hero-divider { background: var(--rv-gradient, linear-gradient(90deg, #5850ec, #8b5cf6)); }
.sp-meta-item { color: var(--rv-body); font-size: 13.5px; }
.sp-meta-item svg { opacity: .8; color: var(--rv-muted); }
.sp-meta-sep { background: var(--rv-border); width: 4px; height: 4px; }
.sp-author-avatar { border-color: transparent; box-shadow: 0 6px 14px -6px rgba(88, 80, 236, .7); }

.sp-body { background: var(--rv-page); padding: 64px 0 100px; }
.sp-excerpt {
    background: var(--rv-surface); border: 1px solid var(--rv-border); border-left: 4px solid var(--rv-primary);
    border-radius: 18px; color: var(--rv-ink-soft); font-size: 18px; box-shadow: 0 18px 46px -30px rgba(22, 22, 29, .18);
}
.sp-excerpt::before { color: var(--rv-primary); opacity: .18; }
.sp-content, .sp-plain { color: var(--rv-ink-soft); font-size: 17px; line-height: 1.8; }
#hv-root .sp-content :is(h1, h2, h3, h4, h5, h6) { color: var(--rv-ink); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.025em; }
.sp-content h1, .sp-content h2 { border-bottom-color: var(--rv-border); }
.sp-content h2::before, .sp-content h3::before { background: var(--rv-gradient, linear-gradient(180deg, #5850ec, #8b5cf6)); }
.sp-content a { color: var(--rv-primary-deep); }
.sp-content strong { color: var(--rv-ink); }
.sp-content blockquote { background: var(--rv-surface-2); border-left-color: var(--rv-primary); border-radius: 0 16px 16px 0; color: var(--rv-ink-soft); }
.sp-content code { background: var(--rv-surface-4); color: var(--rv-primary-deep); border-radius: 6px; }
.sp-content pre { background: var(--rv-ink-panel); border-radius: 18px; }
.sp-content img { border-radius: 18px; border: 1px solid var(--rv-border); }
.sp-content hr { border-color: var(--rv-border); }
.sp-content table { border-color: var(--rv-border); border-radius: 16px; overflow: hidden; }
.sp-content td, .sp-content th { border-color: var(--rv-border); }
.sp-content tr.sp-thead-row, .sp-content td.sp-th { background: var(--rv-primary); color: #fff; }
.sp-content tr.sp-thead-row *, .sp-content td.sp-th * { color: #fff !important; }   /* links/em/strong the editor puts in header cells */
.sp-content td.sp-th { border-color: rgba(255, 255, 255, .18); }
.sp-content ul li::before, .sp-content ol li::before { color: var(--rv-primary); }

.sp-footer { border-top: 1px solid var(--rv-border); }
#hv-root .sp-footer-back { border-radius: 999px; border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-ink-soft); font-family: 'Plus Jakarta Sans', sans-serif; }
#hv-root .sp-footer-back:hover { border-color: var(--rv-primary-pale); background: var(--rv-surface-4); color: var(--rv-primary-deep); }
.sp-share-label { color: var(--rv-muted); }
#hv-root .sp-share-btn { width: 40px; height: 40px; border-radius: 999px !important; border: 1px solid var(--rv-border) !important; background: var(--rv-surface) !important; color: var(--rv-body) !important; box-shadow: none !important; }
#hv-root .sp-share-btn:hover { border-color: var(--rv-primary-pale) !important; background: var(--rv-surface-4) !important; color: var(--rv-primary-deep) !important; transform: translateY(-2px); }

.sp-sidebar-card { background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: 20px; box-shadow: 0 18px 46px -30px rgba(22, 22, 29, .18); }
.sp-sidebar-head { background: var(--rv-surface-2); border-bottom-color: var(--rv-border-soft); color: var(--rv-muted); font-family: 'Plus Jakarta Sans', sans-serif; }
.sp-sidebar-head::before { background: var(--rv-gradient, linear-gradient(180deg, #5850ec, #8b5cf6)); }
.sp-toc-link { color: var(--rv-body); border-radius: 10px; }
.sp-toc-link:hover { background: var(--rv-surface-3); color: var(--rv-primary-deep); border-left-color: var(--rv-primary); }
.sp-toc-link.active, .sp-toc-link--h3.active { background: var(--rv-surface-4); color: var(--rv-primary-deep); border-left-color: var(--rv-primary); }
.sp-toc-link--h3 { color: var(--rv-muted); }
.sp-toc-link--h3:hover { color: var(--rv-primary-deep); border-left-color: var(--rv-primary); }

.sp-related { background: var(--rv-surface-2); border-top: 1px solid var(--rv-border); padding: 72px 0 96px; }
#hv-root h2.sp-related-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; color: var(--rv-ink); }
#hv-root .sp-related-all { border-radius: 999px; border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-ink-soft); font-family: 'Plus Jakarta Sans', sans-serif; }
#hv-root .sp-related-all:hover { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); border-color: transparent; color: #fff; }
.sp-rcard-body { padding: 20px 22px 22px; }

@media (max-width: 640px) {
    .blog-hero { padding: 48px 0 36px; }
    .sp-hero-inner { padding: 40px 0 28px; }
    .sp-hero-img { width: calc(100% - 32px); aspect-ratio: 16 / 9; border-radius: 18px; margin-bottom: 36px; }
}

/* ── dark ─────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .blog-hero, [data-theme="dark"] .sp-hero { background: var(--rv-page); border-bottom-color: var(--rv-border); }
[data-theme="dark"] .blog-hero-eyebrow, [data-theme="dark"] .sp-cat, [data-theme="dark"] .blog-card-cat, [data-theme="dark"] .sp-rcard-cat { background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .34); color: #c4b5fd; }
[data-theme="dark"] .blog-card, [data-theme="dark"] .sp-rcard, [data-theme="dark"] .sp-sidebar-card, [data-theme="dark"] .sp-excerpt { background: var(--rv-surface); border-color: var(--rv-border); box-shadow: none; }
[data-theme="dark"] .blog-card:hover, [data-theme="dark"] .sp-rcard:hover { border-color: var(--rv-primary-pale); box-shadow: 0 26px 56px -30px rgba(0, 0, 0, .8); }
[data-theme="dark"] .blog-card-read, [data-theme="dark"] .sp-rcard-read, [data-theme="dark"] .sp-content a, [data-theme="dark"] .sp-toc-link.active, [data-theme="dark"] .sp-toc-link--h3.active, [data-theme="dark"] .sp-content code { color: #c4b5fd; }
[data-theme="dark"] .sp-toc-link.active, [data-theme="dark"] .sp-toc-link--h3.active { background: rgba(139, 92, 246, .16); }
[data-theme="dark"] .sp-content code { background: rgba(139, 92, 246, .16); }
[data-theme="dark"] .sp-hero-img { border-color: var(--rv-border); box-shadow: none; }
[data-theme="dark"] .sp-related { background: var(--rv-surface-2); }
[data-theme="dark"] #hv-root .blog-filter-btn, [data-theme="dark"] .blog-pagination a, [data-theme="dark"] .blog-pagination span, [data-theme="dark"] #hv-root .sp-footer-back, [data-theme="dark"] #hv-root .sp-share-btn, [data-theme="dark"] #hv-root .sp-related-all { background: var(--rv-surface) !important; border-color: var(--rv-border) !important; color: var(--rv-body) !important; }
[data-theme="dark"] #hv-root .blog-filter-btn.active, [data-theme="dark"] .blog-pagination span.active { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)) !important; color: #fff !important; border-color: transparent !important; }
[data-theme="dark"] .sp-content tr.sp-thead-row, [data-theme="dark"] .sp-content td.sp-th { background: #5b4dd1; color: #fff; }

/* phones: editor tables are wider than the screen — scroll them inside the article instead of the page */
.sp-content .sp-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
    .sp-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .sp-content table td, .sp-content table th { white-space: normal; min-width: 140px; }
    .sp-content pre { max-width: 100%; overflow-x: auto; }
    .sp-content img, .sp-content iframe, .sp-content video { max-width: 100%; height: auto; }
}

/* ── Related-post card titles (2026-09-15): the two-line clamp sat inside a box
   with padding-bottom:16px, so the top of a THIRD line showed in that padding
   and was sliced by the divider below (worst on phones, where titles wrap
   more). The spacing now lives outside the clipped box and the box height is
   exactly two lines. ── */
#hv-root h3.sp-rcard-title, #hv-root .sp-rel-title {
    padding-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-height: calc(2em * 1.3);
}
#hv-root h3.sp-rcard-title { margin: 0 0 16px; line-height: 1.3; }
#hv-root .sp-rel-title { line-height: 1.38; max-height: calc(2em * 1.38); }
/* blog index cards: same guard in case a long title meets a narrow card */
#hv-root h2.blog-card-title { padding-bottom: 0; overflow-wrap: anywhere; }