/* /wir-suchen-dich. Two routes in, what you leave holding, one way to apply.
   Built on the homepage's vocabulary: display names as rows, one ruled set,
   real silence between. */

/* ---------- The two routes ---------- */

.wr-routes {
  padding-block: clamp(var(--space-8), 13vh, 8rem);
}

.wr-routes__list {
  margin-block-start: var(--space-6);
}



.wr-route__title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* The advertised role, and the one line on the page that carries legal weight
   -- (m/w/d) sits here (§11 AGG). Green because it is the specific thing a
   reader is looking for, not because it needs decorating. */
.wr-route__role {
  margin-block-start: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-accent-text);
}

.wr-route__line {
  margin-block-start: var(--space-4);
  max-inline-size: 42ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

@media (min-width: 48rem) {
  

  .wr-route__role {
    grid-column: 1;
    margin-block-start: var(--space-3);
  }

  /* The description sits beside the name across both its rows, so the two
     halves of the row read as one thing rather than as a stack. */
  .wr-route__line {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }
}

.wr-gear__line {
  margin-block-start: var(--space-3);
  max-inline-size: 44ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

/* Six real qualifications as cells, for the same reason the team page sets its
   disciplines that way: a comma list of six is read as one blur. */
.wr-gear__list {
  display: grid;
  gap: 0 var(--space-6);
  margin-block-start: clamp(var(--space-6), 6vh, var(--space-8));
  border-block-end: 1px solid var(--color-border);
}

.wr-gear__list > li {
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

@media (min-width: 40rem) {
  .wr-gear__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .wr-gear__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wr-jobs-close__lead {
  margin-block-start: var(--space-4);
  max-inline-size: 40ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}