/* Careers (S17). One plain layout: the roles list is the page. */

.cr-head .page-head__words { max-width: 760px; }
@media (min-width: 1280px) { .cr-head .t-display { text-wrap: wrap; } }

/* ---------- Open now. ---------- */
.cr-roles { display: flex; gap: 64px; }
.cr-roles__head { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.cr-roles__body { flex: 1; min-width: 0; }
.cr-role { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--color-border); }
.cr-role:first-child { border-top-color: var(--color-foreground); }
.cr-role:last-child { border-bottom: 1px solid var(--color-border); }
.cr-role__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-role__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cr-role__pill { align-self: center; background: #FFFFFF; border-color: #BDBDBD; }
.cr-role__btn { flex-shrink: 0; }
.cr-note { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; }

/* ---------- What the work is like. ---------- */
.cr-work { display: flex; flex-direction: column; gap: 40px; }
.cr-work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.cr-point { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--color-foreground); }

/* 768 to 1023: the label and title sit above the list; the three points go two, then one full width. */
@media (max-width: 1023px) {
  .cr-roles { flex-direction: column; gap: 32px; }
  .cr-roles__head { width: auto; }
  .cr-work { gap: 32px; }
  .cr-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .cr-work__grid > :last-child { grid-column: 1 / -1; }
}

/* Below 768: one column; the buttons go full width under each role. */
@media (max-width: 767px) {
  .cr-roles { gap: 20px; }
  .cr-roles__head { gap: 12px; }
  .cr-role { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0; }
  .cr-role__words { gap: 6px; }
  .cr-role .t-card, .cr-point .t-card { font-size: 20px; line-height: 26px; }
  .cr-role__title { gap: 8px; }
  .cr-role__btn { width: 100%; height: 44px; }
  .cr-note { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cr-note .t-secondary { font-size: var(--text-body); line-height: var(--leading-body); }
  .cr-work { gap: 20px; }
  .cr-work__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cr-point { gap: 6px; padding: 12px 0; }
  .cr-point:last-child { padding-bottom: 0; }
}