/* Careers: career-path cards, vacancy cards, the hiring steps and the application page.
   Builds on static/css/site.css (hair grids, aside boxes, forms); never edits it. */

.role-list { display: grid; gap: 6px; width: 100%; margin: 0 0 24px; padding: 0; list-style: none; color: var(--muted-dark); font-size: 13px; line-height: 1.5; }
.role-list li { position: relative; padding-left: 16px; }
.role-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1px; background: var(--oxblood); }

/* vacancy cards on the dark section: rows of three, each card draws its own bottom line */
.vacancy-grid { border-bottom: 0; }
.vacancy-grid .hair-card { min-height: 440px; border-bottom: 1px solid var(--line-light); }
.vacancy-grid .hair-card:nth-child(3n) { border-right: 0; }
.vacancy-card h3 a { transition: color .18s; }
.vacancy-card h3 a:hover, .vacancy-card h3 a:focus-visible { color: var(--gold); }
.vacancy-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 0 0 28px; }
.vacancy-meta dt { color: var(--white-50); font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.vacancy-meta dd { margin: 6px 0 0; color: var(--white-70); font-size: 13px; }
.hair-grid.light .card-actions a { border-color: var(--line-light); color: #fff; }
.hair-grid.light .card-actions a:hover { color: var(--gold); }
.notice.light { border-color: var(--line-light); background: #ffffff0a; color: var(--white-70); }

.steps .hair-card { min-height: 300px; }

/* where you would work */
.site-photo { margin: 44px 0 0; }
.site-photo img { width: 100%; height: auto; filter: saturate(.85) contrast(1.04); }
.site-photo figcaption { margin-top: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.site-list { width: 100%; margin: 0 0 8px; padding: 0; list-style: none; }
.site-list li { display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.site-list li:last-child { border-bottom: 0; }
.site-list li > span { color: var(--muted); font-size: 12px; }
.aside-box .plain-link { color: var(--oxblood); border-bottom: 1px solid var(--oxblood); }
.aside-box > p { margin: 0 0 14px; color: var(--muted-dark); font-size: 14px; line-height: 1.65; }
.aside-box > p:last-child { margin-bottom: 0; }
.aside-box > p + h3, .aside-box > ul + h3, .aside-box > table + h3 { margin-top: 30px; }
.aside-box .button { margin-top: 10px; }

/* buttons inside running text keep their own colours (.prose a would paint them oxblood and underline them) */
.prose a.button { border-bottom: 0; }
.prose a.button-solid { color: #fff; }
.prose a.button-dark { color: var(--ink); }
.prose a.button-dark:hover { color: #fff; }

/* vacancy page */
.vacancy-facts .fact-table { margin: 0 0 22px; font-size: 14px; }
.vacancy-facts .fact-table th { width: 42%; }
.vacancy-facts .fact-table small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.check-list { margin: 0 0 8px; padding-left: 18px; color: var(--muted-dark); font-size: 14px; line-height: 1.6; }
.check-list li { margin-bottom: 8px; }

@media (width <= 1220px) {
  .vacancy-grid .hair-card, .vacancy-grid .hair-card:nth-child(3n) { border-right: 0; }
  .vacancy-grid .hair-card:last-child { border-bottom: 1px solid var(--line-light); }
  .steps .hair-card { min-height: 0; }
}
@media (width <= 580px) {
  .vacancy-meta { grid-template-columns: 1fr; gap: 12px; }
  .vacancy-facts .fact-table small { display: inline; margin-left: 6px; }
}