/* ==========================================================================
   careers.css — Careers page styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.careers-hero {
  background: var(--gradient-dark);
  padding: var(--space-24) var(--space-6) var(--space-20);
  text-align: center;
}

.careers-hero__overline {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-electric);
  margin-bottom: var(--space-4);
}

.careers-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.careers-hero__sub {
  font-size: 18px;
  color: var(--text-inverse-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Open Positions Section
   -------------------------------------------------------------------------- */
.careers-openings {
  background-color: var(--bg-light);
  padding: var(--space-20) var(--space-6);
}

.careers-openings__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.careers-openings__overline {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-electric);
  margin-bottom: var(--space-3);
}

.careers-openings__heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.careers-openings__sub {
  font-size: 16px;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   No Openings State
   -------------------------------------------------------------------------- */
.careers-no-openings {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  margin-top: var(--space-10);
}

.careers-no-openings__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background-color: var(--color-electric-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.careers-no-openings__icon [data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--color-electric);
}

.careers-no-openings__heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.careers-no-openings__text {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto var(--space-5);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Job Card (future use, hidden until needed)
   -------------------------------------------------------------------------- */
.careers-job-card {
  display: none; /* Remove when jobs are available */
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: left;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  transition: box-shadow var(--duration-fast), border-color var(--duration-fast);
}

.careers-job-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-electric);
}

.careers-job-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.careers-job-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.careers-job-card__meta {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.careers-job-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Culture Section
   -------------------------------------------------------------------------- */
.careers-culture {
  background-color: var(--bg-dark);
  padding: var(--space-20) var(--space-6);
}

.careers-culture__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.careers-culture__overline {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-electric);
  margin-bottom: var(--space-3);
}

.careers-culture__heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.careers-culture__sub {
  font-size: 16px;
  color: var(--text-inverse-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

.careers-culture__bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
  max-width: 560px;
}

.careers-culture__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: 16px;
  color: var(--text-inverse-muted);
  line-height: 1.6;
}

.careers-culture__bullet-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: rgba(47, 128, 237, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.careers-culture__bullet-icon [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--color-electric);
}

.careers-culture__bullet-strong {
  color: var(--color-white);
}