/* Hiring pages: the role list on /hiring and the reading layout on each /hiring/<slug>.

   Loaded by the four pages in ui_kits/hiring/ and by nothing else, the same way the Context
   Engine page carries its own stylesheet. These shapes exist to hold job postings and would
   be dead weight in tokens/components.css, which every page on the site pays for.

   Everything else on these pages is the shared design system: Card, Button, SectionHeader,
   CTABanner, .pb-prose. What is here is the two compositions the system has no answer for —
   a list of roles, and a posting beside a sticky apply card. */


/* --- The role list -------------------------------------------------------------------------
   A list, not a three-up card grid. Three cards side by side make three roles look like a
   product range and give each one a 340px column to state its case in; a reader here is
   scanning titles first and reading one line of each, which is a row. It also means a fourth
   role costs nothing: the list grows down instead of breaking the grid's rhythm.

   The whole row is the link, so the target is ~110px tall rather than the width of a title. */
.pb-role-list { border-top: 1px solid var(--pb-stone-200); }

.pb-role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 16px 30px 18px;
  margin: 0 -18px;
  border-bottom: 1px solid var(--pb-stone-200);
  border-radius: var(--radius-chip);
  text-decoration: none;
  transition: background 0.2s ease;
}
/* The negative margin pulls the hover tint out past the text so the row lights up edge to
   edge, while the hairline still starts and stops on the container's own left edge. */
.pb-role:hover { background: var(--pb-blue-50); }

.pb-role-title { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); transition: color 0.2s ease; }
.pb-role:hover .pb-role-title { color: var(--primary); }
.pb-role-lede { display: block; max-width: 560px; margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--pb-ink-2); text-wrap: pretty; }

.pb-role-meta { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.pb-role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--pb-stone-200); border-radius: var(--radius-pill); background: var(--pb-stone-25); font-size: 12px; font-weight: 500; color: var(--pb-ink-3); white-space: nowrap; }

/* The arrow is the affordance, so it moves rather than just tinting. 40px keeps it a real
   target on the desktop row even though the whole row is already clickable. */
.pb-role-go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-pill); background: var(--pb-blue-75); color: var(--primary); transition: background 0.2s ease, transform 0.2s ease; }
.pb-role:hover .pb-role-go { background: var(--primary); color: #FFF; transform: translateX(3px); }

/* Under 560 the arrow leaves rather than squeezing the title into two words a line. The row is
   still the link and still 100px tall, so nothing is lost but the glyph. */
@media (max-width: 560px) {
  .pb-role { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 14px; margin: 0 -14px; }
  .pb-role-go { display: none; }
  .pb-role-title { font-size: 19px; }
}


/* --- One posting --------------------------------------------------------------------------
   Prose measure beside a 300px rail holding the apply card. The rail is sticky because a
   posting is a thousand words and the decision to write in happens anywhere inside them; a
   reader two thirds down should not have to scroll back to find the address.

   The offset is --header-height plus 28. The strip above the header is not sticky, so it is
   not in this sum — see TopBar in Navbar.jsx. */
.pb-job-grid { display: grid; grid-template-columns: minmax(0, var(--article-measure)) 300px; gap: 64px; justify-content: center; align-items: start; }
.pb-job-aside { position: sticky; top: calc(var(--header-height) + 28px); }

/* At 1000 the rail has nowhere to go: 300px of card plus a 680px measure plus the gap is more
   than the container offers once the page gutter is taken. The card moves ABOVE the posting
   rather than below it, because at that width it is the first thing a reader should see, and
   a sticky element in a single column is just an element. */
@media (max-width: 1000px) {
  .pb-job-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pb-job-aside { position: static; order: -1; }
}

.pb-job-card { display: flex; flex-direction: column; gap: 0; background: var(--pb-stone-50); border: 1px solid var(--pb-stone-200); border-radius: var(--radius-card); padding: 24px; }
.pb-job-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pb-stone-150); }
.pb-job-row:last-of-type { border-bottom: 0; }
.pb-job-key { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pb-ink-5); }
.pb-job-val { font-size: 14px; font-weight: 500; color: var(--foreground); text-align: right; }
/* The house CTA pill, full width in the rail. Same two declarations the drawer makes: .pb-cta
   offsets its label by 47px to clear the icon chip, so centring it needs the margin reset too
   or the word sits right of centre. Both are out of reach of an inline style. */
.pb-job-card .pb-cta { width: 100%; justify-content: center; }
.pb-job-card .pb-cta-tx { margin: 0 18px; }

/* The requirement lists run long — eight items on two of the three postings — and .pb-prose
   sets 19px/1.72 for paragraphs. At that size an eight-item list is a screen and a half of
   scrolling on a phone, so the lists step down while the paragraphs stay at reading size. */
.pb-job-body .pb-prose ul { padding-left: 22px; }
.pb-job-body .pb-prose li { font-size: 17px; line-height: 1.62; margin-bottom: 11px; }