/* Careers page only: job cards get a muted accent border, cycling through the
   same palette as the Services / Products / Projects pages. Jobs are loaded from
   the database, so colours follow position: neighbouring cards always differ,
   whatever jobs are posted. */

.jobs-grid .job-card:nth-child(6n+1) { --acc: #2f5fb3; }
.jobs-grid .job-card:nth-child(6n+2) { --acc: #148f8a; }
.jobs-grid .job-card:nth-child(6n+3) { --acc: #6b5fc0; }
.jobs-grid .job-card:nth-child(6n+4) { --acc: #b98a1f; }
.jobs-grid .job-card:nth-child(6n+5) { --acc: #2f8a5a; }
.jobs-grid .job-card:nth-child(6n+6) { --acc: #c0603a; }

.job-card {
  border: 2px solid var(--acc, #0623b1);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 30, 70, .12);
}
.job-card:hover { box-shadow: 0 14px 30px rgba(15, 30, 70, .18); }

/* accent line between the title and the body, and a tinted job-type pill */
.job-card .job-card-header { border-bottom: 2px solid var(--acc, #0623b1); }
.job-card .job-card-header .job-type {
  background: color-mix(in srgb, var(--acc, #0623b1) 14%, transparent);
  color: var(--acc, #0623b1);
  font-weight: 600;
}

/* phones: give the cards the width they were losing to nested padding */
@media (max-width: 600px) {
  .jobs-section { padding: 48px 0; }
  .careers-container { padding: 0 14px; }
  #jobs-container { padding: 16px 12px; }
  .jobs-grid { gap: 18px; margin-bottom: 20px; }
  .job-card .job-card-header { padding: 16px; }
  .job-card .job-card-header h3 { font-size: 18px; line-height: 1.35; }
  .job-card .job-card-body { padding: 16px; }
  .job-card .job-meta { font-size: 13px; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
  .job-card .job-description { font-size: 14px; line-height: 1.7; }
}