/* ==========================================================================
   /careers — the open roles on paper, the closed ones on ink.
   Everything else on the page is the shared system in cassells.css.
   ========================================================================== */

.cr-none { margin-top: 1.5rem; }

/* ── An open role ─────────────────────────────────────────────────────────── */

.cr-role { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.cr-role + .cr-role {
  margin-top: var(--cf-section);
  padding-top: var(--cf-section);
  border-top: 1px solid var(--cf-rule-light);
}

.cr-role__head {
  display: flex; flex-direction: column; gap: 0.875rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* The metabar is markup-neutral in cassells.css; as a <dl> it needs the user-agent
   indent and margins taken off. */
.cr-role__facts { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.cr-role__facts dd { margin-inline-start: 0; }

.cr-role__lead {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 0;
}

.cr-role__sub {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0.75rem 0 0;
}

.cr-link { text-decoration: underline; text-underline-offset: 0.2em; }

.cr-role__apply {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.cr-role__apply .cf-meta { margin: 0; }

/* ── Closed roles ─────────────────────────────────────────────────────────── */

.cr-closed { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.cr-closed__item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 1rem clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 2.4vw, 2rem) 0;
  border-top: 1px solid var(--cf-rule-dark);
}
.cr-closed__item:last-child { border-bottom: 1px solid var(--cf-rule-dark); }

.cr-closed__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.01em; text-transform: uppercase; line-height: 1;
  color: var(--cf-bright);
  margin: 0;
}

/* Same build as the timetable's .cf-time, dimmed: a label, not a call to action. */
.cr-closed__tag {
  display: inline-block;
  margin: 0.875rem 0 0;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--cf-rule-dark);
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cf-dim);
}

.cr-closed__item .cf-meta { margin: 0; }

@media (max-width: 1100px) {
  .cr-closed__item { grid-template-columns: minmax(0, 1fr); }
}

/* ── The online application (/careers/apply/{slug}) ───────────────────────── */

.cr-form { max-width: 52rem; }

.cr-step { border: 0; margin: 0 0 clamp(2.5rem, 4.5vw, 3.75rem); padding: 0; min-width: 0; }
.cr-step__title {
  display: flex; align-items: baseline; gap: 0.875rem;
  padding: 0; margin: 0 0 1.5rem;
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem); letter-spacing: -0.01em; text-transform: uppercase;
}
.cr-step__title span { font-size: 0.8125rem; letter-spacing: 0.2em; color: var(--cf-accent-text); }

/* The native control, squared off: zero radius is the system's one rule without exceptions. */
.cr-file {
  display: block; width: 100%;
  padding: 1rem; border: 1px dashed var(--cf-rule-oat); background: var(--cf-paper);
  font-family: var(--cf-sans); font-size: 0.9375rem; color: var(--cf-ink);
}
.cr-file:focus-visible { border-color: var(--cf-accent); }
.cr-file::file-selector-button {
  margin-right: 1rem; padding: 0.6875rem 1.125rem; border: 0; border-radius: 0;
  background: var(--cf-ink); color: var(--cf-on-dark); cursor: pointer;
  font-family: var(--cf-display); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.cr-file::file-selector-button:hover { background: var(--cf-accent); color: var(--cf-ink); }

.cr-hint { margin: 0.625rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--cf-body-light); }
.cr-or {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0 1rem;
  font-family: var(--cf-display); font-weight: 900; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cf-body-light);
}
.cr-or::after { content: ""; flex: 1; height: 1px; background: var(--cf-rule-light); }

.cr-consent { display: flex; align-items: flex-start; gap: 0.875rem; font-size: 0.9375rem; line-height: 1.6; color: var(--cf-body-light); cursor: pointer; }
.cr-consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1875rem 0 0; accent-color: var(--cf-ink); }

.cr-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.cr-send .cf-meta { margin: 0; }
.cr-send .cf-btn:disabled { opacity: 0.55; cursor: progress; }

.cr-progress { margin-top: 1.75rem; }
.cr-progress progress {
  display: block; width: 100%; height: 0.5rem;
  appearance: none; -webkit-appearance: none; border: 0; background: var(--cf-rule-light);
}
.cr-progress progress::-webkit-progress-bar { background: var(--cf-rule-light); }
.cr-progress progress::-webkit-progress-value { background: var(--cf-accent); transition: width 0.3s ease; }
.cr-progress progress::-moz-progress-bar { background: var(--cf-accent); }
.cr-progress__text { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--cf-body-light); font-variant-numeric: tabular-nums; }

.cr-done {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 46rem;
  scroll-margin-top: calc(var(--cf-nav-h) + 1.5rem); /* clear the sticky nav when the page scrolls to it */
}
.cf-formnote { scroll-margin-top: calc(var(--cf-nav-h) + 1.5rem); }
.cr-done[hidden] { display: none; }
.cr-done:focus { outline: none; }