/* job section: mirrors ACTBE pJob (headline, [Locations] menu, role-type pills, ruled rows with slide-in hover). */
.cr-job { display: block; margin-top: 80px; padding: 0; color: var(--c-ink); background: none; border: 0; } /* resets legacy .cr-job rows from careers-home.css if it is ever loaded */
.cr-job:hover { padding: 0; background: none; }
.cr-job *, .cr-job *::before, .cr-job *::after { box-sizing: border-box; }
.cr-job__inner { width: 100%; padding: 0 var(--padding-wrapper) 80px; }

/* headline: small mono label typed in, with a leading dash */
.cr-job__headline { display: flex; align-items: center; justify-content: flex-start; }
.cr-job__headline-text { position: relative; margin: 0; padding-left: 32px; font-family: var(--f-roboto-mono); font-size: 1rem; font-weight: 400; line-height: 1; }
.cr-job__headline-text::before { position: absolute; left: 0; content: "/"; background: none; width: auto; height: auto; border-radius: 0; color: currentColor; font: inherit; }
.cr-job .-main-text { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.cr-job .-char { display: block; flex-shrink: 0; white-space: pre; opacity: var(--init-opacity); }
.cr-job__slash { position: absolute; top: 0; left: 0; width: 1px; height: 1em; background: currentcolor; opacity: 0; pointer-events: none; }
.cr-job__paragraph { margin: 40px 0 0; font-size: 1rem; font-weight: 400; line-height: 1; }
.cr-job__body { margin: 56px calc(var(--padding-wrapper) * -1) 0; }

/* [Locations] menu */
.cr-job__cat { position: relative; padding: 0 16px 12px; overflow: hidden; opacity: var(--init-opacity); }
.cr-job__cat-inner { display: flex; gap: 24px; align-items: center; justify-content: flex-start; }
.cr-job__cat-title { flex-shrink: 0; margin: 0; font-family: var(--f-roboto-mono); font-size: .875rem; font-weight: 400; line-height: 1; }
.cr-job__cat-list { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.cr-job__cat-link { padding: 0; font-family: var(--f-roboto-mono); font-size: .875rem; font-weight: 400; line-height: 1.5; color: inherit; background: none; border: 0; cursor: pointer; }
.cr-job__cat-link.is-current { color: var(--c-gray); color: var(--gray-6); pointer-events: none; }
.cr-job__cat-text { background: linear-gradient(currentcolor, currentcolor) no-repeat 100% 100% / 0 1px; transition: background-size .4s var(--ease-out-expo); }
.cr-job__menu-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentcolor; transform-origin: left; }

/* role-type pills */
.cr-job__type { position: relative; }
.cr-job__type-list { display: flex; gap: 16px; align-items: center; justify-content: flex-start; margin: 0; padding: 24px var(--padding-wrapper); list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cr-job__type-list::-webkit-scrollbar { display: none; }
.cr-job__pill { flex-shrink: 0; opacity: var(--init-opacity); }
.cr-job__pill-button { padding: 5px 8px 3px; color: inherit; background: none; border: 1px solid currentcolor; border-radius: 50vh; cursor: pointer; }
.cr-job__pill-button.is-current { color: var(--gray-6); pointer-events: none; }
.cr-job__pill-text { display: block; font-family: var(--f-roboto-mono); font-size: .875rem; font-weight: 400; line-height: 1; white-space: nowrap; }
.cr-job__type-border { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; pointer-events: none; background: currentcolor; opacity: var(--init-opacity); transform-origin: left; }

/* rows */
.cr-job__item { position: relative; }
.cr-job__item.is-filtered, .cr-job__item.is-paged { display: none; }
.cr-job__link { position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; color: inherit; text-decoration: none; overflow: hidden; }
.cr-job__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--c-ink); opacity: 0; }
.cr-job__content { width: 100%; padding: 24px var(--padding-wrapper); opacity: var(--init-opacity); transition: color .4s var(--ease-out-expo); }
.cr-job__head { display: flex; gap: 24px; align-items: center; justify-content: space-between; width: 100%; }
.cr-job__title { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.1; }
.cr-job__arrow { flex-shrink: 0; width: 1.25rem; height: 1.25rem; transform: rotate(-45deg); transition: transform .4s var(--ease-out-expo); }
.cr-job__arrow svg { display: block; width: 100%; height: 100%; }
.cr-job__sub { margin: 8px 0 0; font-size: .875rem; font-weight: 400; line-height: 1.2; }
.cr-job__tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; margin: 8px 0 0; padding: 0; list-style: none; }
.cr-job__tag { padding: 4px 8px; font-family: var(--f-roboto-mono); font-size: .75rem; font-weight: 400; line-height: 1.2; color: var(--c-ink); background: var(--surface-1); transition: background-color .4s var(--ease-out-expo); }
.cr-job__border { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; pointer-events: none; background: currentcolor; opacity: var(--init-opacity); transform-origin: left; }
.cr-job__border--top { top: 0; bottom: auto; display: none; }
.cr-job__item.is-top .cr-job__border--top { display: block; }
.cr-job__link.is-hover { color: var(--color-text-inverse); }
.cr-job__link.is-hover .cr-job__tag { color: var(--color-text-inverse); background: var(--surface-inverse-hover); }
.cr-job__link.is-hover .cr-job__border { color: var(--c-ink); }

/* no matches for a filter */
.cr-job__none { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 24px var(--padding-wrapper); border-bottom: 1px solid currentcolor; }
.cr-job__none[hidden] { display: none; }
.cr-job__none-text { margin: 0; font-size: .875rem; line-height: 1.2; }

/* buttons */
.cr-job__btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; font: var(--t-button-14); letter-spacing: var(--ls-button-14); color: var(--color-text-inverse); text-decoration: none; background: var(--surface-inverse); border: 1px solid var(--surface-inverse); border-radius: var(--radius-pill); cursor: pointer; transition: background-color .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo), color .4s var(--ease-out-expo); }
.cr-job__btn--ghost { color: var(--c-ink); background: none; border-color: currentcolor; }

/* empty state tile */
.cr-job__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 0 var(--padding-wrapper); padding: 24px; background: var(--c-white); border-radius: 8px; }
.cr-job__empty-label { margin: 0; font-family: var(--f-roboto-mono); font-size: .75rem; line-height: 1.2; color: var(--c-gray); }
.cr-job__empty-title { margin: 8px 0 0; font-family: var(--f-inter); font-size: min(11vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.cr-job__empty-text { max-width: 36em; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--color-text-body); }
.cr-job__empty .cr-job__btn { margin-top: 16px; }

/* pagination */
.cr-job__pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; padding: 0 var(--padding-wrapper); font-family: var(--f-roboto-mono); font-size: .875rem; }
.cr-job__pagination[hidden] { display: none; }
.cr-job__page-list { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cr-job__page-link, .cr-job__page-arrow { padding: 4px; color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.cr-job__page-link.is-current { color: var(--gray-6); pointer-events: none; }
.cr-job__page-arrow { display: flex; align-items: center; transition: transform .4s var(--ease-out-expo); }
.cr-job__page-arrow.is-disabled { opacity: .3; pointer-events: none; }
.cr-job__page-arrow[data-dir="prev"] svg { transform: rotate(180deg); }

.cr-job.is-static .cr-job__cat, .cr-job.is-static .cr-job__pill, .cr-job.is-static .cr-job__content, .cr-job.is-static .cr-job__border, .cr-job.is-static .cr-job__type-border, .cr-job.is-static .-char { opacity: 1; }

@media (any-hover: hover) {
  .cr-job { pointer-events: none; }
  .cr-job.is-ready, .cr-job.is-static { pointer-events: auto; }
  .cr-job__cat-link:hover .cr-job__cat-text { background-position: 0 100%; background-size: 100% 1px; }
  .cr-job__pill-button { transition: background-color .4s var(--ease-out-expo), color .4s var(--ease-out-expo); }
  .cr-job__pill-button:hover { color: var(--color-text-inverse); background: var(--c-ink); }
  .cr-job__link:hover .cr-job__arrow { transform: rotate(-45deg) translateX(.2em); }
  .cr-job__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .cr-job__page-link:hover { text-decoration: underline; text-underline-offset: .3em; }
  .cr-job__page-arrow:hover[data-dir="next"] { transform: translateX(.25em); }
  .cr-job__page-arrow:hover[data-dir="prev"] { transform: translateX(-.25em); }
}

@media screen and (min-width: 960px) {
  .cr-job__inner { width: 100%; padding: 0 0 120px; }
  .cr-job__headline { max-width: 1920px; padding: 0 var(--padding-wrapper); margin: 0 auto; }
  .cr-job__headline-text { font-size: min(1.17vw, calc(1rem * var(--r-max-scale))); }
  .cr-job__headline-text::before { width: 16px; }
  .cr-job__slash { height: min(1.17vw, calc(1rem * var(--r-max-scale))); }
  .cr-job__paragraph { max-width: 1920px; padding: 0 var(--padding-wrapper); margin: 64px auto 0; font-size: min(1.17vw, calc(1rem * var(--r-max-scale))); }
  .cr-job__body { margin: 64px 0 0; }
  .cr-job__cat { padding: 0 0 16px; }
  .cr-job__cat-inner { gap: min(3.51vw, calc(3rem * var(--r-max-scale))); max-width: 1920px; padding: 0 40px; margin: 0 auto; }
  .cr-job__cat-title { font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-job__cat-list { gap: 0; }
  .cr-job__cat-link { padding: 0 min(1.17vw, calc(1rem * var(--r-max-scale))); font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-job__type { padding: 12px 0; overflow: hidden; }
  .cr-job__type-list { flex-wrap: wrap; gap: 8px; max-width: 1920px; padding: 0 var(--padding-wrapper); margin: 0 auto; overflow: visible; }
  .cr-job__pill-button { padding: min(.29vw, calc(.25rem * var(--r-max-scale))) min(.59vw, calc(.5rem * var(--r-max-scale))); }
  .cr-job__pill-text { font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-job__type-border { bottom: 0; }
  .cr-job__content { max-width: 1920px; margin: 0 auto; }
  .cr-job__head { gap: 40px; }
  .cr-job__title { font-size: min(1.46vw, calc(1.25rem * var(--r-max-scale))); }
  .cr-job__arrow { width: min(1.46vw, calc(1.25rem * var(--r-max-scale))); height: min(1.46vw, calc(1.25rem * var(--r-max-scale))); }
  .cr-job__sub { margin-top: 16px; font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-job__tags { gap: 8px; margin-top: 16px; }
  .cr-job__tag { font-size: min(.88vw, calc(.75rem * var(--r-max-scale))); }
  .cr-job__none { max-width: 1920px; margin: 0 auto; border: 0; padding: 24px var(--padding-wrapper); }
  .cr-job__none-text { font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-job__btn { font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-job__empty { max-width: calc(1920px - 2 * var(--padding-wrapper)); margin: 0 var(--padding-wrapper); padding: min(3.13vh, 1.76vw) min(3.13vh, 1.76vw) min(5vh, 2.8vw); }
  .cr-job__empty { display: grid; grid-template-columns: min(12.01vw, calc(10rem * var(--r-max-scale))) minmax(0, 1fr); column-gap: 0; row-gap: min(3.13vh, 1.76vw); align-items: start; }
  .cr-job__empty-label { grid-column: 1; grid-row: 1; font-size: min(.88vw, calc(.75rem * var(--r-max-scale))); }
  .cr-job__empty-title { grid-column: 2; grid-row: 1; margin: 0; font-size: min(7.5vh, 4.2vw); }
  .cr-job__empty-text { grid-column: 2; grid-row: 2; font-size: min(1.17vw, calc(1rem * var(--r-max-scale))); }
  .cr-job__empty .cr-job__btn { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; }
  .cr-job__pagination { max-width: 1920px; margin: 72px auto 0; justify-content: flex-end; padding-right: var(--padding-wrapper); }
}

@media (prefers-reduced-motion: reduce) {
  .cr-job *, .cr-job *::before, .cr-job *::after { transition-duration: .01ms !important; }
}

/* the dark hover panel always flips the text to light */
.cr-job__link:hover { color: var(--c-white); }
.cr-job__link:hover .cr-job__tag { color: var(--c-white); background: var(--surface-inverse-hover); }