/* ==========================================================================
   iGO Insights — editorial upgrade layer  (igo-insights.css)
   --------------------------------------------------------------------------
   SCOPED, ADDITIVE. Loads AFTER igo-design-system.css. It does NOT redefine
   any brand token, font or global component — it only adds NEW `.ig-*`
   classes (hero banners, living-visual hosts, reading rhythm) and lightly
   refines the Insights reading column. Safe to ship site-wide; nothing here
   leaks outside `.ig-listing` / `.ig-article` scopes except the shared
   `.igo-visual` host, which is inert until the visuals script runs.

   Hue scope classes set per-topic accent + glow for scrims/labels:
     .ig--green .ig--amber .ig--orange .ig--blue .ig--violet .ig--chrome
   ========================================================================== */

/* Reassert the brand background. Some editor/preview harnesses inject a
   trailing `html,body{background:transparent}` for compositing, which would
   otherwise let the page fall back to white. This locks it to the brand
   token (identical colour to igo-design-system.css) so the dark theme holds
   in the editor and in production alike. */
html,body{background:var(--bg,#3A404C)!important}

/* ---------- per-topic hue tokens (restrained, inside brand range) ---------- */
.ig--green  { --ig-accent:#4FBC78; --ig-glow:79,188,120;  --ig-soft:rgba(79,188,120,0.12); }
.ig--amber  { --ig-accent:#DEB87C; --ig-glow:201,147,82;  --ig-soft:rgba(201,147,82,0.13); }
.ig--orange { --ig-accent:#FB923C; --ig-glow:249,115,22;  --ig-soft:rgba(249,115,22,0.13); }
.ig--blue   { --ig-accent:#93C5FD; --ig-glow:59,130,246;  --ig-soft:rgba(59,130,246,0.13); }
.ig--violet { --ig-accent:#A78BFA; --ig-glow:139,92,246;  --ig-soft:rgba(139,92,246,0.13); }
.ig--chrome { --ig-accent:#C8CFEA; --ig-glow:150,172,205; --ig-soft:rgba(150,172,205,0.12); }

/* =================================================================
   THE LIVING VISUAL HOST  (replaces the old static "article image")
   ================================================================= */
.igo-visual{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-lg,16px);
  background:#1B1F27;            /* matches canvas base — no flash */
  isolation:isolate;
}
/* No-JS / pre-paint fallback: a calm on-brand gradient so the banner is
   never an empty box. The <canvas> paints over this once it mounts. */
.igo-visual::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 80% at 22% 8%, rgba(var(--ig-glow,79,188,120),0.20), transparent 60%),
    radial-gradient(ellipse 60% 70% at 88% 100%, rgba(var(--ig-glow,79,188,120),0.10), transparent 60%),
    linear-gradient(180deg,#1B1F27,#15181F);
}
.igo-visual canvas{ position:relative; z-index:1; display:block; }
.igo-visual--ready::before{ opacity:0; transition:opacity .6s ease; }

/* tiny "interactive" affordance chip, opt-in via .igo-visual[data-igo-hint] */
.igo-visual[data-igo-hint]::after{
  content:attr(data-igo-hint);
  position:absolute; z-index:2; right:12px; bottom:12px;
  font-family:var(--mono,monospace); font-size:0.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted2,#C1C5D0);
  background:rgba(20,23,30,0.55); border:1px solid var(--border,rgba(255,255,255,0.12));
  backdrop-filter:blur(6px);
  padding:5px 10px; border-radius:999px;
  opacity:.0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.igo-visual:hover[data-igo-hint]::after{ opacity:.85; transform:none; }

/* reading-progress bar (shared, fixed) */
.ig-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--ig-accent,#4FBC78),rgba(var(--ig-glow,79,188,120),0.4));
  box-shadow:0 0 12px rgba(var(--ig-glow,79,188,120),0.5);transition:width .12s linear}

/* =================================================================
   LISTING PAGE  (.ig-listing)
   ================================================================= */
.ig-listing .ig-hero{padding:64px 28px 26px;text-align:center;position:relative}
.ig-listing .ig-hero .page-eyebrow{margin-bottom:22px}
.ig-listing .ig-hero .page-title{font-size:clamp(2.3rem,5.4vw,3.6rem)!important;line-height:1.02;margin-bottom:14px}
.ig-listing .ig-hero .page-sub{max-width:560px}

.ig-listing .ig-feature{
  max-width:1080px;margin:30px auto 0;padding:0 28px;
}
/* hero feature card — the lead guide, full living banner */
.ig-feature-card{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:var(--r-xl,24px);overflow:hidden;
  background:rgba(33,37,46,0.42);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.ig-feature-card:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 24px 60px rgba(0,0,0,0.32)}
.ig-feature-card .igo-visual{border-radius:0;min-height:340px}
.ig-feature-body{padding:38px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.ig-feature-kicker{font-family:var(--mono);font-size:0.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ig-accent,#4FBC78);display:inline-flex;align-items:center;gap:10px}
.ig-feature-kicker::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--ig-accent,#4FBC78))}
.ig-feature-title{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12;letter-spacing:-0.03em;color:var(--chrome-pure,#F2F4F9)}
.ig-feature-excerpt{font-size:0.92rem;line-height:1.7;color:var(--muted2)}
.ig-feature-meta{display:flex;align-items:center;gap:14px;margin-top:4px;font-family:var(--mono);font-size:0.7rem;color:var(--muted)}
.ig-feature-meta .ig-go{margin-left:auto;color:var(--ig-accent,#4FBC78);font-weight:700}

.ig-listing .articles-wrap{max-width:1080px}
.ig-listing .articles-grid{grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}

/* card: living mini-visual instead of the old empty icon block */
.ig-listing .article-card{overflow:hidden}
.ig-card-visual{position:relative;height:150px;margin:-1px -1px 0;border-bottom:1px solid var(--border)}
.ig-card-visual .igo-visual{border-radius:0;height:100%}
.ig-card-cat{position:absolute;left:14px;top:12px;z-index:3;font-family:var(--mono);font-size:0.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-bright,#E6E8EE);background:rgba(20,23,30,0.55);border:1px solid var(--border);backdrop-filter:blur(6px);padding:4px 9px;border-radius:999px}
.ig-listing .card-top{display:none}
.ig-listing .card-body{padding:18px 20px 0}
.ig-listing .card-title{font-family:var(--display)!important;font-size:1.02rem;letter-spacing:-0.02em}
.ig-listing .card-footer .card-arrow{color:var(--ig-accent,#4FBC78)}
.ig-listing .card-tag{white-space:nowrap}
.ig-listing .card-read-time{white-space:nowrap}

/* "Coming soon" cards (roadmap placeholders, not links) */
.ig-listing .article-card.is-soon{cursor:default}
.ig-listing .article-card.is-soon:hover{transform:none;border-color:var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.ig-listing .article-card.is-soon .ig-card-visual{opacity:.62}
.ig-soon-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:0.66rem;letter-spacing:.04em;color:var(--muted)}
.ig-soon-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(255,255,255,0.04)}

/* Pagination (built by igo-paginate.js) */
.ig-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 4px;flex-wrap:wrap}
.ig-page-nums{display:flex;align-items:center;gap:6px}
.ig-page-num,.ig-page-btn{font-family:var(--mono);font-size:0.8rem;min-width:40px;height:40px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:rgba(33,37,46,0.5);color:var(--muted2);cursor:pointer;transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease}
.ig-page-num:hover:not(.is-active),.ig-page-btn:hover:not([disabled]){border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.ig-page-num.is-active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent2);font-weight:600}
.ig-page-btn[disabled]{opacity:.4;cursor:not-allowed}
.ig-page-ellipsis{color:var(--muted);font-family:var(--mono);padding:0 2px}
@media(max-width:560px){.ig-page-btn{padding:0 10px;font-size:0.74rem}}

@media(max-width:980px){
  .ig-feature-card{grid-template-columns:1fr}
  .ig-feature-card .igo-visual{min-height:220px}
  .ig-feature-body{padding:26px 22px}
}
@media(max-width:760px){
  .ig-listing .articles-grid{grid-template-columns:1fr}
}

/* =================================================================
   ARTICLE PAGE  (.ig-article)
   ================================================================= */
.ig-article{display:flex;flex-direction:column;min-height:100vh}

/* full-bleed living hero banner — the "bright" moment; body stays calm */
.ig-banner{position:relative;width:100%;min-height:clamp(360px,52vh,520px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--border)}
.ig-banner .igo-visual{position:absolute;inset:0;border-radius:0;z-index:0}
/* scrim: guarantees text contrast over any visual state */
.ig-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,23,30,0.30) 0%, rgba(20,23,30,0.05) 32%, rgba(20,23,30,0.55) 78%, rgba(20,23,30,0.92) 100%),
    radial-gradient(ellipse 80% 70% at 20% 110%, rgba(20,23,30,0.6), transparent 70%)}
.ig-banner-inner{position:relative;z-index:2;width:100%;max-width:780px;margin:0 auto;padding:40px 28px 34px}
.ig-banner .article-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:0.72rem;letter-spacing:.04em;color:var(--muted2);text-decoration:none;margin-bottom:18px;transition:color .15s}
.ig-banner .article-back:hover{color:var(--text)}
.ig-banner .article-eyebrow{font-family:var(--mono)!important;font-size:0.7rem!important;font-weight:600!important;letter-spacing:.2em!important;text-transform:uppercase;color:var(--ig-accent,#4FBC78)!important;margin-bottom:14px!important;display:inline-flex;align-items:center;gap:11px}
.ig-banner .article-eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--ig-accent,#4FBC78))}
.ig-banner .article-h1{font-family:var(--display)!important;font-size:clamp(1.9rem,4.6vw,3.1rem)!important;font-weight:700!important;line-height:1.05!important;letter-spacing:-0.035em!important;color:var(--chrome-pure,#F2F4F9)!important;margin-bottom:0!important;max-width:18ch;text-wrap:balance}

/* reading column */
.ig-article .article-wrap{max-width:720px;margin:0 auto;padding:6px 28px 84px;flex:1;width:100%}
.ig-article .article-intro{font-family:var(--sans);font-size:1.08rem!important;line-height:1.7!important;color:var(--muted2)!important;margin:30px 0 30px!important;padding:0 0 0 20px!important;border-left:2px solid rgba(var(--ig-glow,79,188,120),0.5)}
.ig-article .article-body{font-size:1rem}
.ig-article .article-body h2{font-family:var(--display)!important;font-size:1.4rem!important;letter-spacing:-0.025em!important;line-height:1.2;margin:40px 0 14px!important;color:var(--chrome-pure,#F2F4F9)!important;padding-top:8px;position:relative}
.ig-article .article-body h2::before{content:"";position:absolute;left:0;top:-2px;width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ig-accent,#4FBC78),transparent)}
.ig-article .article-body p{font-size:1rem!important;line-height:1.85!important;color:var(--muted2)!important;margin-bottom:18px!important}
.ig-article .article-body p:first-of-type{font-size:1rem}
.ig-article .article-body strong{color:var(--text)!important;font-weight:600}
.ig-article .article-body em{color:var(--muted2);font-style:italic}
.ig-article .article-body li{font-size:0.98rem!important;line-height:1.7!important}
.ig-article .article-body li::before{color:var(--ig-accent,#4FBC78)!important}

/* inline section divider — a calm "band" visual between sections */
.ig-divider{position:relative;height:120px;margin:34px 0;border-radius:var(--r-md,10px);overflow:hidden;border:1px solid var(--border)}
.ig-divider .igo-visual{position:absolute;inset:0;border-radius:0}
.ig-divider-label{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--mono);font-size:0.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-bright,#E6E8EE);pointer-events:none}
.ig-divider-label::before,.ig-divider-label::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--ig-glow,79,188,120),0.7),transparent)}

/* refined callouts (keep brand colours, tighten the frame) */
.ig-article .callout{border-radius:var(--r-md,10px)!important;padding:18px 20px 18px 44px!important;position:relative;font-size:0.92rem!important;line-height:1.7!important;margin:24px 0!important}
.ig-article .callout::before{content:"";position:absolute;left:18px;top:20px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,0.04)}
.ig-article .callout-tip::before{background:#93C5FD}
.ig-article .callout-signal::before{background:var(--orange,#FDB894)}
.ig-article .callout-result::before{background:var(--green,#10B981)}
.ig-article .callout-title{font-family:var(--display);font-weight:700;font-size:0.95rem;letter-spacing:-0.01em;margin-bottom:5px!important}

/* signal table polish */
.ig-article .signal-table{font-size:0.9rem!important;border:1px solid var(--border);border-radius:var(--r-md,10px);overflow:hidden}
.ig-article .signal-table th{font-family:var(--mono)!important;background:rgba(255,255,255,0.04)!important;letter-spacing:.12em!important}
.ig-article .signal-table td{font-size:0.9rem!important}

/* step guide polish */
.ig-article .step-num{background:linear-gradient(180deg,var(--ig-accent,#4FBC78),rgba(var(--ig-glow,79,188,120),0.55))!important;box-shadow:0 0 16px rgba(var(--ig-glow,79,188,120),0.3)}
.ig-article .step-title{font-family:var(--display);letter-spacing:-0.01em}

/* CTA */
.ig-article .article-cta{border-radius:var(--r-lg,16px)!important;background:linear-gradient(135deg,rgba(var(--ig-glow,79,188,120),0.10),rgba(33,37,46,0.5))!important;border-color:rgba(var(--ig-glow,79,188,120),0.28)!important}
.ig-article .article-cta-title{font-family:var(--display);font-size:1.2rem;letter-spacing:-0.02em}

/* article footer nav: prev / next + back to all */
.ig-readnext{max-width:720px;margin:46px auto 0;padding:0 28px 88px}
.ig-readnext-title{font-family:var(--mono);font-size:0.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ig-readnext-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ig-next-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:120px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-md,10px);overflow:hidden;text-decoration:none;background:rgba(33,37,46,0.42);transition:transform .2s ease,border-color .2s ease}
.ig-next-card:hover{transform:translateY(-2px);border-color:var(--border2)}
.ig-next-card .igo-visual{position:absolute;inset:0;border-radius:0;opacity:.5}
.ig-next-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,23,30,0.2),rgba(20,23,30,0.86))}
.ig-next-rel{position:relative;z-index:2;font-family:var(--mono);font-size:0.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ig-accent,#4FBC78);margin-bottom:6px}
.ig-next-ttl{position:relative;z-index:2;font-family:var(--display);font-size:0.98rem;line-height:1.25;letter-spacing:-0.02em;color:var(--text)}

@media(max-width:680px){
  .ig-readnext-grid{grid-template-columns:1fr}
  .ig-banner{min-height:clamp(300px,60vh,440px)}
  .ig-banner-inner{padding:28px 18px 26px}
  .ig-article .article-wrap{padding:6px 18px 64px}
  .ig-article .article-body h2{font-size:1.22rem!important}
  .ig-divider{height:96px}
}