/* Careers (Prompt 22; Figma desktop 2332:52605, tablet 2334:45463, phone 2335:31003). Header → Calls (chips, groups of Call cards,
   "Don't see your role?") → How collaborating works → Apply (the Contact layout from css/contact.css, .careers-apply overrides).
   Phone text styles come from tokens.css (the type scale switches under 600). */
.careers{
  --careers-label-w: 320px;    /* not a Figma token yet: group label column on desktop */
  --careers-lead-w: 720px;     /* not a Figma token yet: header lead max width on desktop */
  --careers-radius-phone: 20px;/* not a Figma token yet: role card radius on phone */
  max-width:1440px;margin:0 auto}
.careers__header{display:flex;flex-direction:column;gap:var(--space-20);padding:calc(var(--nav-h,120px) + var(--space-80)) var(--space-112) var(--space-48)}
.careers__eyebrow{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.careers__title{margin:0;font:var(--text-5xl);text-transform:uppercase;color:var(--text-primary)}
.careers__title:focus,.careers__title:focus-visible{outline:0;box-shadow:none}
.careers__lead{margin:0;max-width:var(--careers-lead-w);font:var(--text-lg);color:var(--text-primary)}

/* Calls */
.careers__calls{display:flex;flex-direction:column;gap:var(--space-32);padding:0 var(--space-112) var(--space-80)}
.careers__filter{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16) var(--space-24);flex-wrap:wrap}
.careers__chips{display:flex;flex-wrap:wrap;gap:var(--space-8);min-width:0}
.careers__count{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.careers-group{display:flex;gap:var(--space-64);align-items:flex-start;padding-top:var(--space-32);border-top:1px solid var(--border-subtle)}
.careers-group[hidden]{display:none}
.careers-group__label{flex:none;width:var(--careers-label-w);display:flex;flex-direction:column;gap:var(--space-8)}
.careers-group__title{margin:0;font:var(--text-2xl);text-transform:uppercase;color:var(--text-primary)}
.careers-group__desc,.careers-group__link{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.careers-group__link a{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px}
.careers-group__cards{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-16)}
.careers__empty{padding:var(--space-48) 0}
.careers-role{display:flex;align-items:center;gap:var(--space-24);padding:var(--space-32);background:var(--surface-selected);border:1px solid var(--border-subtle);border-radius:var(--radius-xl)}
.careers-role__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-8)}
.careers-role__title{margin:0;font:var(--text-2xl);text-transform:uppercase;color:var(--text-primary)}
.careers-role__body{margin:0;font:var(--text-lg);color:var(--text-secondary)}
.careers-role__btn{flex:none}

/* How collaborating works */
.careers-how{display:flex;flex-direction:column;gap:var(--space-32);padding:var(--space-80) var(--space-112);border-top:1px solid var(--border-subtle)}
.careers-how__title{margin:0;font:var(--text-3xl);text-transform:uppercase;color:var(--text-primary)}
.careers-how__values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32)}
.careers-how__value{display:flex;flex-direction:column;gap:var(--space-12)}
/* Icon Tile (Figma 2332:52819): menu-sheet.css is not loaded on the app, so style tiles here. */
.careers-how__value .menu-row__tile{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-10);background:var(--surface-selected);color:var(--text-primary)}
.careers-how__value .menu-row__tile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.careers-how__text{display:flex;flex-direction:column;gap:var(--space-12)}
.careers-how__vtitle{margin:0;font:var(--text-lg);color:var(--text-primary)}
.careers-how__vbody{margin:0;font:var(--text-sm);color:var(--text-secondary)}

/* Apply: the Contact grid without the navbar offset, with a top border */
.contact.careers-apply{padding:var(--space-80) var(--space-112);border-top:1px solid var(--border-subtle);max-width:none}
.careers-apply__title{margin:0;font:var(--text-4xl);text-transform:uppercase;color:var(--text-primary)}

@media (min-width:1024px) and (max-width:1279px){
  .careers__header{padding-left:var(--space-48);padding-right:var(--space-48)}
  .careers__calls{padding-left:var(--space-48);padding-right:var(--space-48)}
  .careers-how,.contact.careers-apply{padding-left:var(--space-48);padding-right:var(--space-48)}
  .careers-group{gap:var(--space-40)}
  .careers{--careers-label-w:260px}
}

/* Tablet (600–1023, Figma 744) */
@media (max-width:1023px){
  .careers__header{gap:var(--space-16);padding:calc(var(--nav-h,120px) + var(--space-48)) var(--space-32) var(--space-32)}
  .careers__title{font:var(--text-4xl)}
  .careers__lead{max-width:none}
  .careers__calls{gap:var(--space-24);padding:0 var(--space-32) var(--space-48)}
  .careers__filter{flex-direction:column;align-items:flex-start;gap:var(--space-12)}
  .careers-group{flex-direction:column;gap:var(--space-16);padding-top:var(--space-24)}
  .careers-group__label{width:auto;gap:var(--space-4)}
  .careers-group__cards{width:100%;gap:var(--space-12)}
  .careers-role{padding:var(--space-24)}
  .careers-role__text{gap:var(--space-6)}
  .careers-how{gap:var(--space-24);padding:var(--space-48) var(--space-32)}
  .careers-how__title{font:var(--text-2xl)}
  .careers-how__values{grid-template-columns:1fr;gap:var(--space-24)}
  .careers-how__value{flex-direction:row;gap:var(--space-16)}
  .careers-how__text{flex:1;min-width:0;gap:var(--space-4)}
  .contact.careers-apply{padding:var(--space-48) var(--space-32)}
  .careers-apply__title{font:var(--text-3xl)}
}

/* Phone (<600, Figma 390): app view; chips scroll sideways inside their own row */
@media (max-width:599px){
  .careers__header{gap:var(--space-12);padding:var(--space-24) var(--space-16)}
  .careers__title{font:var(--text-5xl)}
  .careers__calls{padding:0 var(--space-16) var(--space-32)}
  .careers__filter{display:block}
  .careers__chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:var(--space-1);margin-block:calc(-1 * var(--space-1))}
  .careers__chips::-webkit-scrollbar{display:none}
  .careers__count{margin-top:var(--space-12)}
  .careers-group__desc{font:var(--text-base)}
  .careers-role{flex-direction:column;align-items:stretch;gap:var(--space-16);padding:var(--space-20);border-radius:var(--careers-radius-phone)}
  .careers-role__body{font:var(--text-base)}
  .careers-role__btn{width:100%}
  .careers-how{padding:var(--space-32) var(--space-16)}
  .careers-how__title{font:var(--text-4xl)}
  .careers-how__values{gap:var(--space-20)}
  .careers-how__vtitle{font:var(--text-xl);text-transform:uppercase}
  .careers-how__vbody{font:var(--text-base)}
  .contact.careers-apply{padding:var(--space-24) var(--space-16)}
  .careers-apply__title{font:var(--text-4xl)}
}