/* The Jobs section shares the detail pages' olive surfaces and type hierarchy. */
main[data-tws-jobs-section-page] {
  --jd-ink: #f5f2e8;
  --jd-muted: #c2cbbd;
  --jd-accent: #d6eca9;
  --jd-border: #455748;
  --jd-panel: #172319;
  --jd-deep: #111b15;
  --jd-card: #203026;
  --jobs-frame: min(1120px, calc(100% - 40px));
}

main[data-tws-jobs-section-page] > [data-tws-jobs-section],
main[data-tws-jobs-section-page] > :is(.jobs-section-start, .jobs-section-next),
main[data-tws-jobs-section-page] > .tws-career-switch {
  width: var(--jobs-frame);
  max-width: none !important;
  margin-inline: auto;
  box-sizing: border-box;
}

main[data-tws-jobs-section-page] > [data-tws-jobs-section] {
  padding: 0 0 18px !important;
  color: var(--jd-ink);
}

main[data-tws-jobs-section-page] > :is(.tws-evergreen-search, .tws-jobs-search, .tws-city-role-discovery),
main[data-tws-jobs-section-page] > #tws-role-local-discovery-v1 {
  max-width: var(--jobs-frame) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

main[data-tws-jobs-section-page] .jobs-section-trail {
  display: block !important;
}

main[data-tws-jobs-section-page] .jobs-section-trail a {
  color: var(--jd-muted);
  font: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration-color: #78927a;
  text-underline-offset: 3px;
}

.jobs-section-cover,
main[data-tws-jobs-section-page="evergreen"] > .hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 20px;
  background: linear-gradient(135deg, #1b2c20, var(--jd-panel) 76%);
}

main[data-tws-jobs-section-page] .jobs-section-lead,
main[data-tws-jobs-section-page="evergreen"] > .hero .hero-copy {
  align-self: center;
  min-width: 0;
  padding: clamp(20px, 3vw, 42px);
}

main[data-tws-jobs-section-page] .jobs-section-lead > :is(.ja-k, .k, .cg-kicker, .ak-k, .ma-k, .ev-k) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 6px 9px;
  border: 1px solid #59705a;
  border-radius: 6px;
  background: #132219;
  color: var(--jd-accent);
  font: 750 .72rem/1.25 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

main[data-tws-jobs-section-page] .jobs-section-lead h1,
main[data-tws-jobs-section-page="evergreen"] > .hero .hero-copy h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--jd-ink);
  font: 670 clamp(2.12rem, 3.6vw, 3.75rem)/1.03 system-ui, sans-serif;
  letter-spacing: -.057em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

main[data-tws-jobs-section-page] .jobs-section-lead > :is(.ja-lede, .lede, .cg-lede, .ak-lede, .ma-lede, .ev-lede),
main[data-tws-jobs-section-page="evergreen"] > .hero .hero-copy > p {
  max-width: 54ch;
  margin: 13px 0 0;
  color: var(--jd-muted);
  font: 400 clamp(.92rem, 1.26vw, 1.06rem)/1.58 system-ui, sans-serif;
}

.jobs-section-photo {
  position: relative;
  min-width: 0;
  min-height: 260px;
  margin: 0;
  background: #24372c;
}

main[data-tws-jobs-section-page] .jobs-section-photo img,
main[data-tws-jobs-section-page="evergreen"] > .hero .hero-visual img {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.jobs-section-photo figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border-radius: 5px;
  background: #0d1612ed;
  color: var(--jd-ink);
  font: 650 .68rem/1.3 system-ui, sans-serif;
}

.jobs-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}

main[data-tws-jobs-section-page] .jobs-section-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #ccdfab;
  border-radius: 7px;
  background: linear-gradient(135deg, #f5f2e8, #e1f1b2);
  color: #111810 !important;
  font: 730 .85rem/1.26 system-ui, sans-serif;
  text-decoration: none;
}

main[data-tws-jobs-section-page] .jobs-section-secondary {
  border-color: #758a71;
  background: #25362b;
  color: var(--jd-ink) !important;
}

main[data-tws-jobs-section-page] :is(a, button, select, input, textarea, summary):focus-visible {
  outline: 2px solid #f6ce93;
  outline-offset: 3px;
}

main[data-tws-jobs-section-page] .jobs-section-action:hover {
  filter: brightness(1.08);
}

main[data-tws-jobs-section-page] :is(#jobs-section-browse, #tws-live-finder, #cg-quiz, #ak-role, #ma-list, #ev-role) {
  scroll-margin-top: calc(var(--tws-job-masthead, 82px) + 80px);
}

main[data-tws-jobs-section-page] .jobs-section-cover > :is(.ja-metrics, .metrics) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--jd-border);
  border-radius: 0;
  background: var(--jd-deep);
}

main[data-tws-jobs-section-page] .jobs-section-cover > :is(.ja-metrics, .metrics) > * {
  min-width: 0;
  padding: clamp(10px, 2vw, 19px);
  border: 0;
  background: transparent;
  color: var(--jd-muted);
}

main[data-tws-jobs-section-page] .jobs-section-cover > .ja-metrics > .ja-metric::before {
  content: none;
}

main[data-tws-jobs-section-page] .jobs-section-cover > :is(.ja-metrics, .metrics) strong {
  color: var(--jd-ink);
  font-size: clamp(1.02rem, 2vw, 1.52rem);
  overflow-wrap: anywhere;
}

main[data-tws-jobs-section-page] :is(.jobs-atlas, .tws-cr)[data-tws-jobs-section] {
  --ink: var(--jd-ink);
  --muted: var(--jd-muted);
  --line: var(--jd-border);
  --accent: var(--jd-accent);
}

main[data-tws-jobs-section-page] [data-tws-jobs-section] :is(.ja-sec, .tws-market-snapshot) {
  margin-top: clamp(23px, 4vw, 40px);
}

main[data-tws-jobs-section-page] :is(.ja-head, .tws-live-finder-inner) h2,
main[data-tws-jobs-section-page] .tws-cr h2 {
  color: var(--jd-ink);
  font: 670 clamp(1.5rem, 2.5vw, 2.25rem)/1.12 system-ui, sans-serif;
  letter-spacing: -.042em;
}

main[data-tws-jobs-section-page] :is(.ja-card, .ja-job, .ja-empty, .ja-table, .tws-market-snapshot, .tws-cr .card),
main[data-tws-jobs-section-page] :is(.tws-evergreen-search, .tws-city-role-discovery) {
  border-color: var(--jd-border);
  border-radius: 12px;
  background: var(--jd-panel);
  color: var(--jd-ink);
}

main[data-tws-jobs-section-page] :is(.ja-card, .ja-job) {
  padding: clamp(13px, 1.8vw, 20px);
  overflow-wrap: anywhere;
}

main[data-tws-jobs-section-page] :is(.ja-card, .ja-job):hover {
  border-color: #839578;
  background: var(--jd-card);
}

main[data-tws-jobs-section-page] :is(.ja-card strong, .ja-job strong, .ja-job h3) {
  color: var(--jd-ink);
}

main[data-tws-jobs-section-page] :is(.ja-badge, .ja-apply, .ja-links a) {
  border-radius: 7px;
}

main[data-tws-jobs-section-page] :is(.ja-count, .ja-badge, .ja-links a, .tws-cr a) {
  overflow-wrap: anywhere;
}

main[data-tws-jobs-section-page] .ja-table {
  overflow-x: auto;
}

main[data-tws-jobs-section-page] .jobs-section-start > .tws-live-finder {
  width: 100%;
  max-width: none;
  margin: 23px 0 0;
  padding: 0;
}

main[data-tws-jobs-section-page] .tws-live-finder-inner {
  padding: clamp(15px, 2.6vw, 26px);
  border-color: var(--jd-border);
  border-radius: 15px;
  background: var(--jd-panel);
}

main[data-tws-jobs-section-page] .tws-live-finder :is(.lf-result, input, select) {
  border-color: var(--jd-border);
  border-radius: 9px;
  background: var(--jd-deep);
  color: var(--jd-ink);
}

main[data-tws-jobs-section-page] .jobs-section-next {
  margin: 35px auto 28px;
  border-color: var(--jd-border);
  background: linear-gradient(145deg, #1c2c20, var(--jd-deep));
}

main[data-tws-jobs-section-page] .jobs-section-next h2 { margin-bottom: 18px; }

main[data-tws-jobs-section-page] .jobs-section-next .jobs-next-grid a {
  border-color: #59705a;
  background: var(--jd-card);
}

main[data-tws-jobs-section-page] .jobs-section-next .jobs-next-grid a:hover {
  border-color: var(--jd-accent);
  background: #293b2e;
}

main[data-tws-jobs-section-page="evergreen"] > .hero {
  padding: 0;
}

main[data-tws-jobs-section-page="evergreen"] > .hero .hero-grid {
  width: var(--jobs-frame);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  gap: 0;
}

main[data-tws-jobs-section-page="evergreen"] > .hero .hero-visual {
  position: relative;
  min-height: 240px;
  border: 0;
  border-radius: 0;
}

@media (max-width: 899px) {
  main[data-tws-jobs-section-page] { --jobs-frame: min(1120px, calc(100% - 24px)); }
  main[data-tws-jobs-section-page] :is(#jobs-section-browse, #tws-live-finder, #cg-quiz, #ak-role, #ma-list, #ev-role) {
    scroll-margin-top: calc(var(--tws-job-masthead, 82px) + 15px);
  }
}

/* The atlas hides legacy body images. Keep the relocated slot's creative visible. */
main[data-tws-jobs-section-page] [data-tws-jobs-section-primary] [data-mantis-zone] img[src] {
  display: block !important;
  margin-inline: auto;
}

@media (min-width: 761px) and (max-width: 899px) {
  [data-tws-jobs-section] > [data-tws-jobs-section-primary] {
    position: relative;
    left: 50%;
    width: max(100%, 728px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: 0 !important;
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  .jobs-section-cover,
  main[data-tws-jobs-section-page="evergreen"] > .hero .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 14px;
  }
  main[data-tws-jobs-section-page] .jobs-section-lead,
  main[data-tws-jobs-section-page="evergreen"] > .hero .hero-copy {
    padding: 18px 15px;
  }
  main[data-tws-jobs-section-page] .jobs-section-lead h1,
  main[data-tws-jobs-section-page="evergreen"] > .hero .hero-copy h1 {
    font-size: clamp(1.9rem, 7.6vw, 2.8rem);
  }
  .jobs-section-photo,
  main[data-tws-jobs-section-page="evergreen"] > .hero .hero-visual {
    min-height: 0;
    aspect-ratio: 2.25;
  }
  main[data-tws-jobs-section-page] .jobs-section-cover > :is(.ja-metrics, .metrics) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main[data-tws-jobs-section-page] .jobs-section-trail li[aria-current="page"]:nth-child(n+4) {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}