/* ==========================================================================
   Careers page — scoped under .page-careers
   ========================================================================== */

/* ---------- Openings: empty state ---------- */
.page-careers .careers-empty {
  padding: clamp(var(--space-6), 4vw, var(--space-8)) var(--space-5);
  text-align: center;
  background:
    radial-gradient(circle at 100% 0, rgb(226 174 60 / 0.18) 0 56px, transparent 57px),
    var(--cream-50);
  border: 2px dashed var(--green-100);
  border-radius: var(--radius-lg);
}
.page-careers .careers-empty__icon {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--gold-100); color: var(--gold-700);
}
.page-careers .careers-empty__icon .icon { width: 34px; height: 34px; }
.page-careers .careers-empty p { max-width: 52ch; margin-inline: auto; color: var(--ink-700); }
.page-careers .careers-empty__actions { justify-content: center; margin-top: var(--space-5); }

/* ---------- Openings: job cards (template in careers.html) ---------- */
.page-careers .careers-jobs { display: grid; gap: var(--space-5); }
.page-careers .careers-job__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-careers .careers-job__head h3 { margin: 0; }
.page-careers .careers-job__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4);
  font-size: var(--fs-sm); color: var(--color-muted); font-weight: 700;
}

/* ---------- Job cards with the hiring poster ---------- */
.page-careers .careers-job--poster { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 700px) { .page-careers .careers-job--poster { grid-template-columns: 200px minmax(0, 1fr); } }
.page-careers .careers-job__body { min-width: 0; }
.page-careers .careers-job__poster {
  position: relative; display: block; max-width: 280px; width: 100%; justify-self: center;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--dur, 0.2s) ease, box-shadow var(--dur, 0.2s) ease;
}
.page-careers .careers-job__poster picture { display: block; }
.page-careers .careers-job__poster img { display: block; width: 100%; height: auto; }
.page-careers .careers-job__poster:hover,
.page-careers .careers-job__poster:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
.page-careers .careers-job__zoom {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--green-700); color: var(--white);
  font-size: var(--fs-sm); font-weight: 700;
}
.page-careers .careers-job__poster:hover .careers-job__zoom,
.page-careers .careers-job__poster:focus-visible .careers-job__zoom { background: var(--green-800); }
.page-careers .careers-openings-note { margin-top: var(--space-6); }

/* ---------- Why work at RMS ---------- */
.page-careers .careers-why { display: grid; gap: var(--space-5) var(--space-7); align-items: center; margin-bottom: var(--space-7); }
.page-careers .careers-why .section-head { margin-bottom: 0; }
@media (min-width: 900px) {
  .page-careers .careers-why { grid-template-columns: 1fr 480px; }
}
.page-careers .careers-why__photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.page-careers .careers-why__photo picture { display: block; height: 100%; }
.page-careers .careers-why__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .page-careers .careers-job__poster, .page-careers .careers-job__poster:hover { transition: none; transform: none; }
}

/* ---------- Application ---------- */
.page-careers .careers-apply { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) {
  .page-careers .careers-apply { grid-template-columns: 0.85fr 1.15fr; }
  .page-careers .careers-apply__intro { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
.page-careers .careers-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-block: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--gold-100);
  border-left: 5px solid var(--gold-500);
  border-radius: var(--radius);
  color: var(--ink-900);
}
.page-careers .careers-note .icon { margin-top: 0.25em; color: var(--gold-700); width: 1.4em; height: 1.4em; }
.page-careers .careers-note p { margin: 0; }
/* The email link text carries a <wbr> after the @, so it only wraps there. */
.page-careers .careers-note a { font-weight: 800; overflow-wrap: normal; word-break: normal; }

.page-careers .careers-form {
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.page-careers .careers-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Values: 1-up, 2 x 2, then 4-up (never 3 + 1) */
.page-careers .careers-values { grid-template-columns: 1fr; }
@media (min-width: 560px) { .page-careers .careers-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .page-careers .careers-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }