/* PCM Article Charts — Animated Stats & Data Visualizations
   Widget types: stat-row, bar-chart, gauge, sparkline, impact-cards,
                 donut, comparison, timeline, stacked-bar, lollipop,
                 pictograph, pull-stat, funnel
*/

/* ── Stat Row (4-across count-up) ── */
.pcm-stats-row{display:flex;flex-wrap:wrap;border:1px solid #e8e4db;border-radius:8px;background:#fff;margin:28px 0}
.stat-item{flex:1 1 calc(25% - 2px);padding:24px 20px;text-align:center;border-left:1px solid #e8e4db}
.stat-item:first-child{border-left:none}
.stat-number{font-family:franklin-gothic-condensed,sans-serif;font-size:42px;font-weight:700;color:#a69162;line-height:1;margin-bottom:6px}
.stat-label{font-family:franklin-gothic-condensed,sans-serif;font-size:12px;letter-spacing:0.8px;text-transform:uppercase;color:#666;line-height:1.4}
@media(max-width:600px){.pcm-stats-row{flex-direction:column}.stat-item{border-left:none;border-top:1px solid #e8e4db}.stat-item:first-child{border-top:none}}
@media(min-width:601px) and (max-width:900px){.stat-item{flex:1 1 calc(50% - 2px)}.stat-item:nth-child(1){border-left:none}.stat-item:nth-child(3){border-left:none;border-top:1px solid #e8e4db}.stat-item:nth-child(4){border-top:1px solid #e8e4db}}

/* ── Animated Bar Chart ── */
.wc-bar-chart{margin:28px auto;padding:0;max-width:600px}
.wcb-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wcb-bar-label{flex:0 0 180px;font-family:franklin-gothic-condensed,sans-serif;font-size:14px;font-weight:500;color:#1a1a1a;text-align:right}
.wcb-bar-track{flex:1;height:28px;background:#f0ece3;border-radius:3px;overflow:hidden;position:relative}
.wcb-bar-fill{height:100%;border-radius:3px;width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.wcb-bar-val{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:franklin-gothic-condensed,sans-serif;font-size:13px;font-weight:600;color:#333;opacity:0;transition:opacity .4s .8s}
.wcb-bar-val.dark{color:#1a1a1a;right:auto;left:calc(100% + 10px)}

/* Bar colors */
.wcb-fill-gold{background:linear-gradient(90deg,#a69162,#c4a96e)}
.wcb-fill-dark{background:linear-gradient(90deg,#2d2d2d,#444)}
.wcb-fill-wine{background:linear-gradient(90deg,#722f37,#9b4d55)}
.wcb-fill-sage{background:linear-gradient(90deg,#6b7c5e,#8a9e78)}
.wcb-fill-blue{background:linear-gradient(90deg,#3d5a80,#5a7faa)}
.wcb-fill-red{background:linear-gradient(90deg,#b44040,#d06060)}

/* ── Comparison Gauge ── */
.wc-gauge-wrap{margin:28px 0}
.wc-gauge-item{margin-bottom:18px}
.wc-gauge-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.wc-gauge-title{font-family:franklin-gothic-condensed,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a}
.wc-gauge-pct{font-family:franklin-gothic-condensed,sans-serif;font-size:22px;font-weight:700;color:#a69162}
.wc-gauge-track{height:14px;background:#f0ece3;border-radius:7px;overflow:hidden}
.wc-gauge-fill{height:100%;border-radius:7px;width:0;transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.wc-gauge-fill.gold{background:linear-gradient(90deg,#a69162,#c4a96e)}
.wc-gauge-fill.wine{background:linear-gradient(90deg,#722f37,#9b4d55)}
.wc-gauge-fill.dark{background:linear-gradient(90deg,#2d2d2d,#444)}
.wc-gauge-fill.sage{background:linear-gradient(90deg,#6b7c5e,#8a9e78)}
.wc-gauge-fill.blue{background:linear-gradient(90deg,#3d5a80,#5a7faa)}

/* ── Sparkline / Trend ── */
.wc-sparkline{margin:28px 0;padding:16px 0}
.wc-sparkline svg{width:100%;height:220px}
.wc-spark-line{fill:none;stroke:#a69162;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wc-spark-dot{fill:#a69162;opacity:0;transform:scale(0);transform-origin:center;transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.wc-spark-label{font-family:franklin-gothic-condensed,sans-serif;font-size:13px;fill:#888}
.wc-spark-val{font-family:franklin-gothic-condensed,sans-serif;font-size:13px;fill:#1a1a1a;font-weight:600}
.wc-spark-grid{stroke:#e8e4db;stroke-width:0.5}
.wc-spark-area{opacity:0.15}
.wc-sparkline + p{font-size:12px!important;color:#aaa!important;line-height:1.5!important}

/* ── Section Label / Chart Title ── */
.wc-chart-title{font-family:franklin-gothic-compressed,sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#a69162;margin-bottom:12px}

/* ── Impact Cards ── */
.wc-impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.wc-impact-card{background:#fff;border:1px solid #e8e4db;border-radius:8px;padding:24px 20px;text-align:center;position:relative;overflow:hidden}
.wc-impact-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a69162,#c4a96e)}
.wc-impact-num{font-family:franklin-gothic-condensed,sans-serif;font-size:36px;font-weight:700;color:#a69162;margin-bottom:4px}
.wc-impact-label{font-family:freight-text-pro,Georgia,serif;font-size:14px;color:#555;line-height:1.4}
.wc-impact-tag{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:20px;font-family:franklin-gothic-condensed,sans-serif;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;background:#f5efe0;color:#a69162;font-weight:600}

/* ── Donut / Ring Chart ── */
.wc-donut-wrap{display:flex;flex-wrap:wrap;gap:28px;margin:28px 0;justify-content:center;align-items:flex-start}
.wc-donut{text-align:center;flex:0 0 150px}
.wc-donut-ring{position:relative;width:140px;height:140px;margin:0 auto 10px}
.wc-donut-ring svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.wc-donut-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.wc-donut-track{fill:none;stroke:#f0ece3;stroke-width:14}
.wc-donut-fill{fill:none;stroke-width:14;stroke-linecap:round}
.wc-donut-fill.gold{stroke:#a69162}
.wc-donut-fill.dark{stroke:#2d2d2d}
.wc-donut-fill.wine{stroke:#722f37}
.wc-donut-fill.sage{stroke:#6b7c5e}
.wc-donut-fill.blue{stroke:#3d5a80}
.wc-donut-fill.red{stroke:#b44040}
.wc-donut-pct{font-family:franklin-gothic-condensed,sans-serif;font-size:28px;font-weight:700;color:#1a1a1a;line-height:1}
.wc-donut-sublabel{font-family:franklin-gothic-condensed,sans-serif;font-size:10px;letter-spacing:0.5px;text-transform:uppercase;color:#aaa;line-height:1.2;max-width:72px}
.wc-donut-label{font-family:franklin-gothic-condensed,sans-serif;font-size:12px;letter-spacing:0.3px;color:#555;line-height:1.4;margin-top:2px}

/* ── Side-by-Side Comparison ── */
.wc-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin:28px 0;border:1px solid #e8e4db;border-radius:8px;overflow:hidden}
.wc-compare-col+.wc-compare-col{border-left:1px solid #e8e4db}
.wc-compare-head{font-family:franklin-gothic-condensed,sans-serif;font-size:15px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;background:#a69162;padding:13px 18px;text-align:center}
.wc-compare-col--dark .wc-compare-head{background:#2d2d2d}
.wc-compare-col--wine .wc-compare-head{background:#722f37}
.wc-compare-col--sage .wc-compare-head{background:#6b7c5e}
.wc-compare-col--blue .wc-compare-head{background:#3d5a80}
.wc-compare-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 18px;border-top:1px solid #f0ece3;gap:10px}
.wc-compare-key{font-family:franklin-gothic-condensed,sans-serif;font-size:13px;color:#777;flex:1}
.wc-compare-val{font-family:franklin-gothic-condensed,sans-serif;font-size:14px;font-weight:600;color:#1a1a1a;text-align:right;white-space:nowrap}
.wc-compare-val.good{color:#6b7c5e}
.wc-compare-val.warn{color:#b44040}
.wc-compare-val.gold{color:#a69162}
.wc-compare-val.na{color:#bbb;font-weight:400}

/* ── Timeline / Milestones ── */
.wc-timeline{margin:28px 0;position:relative;padding-left:36px}
.wc-timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,#a69162,#e8e4db)}
.wc-tl-item{position:relative;margin-bottom:28px;opacity:0;transform:translateX(-10px);transition:opacity 0.5s ease,transform 0.5s ease}
.wc-tl-item.visible{opacity:1;transform:translateX(0)}
.wc-tl-dot{position:absolute;left:-33px;top:3px;width:16px;height:16px;border-radius:50%;background:#a69162;border:3px solid #fff;box-shadow:0 0 0 2px #a69162}
.wc-tl-dot.dark{background:#2d2d2d;box-shadow:0 0 0 2px #2d2d2d}
.wc-tl-dot.muted{background:#ccc;box-shadow:0 0 0 2px #ccc}
.wc-tl-year{font-family:franklin-gothic-condensed,sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#a69162;margin-bottom:3px}
.wc-tl-title{font-family:franklin-gothic-condensed,sans-serif;font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:3px;line-height:1.3}
.wc-tl-text{font-size:14px;color:#555;line-height:1.55}

/* ── Stacked Bar ── */
.wc-stacked-wrap{margin:28px 0}
.wc-stacked-bar{display:flex;height:38px;border-radius:4px;overflow:hidden;gap:2px}
.wc-stacked-seg{height:100%;width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;font-family:franklin-gothic-condensed,sans-serif;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;padding:0 6px}
.wc-seg-gold{background:linear-gradient(90deg,#a69162,#c4a96e)}
.wc-seg-dark{background:linear-gradient(90deg,#2d2d2d,#444)}
.wc-seg-wine{background:linear-gradient(90deg,#722f37,#9b4d55)}
.wc-seg-sage{background:linear-gradient(90deg,#6b7c5e,#8a9e78)}
.wc-seg-blue{background:linear-gradient(90deg,#3d5a80,#5a7faa)}
.wc-seg-red{background:linear-gradient(90deg,#b44040,#d06060)}
.wc-stacked-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:12px}
.wc-legend-item{display:flex;align-items:center;gap:7px;font-family:franklin-gothic-condensed,sans-serif;font-size:13px;color:#555}
.wc-legend-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}
.wc-legend-swatch.gold{background:#a69162}
.wc-legend-swatch.dark{background:#2d2d2d}
.wc-legend-swatch.wine{background:#722f37}
.wc-legend-swatch.sage{background:#6b7c5e}
.wc-legend-swatch.blue{background:#3d5a80}
.wc-legend-swatch.red{background:#b44040}

/* ── Lollipop Chart ── */
.wc-lollipop{margin:28px auto;max-width:600px}
.wcl-item{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.wcl-label{flex:0 0 160px;font-family:franklin-gothic-condensed,sans-serif;font-size:14px;font-weight:500;color:#1a1a1a;text-align:right}
.wcl-track{flex:1;position:relative;height:16px;display:flex;align-items:center}
.wcl-bg{position:absolute;left:0;right:0;height:2px;background:#e8e4db;border-radius:1px}
.wcl-fill{display:flex;align-items:center;position:relative;z-index:1;width:0;overflow:visible}
.wcl-stem{flex:1;min-width:0;height:2px;border-radius:1px}
.wcl-stem.gold{background:#a69162}
.wcl-stem.dark{background:#2d2d2d}
.wcl-stem.wine{background:#722f37}
.wcl-stem.sage{background:#6b7c5e}
.wcl-stem.blue{background:#3d5a80}
.wcl-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;transform:scale(0);transition:transform 0.4s cubic-bezier(.34,1.56,.64,1)}
.wcl-dot.gold{background:#a69162}
.wcl-dot.dark{background:#2d2d2d}
.wcl-dot.wine{background:#722f37}
.wcl-dot.sage{background:#6b7c5e}
.wcl-dot.blue{background:#3d5a80}
.wcl-val{font-family:franklin-gothic-condensed,sans-serif;font-size:15px;font-weight:700;color:#1a1a1a;min-width:50px}

/* ── Pictograph / Icon Row ── */
.wc-pictograph{margin:28px 0}
.wc-picto-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.wc-picto-label{font-family:franklin-gothic-condensed,sans-serif;font-size:14px;font-weight:600;color:#1a1a1a;flex:0 0 auto}
.wc-picto-icons{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.wc-picto-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;transition:transform 0.3s cubic-bezier(.34,1.56,.64,1),opacity 0.3s;opacity:0;transform:scale(0)}
.wc-picto-icon.visible{opacity:1;transform:scale(1)}
.wc-picto-icon.filled{background:#a69162;color:#fff}
.wc-picto-icon.filled.dark{background:#2d2d2d}
.wc-picto-icon.filled.wine{background:#722f37}
.wc-picto-icon.filled.sage{background:#6b7c5e}
.wc-picto-icon.empty{background:#f0ece3;color:#d4cfc4}
.wc-picto-caption{font-family:freight-text-pro,Georgia,serif;font-size:14px;font-style:italic;color:#666;line-height:1.5;margin-top:4px}

/* ── Pull Stat ── */
.wc-pullstat{margin:36px 0;padding:36px 28px;text-align:center;background:#faf8f4;border-top:3px solid #a69162;border-bottom:1px solid #e8e4db}
.wc-pullstat-num{font-family:franklin-gothic-condensed,sans-serif;font-size:72px;font-weight:700;color:#a69162;line-height:1;margin-bottom:14px}
.wc-pullstat-text{font-family:freight-text-pro,Georgia,serif;font-size:18px;font-style:italic;color:#444;line-height:1.65;max-width:520px;margin:0 auto}
.wc-pullstat-source{font-family:franklin-gothic-condensed,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#aaa;margin-top:12px}

/* ── Funnel ── */
.wc-funnel{margin:28px 0}
.wc-funnel-step{display:flex;align-items:center;gap:12px;margin-bottom:5px}
.wc-funnel-bar{flex:1;height:40px;position:relative;display:flex;align-items:center}
.wc-funnel-fill{height:100%;width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1);border-radius:3px;display:flex;align-items:center;padding-left:14px;overflow:hidden;white-space:nowrap}
.wc-funnel-fill.gold{background:linear-gradient(90deg,#a69162,#c4a96e)}
.wc-funnel-fill.dark{background:linear-gradient(90deg,#2d2d2d,#444)}
.wc-funnel-fill.wine{background:linear-gradient(90deg,#722f37,#9b4d55)}
.wc-funnel-fill.sage{background:linear-gradient(90deg,#6b7c5e,#8a9e78)}
.wc-funnel-fill.blue{background:linear-gradient(90deg,#3d5a80,#5a7faa)}
.wc-funnel-name{font-family:franklin-gothic-condensed,sans-serif;font-size:13px;font-weight:600;color:#fff}
.wc-funnel-meta{flex:0 0 120px;text-align:right}
.wc-funnel-val{font-family:franklin-gothic-condensed,sans-serif;font-size:14px;font-weight:700;color:#1a1a1a;display:block}
.wc-funnel-pct{font-family:franklin-gothic-condensed,sans-serif;font-size:12px;color:#aaa}
.wc-funnel-drop{display:flex;justify-content:flex-end;padding-right:4px;margin-bottom:2px}
.wc-funnel-arrow{font-family:franklin-gothic-condensed,sans-serif;font-size:11px;color:#ccc;letter-spacing:0.5px}

/* ── Shared color tokens ── */
.wc-color-gold{color:#a69162}
.wc-color-dark{color:#2d2d2d}

/* ── Responsive ── */
@media(max-width:768px){
  .wc-impact-grid{grid-template-columns:1fr}
  .wcb-bar-label{flex:0 0 120px;font-size:12px}
  .wc-donut{flex:0 0 130px}
  .wc-donut-ring{width:120px;height:120px}
  .wc-donut-pct{font-size:22px}
  .wcl-label{flex:0 0 110px;font-size:12px}
  .wc-pullstat-num{font-size:52px}
  .wc-compare{grid-template-columns:1fr}
  .wc-compare-col+.wc-compare-col{border-left:none;border-top:1px solid #e8e4db}
  .wc-funnel-meta{flex:0 0 80px}
}