/* =========================================================
   Careers page (minimal, relies on global css/style.css)
   - No overrides of .container, header, footer, buttons, etc.
   - Uses existing cards (.feature-card, .service-card) & grids (.grid-2)
   - Safe, scoped spacing/utilities only
   ========================================================= */

/* Generic section spacing for careers blocks */
.careers-section { padding: 2rem 0; }

/* Hero — if you use .page-header in HTML, you don't need this.
   Keeping a tiny helper so .careers-hero can exist without restyling. */
.careers-hero { padding: 3rem 0; text-align: center; }
.careers-hero h1 { margin-bottom: 0.5rem; }
.careers-hero p  { max-width: 720px; margin: 0 auto 1rem; }

/* Benefits — use your existing .grid-2 + .feature-card in HTML.
   This just ensures nice gaps if you wrap them in .benefits-grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

/* Roles — reuse .service-card for each role item.
   Below styles only handle header/filter layout and badge chip. */
.roles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.roles-filter select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #cfd9ea;
  background: #fff;
}

/* Optional grid wrapper for roles; you can also just use .grid-2 */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

/* Small badge chip used alongside role titles */
.badge {
  font-size: 0.75rem;
  background: #eef4ff;
  color: #2166bf;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #d7e5ff;
}

/* Apply form — only layout (no visual restyle of inputs/buttons) */
.apply-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.apply-form-grid .full { grid-column: 1 / -1; }

/* FAQ spacing (uses native <details>/<summary>) */
.careers-faq details {
  margin: 10px 0;
}

/* Empty state (when there are no openings) */
.careers-empty {
  text-align: center;
  max-width: 720px;
  margin: 2rem auto;
}

/* Responsive tweaks */
@media (max-width: 720px) {
  .roles-header { flex-direction: column; align-items: flex-start; }
  .apply-form-grid { grid-template-columns: 1fr; }
}