/* ============================================================
   Jobaron Job Market Snapshot — chart & stat styles
   Soft pastel style matching the landing page illustrations:
   gentle lavender / sky / butter tones, very round shapes,
   one bright amber accent reserved for the highlighted bar.
   ============================================================ */

/* ---- Hero stat cards (soft pastel blobs) ---- */
.snap-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0 8px;
}
.snap-stat {
  border: none;
  border-radius: 24px;
  padding: 26px 18px;
  text-align: center;
}
.snap-stat:nth-child(1) { background: #efeafe; } /* lavender */
.snap-stat:nth-child(2) { background: #e4f3fb; } /* sky      */
.snap-stat:nth-child(3) { background: #fdf2dd; } /* butter   */
.snap-stat:nth-child(1) .snap-stat-num { color: #7c5cff; }
.snap-stat:nth-child(2) .snap-stat-num { color: #2aabee; }
.snap-stat:nth-child(3) .snap-stat-num { color: #e9971c; }
.snap-stat-num {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
}
.snap-stat-label {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 6px;
}

/* ---- Horizontal bar charts ---- */
.snap-bars { margin: 16px 0 24px; }
.snap-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 84px;
  align-items: center;
  gap: 14px;
  margin: 13px 0;
  font-size: 0.92rem;
  color: #1f2430;
}
.snap-bar-name { font-weight: 600; color: #2a2f3a; }

/* soft pastel track */
.snap-bar-track {
  display: block;
  width: 100%;
  background: #f1f0fa;
  border-radius: 999px;
  height: 20px;
  overflow: hidden;
}

/* default pastel fill — calm lavender-sky */
.snap-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8b3f0 0%, #a9d2f2 100%);
}

/* the one bold moment: highlighted bar (IT) in warm amber */
.snap-bar-fill.is-accent {
  background: linear-gradient(90deg, #f6b53f 0%, #f4a32a 100%);
}

.snap-bar-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #4b5563;
  font-weight: 600;
}

@media (max-width: 560px) {
  .snap-hero-stats { grid-template-columns: 1fr; }
  .snap-bar-row {
    grid-template-columns: 110px 1fr 64px;
    font-size: 0.82rem;
    gap: 10px;
  }
}