/* /blog, /blog/category and /blog/:slug (services/seo/blog.js) plus the
   infographic cards inside posts (services/seo/blogCards.js). System components
   only: .card / .card-head / .card-body, .card-kpi, .badge, .btn,
   .ark-seg.seg-chips. This file PLACES them and styles the page-own pieces
   (post rows, article typography, infographics). Square corners, tokens only,
   no gradients, glows or lift. Owner 2026-11-01: legacy pages onto the system.
   Generated cover images stay as they are; only the chrome around them moved. */

/* ── Shell: content column + sticky Events rail ── */
.blog-page .hub-shell { max-width: 1440px; }
.blog-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.blog-content { min-width: 0; }
.blog-head { padding: 4px 0 14px; }
.blog-head h1 { margin: 8px 0 8px; }
.blog-head .lede { margin: 0; max-width: 760px; }

/* ── Events rail ── */
.blog-rail { position: sticky; top: 14px; }
.blog-rail .card-head h3 { display: flex; align-items: center; gap: 8px; }
.blog-live { display: inline-flex; align-items: center; gap: 6px; }
.blog-live i { width: 7px; height: 7px; background: var(--bull); animation: blog-pulse 1.4s ease-in-out infinite; }
.blog-rail .card-head small.blog-live { color: var(--bull); }
.blog-rail-scroll { max-height: calc(100vh - 110px); overflow: auto; padding: 10px; }
.blog-rail .evf-block { margin: 0; max-width: none; }
.blog-rail .evf-headline, .blog-rail .evf-cta { display: none; }
.blog-rail .evf-list { grid-template-columns: 1fr; gap: 8px; }
@keyframes blog-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .blog-live i { animation: none; } }

/* ── Index: filters + post list ── */
.blog-filters { margin: 0 0 14px; }
.blog-filters .ark-seg-btn { text-decoration: none; }
.blog-list { display: flex; flex-direction: column; gap: 12px; }
.blog-entry { margin: 0; }
.blog-item { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px; color: inherit; text-decoration: none; }
.blog-item:hover { background: var(--sel-hover); }
.blog-item:hover h2 { color: var(--sel-ink); }
.blog-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.blog-item.no-viz { grid-template-columns: minmax(0, 1fr); }
.blog-viz { min-width: 0; }
.blog-viz img { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.blog-viz .bc { margin: 0; }
.blog-viz .bc-value { font-size: 24px; }
.blog-viz .bc-flow-amt { font-size: 20px; }
.blog-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-meta .badge .mat-ic { width: 12px; height: 12px; }
.blog-date { color: var(--text-lo); font: 500 11px var(--mono); }
.blog-item h2 { margin: 0; color: var(--text-hi); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.blog-sum { margin: 0; color: var(--text-md); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-read { color: var(--sel-ink); font-size: 13px; font-weight: 600; }

/* Latest post leads: cover on top at full width, bigger title. */
.blog-entry.is-lead .blog-item { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.blog-entry.is-lead .blog-item h2 { font-size: 22px; line-height: 1.22; }
.blog-entry.is-lead .blog-sum { -webkit-line-clamp: 4; font-size: 14px; }
.blog-entry.is-lead .blog-viz .bc-value { font-size: 32px; }

.blog-empty .card-body { color: var(--text-md); font-size: 13px; }

/* Index closing CTA (replaces the shell's legacy conversion band on blog pages). */
.blog-band { margin-top: 16px; }
.blog-band .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.blog-band-txt { flex: 1 1 320px; min-width: 0; }
.blog-band-txt p { margin: 0; color: var(--text-md); font-size: 13.5px; line-height: 1.55; }
.blog-band-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ── Post ── */
.blog-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; color: var(--text-lo); font: 500 11.5px var(--mono); }
.blog-crumbs a { color: var(--sel-ink); text-decoration: none; }
.blog-crumbs a:hover { text-decoration: underline; }
.blog-crumbs span:last-child { min-width: 0; overflow-wrap: anywhere; }
.blog-post { min-width: 0; max-width: 820px; }
.blog-post > .badge .mat-ic { width: 12px; height: 12px; }
.blog-post h1 { margin: 10px 0 10px; overflow-wrap: anywhere; }
.blog-post h1 a { color: inherit; text-decoration: underline; text-decoration-color: var(--sel-frame); text-underline-offset: 4px; }
.blog-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 14px; color: var(--text-lo); font: 500 12px var(--mono); }
.blog-byline .verified { display: inline-flex; align-items: center; gap: 4px; color: var(--sel-ink); }
.blog-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.blog-share .btn svg { width: 14px; height: 14px; }
.blog-img { display: block; width: 100%; height: auto; margin: 0 0 18px; border: 1px solid var(--border); }
.blog-toc { margin: 0 0 18px; }
.blog-toc ol { margin: 0; padding: 12px 16px 12px 34px; display: flex; flex-direction: column; gap: 6px; }
.blog-toc a { color: var(--sel-ink); font-size: 13.5px; text-decoration: none; }
.blog-toc a:hover { text-decoration: underline; }
.blog-secondary { margin: 6px 0 18px; }

/* Article typography (also the admin editor preview). */
.blog-body { color: var(--text-md); font-size: 15px; line-height: 1.75; overflow-wrap: break-word; }
.blog-body p { margin: 0 0 14px; }
.blog-body > p:first-of-type { color: var(--text-hi); }
.blog-body a { color: var(--sel-ink); text-decoration: none; }
.blog-body a:hover { text-decoration: underline; }
.blog-body strong { color: var(--text-hi); font-weight: 600; }
.blog-body em { font-style: italic; }
.blog-body h2 { margin: 28px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-hi); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; scroll-margin-top: 90px; }
.blog-body h3 { margin: 22px 0 8px; color: var(--text-hi); font-size: 16px; font-weight: 600; }
.blog-body h4 { margin: 18px 0 6px; color: var(--text-hi); font-size: 14px; font-weight: 600; }
.blog-body ul, .blog-body ol { margin: 0 0 16px; padding-left: 22px; }
.blog-body li { margin: 0 0 8px; line-height: 1.65; }
.blog-body li::marker { color: var(--sel-ink); }
.blog-body code { padding: 1px 5px; background: var(--bg-card2); color: var(--text-hi); font: 500 13px var(--mono); }
.blog-body blockquote { margin: 18px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--bg-card2); color: var(--text-hi); }
.blog-body blockquote p:last-child { margin-bottom: 0; }
.blog-body hr { margin: 22px 0; border: 0; border-top: 1px solid var(--border); }
.blog-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); }
.blog-body figure { margin: 16px 0; }
.blog-body figure img { width: 100%; }
.blog-body figcaption { margin-top: 6px; color: var(--text-lo); font-size: 12px; text-align: center; }
.blog-body .blog-table { max-width: 100%; margin: 0 0 18px; overflow-x: auto; border: 1px solid var(--border); }
.blog-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.blog-body > table { margin: 0 0 18px; border: 1px solid var(--border); }
.blog-body th, .blog-body td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.blog-body thead th { background: var(--bg-card2); color: var(--text-lo); font: 600 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.blog-body tbody tr:last-child td { border-bottom: 0; }
.blog-body td:first-child { color: var(--text-hi); font-weight: 600; }

/* Post footer: one primary action into the product + secondary links. */
.blog-foot { margin-top: 24px; }
.blog-foot .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Related posts: list rows inside one card (same row pattern as /learn). */
.blog-related { margin-top: 16px; }
.blog-rel-list { margin: 0; padding: 0; list-style: none; }
.blog-rel-list li + li { border-top: 1px solid var(--border); }
.blog-rel { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 12px 16px; color: inherit; text-decoration: none; }
.blog-rel:hover { background: var(--sel-hover); }
.blog-rel b { color: var(--text-hi); font-size: 14px; font-weight: 600; line-height: 1.35; }
.blog-rel .blog-go { width: 18px; height: 18px; color: var(--text-lo); }
.blog-rel .badge .mat-ic { width: 12px; height: 12px; }

@media (max-width: 980px) {
  .blog-shell { display: flex; flex-direction: column; align-items: stretch; }
  .blog-rail { position: static; }
  .blog-rail-scroll { max-height: none; }
  .blog-post { max-width: none; }
}
@media (max-width: 720px) {
  .blog-head .lede { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .blog-entry.is-lead .blog-item h2 { font-size: 19px; }
  .blog-item h2 { font-size: 16px; }
  .blog-rel { grid-template-columns: minmax(0, 1fr) 18px; padding: 12px; }
  .blog-rel .badge { grid-column: 1; grid-row: 2; justify-self: start; }
  .blog-rel .blog-go { grid-column: 2; grid-row: 1 / span 2; }
  .blog-body { font-size: 14.5px; }
}

/* @blog-cards start: infographic cards inside posts (services/seo/blogCards.js
   reads this block for the admin editor, so it stays the one copy). */
.bc { position: relative; margin: 0 0 18px; padding: 16px 16px 16px 19px; border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; }
.bc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bc-accent, var(--accent)); }
.bc-eyebrow { margin-bottom: 8px; color: var(--text-lo); font: 600 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.bc-value { color: var(--text-hi); font: 700 32px var(--mono); letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bc-label { margin-top: 6px; color: var(--text-md); font-size: 13px; }
.bc-sub { margin-top: 10px; color: var(--text-lo); font: 500 11px var(--mono); }
.bc-spark { display: block; margin-top: 12px; }
.bc-title { margin-bottom: 12px; color: var(--text-hi); font-size: 14px; font-weight: 600; }
.bc-flow-amt { color: var(--text-hi); font: 700 24px var(--mono); letter-spacing: -.03em; overflow-wrap: anywhere; }
.bc-flow-amt span { color: var(--text-md); font-size: 16px; }
.bc-flow-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.bc-node { padding: 4px 8px; border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-hi); font-size: 13px; font-weight: 600; }
.bc-arrow { color: var(--bc-accent, var(--accent)); font: 700 18px var(--mono); }
.bc-row { margin: 10px 0; }
.bc-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.bc-row-label { min-width: 0; color: var(--text-hi); font-size: 13px; font-weight: 500; }
.bc-row-val { flex: none; color: var(--text-md); font: 500 12px var(--mono); }
.bc-track { height: 8px; background: var(--bg-input); overflow: hidden; }
.bc-fill { display: block; height: 100%; }
.bc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 18px; }
.bc-strip .card-kpi .kpi-value { overflow-wrap: anywhere; }
.bc-strip .kpi-label { display: flex; align-items: center; gap: 6px; }
.bc-strip .kpi-label i { flex: none; width: 8px; height: 8px; background: var(--bc-accent, var(--accent)); }
.bc-tl { margin: 4px 0 0; padding: 0; list-style: none; }
.bc-tl-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0 8px 16px; }
.bc-tl-item::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.bc-tl-item::after { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); background: var(--bc-accent, var(--accent)); }
.bc-tl-item:first-child::before { top: 50%; }
.bc-tl-item:last-child::before { bottom: 50%; }
.bc-tl-time { color: var(--text-lo); font: 500 11px var(--mono); }
.bc-tl-label { min-width: 0; color: var(--text-hi); font-size: 13px; }
.bc-tl-val { color: var(--text-hi); font: 700 13px var(--mono); white-space: nowrap; }
@media (max-width: 720px) {
  .bc-value { font-size: 28px; }
  .bc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* @blog-cards end */