/* =============================================================
   Smart Graphix v2 — blog only (blog.html + blog/*.html)
   Added 8 Nov 2026: full-width posts with a sidebar, figures,
   code blocks, topic filter on the blog index. Loaded after v2-sg.css.
   ============================================================= */

/* ---------- Figures and code inside articles ---------- */
.v2-figure { margin: 28px 0 32px; }
.v2-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--v2-border); border-radius: 10px; background: var(--v2-surface); }
.v2-figure figcaption { font-size: 13px; line-height: 1.6; color: var(--v2-text-muted); margin-top: 10px; }
.v2-article-body code { font-family: Consolas, Monaco, 'Courier New', monospace; font-size: .88em; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 4px; padding: 1px 5px; color: var(--v2-white); white-space: normal; overflow-wrap: anywhere; }
.v2-article-body pre.v2-code { background: var(--v2-surface); border: 1px solid var(--v2-border); border-left: 3px solid var(--v2-accent); border-radius: 0; padding: 18px 20px; margin: 0 0 20px; overflow-x: auto; max-width: 100%; }
.v2-article-body pre.v2-code code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.65; color: #e8e8e8; white-space: pre; word-break: normal; }

/* ---------- Article + sticky sidebar ----------
   Posts use the full content width, like the service pages (Alin, 8 Nov 2026).
   Only the privacy page keeps the narrow 880px column (it doesn't load this file). */
.v2-article-inner.v2-article-layout { max-width: none; }
.v2-side { display: none; }
@media (min-width: 1100px) {
  .v2-article-inner.v2-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: clamp(56px, 5vw, 96px);
    align-items: start;
  }
  .v2-article-main { min-width: 0; }
  .v2-side { display: block; }
}
/* Sticky only when the whole sidebar fits on screen */
@media (min-width: 1100px) and (min-height: 880px) {
  .v2-side { position: sticky; top: calc(var(--v2-nav-height, 75px) + 28px); }
}
.v2-side-block { border-top: 1px solid var(--v2-border); padding: 18px 0 20px; }
.v2-side-title { font-family: 'Open Sans', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--v2-accent) !important; margin: 0 0 14px !important; line-height: 1.4 !important; text-align: left !important; }
.v2-side ul { list-style: none; padding: 0; margin: 0; }
.v2-side-topics li + li { margin-top: 2px; }
.v2-side-topics a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 15px; color: var(--v2-white); text-decoration: none; }
.v2-side-topics a span { font-size: 12px; color: var(--v2-text-muted); }
.v2-side-topics a:hover, .v2-side-topics a:focus-visible { color: var(--v2-accent); }
.v2-side-latest li + li { margin-top: 12px; }
.v2-side-latest a { display: block; font-size: 14px; line-height: 1.45; color: var(--v2-white); text-decoration: none; }
.v2-side-latest a:hover, .v2-side-latest a:focus-visible { color: var(--v2-accent); }
.v2-side-latest span { display: block; font-size: 12px; color: var(--v2-text-muted); margin-top: 3px; }
.v2-side-cta { background: var(--v2-surface); border: 1px solid var(--v2-border); padding: 20px 22px 22px; margin-top: 4px; }
.v2-side-cta p { font-size: 14px; line-height: 1.6; color: #e8e8e8; margin: 0 0 14px; }
.v2-side-cta p strong { color: var(--v2-white); }
.v2-side-cta a { display: inline-flex; align-items: center; gap: 8px; background: var(--v2-accent); color: #0a0a0a !important; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding: 11px 16px; border-radius: 4px; }
.v2-side-cta a:hover, .v2-side-cta a:focus-visible { background: #fff; }

/* ---------- Blog index: topic chips + filter ---------- */
.v2-topic-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.v2-topic-chips a { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v2-white); text-decoration: none; border: 1px solid var(--v2-border); border-radius: 999px; padding: 8px 15px; transition: border-color .2s, color .2s; }
.v2-topic-chips a span { color: var(--v2-text-muted); font-weight: 400; margin-left: 4px; }
.v2-topic-chips a:hover, .v2-topic-chips a:focus-visible { border-color: var(--v2-accent); color: var(--v2-accent); }
.v2-topic-chips a[aria-current="true"] { background: var(--v2-accent); border-color: var(--v2-accent); color: #0a0a0a; }
.v2-topic-chips a[aria-current="true"] span { color: #0a0a0a; }
.v2-post-topic { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v2-text-muted); text-decoration: none; border: 1px solid var(--v2-border); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; }
.v2-post-topic:hover, .v2-post-topic:focus-visible { color: var(--v2-accent); border-color: var(--v2-accent); }
/* Cards draw their own 1px lines so empty cells stay black when filtered */
.v2-post-grid.v2-post-grid-filterable { background: var(--v2-bg); border-color: transparent; }
.v2-post-grid-filterable .v2-post-card { outline: 1px solid var(--v2-border); }
.v2-post-card[hidden] { display: none !important; }