/* Shared layout for the individual job posting pages under /careers/.
   One stylesheet rather than a copy inlined into each posting, so a
   styling fix lands once instead of five times. */

.job-hero { padding:clamp(8rem,13vw,11rem) 8% clamp(3.5rem,6vw,5rem); background:var(--c-band); border-bottom:1px solid var(--c-line); }
.job-wrap { max-width:1040px; margin:0 auto; }
.eyebrow { margin:0 0 1.25rem; color:var(--c-accent); font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform:uppercase; }
.job-hero h1 { max-width:900px; margin:0; font-size:clamp(2.35rem,5vw,4.25rem) !important; line-height:1.02 !important; }

.job-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; margin-top:3rem; border:1px solid var(--c-line); background:var(--c-line); }
.job-fact { padding:1.35rem 1.5rem; background:var(--c-surface); }
.job-fact dt { margin:0 0 .5rem; color:var(--c-accent); font:500 .68rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.job-fact dd { margin:0; font-family:'Space Grotesk',Arial,sans-serif; font-size:1.05rem; font-weight:500; letter-spacing:-.02em; color:var(--c-ink); }

.job-section { padding:clamp(3rem,6vw,4.5rem) 8%; background:var(--c-surface); }
.job-section--muted { background:var(--c-band); }
/* A section label, not a headline. These read "Summary", "Description",
   "Minimum qualifications" -- the names of the parts of a job posting -- and
   at the display size they used to be set at, four of them down one page
   shouted over the text they were labelling. */
.job-section h2 { margin:0 0 1.1rem; font-size:clamp(1.3rem,2.1vw,1.65rem) !important; letter-spacing:-.02em; }
.job-section h3 { margin:2rem 0 .85rem; font-size:1.15rem !important; }
.job-section h3:first-of-type { margin-top:0; }
.job-section p, .job-section li { color:var(--c-sub); font-size:1rem; line-height:1.8; }
.job-section p { margin:0 0 1.25rem; }
.job-section p:last-child { margin-bottom:0; }
.job-section ul { margin:0; padding-left:1.35rem; }
.job-section li { margin-bottom:.6rem; }
.job-section li:last-child { margin-bottom:0; }

.job-note { margin:2rem 0 0; padding:1.5rem 1.75rem; border:1px solid var(--c-line); border-left:3px solid var(--c-accent); background:var(--c-surface); }
.job-note p { margin:0; }


.job-apply { padding:clamp(3.5rem,7vw,6rem) 8%; background:var(--c-inkband); color:#fff; }
.job-apply .eyebrow { color:#a7c46a; }
.job-apply h2 { margin:0 0 1.25rem; color:#fff !important; font-size:clamp(1.8rem,3.6vw,2.8rem) !important; }
.job-apply p { max-width:640px; margin:0 0 1.5rem; color:#c7c7c9; line-height:1.8; }
.job-apply ul { max-width:640px; margin:0 0 2rem; padding-left:1.35rem; color:#c7c7c9; line-height:1.8; }
.job-apply li { margin-bottom:.4rem; }

.apply-box { padding:2.25rem; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.06); }
.apply-box dt { margin:0 0 .6rem; color:#a7c46a; font:500 .7rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.apply-box dd { margin:0 0 1.5rem; }
.apply-box dd:last-child { margin-bottom:0; }
/* anywhere, not break-all: break-all wrapped a long address inside the
   domain ("...automation.co / m"). The <wbr> in the markup offers the
   break after the @ that a reader expects, and this only breaks a word
   when even that will not fit. */
.apply-box a { color:#fff; font-family:'Space Grotesk',Arial,sans-serif; font-size:clamp(1.05rem,3.4vw,1.5rem); font-weight:500; letter-spacing:-.02em; text-decoration:none; overflow-wrap:anywhere; border-bottom:1px solid rgba(255,255,255,.35); transition:color .2s,border-color .2s; }
.apply-box a:hover { color:#a7c46a; border-color:#a7c46a; }
.apply-box .apply-subject { color:#c7c7c9; font-family:'IBM Plex Mono',monospace; font-size:.9rem; border:0; word-break:normal; }

.job-back { display:inline-block; margin-top:2.5rem; color:#a7c46a; font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.job-back:hover { text-decoration:underline; text-underline-offset:3px; }

@media (max-width:768px) {
    .job-hero,.job-section,.job-apply { padding-left:20px; padding-right:20px; }
    .job-hero { padding-top:7.5rem; }
    .apply-box { padding:1.75rem 1.25rem; }
    .job-note { padding:1.25rem 1.35rem; }
}

/* A closed role still has a page; it just must not read as a live vacancy.
   Written by tools/build-catalog.py from tools/jobs.py, so it appears the
   first time a build runs after the role closes or its validThrough passes. */
.job-closed { max-width:760px; margin:7rem auto 0; padding:1.25rem 1.5rem; border-left:4px solid var(--c-danger); border-radius:0 12px 12px 0; background:var(--c-danger-bg); }
.job-closed p { margin:0; color:var(--c-ink); font-size:1rem; line-height:1.7; }
.job-closed a { color:var(--c-accent); font-weight:600; }