/* ============================================================
   Careers — template-careers.php only.
   Loaded after site.css and subpages.css (see inc/careers.php), and kept
   out of subpages.css so the page ships and rolls back on its own.
   ============================================================ */

/* ─── Apply: how to send a CV ────────────────────────────── */
.careers__steps { max-width: 720px; margin: 0; }
.careers__step {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 24px; padding: 20px 0; border-top: 1px solid var(--line);
}
.careers__step dt {
  padding-top: 4px; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--type-mute);
}
.careers__step dd { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.careers__step dd a {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s;
}
.careers__step dd a:hover { color: var(--steel); }

.careers__actions {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.careers__hint { font-size: 14px; color: var(--type-mute); }

/* ─── Current openings ───────────────────────────────────── */
.careers__openings { max-width: 1200px; margin: 0; padding: 0; list-style: none; }
.job {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto;
  gap: 32px; padding: 28px 0; border-top: 1px solid var(--line);
}
.job__title {
  font-family: var(--font-display); font-size: 24px; line-height: 1.15;
  font-weight: 500; letter-spacing: -0.02em;
}
.job__summary {
  margin: 10px 0 0; max-width: 560px;
  font-size: 15px; line-height: 1.55; color: var(--type-mute);
}
.job__meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink); }
.job__meta span + span { color: var(--type-mute); }
.job__link {
  align-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 2px; border-bottom: 1px solid currentColor;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--ink); text-decoration: none; transition: color 0.15s;
}
.job__link:hover { color: var(--steel); }
.job__link svg { width: 1em; height: 1em; }

@media (max-width: 860px) {
  .job { grid-template-columns: 1fr; gap: 16px; }
  .job__meta { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .job__link { justify-self: start; }
}

@media (max-width: 640px) {
  .careers__step { grid-template-columns: 1fr; gap: 6px; }
}