/* CareersList — was CareersList.module.css. The bundler's hashed class names are
   replaced by a plain c-CareersList_ prefix so the stylesheet stands alone. */

.c-CareersList_careers {
  min-height: 100svh;
  height: max-content;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  background-color: var(--base-1000);
}

/* The section label was a bare <p> in the source; it is an <h2> here so the
   list has a heading, which means the type styling has to follow the tag. */
.c-CareersList_careers > h2,
.c-CareersList_careers > p {
  color: var(--base-200);
  padding: 1.5rem 2.5rem 2rem 2.5rem;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  text-transform: uppercase;
  font-family: var(--font-dm-mono);
  font-size: clamp(0.8rem, 0.75vw, 0.85rem);
  font-weight: 500;
  line-height: 1;
}

.c-CareersList_list .c-CareersList_item {
  --h2-font-size: clamp(3.25rem, 8vw, 8rem);
  --h2-line-height: calc(var(--h2-font-size) * 0.85);
  position: relative;
  height: var(--h2-line-height);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
  background-color: var(--base-1000);
  max-width: 2000px;
  margin: 0 auto;
}

.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  --h2-font-size: clamp(3.25rem, 8vw, 8rem);
  --h2-line-height: calc(var(--h2-font-size) * 0.85);
  height: calc(var(--h2-line-height) * 3);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_nameRow,
.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_detailRow {
  --h2-font-size: clamp(3.25rem, 8vw, 8rem);
  --h2-line-height: calc(var(--h2-font-size) * 0.85);
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--h2-line-height);
  padding: 0.5rem 2.5rem;
  box-sizing: border-box;
}

.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_nameRow .dsp,
.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_detailRow .dsp {
  text-transform: uppercase;
  font-family: var(--font-schabo);
  font-size: var(--h2-font-size);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: clamp(-0.025rem, -0.75vw, -0.1rem);
}

.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_nameRow {
  background-color: transparent;
  color: var(--base-100);
}

.c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_detailRow {
  position: relative;
  background-color: var(--base-800);
  color: var(--base-1000);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 1) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-800);
  color: var(--base-1000);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 2) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-300);
  color: var(--base-1000);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 3) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-700);
  color: var(--base-1000);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 4) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-400);
  color: var(--base-100);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 5) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-500);
  color: var(--base-1000);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 6) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-900);
  color: var(--base-1000);
}

.c-CareersList_list .c-CareersList_item:nth-child(7n + 7) .c-CareersList_wrapper .c-CareersList_detailRow {
  background-color: var(--base-600);
  color: var(--base-100);
}

@media (max-width: 1000px) {
  .c-CareersList_careers {
    padding: 4rem 0 2rem 0;
    height: max-content;
  }

  .c-CareersList_careers > h2,
  .c-CareersList_careers > p {
    margin-top: 2rem;
    padding: 1rem;
  }

  .c-CareersList_list .c-CareersList_item .c-CareersList_wrapper {
    height: var(--h2-line-height);
    transform: none;
    will-change: auto;
  }

  .c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_detailRow,
  .c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_nameRow:last-child {
    display: none;
  }

  .c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_nameRow {
    padding: 0.5rem 1rem;
  }

  /* Only the role fits on a narrow screen — the contract type is dropped.
     The source matched an <h2> here; these are spans, so the selector had to
     follow the tag change or both columns stay and every row wraps. */
  .c-CareersList_list .c-CareersList_item .c-CareersList_wrapper .c-CareersList_nameRow .dsp:nth-child(2) {
    display: none;
  }
}