/**
 * Proof Bar Styles — CLO-341: "The Headcount Counter"
 * Agent: FRAME
 *
 * Styles for the three-column proof bar with count-up numbers
 * and comparison bars. Mobile-first responsive design.
 *
 * Dependencies: tokens.css (all values via CSS custom properties)
 *
 * Design constraints:
 *   - Bronze accent max 10-15% of viewport
 *   - Cream background, never white
 *   - Handjet for numbers (data font)
 *   - prefers-reduced-motion: show final state
 */

/* ===== SECTION CONTAINER ===== */
.proof-bar-section {
  background-color: var(--color-cream);
}

/* ===== PROOF STATS GRID ===== */
.proof-bar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .proof-bar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

/* ===== PROOF COLUMN ===== */
.proof-bar-column {
  text-align: center;
  padding: var(--space-md);
  background-color: var(--color-parchment);
  border: 1px solid var(--color-stone);
  border-radius: 12px;
}

@media (min-width: 768px) {
  .proof-bar-column {
    padding: var(--space-md) var(--space-sm);
  }
}

@media (min-width: 1024px) {
  .proof-bar-column {
    padding: var(--space-md);
  }
}

/* ===== COUNT-UP NUMBERS ===== */
.proof-bar-number {
  margin-bottom: var(--space-sm);
}

.proof-bar-number .proof-stat {
  font-family: 'Handjet', 'IBM Plex Mono', monospace;
  font-size: var(--type-stats);
  font-weight: 300;
  color: var(--color-bronze);
  line-height: var(--leading-tight);
  display: block;
}

/* ===== PROOF LABEL ===== */
.proof-bar-label {
  font-size: var(--type-caption);
  color: var(--color-graphite);
  line-height: var(--leading-body);
  margin-bottom: var(--space-md);
  max-width: none;
}

/* ===== COMPARISON BARS ===== */
.comparison-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Individual bar row */
.comparison-bar-row {
  text-align: left;
}

.comparison-bar-label {
  display: block;
  font-family: 'Nunito', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--type-caption);
  color: var(--color-graphite);
  margin-bottom: 6px;
  line-height: var(--leading-tight);
}

/* Bar track (background) */
.comparison-bar-track {
  width: 100%;
  height: 8px;
  background-color: var(--color-stone);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* Bar fill (animated) */
.comparison-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  will-change: width;
}

/* Traditional bars — muted, showing the "before" state */
.comparison-bar-fill--traditional {
  background-color: var(--color-graphite);
}

/* Cloon bars — bronze accent, showing improvement */
.comparison-bar-fill--cloon {
  background-color: var(--color-bronze);
}

/* ===== RESPONSIVE: MOBILE 375px ===== */
@media (max-width: 767px) {
  .proof-bar-grid {
    gap: var(--space-md);
  }

  .proof-bar-column {
    padding: var(--space-sm) var(--space-sm) var(--space-md);
  }

  .proof-bar-number .proof-stat {
    /* Stats slightly smaller on mobile but still prominent */
    font-size: clamp(32px, 8vw, 48px);
  }
}

/* ===== LARGE DESKTOP ===== */
@media (min-width: 1440px) {
  .proof-bar-grid {
    gap: var(--space-lg);
  }

  .comparison-bar-track {
    height: 10px;
  }
}

/* ===== PREFERS REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .comparison-bar-fill {
    transition: none !important;
    /* Final state set by JS on init */
  }
}