/* A1 CMS Blog — interactive infographics.
   Self-contained charts embedded in post bodies. Final values render without
   JavaScript; infographics.js animates the reveal on scroll. Uses the blog
   design tokens (navy / gold / accent) defined in blog.css. */

.ig{
  margin:2.6rem 0;
  padding:1.5rem 1.4rem 1.3rem;
  background:linear-gradient(180deg,#fff,var(--cream));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.ig .ig-title{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  font-size:1.12rem;
  margin:0 0 1.1rem;
  letter-spacing:-.005em;
}
.ig-caption{
  margin:1rem 0 0;
  font-size:.82rem;
  color:var(--muted);
  text-align:center;
}

/* Reveal: default (no JS or reduced motion) is fully visible. JS adds
   .ig-armed to hide first, then .ig-in on scroll to animate into view. */
.ig-armed [data-ig-bar] .ig-bar-fill{width:0}
.ig-armed.ig-in [data-ig-bar] .ig-bar-fill{width:calc(var(--pct,0) * 1%)}
.ig-armed [data-ig-step]{opacity:0;transform:translateY(10px)}
.ig-armed.ig-in [data-ig-step]{opacity:1;transform:none}

/* --- stat cards --------------------------------------------------------- */
.ig-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem;
}
.ig-stat{
  text-align:center;
  padding:1.3rem 1rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  position:relative;
}
.ig-stat::after{
  content:"";
  display:block;
  width:34px;height:3px;
  margin:.7rem auto 0;
  border-radius:3px;
  background:var(--gold);
}
.ig-stat-num{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem,5vw,2.7rem);
  line-height:1;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.ig-stat-label{
  margin-top:.55rem;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.35;
}

/* --- horizontal bars ---------------------------------------------------- */
.ig-bar-list{display:flex;flex-direction:column;gap:.85rem}
.ig-bar-row{
  display:grid;
  grid-template-columns:minmax(84px,26%) 1fr auto;
  align-items:center;
  gap:.8rem;
}
.ig-bar-label{font-size:.92rem;color:var(--body);font-weight:500}
.ig-bar-track{
  height:14px;
  background:var(--line-2);
  border-radius:99px;
  overflow:hidden;
}
.ig-bar-fill{
  display:block;
  height:100%;
  width:calc(var(--pct,0) * 1%);
  border-radius:99px;
  transition:width 1s cubic-bezier(.22,.61,.36,1);
}
.ig-bar-a{background:linear-gradient(90deg,var(--navy),var(--accent))}
.ig-bar-b{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.ig-bar-val{
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-size:.95rem;
  white-space:nowrap;
}

/* --- donut / proportion ring ------------------------------------------- */
.ig-donut{display:flex;flex-direction:column;align-items:center}
.ig-donut-ring{
  --pct:0;
  width:172px;height:172px;
  border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(closest-side,#fff calc(100% - 20px),transparent calc(100% - 20px) 100%),
    conic-gradient(var(--gold) calc(var(--pct) * 3.6deg), var(--line-2) 0);
  transition:background .1s linear;
}
.ig-donut-center{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}
.ig-donut-num{
  font-family:var(--serif);
  font-weight:700;
  font-size:2.2rem;
  color:var(--navy);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.ig-donut-label{margin-top:.35rem;font-size:.82rem;color:var(--muted);max-width:120px;line-height:1.3}

/* --- process timeline --------------------------------------------------- */
.ig-tl{list-style:none;margin:0;padding:0;position:relative}
.ig-tl::before{
  content:"";
  position:absolute;left:8px;top:6px;bottom:6px;
  width:2px;background:var(--line);
}
.ig-tl-item{
  position:relative;
  padding:0 0 1.15rem 2.1rem;
  transition:opacity .5s ease,transform .5s ease;
}
.ig-tl-item:last-child{padding-bottom:0}
.ig-tl-item::before{
  content:"";
  position:absolute;left:2px;top:4px;
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px var(--cream);
}
.ig-tl-meta{
  display:block;
  font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:.15rem;
}
.ig-tl-title{display:block;font-weight:600;color:var(--ink);font-size:1.02rem}
.ig-tl-text{display:block;color:var(--body);font-size:.95rem;margin-top:.15rem}

@media (max-width:560px){
  .ig-bar-row{grid-template-columns:1fr auto;grid-template-areas:"label val" "track track";row-gap:.4rem}
  .ig-bar-label{grid-area:label}
  .ig-bar-val{grid-area:val;text-align:right}
  .ig-bar-track{grid-area:track}
}

@media (prefers-reduced-motion:reduce){
  .ig-bar-fill{transition:none}
  .ig-armed [data-ig-bar] .ig-bar-fill{width:calc(var(--pct,0) * 1%)}
  .ig-armed [data-ig-step]{opacity:1;transform:none}
}