/* ============================================================
   blog-2026.css: the guide/blog layer for the 2026 theme.

   Loads AFTER css/home-2026.css and css/page-2026.css and depends
   on their tokens (--eug-ink, --eug-border, --eug-blue, --eug-game,
   --eug-font-display, --eug-radius-card, --eug-shell). Prose,
   tables, step lists, callouts and the closing CTA already exist in
   page-2026.css, so nothing here redefines them: this file adds only
   what a long-form post needs on top.

     .eug-bhero*  editorial hero, split copy + a data figure
     .eug-bmeta*  category / updated / read-time byline row
     .eug-bquick  the quick-answer box (featured-snippet target)
     .eug-btake   key takeaways
     .eug-bfig*   in-article figure frames
     .eug-bsteps  numbered walkthrough
     .eug-bkv     key/value reference rows
     .eug-bnote   inline aside
     .eug-brel*   related posts
     .eug-bhub*   the guides index

   Mobile-first. Every block is single-column by default and only
   becomes multi-column at a breakpoint.
   ============================================================ */

/* ---------- editorial hero ---------- */
.eug-bhero { position:relative; overflow:hidden;
  border-bottom:1px solid var(--eug-border);
  background:
    radial-gradient(ellipse 70% 60% at 80% 34%, rgba(69,199,255,0.15), transparent 68%),
    radial-gradient(ellipse 60% 70% at 8% 92%, rgba(20,124,255,0.13), transparent 70%),
    linear-gradient(180deg, #0A1521 0%, #08111B 60%, var(--eug-canvas) 100%); }
.eug-bhero-inner { display:grid; grid-template-columns:1fr; gap:34px;
  align-items:center; padding:38px 0 44px; }
@media (min-width:1000px) {
  .eug-bhero-inner { grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    gap:52px; padding:52px 0 58px; }
}
/* Grid items default to min-width:auto, so a wide figure would stretch
   the track and scroll the whole page sideways. */
.eug-bhero-inner > * { min-width:0; }

.eug-bcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:0 0 18px; padding:0; list-style:none; font-size:0.8rem; }
.eug-bcrumbs li { display:inline-flex; align-items:center; gap:10px; }
.eug-bcrumbs li + li::before { content:"/"; color:var(--eug-border); }
.eug-bcrumbs a { color:var(--eug-muted); transition:color .16s; }
.eug-bcrumbs a:hover { color:var(--eug-blue); }
.eug-bcrumbs a:focus-visible { outline:2px solid var(--eug-blue); outline-offset:3px; border-radius:3px; }
.eug-bcrumbs [aria-current="page"] { color:var(--eug-frost); }

.eug-bhero-kicker { display:inline-flex; align-items:center; gap:9px;
  margin:0 0 15px; padding:6px 14px;
  border:1px solid var(--eug-border-blue); border-radius:999px;
  background:rgba(69,199,255,0.08);
  font-family:var(--eug-font-display); font-size:0.76rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--eug-game); }
.eug-bhero-kicker i { font-size:0.9em; }

.eug-bhero h1 { margin:0 0 16px; max-width:24ch;
  font-family:var(--eug-font-display); font-weight:700; line-height:1.07;
  letter-spacing:-0.01em; color:#fff;
  /* has to stay readable on a 320px screen rather than fill it */
  font-size:clamp(1.8rem, 5vw, 3rem); }
.eug-bhero h1 .eug-grad { background:var(--eug-beam); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.eug-bstand { margin:0; max-width:60ch; font-size:1.04rem; line-height:1.68;
  color:#e2ecf6; }

/* byline row: category, last updated, reading time */
.eug-bmeta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  margin:22px 0 0; padding:0; list-style:none;
  font-size:0.82rem; color:var(--eug-muted); }
.eug-bmeta li { display:inline-flex; align-items:center; gap:8px; }
.eug-bmeta i { color:var(--eug-blue); font-size:0.88em; }
.eug-bmeta time { color:var(--eug-frost); }

.eug-bchips { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0; padding:0; list-style:none; }
.eug-bchip { display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid var(--eug-border); border-radius:8px;
  background:rgba(255,255,255,0.02);
  font-size:0.83rem; line-height:1.3; color:#d3e2f0; }
.eug-bchip i { color:var(--eug-accent); font-size:0.85em; }

.eug-bhero-art { width:100%; }
.eug-bhero-art svg { display:block; width:100%; height:auto;
  filter:drop-shadow(0 22px 52px rgba(0,0,0,0.5)); }

/* ---------- quick answer ---------- */
/* The short, complete answer, high on the page. Search engines lift this
   for the snippet and readers who only wanted the one fact can leave. */
.eug-bquick { margin:0 0 30px; padding:22px 24px;
  border:1px solid var(--eug-border-blue); border-left-width:3px;
  border-radius:var(--eug-radius-card);
  background:linear-gradient(120deg, rgba(69,199,255,0.07), rgba(69,199,255,0.02)); }
.eug-bquick h2 { margin:0 0 10px !important; padding:0;
  font-family:var(--eug-font-display); font-size:0.76rem !important; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--eug-blue); }
.eug-bquick p { margin:0 !important; font-size:1.02rem !important; line-height:1.7;
  color:var(--eug-frost) !important; }
.eug-bquick p + p { margin-top:10px !important; }

/* ---------- key takeaways ---------- */
.eug-btake { margin:0 0 34px; padding:22px 24px;
  border:1px solid var(--eug-border); border-radius:var(--eug-radius-card);
  background:var(--eug-ink); }
.eug-btake h2 { display:flex; align-items:center; gap:10px;
  margin:0 0 14px !important; font-family:var(--eug-font-display);
  font-size:0.98rem !important; font-weight:700; color:#fff; }
.eug-btake h2 i { color:var(--eug-accent); font-size:0.9em; }
.eug-btake ul { margin:0 !important; padding:0 !important; list-style:none; }
.eug-btake li { position:relative; margin:0 !important; padding:8px 0 8px 26px;
  border-top:1px solid var(--eug-border);
  font-size:0.94rem !important; line-height:1.62; color:var(--eug-muted); }
.eug-btake li:first-child { border-top:0; }
.eug-btake li::before { content:""; position:absolute; left:4px; top:17px;
  width:8px; height:8px; border-radius:2px;
  background:var(--eug-blue); transform:rotate(45deg); }

/* ---------- in-article figures ---------- */
.eug-bfig { margin:28px 0 0; }
.eug-bfig svg { display:block; width:100%; height:auto; }
.eug-bfig img { display:block; width:100%; max-width:100%; height:auto;
  border:1px solid var(--eug-border); border-radius:var(--eug-radius-card); }
.eug-bfig.is-narrow img { width:auto; max-width:min(100%, 430px); }
.eug-bfig-frame { padding:18px; border:1px solid var(--eug-border);
  border-radius:var(--eug-radius-card); background:var(--eug-ink); }
.eug-bfig figcaption { margin:12px 0 0; font-size:0.84rem; line-height:1.58;
  color:var(--eug-muted); }

/* ---------- numbered walkthrough ---------- */
.eug-bsteps { margin:28px 0 0 !important; padding:0 !important; list-style:none;
  counter-reset:bstep; }
.eug-bsteps > li { counter-increment:bstep; position:relative;
  margin:0 !important; padding:0 0 26px 54px;
  border-left:1px solid var(--eug-border); }
.eug-bsteps > li:last-child { padding-bottom:0; border-left-color:transparent; }
.eug-bsteps > li::before { content:counter(bstep);
  position:absolute; left:-19px; top:-2px;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--eug-border-blue); background:var(--eug-deep-navy);
  font-family:var(--eug-font-display); font-size:1.02rem; font-weight:800;
  color:var(--eug-blue); }
.eug-bsteps h3 { margin:6px 0 8px !important; font-family:var(--eug-font-display);
  font-size:1.06rem !important; font-weight:700; color:#fff; }
.eug-bsteps p, .eug-bsteps li li { font-size:0.96rem !important; }
.eug-bsteps ul, .eug-bsteps ol { margin-top:0.7em !important; }

/* ---------- key/value reference rows ---------- */
.eug-bkv { margin:26px 0 0 !important; border:1px solid var(--eug-border);
  border-radius:var(--eug-radius-card); overflow:hidden; }
.eug-bkv > div { display:grid; grid-template-columns:1fr; gap:2px 0;
  padding:14px 18px; background:var(--eug-ink);
  border-top:1px solid var(--eug-border); }
.eug-bkv > div:first-child { border-top:0; }
@media (min-width:640px) {
  .eug-bkv > div { grid-template-columns:minmax(0,200px) minmax(0,1fr);
    gap:0 22px; align-items:baseline; }
}
.eug-bkv dt { margin:0; font-family:var(--eug-font-display); font-size:0.94rem;
  font-weight:700; color:var(--eug-frost); }
.eug-bkv dd { margin:0; font-size:0.93rem; line-height:1.6; color:var(--eug-muted);
  overflow-wrap:anywhere; }

/* ---------- inline aside ---------- */
.eug-bnote { display:flex; gap:14px; margin:26px 0 0; padding:18px 20px;
  border:1px solid var(--eug-border); border-left:3px solid var(--eug-accent);
  border-radius:var(--eug-radius-card); background:var(--eug-ink); }
.eug-bnote i { flex:none; margin-top:3px; color:var(--eug-accent); }
.eug-bnote p { margin:0 !important; font-size:0.94rem !important; line-height:1.66;
  color:var(--eug-frost) !important; }
.eug-bnote p + p { margin-top:9px !important; }
.eug-bnote.is-warn { border-left-color:#FFB84D; }
.eug-bnote.is-warn i { color:#FFB84D; }

/* ---------- related posts ---------- */
.eug-brel { border-top:1px solid var(--eug-border); background:var(--eug-canvas); }
.eug-brel-head { margin:0 0 24px; }
.eug-brel-head h2 { margin:0; font-family:var(--eug-font-display);
  font-size:clamp(1.3rem,3vw,1.7rem); font-weight:700; color:#fff; }
.eug-brel-head p { margin:10px 0 0; font-size:0.96rem; color:var(--eug-muted); }
.eug-brel-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:700px)  { .eug-brel-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px) { .eug-brel-grid { grid-template-columns:repeat(3,1fr); } }
.eug-brel-card { display:flex; flex-direction:column; gap:9px;
  padding:20px 22px; border:1px solid var(--eug-border);
  border-radius:var(--eug-radius-card); background:var(--eug-ink);
  transition:border-color .18s ease, transform .18s ease; }
.eug-brel-card:hover { border-color:var(--eug-border-blue); transform:translateY(-2px); }
.eug-brel-card:focus-visible { outline:2px solid var(--eug-blue); outline-offset:3px; }
.eug-brel-cat { font-family:var(--eug-font-display); font-size:0.7rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--eug-blue); }
.eug-brel-card h3 { margin:0; font-family:var(--eug-font-display); font-size:1.04rem;
  font-weight:700; line-height:1.34; color:#fff; }
.eug-brel-card p { margin:0; font-size:0.89rem; line-height:1.6; color:var(--eug-muted); }
.eug-brel-go { margin-top:auto; padding-top:4px; font-size:0.84rem; font-weight:600;
  color:var(--eug-blue); }
.eug-brel-go i { margin-left:6px; font-size:0.8em; transition:transform .18s ease; }
.eug-brel-card:hover .eug-brel-go i { transform:translateX(3px); }

/* ---------- guides index ---------- */
.eug-bhub-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin:30px 0 0; border:1px solid var(--eug-border);
  border-radius:var(--eug-radius-card); background:var(--eug-border); overflow:hidden; }
@media (min-width:760px) { .eug-bhub-stats { grid-template-columns:repeat(4,1fr); } }
.eug-bhub-stats > div { padding:16px 18px; background:var(--eug-ink); }
.eug-bhub-stats dt { margin:0 0 5px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--eug-muted); }
.eug-bhub-stats dd { margin:0; font-family:var(--eug-font-display); font-size:1.4rem;
  font-weight:800; line-height:1.15; color:#fff; }

.eug-bhub-nav { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px; }
.eug-bhub-tab { display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border:1px solid var(--eug-border); border-radius:10px;
  background:var(--eug-ink); font-family:var(--eug-font-display);
  font-size:0.92rem; font-weight:700; color:var(--eug-frost);
  transition:border-color .18s ease, color .18s ease; }
.eug-bhub-tab:hover { border-color:var(--eug-border-blue); color:var(--eug-blue); }
.eug-bhub-tab:focus-visible { outline:2px solid var(--eug-blue); outline-offset:3px; }
.eug-bhub-tab span { padding:1px 8px; border-radius:99px;
  background:rgba(69,199,255,0.13); font-size:0.76rem; color:var(--eug-blue); }

.eug-bhub-group + .eug-bhub-group { margin-top:52px; }
.eug-bhub-ghead { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px;
  padding-bottom:14px; margin-bottom:2px; border-bottom:1px solid var(--eug-border); }
.eug-bhub-ghead h2 { margin:0; font-family:var(--eug-font-display);
  font-size:clamp(1.25rem,2.8vw,1.6rem); font-weight:700; color:#fff; }
.eug-bhub-ghead p { flex:1 1 100%; margin:6px 0 0; font-size:0.95rem;
  line-height:1.62; color:var(--eug-muted); }
.eug-bhub-ghead a { font-size:0.86rem; font-weight:600; color:var(--eug-blue); }

.eug-bhub-list { margin:0; padding:0; list-style:none; }
.eug-bhub-list li { border-bottom:1px solid var(--eug-border); }
.eug-bhub-row { display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:4px 16px; padding:18px 4px;
  transition:background .16s ease, padding-left .16s ease; }
.eug-bhub-row:hover { background:rgba(69,199,255,0.04); padding-left:12px; }
.eug-bhub-row:focus-visible { outline:2px solid var(--eug-blue); outline-offset:-2px; }
.eug-bhub-mark { grid-row:1 / span 2; display:flex; align-items:center;
  justify-content:center; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--eug-border); background:var(--eug-interactive);
  color:var(--eug-blue); font-size:0.98rem; }
.eug-bhub-row:hover .eug-bhub-mark { border-color:var(--eug-border-blue); }
.eug-bhub-title { margin:0; font-family:var(--eug-font-display); font-size:1.04rem;
  font-weight:700; line-height:1.34; color:#fff; }
.eug-bhub-desc { margin:0; font-size:0.89rem; line-height:1.58; color:var(--eug-muted); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .eug-brel-card, .eug-bhub-row, .eug-bhub-tab, .eug-brel-go i,
  .eug-bcrumbs a { transition:none !important; }
  .eug-brel-card:hover { transform:none; }
  .eug-bhub-row:hover { padding-left:4px; }
}