/* ============================================================
   Legendary Site — Infographics component library
   Pure CSS/SVG. Inherits --primary / --accent from the host site.
   Override --ig-accent on any wrapper to change the pop color.
   ============================================================ */

:root {
  --ig-accent: var(--accent, #e07b5a);
  --ig-primary: var(--primary, #23524a);
  --ig-track: var(--border, rgba(0,0,0,0.08));
  --ig-muted: var(--muted-foreground, #6b7280);
}

/* ---------- Counter row ---------- */
.ig-counters { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px; text-align:center; }
.ig-counter .ig-num,
.ig-stat .ig-num { font-family:var(--font-display, serif); font-weight:900; line-height:1; color:var(--ig-primary); }
.ig-counter .ig-num { font-size:clamp(2.4rem,5vw,3.6rem); }
.ig-counter .ig-label { display:block; margin-top:8px; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ig-muted); font-weight:700; }

/* ---------- Stat tile ---------- */
.ig-stat { background:var(--card, #fff); border:1px solid var(--ig-track); border-radius:16px; padding:26px 26px 18px; }
.ig-stat-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ig-stat .ig-num { font-size:clamp(1.8rem,3.5vw,2.6rem); }
.ig-stat .ig-label { font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ig-muted); font-weight:700; margin-top:4px; }
.ig-trend { font-size:0.82rem; font-weight:800; }
.ig-trend.up { color:#0f9d58; } .ig-trend.down { color:#d93025; }
.ig-spark { width:100%; height:34px; margin-top:12px; overflow:visible; }
.ig-spark path.line { fill:none; stroke:var(--ig-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1); }
.ig-spark path.area { fill:var(--ig-accent); opacity:0; transition:opacity .8s ease .3s; }
.ig-in .ig-spark path.line { stroke-dashoffset:0; }
.ig-in .ig-spark path.area { opacity:0.14; }

/* ---------- Horizontal bars ---------- */
.ig-bars { display:flex; flex-direction:column; gap:20px; }
.ig-bar { display:grid; grid-template-columns:130px 1fr 54px; align-items:center; gap:16px; }
.ig-bar-label { font-weight:700; font-size:0.95rem; }
.ig-bar-track { height:14px; background:var(--ig-track); border-radius:20px; overflow:hidden; }
.ig-bar-fill { display:block; height:100%; width:0; border-radius:20px;
  background:linear-gradient(90deg,var(--ig-primary),var(--ig-accent));
  transition:width 1.3s cubic-bezier(.16,1,.3,1); }
.ig-in .ig-bar-fill { width:calc(var(--val,50) * 1%); }
.ig-bar-val { font-family:var(--font-display,serif); font-weight:800; color:var(--ig-primary); text-align:right; }
@media (max-width:560px){ .ig-bar{ grid-template-columns:90px 1fr 44px; gap:10px } }

/* ---------- Donut / progress ring ---------- */
.ig-ring { position:relative; width:150px; height:150px; margin:0 auto; }
.ig-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ig-ring circle { fill:none; stroke-width:12; }
.ig-ring .ig-ring-bg { stroke:var(--ig-track); }
.ig-ring .ig-ring-fg { stroke:var(--ig-accent); stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1); }
.ig-ring-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ig-ring-center .ig-num { font-family:var(--font-display,serif); font-weight:900; font-size:2rem; color:var(--ig-primary); }

/* ---------- Timeline / step flow ---------- */
.ig-timeline { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.ig-step { position:relative; padding:0 0 34px 62px; }
.ig-step:not(:last-child)::before { content:''; position:absolute; left:20px; top:8px; bottom:-6px; width:2px; background:var(--ig-track); }
.ig-step-num { position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%;
  background:var(--ig-primary); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display,serif); font-weight:900; z-index:1;
  box-shadow:0 0 0 0 var(--ig-accent); transition:box-shadow .5s ease; }
.ig-in .ig-step-num { box-shadow:0 0 0 5px color-mix(in srgb, var(--ig-accent) 25%, transparent); }
.ig-step h4 { margin:6px 0 4px; }
.ig-step p { margin:0; color:var(--ig-muted); }

/* ---------- Comparison table-graphic ---------- */
.ig-compare { width:100%; border-collapse:collapse; }
.ig-compare th, .ig-compare td { padding:16px 18px; text-align:center; border-bottom:1px solid var(--ig-track); }
.ig-compare th:first-child, .ig-compare td:first-child { text-align:left; font-weight:700; }
.ig-compare thead th { font-size:0.9rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ig-muted); }
.ig-compare .ours { background:color-mix(in srgb, var(--ig-accent) 10%, transparent); color:var(--ig-primary); font-weight:800; border-radius:10px 10px 0 0; }
.ig-compare td.ours { font-size:1.1rem; }

/* ---------- Reveal + reduced motion ---------- */
.ig-reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.ig-reveal.ig-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .ig-bar-fill, .ig-ring-fg, .ig-spark path.line, .ig-reveal { transition:none !important; }
}