/* ==========================================================================
   CrysMed — Careers page
   Extends version2's tokens + main.css. Rebuilt to match the client-approved
   "Career Page" reference — see references/pages/. Tight spacing throughout
   per the density pass agreed for this project (see deals.html / offer-single.html).
   ========================================================================== */


.section--tight { padding-block: var(--sp-5); }

/* ---------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------- */

.careers-breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); }
.careers-breadcrumb .container { padding-block: var(--sp-2); display: flex; align-items: center; gap: 6px; }
.careers-breadcrumb a { font-size: .75rem; color: var(--ink-500); font-weight: var(--fw-medium); }
.careers-breadcrumb a:hover { color: var(--brand-900); text-decoration: underline; }
.careers-breadcrumb span:not([aria-current]) { font-size: .75rem; color: var(--ink-300); }
.careers-breadcrumb span[aria-current] { font-size: .75rem; color: var(--ink-900); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

.careers-hero { background: var(--peach-tint); border-bottom: 1px solid var(--line); }
.careers-hero .container { padding-block: var(--sp-5); }
.careers-hero__grid { display: grid; grid-template-columns: 1fr .95fr; gap: var(--sp-6); align-items: center; }
.careers-hero__copy h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  margin: var(--sp-1) 0 var(--sp-2);
  max-width: 14ch;
}
.careers-hero__copy > p { font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-relaxed); max-width: 40ch; margin-bottom: var(--sp-4); }
.careers-hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.careers-hero__note { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-500); }
.careers-hero__note svg { width: 16px; height: 16px; color: var(--brand-700); flex-shrink: 0; }
.careers-hero__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.careers-hero__media .placeholder-img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .careers-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .careers-hero__media { order: -1; }
}

/* ---------------------------------------------------------------------
   Value strip
   --------------------------------------------------------------------- */

.value-strip { border-bottom: 1px solid var(--line); }
.value-strip .container { padding-block: var(--sp-5); }
.value-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); text-align: center; }
.value-strip__item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.value-strip__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.value-strip__icon svg { width: 21px; height: 21px; }
.value-strip__item b { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); }
.value-strip__item span { font-size: .75rem; color: var(--ink-700); }

@media (max-width: 720px) {
  .value-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* ---------------------------------------------------------------------
   Find your place: job search + list + benefits sidebar
   --------------------------------------------------------------------- */

.roles-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; }

.roles-main__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.roles-main__head h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); }

.roles-tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--r-full); padding: 3px; background: var(--white); }
.roles-tabs a {
  background: none; border: none;
  padding: 7px var(--sp-4);
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-500);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.roles-tabs a.is-active { background: var(--brand-700); color: var(--white); }

.roles-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.roles-search__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--ink-700);
  background: var(--white);
}
.roles-search__field svg { width: 15px; height: 15px; color: var(--ink-500); flex-shrink: 0; }
.roles-search__field input { border: none; outline: none; font-family: inherit; font-size: var(--fs-xs); background: transparent; width: 100%; }
.roles-search__field--grow { flex: 1; min-width: 180px; }
select.roles-search__field { min-width: 110px; }

.roles-count { font-size: .75rem; color: var(--ink-500); margin-bottom: var(--sp-3); }
.roles-count span { font-weight: var(--fw-bold); color: var(--ink-900); }

.role-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }

.roles-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-100);
  margin-bottom: var(--sp-3);
}
.roles-empty__icon { color: var(--ink-400); }
.roles-empty__icon svg { width: 32px; height: 32px; }
.roles-empty h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink-900); }
.roles-empty p { font-size: .85rem; color: var(--ink-500); max-width: 32rem; }
.roles-empty p a { color: var(--brand-600); font-weight: var(--fw-semibold); }
.role-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.role-row:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.role-row__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.role-row__icon svg { width: 17px; height: 17px; }
.role-row__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.role-row__body b { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); }
.role-row__body span { font-size: .6875rem; color: var(--ink-700); }
.role-row__posted { font-size: .6875rem; color: var(--ink-500); white-space: nowrap; }
.role-row__view { font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-900); white-space: nowrap; }
.role-row:hover .role-row__view { color: var(--brand-700); }
.role-row__save { background: none; border: none; color: var(--ink-300); flex-shrink: 0; }
.role-row__save svg { width: 16px; height: 16px; }
.role-row__save:hover { color: var(--brand-700); }

.benefits-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--sp-4);
  position: sticky;
  top: var(--sticky-top);
}
.benefits-card h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }
.benefits-card__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.benefits-card__list li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-700); }
.benefits-card__list svg { width: 17px; height: 17px; color: var(--brand-700); flex-shrink: 0; }
.benefits-card__fine { font-size: .6875rem; color: var(--ink-500); line-height: var(--lh-relaxed); padding-top: var(--sp-3); border-top: 1px solid var(--line-strong); }

@media (max-width: 1080px) {
  .roles-layout { grid-template-columns: minmax(0, 1fr); }
  .benefits-card { position: static; }
}
@media (max-width: 640px) {
  .role-row { grid-template-columns: 32px minmax(0, 1fr); }
  .role-row__posted, .role-row__view, .role-row__save { grid-column: 2; }
}

/* ---------------------------------------------------------------------
   Explore team pathways
   --------------------------------------------------------------------- */

.pathway-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pathway-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.pathway-card:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.pathway-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pathway-card b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); margin: var(--sp-3) var(--sp-3) 0; }
.pathway-card span { font-size: .75rem; color: var(--ink-700); margin: 2px var(--sp-3) var(--sp-2); }
.pathway-card em { font-style: normal; font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-900); margin: 0 var(--sp-3) var(--sp-3); }
.pathway-card:hover em { color: var(--brand-700); }

@media (max-width: 720px) {
  .pathway-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Mission split + hiring process + fraud notice, with sponsored sidebar
   --------------------------------------------------------------------- */

.mission-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; }
.mission-main { min-width: 0; }

.mission-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-5); }
.mission-split img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.mission-split__copy h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--ink-900); margin-bottom: var(--sp-3); }
.mission-checklist { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mission-checklist li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-700); }
.mission-checklist svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; }
.mission-quote { border-left: 3px solid var(--brand-700); padding-left: var(--sp-3); }
.mission-quote p { font-size: var(--fs-xs); font-style: italic; color: var(--ink-900); line-height: var(--lh-relaxed); margin-bottom: 4px; }
.mission-quote cite { font-style: normal; font-size: .75rem; color: var(--ink-500); }

@media (max-width: 720px) {
  .mission-split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Hiring process (journey stepper, ported from offer-single.css) ---- */
.journey-row { display: flex; gap: var(--sp-3); }
.journey-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.journey-step__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--white);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  margin-bottom: 4px;
}
.journey-step::before {
  content: "";
  position: absolute;
  top: 13px; left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}
.journey-step:first-child::before { display: none; }
.journey-step b { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); }
.journey-step span { font-size: .6875rem; color: var(--ink-500); line-height: var(--lh-snug); }

/* ---- Section wrapper + note box (ported from offer-single.css) ---- */
.offer-section { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.offer-section--last { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.offer-section h2 { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin-bottom: var(--sp-3); }
.offer-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  margin-top: var(--sp-3);
}
.offer-note svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* ---- Fraud notice ---- */
.fraud-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--peach-tint);
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-700);
  line-height: var(--lh-relaxed);
}
.fraud-notice svg { width: 18px; height: 18px; color: var(--brand-700); flex-shrink: 0; margin-top: 1px; }

/* ---- Sponsored sidebar (ported from offer-single.css / providers.css) ---- */
.offer-sidebar { position: sticky; top: var(--sticky-top); }
.prov-sponsor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--r-lg);
  background: var(--brand-tint);
  overflow: hidden;
}
.prov-sponsor__head {
  background: var(--brand-700);
  color: var(--white);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-2);
}
.prov-sponsor__media { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; font-size: .625rem; border-radius: 0; }
.prov-sponsor__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.prov-sponsor__fine { font-size: .6875rem; color: var(--ink-700); line-height: var(--lh-relaxed); margin: var(--sp-1) 0 var(--sp-3); }
.provcard__verified { display: inline-flex; align-items: center; gap: 4px; font-size: .625rem; font-weight: var(--fw-bold); color: var(--success); margin-bottom: var(--sp-1); }
.provcard__verified svg { width: 11px; height: 11px; flex-shrink: 0; }
.provcard__name { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: var(--lh-snug); }
.provcard__meta { font-size: .6875rem; color: var(--ink-500); margin-bottom: var(--sp-3); }
.provcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.provcard__tags li { font-size: .625rem; font-weight: var(--fw-medium); color: var(--ink-700); background: var(--white); padding: 3px 8px; border-radius: var(--r-sm); }

@media (max-width: 1080px) {
  .mission-layout { grid-template-columns: minmax(0, 1fr); }
  .offer-sidebar { position: static; }
}

/* ---------------------------------------------------------------------
   Talent network
   --------------------------------------------------------------------- */

.talent-band { background: var(--brand-900); }
.talent-band .container { padding-block: var(--sp-6); }
.talent-band__grid { display: grid; grid-template-columns: .85fr 1fr; gap: var(--sp-6); align-items: stretch; }
.talent-band__copy {
  display: flex;
  flex-direction: column;
}
.talent-band__copy h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--white); margin: var(--sp-1) 0 var(--sp-2); }
.talent-band__copy p { font-size: var(--fs-xs); color: rgba(255,255,255,.72); line-height: var(--lh-relaxed); }
.talent-band__media {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-4);
}
.talent-band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.talent-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.talent-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.talent-form .field { color: var(--white); }
.talent-form__consent { color: rgba(255,255,255,.8); }
.talent-form__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.talent-form__fine {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  color: rgba(255,255,255,.55);
}
.talent-form__fine svg { width: 14px; height: 14px; flex-shrink: 0; }
.talent-form__fine a { color: rgba(255,255,255,.8); text-decoration: underline; }

@media (max-width: 900px) {
  .talent-band__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .talent-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   FAQ (uses .offer-faq* accordion styles, ported from offer-single.css)
   --------------------------------------------------------------------- */

.careers-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.careers-faq__col { display: flex; flex-direction: column; gap: 6px; }
.offer-faq__row { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.offer-faq__row button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--white);
  border: none;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  text-align: left;
}
.offer-faq__chevron { font-size: .625rem; color: var(--ink-500); transition: transform .15s var(--ease); }
.offer-faq__row.is-open .offer-faq__chevron { transform: rotate(90deg); }
.offer-faq__panel {
  display: none;
  padding: 0 var(--sp-3) var(--sp-2) calc(var(--sp-3) + 1.1em);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  line-height: var(--lh-relaxed);
}
.offer-faq__row.is-open .offer-faq__panel { display: block; }

@media (max-width: 720px) {
  .careers-faq { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Openings — tabbed 6-up job card grid (reuses main.css's .deal-card /
   .deal-grid component, same one used by the homepage's "Doctors and
   specialists" section, per client reference). Each tab always shows
   exactly 6 cards, so this grid is fixed at 6 columns to match.
   --------------------------------------------------------------------- */

.openings-tabs { margin-bottom: var(--sp-4); }

.deal-grid--openings { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .deal-grid--openings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .deal-grid--openings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .deal-grid--openings { grid-template-columns: minmax(0, 1fr); }
}