/* ==========================================================================
   Careers page and job detail pages.
   Requires tokens.css, typography.css, layout.css, components.css, and
   sections.css (Certifications).

   The job cards and the job pages are written by tools/build-careers.js
   from the files in careers/jobs/ (see README.md, "Job listings").
   ========================================================================== */


/* ---------- Careers hero ----------

   Light Gray: the headline (H1), three paragraphs, and the benefits list
   in columns 1–6; the exploded radar graphic in columns 7–12.
   60px between the headline and the text, 24px between paragraphs.
   Benefits: indented 40px (20px on phones), each with a 14px circled
   arrow, 10px apart.

   Up to 900px the graphic stacks below the text, centered. */

.careers-hero { display: grid; gap: var(--space-60); }

.careers-hero__body {
  display: grid; gap: var(--space-24);
  max-width: var(--text-max);
  margin-top: var(--space-60);
}

.benefit-list {
  display: grid; gap: 10px;
  margin: 0; padding: 0 0 0 var(--space-20);
  list-style: none;
}
@media (min-width: 600px) {
  .benefit-list { padding-left: var(--space-40); }
}
.benefit-list li {
  display: flex; align-items: flex-start; gap: 10px;
}
.benefit-list li::before {
  content: ""; flex: none;
  width: 14px; height: 14px;
  margin-top: 5px;                    /* centered on the first line of a 24px line height */
  background: currentColor;
  -webkit-mask: url("../assets/icons/icon-circle-arrow.svg") center / contain no-repeat;
          mask: url("../assets/icons/icon-circle-arrow.svg") center / contain no-repeat;
}

.careers-hero__graphic {
  justify-self: center;
  width: min(80%, 420px); height: auto;
}

@media (min-width: 901px) {
  .careers-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    padding-block: var(--space-60);
  }
  .careers-hero__graphic { width: min(100%, 560px); }
}


/* ---------- Open roles ----------
   Job cards, 20px apart: three across from 901px, two from 600px, one
   below that. Each card: Light Gray with a 1px line; the title (H3), the
   tags 24px below it, and "Learn More" at the bottom, 20px padding.
   Cards in a row share a height (at least 307px on desktop, as in the design). */

.job-grid {
  display: grid; gap: var(--gutter);
  margin: 0; padding: 0; list-style: none;
}

.job-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-20);
  background: var(--color-light-gray);
  border: var(--line-width) solid var(--color-line);
}
.job-card .tag-list { margin-top: var(--space-24); }
.job-card > :nth-last-child(2) { margin-bottom: var(--space-40); }   /* at least 40px above "Learn More" */
.job-card__link { margin-top: auto; }                               /* more when the row is taller */

@media (min-width: 600px) {
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-card { min-height: 240px; }
}
@media (min-width: 901px) {
  .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-card { min-height: 307px; }
}

.open-roles__empty { max-width: var(--text-max); }


/* ---------- Job detail page ----------

   Two columns (901px+): on the left, the title (H1), its tags 40px below,
   and a "Back to All Jobs" button 40px below those, staying pinned 60px
   below the header while the description on the right scrolls. The
   description starts in column 7.

   One column (up to 900px): "Back to All Jobs" and a line under it stay
   pinned below the header, with the page scrolling behind them; then the
   title, tags, and description.

   Description: H4 subheads 40px apart from what's above, 24px between a
   subhead and its text and between paragraphs; bulleted lists indented
   24px. The application instructions close every job. */

.job {
  display: flex; flex-direction: column;
  padding-top: 0;
}
.job__aside { display: contents; }   /* one column: the back link joins the page's column so it can stay pinned */

.job__back {
  order: -1;
  position: sticky; top: var(--header-height); z-index: 2;
  display: flex; align-items: center; gap: var(--space-16);
  margin-inline: calc(-1 * var(--section-pad-x));
  padding: var(--space-24) var(--section-pad-x);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h5-leading);
  text-decoration: none;
}
.job__back::after {                  /* the line under the back link, inside the page padding */
  content: "";
  position: absolute; left: var(--section-pad-x); right: var(--section-pad-x); bottom: 0;
  border-bottom: var(--line-width) solid var(--color-line);
}

.job__header { margin-top: var(--space-24); }
.job__header .tag-list { margin-top: var(--space-40); }
.job__body { margin-top: var(--space-40); }

.job__body > * + * { margin-top: var(--space-24); }
.job__body > h2 { margin-top: var(--space-40); }
.job__body > h2:first-child { margin-top: 0; }
.job__body ul { margin-bottom: 0; padding-left: var(--space-24); }
.job__body a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.job__body a:hover { text-decoration-thickness: 2px; }

@media (min-width: 901px) {
  .job {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
    min-height: calc(100dvh - var(--header-height));   /* short jobs (e.g. ISSO) still fill the screen */
    padding-top: var(--space-120);
    padding-bottom: var(--space-120);
  }
  .job__aside {
    display: block;
    position: sticky; top: calc(var(--header-height) + var(--space-60));
  }
  .job__header { margin-top: 0; }
  .job__body { margin-top: 0; }

  /* Back to All Jobs as an outlined button */
  .job__back {
    position: static;
    display: inline-flex; gap: var(--space-24);
    height: 40px;
    margin: var(--space-40) 0 0;
    padding: 0 var(--space-16);
    border: var(--line-width) solid var(--color-black);
    background: transparent;
  }
  .job__back::after { content: none; }
  .job__back:hover,
  .job__back:focus-visible { background: var(--color-sand); }
}