/* Wine Club Article — Dynamic Charts & Enhanced Stats */

/* ── Fix Stats Row to 4-across ── */
.pcm-stats-row{display:flex;flex-wrap:wrap;border:1px solid #e8e4db;border-radius:8px;background:#fff;margin:28px 0}
@media(max-width:600px){.pcm-stats-row{flex-direction:column}.stat-item+.stat-item{border-left:none;border-top:1px solid #dcd7ca}}

/* ── Animated Bar Chart ── */
.wc-bar-chart{margin:28px 0;padding:0}
.wcb-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wcb-bar-label{flex:0 0 160px;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:#fff;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)}

/* ── Donut Chart ── */
.wc-donut-chart{display:flex;align-items:center;gap:32px;margin:28px 0;padding:24px 0}
.wc-donut-chart svg{width:160px;height:160px;flex-shrink:0}
.wc-donut-legend{display:flex;flex-direction:column;gap:10px}
.wc-donut-legend-item{display:flex;align-items:center;gap:10px;font-family:freight-text-pro,Georgia,serif;font-size:15px;color:#333}
.wc-donut-legend-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.wc-donut-legend-pct{font-family:franklin-gothic-condensed,sans-serif;font-weight:600;color:#1a1a1a;min-width:36px}

/* ── Retention Gauge Comparison ── */
.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)}

/* ── Sparkline / Trend ── */
.wc-sparkline{margin:28px 0;padding:16px 0}
.wc-sparkline svg{width:100%;height:120px}
.wc-spark-line{fill:none;stroke:#a69162;stroke-width:2.5;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:11px;fill:#888}
.wc-spark-val{font-family:franklin-gothic-condensed,sans-serif;font-size:11px;fill:#1a1a1a;font-weight:600}
.wc-spark-grid{stroke:#e8e4db;stroke-width:0.5}
.wc-spark-area{fill:url(#goldGrad);opacity:0.15}

/* ── 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 (personalization data) ── */
.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}

/* ── Responsive ── */
@media(max-width:768px){
  .wc-donut-chart{flex-direction:column;align-items:center;text-align:center}
  .wc-donut-chart svg{width:140px;height:140px}
  .wc-impact-grid{grid-template-columns:1fr}
  .wcb-bar-label{flex:0 0 100px;font-size:12px}
  .wc-donut-legend{align-items:center}
}
@media(min-width:769px)and(max-width:1024px){
  .wc-impact-grid{grid-template-columns:repeat(3,1fr);gap:12px}
}