/* ==========================================================================
   Page: Career (Figma 1841:6587)
   Hero + culture text reuse .expertise-hero / .expertise-text (page-expertise-
   single.css, also enqueued here). This file only adds the image grid and the
   dark "Work With Us" section. Built on tokens.css.
   ========================================================================== */

.career { background: var(--bg-primary); }

/* ── Culture images (left small, right tall) ─────────────────────────────── */
.career-images { padding-bottom: 80px; }
.career-images__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 437px;
  gap: 20px;
}
.career-images__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: #dfe2f0;
}
.career-images__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.career-images__item--left  { grid-column: 1 / span 2; grid-row: 1; }
.career-images__item--right { grid-column: 3 / span 2; grid-row: 1 / span 2; }

/* ── Work With Us (dark) ─────────────────────────────────────────────────── */
.career-work {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  padding-block: 100px;
  color: var(--text-light);
}
/* Curve is the shared .work-with-us__curve (sections/section-work-with-us.css). */
.career-work__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px 20px;
  align-items: start;
}
.career-work__heading {
  margin: 0;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text-light);
}
.career-work__right {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.career-work__body {
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--text-light);
}
.career-work__body p { margin: 0 0 1em; }
.career-work__body p:last-child { margin-bottom: 0; }

.career-work__roles {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.career-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.career-role__label {
  font-size: var(--title-xs);
  line-height: var(--title-xs-lh);
  letter-spacing: -0.01em;
  color: var(--text-light);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .career-work__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .career-images__grid { display: flex; flex-direction: column; grid-auto-rows: auto; }
  .career-images__item { aspect-ratio: 3 / 2; }
  .career-images__item--right { aspect-ratio: 3 / 4; }
  .career-work { padding-block: 56px; }
  .career-work__right { gap: 48px; }
  /* Figma 3213:5924 mobile: rows stay side-by-side (label left, compact button
     right) with the larger 32px title-xs label. */
  .career-role { gap: 16px; }
  .career-role__label { font-weight: 400; }
}

/* Mobile: cap oversized section padding to the 60px base rhythm. */
@media (max-width: 767px) {
  .career-images { padding-bottom: 60px; }
}