/* Job Roles Explained — components fjz.css does not have.
 *
 * A separate file on purpose: only the job-roles pages load it, so nothing else
 * can be affected by a change here. The reasoning is recorded off-server.
 */

/* The A–Z jump row. Flex with space-between rather than inline text, so the row
   spans the column whatever the letter count: the set is not a fixed 26 — there
   is a "3" for 3D printing technician and no X at all, and a source change moves
   it again. */
.az-jump{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;
  gap:1px;margin:1.1em 0 1.7em;font-family:var(--font-sans);font-size:14px;
  font-weight:600;line-height:1}
.az-jump a{text-decoration:none;color:var(--ink);padding:3px 1px;border-bottom:2px solid transparent}
.az-jump a:hover{border-bottom-color:var(--hl)}
.az-jump span{opacity:.35}

/* ⚠️ .guide-cards puts its padding on the ANCHOR, because every card in the
   shipped guides is a link. The "At a glance" figures are not links, so as bare
   <li> they inherited the border and shadow but no padding at all and the text
   sat hard against the border. Rather than wrap something unclickable in an <a>,
   .gc-body carries the identical box so a non-link card matches a link card. */
.guide-cards .gc-body{display:block;padding:15px 16px;border-radius:inherit;overflow:hidden}

/* The fact pills hold three or four words, not a job title, so they take far
   larger type without wrapping. Scoped to .gc-facts: the 737 role cards on the
   index still need the smaller size to fit names like "Advertising account
   executive" on two lines. */
.guide-cards.gc-facts .gc-body{padding:17px 18px}
.guide-cards.gc-facts .gc-k{font-size:11px;margin-bottom:7px}
.guide-cards.gc-facts .gc-t{font-size:22px;line-height:1.15;letter-spacing:-.01em;display:block}