/* ══════════════════════════════════════════════
   Study pages — charts, figures, stat tiles
   (extends /how-much-hvac-website-cost/article.css)
══════════════════════════════════════════════ */

.article-content {
  --viz-a: #4A9BD4;          /* plumbers / single series */
  --viz-b: #C47F2A;          /* roofers / highlight      */
  --viz-track: rgba(138,158,186,0.14);
  --viz-ink: var(--snowfall);
  --viz-ink-2: var(--mist);
}

/* ── Stat tiles ─────────────────────────────── */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.stat-tile {
  background: var(--granite);
  border: 1px solid rgba(138,158,186,0.14);
  border-radius: var(--radius);
  padding: 18px 16px;
}
.stat-tile b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--glacier-light);
  margin-bottom: 6px;
}
.stat-tile span { font-size: 0.86rem; color: var(--snowline); line-height: 1.45; display: block; }

/* ── Bar list (X of 15) ─────────────────────── */
.viz {
  background: var(--obsidian);
  border: 1px solid rgba(138,158,186,0.12);
  border-radius: var(--radius);
  padding: 22px 22px 16px;
  margin: 28px 0 10px;
}
.article-content .viz-title { font-weight: 600; color: var(--summit); font-size: 1rem; margin: 0 0 4px; }
.article-content .viz-sub { font-size: 0.82rem; color: var(--viz-ink-2); margin: 0 0 18px; }
.bar-list { list-style: none; margin: 0; padding: 0; }
.article-content .bar-list li { padding: 0; margin: 0 0 14px; }
.article-content .bar-list li::before { display: none; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.bar-label { font-size: 0.9rem; color: var(--viz-ink); line-height: 1.35; }
.bar-label small { display: block; color: var(--viz-ink-2); font-size: 0.78rem; }
.bar-value { font-size: 0.9rem; color: var(--summit); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; }
.bar-track {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 4px;
  background: var(--viz-track);
  display: flex;
  gap: 2px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; background: var(--viz-a); }
.bar-fill.part { background: repeating-linear-gradient(135deg, rgba(74,155,212,0.55) 0 3px, rgba(74,155,212,0.2) 3px 6px); }
.bar-fill.b { background: var(--viz-b); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8rem; color: var(--viz-ink-2); margin-top: 6px; }
.viz-legend i { display: inline-block; width: 12px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--viz-a); }
.viz-legend i.part { background: repeating-linear-gradient(135deg, rgba(74,155,212,0.55) 0 3px, rgba(74,155,212,0.2) 3px 6px); }
.viz-legend i.b { background: var(--viz-b); }

/* two series per row */
.bar-pair { grid-column: 1 / -1; display: grid; gap: 4px; }
.bar-pair .bar-track { height: 8px; }
.bar-pair-row { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 10px; align-items: center; }
.bar-pair-row .bar-track { grid-column: auto; }
.bar-pair-row em { font-style: normal; font-size: 0.8rem; color: var(--viz-ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Column chart (12 months) ───────────────── */
.cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  height: 200px;
  align-items: end;
  margin: 26px 0 0;
  padding-top: 18px;
}
.cols .ref {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed rgba(194,210,230,0.45);
  pointer-events: none;
}
.cols .ref span { position: absolute; left: 0; top: -18px; font-size: 0.72rem; color: var(--viz-ink-2); background: var(--obsidian); padding-right: 6px; }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.col-bar { background: var(--viz-a); border-radius: 4px 4px 0 0; min-height: 2px; }
.col-bar.hi { background: var(--viz-b); }
.col-val { font-size: 0.68rem; color: var(--viz-ink); text-align: center; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.col-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; border-top: 1px solid rgba(138,158,186,0.3); margin-top: 0; padding-top: 6px; }
.col-labels span { font-size: 0.7rem; color: var(--viz-ink-2); text-align: center; }

/* ── Figures & screenshots ──────────────────── */
.fig-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 8px;
}
.fig-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { margin: 0; }
.fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(138,158,186,0.18);
  background: var(--obsidian);
}
.fig.narrow { max-width: 340px; margin: 28px auto 8px; }
.fig.wide img { border-radius: var(--radius-sm); }
.article-content .fig figcaption, .fig figcaption { font-size: 0.82rem; color: var(--viz-ink-2); line-height: 1.5; margin-top: 10px; }
.fig figcaption strong { color: var(--snowline); }
.fig-single { margin: 28px 0 8px; }

/* numbered legend under a mockup */
.num-legend { counter-reset: n; list-style: none; padding: 0; margin: 18px 0 0; }
.article-content .num-legend li { counter-increment: n; position: relative; padding-left: 36px; margin-bottom: 10px; }
.article-content .num-legend li::before {
  content: counter(n);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--abyss); border: 1.5px solid var(--snowline);
  color: var(--summit); font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mockup-wrap { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 28px; align-items: start; margin: 28px 0 8px; }

/* table tweaks */
.article-table td small { display: block; color: var(--mist); font-size: 0.78rem; margin-top: 4px; }

@media (max-width: 720px) {
  .article-table.compact th { white-space: normal; padding: 12px 10px; font-size: 11px; }
  .article-table.compact td { padding: 12px 10px; }
  .article-table.stack thead { display: none; }
  .article-table.stack, .article-table.stack tbody, .article-table.stack tr, .article-table.stack td { display: block; width: 100%; }
  .article-table.stack tr { padding: 14px 16px; border-bottom: 1px solid rgba(138,158,186,0.14); }
  .article-table.stack td { padding: 4px 0; border: 0; }
  .article-table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--glacier-light); margin-bottom: 2px; }
  .stat-tiles { grid-template-columns: 1fr; }
  .fig-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mockup-wrap { grid-template-columns: 1fr; }
  .mockup-wrap .fig { max-width: 300px; margin: 0 auto; }
  .viz { padding: 18px 14px 12px; }
  .cols { height: 170px; gap: 3px; }
  .col-labels { gap: 3px; }
  .col-val { font-size: 0.6rem; }
}
@media (max-width: 420px) {
  .fig-grid { gap: 12px; }
}