/* ==========================================================================
   careers.css — Careers page (why-join values + data-driven open positions)
   Plain CSS using the site's design tokens.
   ========================================================================== */

.careers-hero { max-width: 60ch; }

/* --------------------------------------------------------------------------
   Why Join Us — 4 value cards
   -------------------------------------------------------------------------- */
.careers-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.careers-value {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.careers-value:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.careers-value__icon { width: 32px; height: 32px; color: var(--color-primary); }
.careers-value h3 { font: 600 1.05rem/1.3 var(--font-body); color: var(--color-charcoal); }
.careers-value p { font: var(--text-small); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Open Positions
   -------------------------------------------------------------------------- */
.careers-jobs { margin-top: var(--space-lg); max-width: 820px; }

.job-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.job-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.job-card__title { font: var(--text-h3); color: var(--color-charcoal); margin-bottom: 0.6rem; }
.job-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.job-card__tag {
  font: var(--text-caption);
  font-weight: 500;
  color: var(--color-charcoal);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}
.job-card__desc { font: var(--text-body); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.job-card__apply { font: var(--text-small); font-weight: 600; color: var(--color-primary); }
.job-card__apply:hover { color: var(--color-link-hover); }

/* Empty state (no open positions) */
.careers-empty {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl) var(--space-lg);
}
.careers-empty p { font: var(--text-body); color: var(--color-text-muted); margin-bottom: var(--space-lg); }

/* Loading + error states (mirrors the News & Events page) */
.careers-loading,
.careers-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-text-muted);
  font: var(--text-body);
}
.careers-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: careers-spin 0.8s linear infinite;
}
@keyframes careers-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .careers-spinner { animation-duration: 2s; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .careers-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .careers-values { grid-template-columns: 1fr; }
}