/* Careers page only (2026-10-22, proposal docs/axiom/pages/proposals/careers.md). Headings take the shared Space Grotesk rule in
   site.css; every size here is a --t-* token. Prefix cr-. */

/* 03 Areas of work: six discipline cards, three across in two rows (owner, 2026-10-25: Sales & Marketing added) */
.cr-disc__tag { margin: 0 0 24px; }
.cr-disc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cr-disc > .card { grid-column: span 2; }

/* 04 Working at Yalla2x (owner, 2026-10-24: "lot of space is going on this specific session"): a shorter panel, and the
   four values side by side under the head (two across on a tablet, stacked on a phone), each under its own rule */
.dsec.cr-working { padding-block: clamp(56px, 6vw, 96px); }
.cr-working .shead { margin-bottom: clamp(28px, 3vw, 44px); }
.cr-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(16px, 2vw, 32px); }
.cr-values > li { display: block; padding-block: 18px 0; border-bottom: 0; }
.cr-values .rows__n { display: block; padding-top: 0; }
.cr-values h3 { margin-top: 10px; font-size: var(--t-h5); }
@media (max-width: 1023px) { .cr-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cr-values { grid-template-columns: minmax(0, 1fr); } }

/* 05 Open roles, the empty state: one wide outlined card, title and line left, the one button right and vertically centred */
.cr-empty {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title action" "body action";
  align-items: center; column-gap: clamp(24px, 4vw, 64px); row-gap: 14px; padding: clamp(28px, 3vw, 48px);
}
.cr-empty > .h3 { grid-area: title; }
.cr-empty > p { grid-area: body; }
.cr-empty > .btn { grid-area: action; justify-self: end; }

/* 06 Hiring journey: a one-line statement, nothing under the section head */
.cr-journey .shead { margin-bottom: 0; }

@media (max-width: 1023px) {
  .cr-disc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-disc > .card { grid-column: auto; }
}
@media (max-width: 767px) {
  .cr-disc { grid-template-columns: 1fr; }
  .cr-empty { grid-template-columns: 1fr; grid-template-areas: "title" "body" "action"; }
  .cr-empty > .btn { justify-self: stretch; margin-top: 8px; }
}