/* TW Leads careers: the open roles list (templates/sections/jobs.php) and the single role page (templates/job-single.php).
   Loaded after tw.css and, on the role page, tw-blog.css (the hero band and article styles come from there). */

.tw-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- open roles list ---------- */
.jb-sec{scroll-margin-top:calc(var(--hdr-h,79px) + 8px)}
.jb-intro{color:var(--ink-soft);font-size:18px}
.jb-intro p+p{margin-top:10px}
.jb-list{display:grid;gap:14px;list-style:none;margin:32px 0 0;padding:0}
.jb-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s,border-color .2s}
.jb-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--brand)}
.jb-row-main{display:grid;gap:8px;min-width:0}
.jb-row-t{margin:0;font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.015em;overflow-wrap:break-word}
.jb-row-main p{color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.jb-row-go{flex:none;min-height:46px;padding:10px 20px;font-size:15px}
.jb-row-go svg{width:18px;height:18px;transition:transform .2s}
.jb-row:hover .jb-row-go{border-color:var(--brand);color:var(--brand)}
.jb-row:hover .jb-row-go svg{transform:translateX(3px)}
.jb-row-go::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.jb-row-go:focus-visible{outline:none}
.jb-row-go:focus-visible::after{outline:3px solid var(--brand);outline-offset:-3px}
@media (max-width:640px){.jb-row{flex-direction:column;align-items:stretch;padding:18px}.jb-row-go{align-self:flex-start}}

.jb-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:2px 0 0;padding:0}
.jb-chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--tint-1);color:var(--ink-soft);font-size:13.5px;font-weight:600;line-height:1.3}
.jb-chips svg{width:15px;height:15px;flex:none;color:var(--brand)}
.jb-chips li.closed{background:#FDE7E1;color:#A3412B}
.jb-chips li.closed svg{color:currentColor}

.jb-empty{display:grid;justify-items:start;gap:14px;margin-top:28px;padding:28px;background:var(--paper);border:1.5px dashed var(--tint-2);border-radius:var(--r-lg);color:var(--ink-soft);font-size:17px}
.jb-empty b{color:var(--ink)}
.jb-empty h2{font-size:clamp(24px,2.6vw,30px)}
.jb-empty-btns{display:flex;flex-wrap:wrap;gap:10px}
.jb-empty-mail{font-size:15px;color:var(--muted)}
.jb-empty a:not(.btn),.jb-mail a,.jb-side-mail a{color:var(--brand);font-weight:700;overflow-wrap:anywhere}

/* ---------- single role ---------- */
.jb-hero h1{max-width:24ch}
.jb-hero .jb-chips{margin-top:22px}
.jb-hero .jb-chips li{padding:7px 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px}
.jb-hero .jb-chips svg{color:var(--sky)}
.jb-hero .jb-chips li.closed{background:rgba(253,231,225,.16);color:#FFD9CF}
.jb-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

.jb-desc{padding-block:52px 24px}
.jb-grid{display:grid;grid-template-columns:minmax(0,68ch) minmax(0,340px);gap:56px;justify-content:space-between;align-items:start;font-size:17px}
.jb-body{min-width:0}
.jb-side{position:sticky;top:calc(var(--hdr-h,79px) + 24px);display:grid;gap:16px;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.jb-side h2{font-size:20px;letter-spacing:-.015em}
.jb-dl{display:grid;gap:12px;margin:0}
.jb-dl div{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.jb-dl div:last-child{padding-bottom:0;border-bottom:0}
.jb-dl dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.jb-dl dd{margin:0;font-weight:700;color:var(--ink);overflow-wrap:break-word}
.jb-side-btn{width:100%}
.jb-side-mail{font-size:14.5px;color:var(--ink-soft)}
@media (max-width:999px){.jb-grid{grid-template-columns:minmax(0,1fr);gap:32px}.jb-side{position:static}}

.jb-apply .formsec{padding-top:40px}
.jb-mail{margin:-28px 0 0;padding-bottom:16px;text-align:center;color:var(--ink-soft);font-size:16px}
@media (max-width:980px){.jb-mail{margin-top:-12px}}
.jb-closed{padding-block:24px 40px}
.jb-more{padding-top:24px}

@media (prefers-reduced-motion:reduce){.jb-row,.jb-row-go svg{transition:none!important}.jb-row:hover{transform:none}}