/* Careers page (vacatures), NL at the root and EN in /en.
 * Loaded after home.css and sector.css: nav, footer, crumb, .h2 .tone and buttons come from those unchanged.
 * Pattern (from Linear, Runway and Attio careers pages): a plain two-tone head, roles as hairline rows,
 * the posting as one reading column beside a light, sticky facts panel. No cards, no chips.
 */

.careers { padding-top: calc(var(--nav-height) + var(--space-xl)); }
.careers section { padding-block: var(--space-3xl); }
.careers section + section { border-top: var(--rule-hair) solid var(--color-rule-2); }

/* ============ Head ============ */
.careers .cr-head { padding-block: 0 var(--space-3xl); }
.cr-head .display .tone { color: var(--color-ink-2); }
.cr-head .lede { margin-top: var(--space-lg); max-width: 38rem; }
.cr-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); }
.cr-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule);
}
.cr-facts dt { color: var(--color-ink-2); }
.cr-facts dd { margin-top: var(--space-3xs); font-weight: 600; letter-spacing: var(--track-body); }
@media (min-width: 48rem) { .cr-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ Open roles: hairline rows ============ */
.cr-group { margin-top: var(--space-2xl); color: var(--color-ink-2); }
.cr-roles { margin-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.cr-role {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule);
  color: inherit; text-decoration: none;
}
.cr-role-name { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--track-head); }
.cr-role-meta { grid-column: 1; color: var(--color-ink-2); }
.cr-role-go { grid-column: 2; grid-row: 1 / span 2; color: var(--color-ink-2); font-size: var(--text-xs); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.cr-role-go::after { content: " →"; }
@media (min-width: 48rem) {
  .cr-role { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto; }
  .cr-role-meta { grid-column: 2; grid-row: 1; }
  .cr-role-go { grid-column: 3; grid-row: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .cr-role:hover .cr-role-name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  .cr-role:hover .cr-role-go { color: var(--color-ink); }
}
.cr-role:active { opacity: 0.6; }
.cr-role.is-quiet .cr-role-name { font-weight: 500; color: var(--color-ink-2); }

/* ============ The posting ============ */
.cr-job { scroll-margin-top: var(--nav-height); }
.cr-job-head { display: grid; gap: var(--space-md); padding-bottom: var(--space-xl); }
.cr-job-meta { color: var(--color-ink-2); }
.cr-job-grid { display: grid; gap: var(--space-2xl); }
.cr-job-body { max-width: 42rem; }
.cr-job-body h3 {
  font-size: var(--text-md); font-weight: 600; letter-spacing: var(--track-head);
  margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2);
}
.cr-job-body h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cr-job-body h4 { font-size: var(--text-base); font-weight: 600; margin-top: var(--space-xl); }
.cr-job-body p, .cr-job-body li { color: var(--color-ink-2); line-height: 1.55; text-wrap: pretty; }
.cr-job-body strong { color: var(--color-ink); font-weight: 600; }
.cr-job-body > * + * { margin-top: var(--space-md); }
.cr-job-body h3 + *, .cr-job-body h4 + * { margin-top: var(--space-sm); }
.cr-job-body ul, .cr-job-body ol { display: grid; gap: var(--space-sm); padding-left: 1.25em; }
.cr-job-body ul { list-style: disc; }
.cr-job-body ol { list-style: decimal; }
.cr-job-body li::marker { color: var(--color-ink-3); }
.cr-job-body ol li strong { display: block; }

.cr-apply {
  align-self: start;
  padding: var(--space-lg); border-radius: var(--radius-card);
  background: var(--color-card); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.cr-apply dl { display: grid; gap: var(--space-md); }
.cr-apply dt { color: var(--color-ink-2); }
.cr-apply dd { margin-top: var(--space-3xs); font-weight: 500; }
.cr-apply p { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); }
.cr-apply p a { color: var(--color-ink); }
.cr-apply .btn { width: 100%; margin-top: var(--space-lg); }
@media (max-width: 63.99rem) { .cr-apply { order: -1; } }   /* phones + tablets: how to apply before the long read */
@media (min-width: 64rem) {
  .cr-job-grid { grid-template-columns: minmax(0, 42rem) 20rem; justify-content: space-between; }
  .cr-apply { position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
}

/* ============ How we work + process: text in columns under a rule ============ */
.cr-cols { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); counter-reset: step; }
.cr-col { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.cr-col h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.25; letter-spacing: var(--track-head); }
.cr-col p { color: var(--color-ink-2); max-width: 30rem; }
.cr-steps .cr-col { counter-increment: step; }
.cr-steps .cr-col h3::before { content: counter(step) ". "; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) {
  .cr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-cols.cr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}