/* ---------- Careers page specific ----------

   Mobile first, like site.css: the rules outside a media query are the phone
   layout and the min-width queries add to them. */

  /* The paired hero-tighten, as downloads.css:19 does it and for the reason
     given there — named sections rather than "the one after the hero". */
  .page-hero{ padding-bottom:40px; }
  .careers-why{ padding-top:40px; }

  /* The page's body copy, in one place. */
  .why-card p,
  .role-card > p,
  .role-card ul,
  .careers-apply p{
    font-size:14.5px;
    line-height:1.7;
    color:var(--gen-text-dim);
  }

  /* ---------- Why GEN ----------

     Ninth copy of the gap:1px hairline grid. downloads.css:28 already defers
     hoisting the family into site.css to its own PR; grep `gap:1px` for the
     callers rather than trusting a list here, since the one that used to sit
     in downloads.css went stale twice. */
  .why-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--gen-navy-line);
    border:1px solid var(--gen-navy-line);
  }
  .why-card{
    padding:28px 24px;
    background:var(--gen-white);
  }
  .why-card h3{
    margin:0 0 10px;
    font-size:1.15rem;
  }
  .why-card p{ margin:0; }

  /* ---------- Openings ----------

     A column at every width, never two roles side by side: a role carries far
     more text than a card, and two of them in a row leaves the shorter one
     padded out with empty space to match the taller. */
  .role-list{
    display:grid;
    gap:20px;
  }
  .role-card{
    padding:26px 22px;
  }

  /* The badge sits beside the title rather than under it — it is two words,
     and on its own line it reads as a heading. */
  .role-head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
  }
  .role-card h3{
    margin:0;
    font-size:1.35rem;
    line-height:1.25;
  }
  .role-meta{
    margin:6px 0 0;
    font-size:13px;
    color:var(--gen-text-dim);
  }
  /* Carries the word as well as the colour, so "open" is never signalled by a
     gold pill alone. Same pill as .download-badge on /downloads; a shared
     .gen-badge wants doing with that hoist rather than from here. */
  .role-badge{
    flex:none;
    padding:4px 10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gen-navy);
    background:var(--gen-gold-dim);
    border-radius:2px;
  }

  /* A role card is the page's full width, and left to fill it these lines run
     past 110 characters on a laptop — half again the measure the rest of the
     site holds itself to. In ch so it tracks the type size. */
  .role-card > p,
  .role-card ul{
    max-width:78ch;
  }
  .role-card > p{ margin:0 0 18px; }
  .role-card h4{
    margin:0 0 10px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gen-teal-text);
  }
  .role-card ul{
    margin:0 0 22px;
    padding-left:20px;
  }
  .role-card li + li{ margin-top:8px; }

  /* ---------- How to apply ----------

     Stacked, then the button beside the copy once there is room — the same
     shape as .newsletter-card on /contact. */
  .careers-apply{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:30px 28px;
  }
  .careers-apply h2{
    margin:0 0 10px;
    font-size:1.25rem;
  }
  .careers-apply p{
    margin:0;
    max-width:66ch;
  }
  .careers-apply strong{ color:var(--gen-navy); }
  .careers-apply .gen-btn{ flex:none; }

  /* The button-height and border-parity fix downloads.css:80 describes, and
     the sixth copy of it site-wide. The border stays pinned to -primary: a
     role card also holds a .gen-btn-secondary, whose visible border a
     .role-card .gen-btn rule would beat on specificity. */
  .role-card .gen-btn,
  .careers-apply .gen-btn{
    display:inline-flex;
    align-items:center;
    line-height:1.2;
  }
  .role-card .gen-btn-primary,
  .careers-apply .gen-btn-primary{ border:1.5px solid transparent; }

  @media (min-width:700px){
    .why-grid{ grid-template-columns:repeat(2,1fr); }
    .why-card,
    .role-card{ padding:32px 30px; }
    .careers-apply{
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
      gap:32px;
    }
  }