/* ==========================================================================
   Jobs area — catalogue (/jobs, landing pages) and vacancy detail (/jobs/{ref}-{slug}).
   Builds on app.css (.catalogue, .filters, .job-list, .detail, .facts, .panel); tokens only.
   ========================================================================== */

/* Breadcrumb is an <ol>: drop the browser's list indent so it lines up with the page edge. */
.jobs-catalogue .breadcrumb, .job-page .breadcrumb { padding-left: 0; }

/* Job rows on phones: badges, reference and save button run full width under the title instead of
   squeezing into the 56px logo column. */
@media (max-width: 759px) {
  .job-list .job-row__side { grid-column: 1 / -1; }
}

/* ---------- Catalogue head + search row ---------- */
.jobs-head h1 { overflow-wrap: anywhere; }
.jobs-head__lead { margin-bottom: 0; }
.jobs-head__free { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-subtle); }
.jobs-search { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.jobs-search .field__label { font-size: var(--fs-xs); font-family: var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.jobs-search__go { min-height: 48px; }
@media (min-width: 720px) {
  .jobs-search { grid-template-columns: minmax(0, 1fr) minmax(170px, 240px) auto; align-items: end; }
}

/* ---------- Sidebar / drawer ---------- */
.filters-drawer__head h2 { font-family: var(--font-label); }
.filters .field__label { font-weight: 500; color: var(--ink-muted); }
.filters .check { min-height: 32px; align-items: center; }
.filters .check input { margin-top: 0; }
.jobs-filter-count { color: var(--ink); letter-spacing: 0.04em; }
.cat-list a { min-height: 32px; align-items: center; }
.cat-list a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.jobs-filter-actions { flex-wrap: wrap; }
@media (max-width: 999px) {
  .jobs-filter-actions { display: none; }
  .filters-drawer .filters { padding-top: var(--sp-2); }
  .cat-list a, .filters .check { min-height: 44px; }
  /* Keep the phone drawer short: industries and job types without vacancies are left out there. */
  .js .filters-drawer .cat-list .is-empty { display: none; }
}
@media (min-width: 1000px) {
  .jobs-sort-group { display: none; }
}

/* Without JavaScript the drawer can't open, so show the filters in the page flow instead. */
html:not(.js) .filters-drawer { position: static; transform: none; visibility: visible; overflow: visible; max-height: none; padding: 0; }
html:not(.js) .filter-toggle,
html:not(.js) .filters-drawer__head,
html:not(.js) .filters-drawer__foot { display: none !important; }
html:not(.js) .jobs-filter-actions { display: flex; }

/* ---------- Results bar, sort, chips ---------- */
.jobs-results { min-width: 0; }
.jobs-sort { display: none; align-items: center; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; }
.jobs-sort .label { margin-right: var(--sp-1); }
.jobs-sort__item { font-size: var(--fs-sm); color: var(--ink-muted); text-decoration: none; padding: var(--sp-1) 0; border-bottom: 1px solid transparent; }
.jobs-sort__item:hover { color: var(--ink); border-color: var(--line-strong); }
.jobs-sort__item[aria-current="true"] { color: var(--ink); font-weight: 600; border-color: var(--ink); }
@media (min-width: 1000px) { .jobs-sort { display: flex; } }
/* position: relative keeps the chips' visually-hidden "(remove filter)" text inside the scrolling strip;
   without it those absolutely positioned spans widen the page on phones (horizontal scroll). */
.jobs-applied { margin-bottom: var(--sp-4); position: relative; }
.jobs-applied__clear { background: transparent; border-style: dashed; }

/* ---------- Empty state + calls to action ---------- */
.jobs-empty__actions { justify-content: center; }
.jobs-empty .small { font-size: var(--fs-sm); }
.jobs-ctas { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 760px) { .jobs-ctas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.jobs-cta .cluster { margin-top: var(--sp-2); }

/* ---------- Vacancy page ---------- */
.job-page .detail { padding-top: var(--sp-5); }
@media (min-width: 1000px) {
  /* The aside holds the application form and is taller than the screen, so it scrolls with the page. */
  .job-page .detail__aside { position: static; }
}

.job-banner { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line-strong); display: grid; gap: var(--sp-2); }
.job-banner__title { margin: 0; font-family: var(--font-label); font-weight: 700; font-size: var(--fs-lg); letter-spacing: 0.06em; text-transform: uppercase; }
.job-banner--closed { background: var(--paper); color: var(--paper-ink); border-color: var(--paper); }
.job-banner--closed .btn--primary { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.job-banner--closed .btn--primary:hover { background: transparent; color: var(--paper-ink); }
.job-banner--closed .btn--outline { border-color: var(--paper-ink); color: var(--paper-ink); }
.job-banner--closed .btn--outline:hover { background: var(--paper-ink); color: var(--paper); }
.job-banner--preview { border-style: dashed; border-left: 3px solid var(--warning); background: var(--surface); }
.job-banner--preview .job-banner__title { color: var(--warning); }
.job-banner__actions { margin-top: var(--sp-2); }

.job-detail { min-width: 0; }
.job-detail__head { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-5); border-bottom: var(--hair); }
.job-detail__title { font-size: var(--fs-2xl); margin: 0; overflow-wrap: anywhere; }
.job-detail__company { margin: 0; font-size: var(--fs-lg); color: var(--ink-muted); }
.job-detail__company a { color: var(--ink); }
.job-detail__glance { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; color: var(--ink-muted); }
.job-detail__glance li + li::before { content: "/"; margin-right: var(--sp-4); color: var(--ink-subtle); }
.job-detail__salary { color: var(--ink); font-weight: 600; }
.job-detail__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.job-jump { justify-self: start; }
@media (min-width: 1000px) { .job-jump { display: none; } }
.job-detail__summary { margin: var(--sp-5) 0 0; color: var(--ink); }

.job-section { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: var(--hair); }
.job-section--facts { border-top: 0; padding-top: 0; }
.job-section__title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.job-facts dd { overflow-wrap: anywhere; }
.job-text { max-width: 68ch; }
.job-text p { margin-bottom: var(--sp-4); }
.job-text ul { margin: 0 0 var(--sp-4); padding-left: 1.2em; }
.job-text li { margin-bottom: var(--sp-2); }
.job-text li::marker { color: var(--ink-subtle); }
.job-text > :last-child { margin-bottom: 0; }

/* Apply panel */
.apply-panel { border-top: 3px solid var(--ink); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.apply-panel .h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.1; }
.apply-form { gap: var(--sp-4); }
.apply-sending { border: var(--hair); background: var(--bg); padding: var(--sp-3) var(--sp-4); }
.apply-sending ul { margin: var(--sp-2) 0 0; padding-left: 1.1em; color: var(--ink-muted); }
.apply-sending li + li { margin-top: var(--sp-1); }
.apply-sending a { color: var(--ink); }
.apply-questions, .apply-question { border: 0; margin: 0; padding: 0; min-width: 0; }
.apply-questions { display: grid; gap: var(--sp-4); }
.apply-questions > legend { padding: 0; margin-bottom: var(--sp-3); }
.apply-question > legend { padding: 0; margin-bottom: var(--sp-2); }
.apply-question .radios--inline .check { min-height: 44px; align-items: center; }
.apply-question .radios--inline .check input { margin-top: 0; }
.apply-note { border-left: 2px solid var(--info); padding-left: var(--sp-3); color: var(--ink-muted); }

/* Save / share */
.job-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.job-tools .btn, .job-save { min-height: 44px; }
.job-save { padding: 0 var(--sp-4); }
.job-save__on { display: none; }
.job-save[aria-pressed="true"] .job-save__on { display: inline; }
.job-save[aria-pressed="true"] .job-save__off { display: none; }
html:not(.js) .job-copy { display: none; }

/* Employer / confidential box */
.employer-box__head { display: flex; gap: var(--sp-4); align-items: center; }
.employer-box__head .job-row__mono { flex-shrink: 0; }
.employer-box__head .h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-1); }
.employer-box__head .h3 a { text-decoration: none; }
.employer-box__head .h3 a:hover { text-decoration: underline; }
.employer-box__logo { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; border: var(--hair); background: var(--paper); }
.employer-box__links { display: grid; gap: var(--sp-3); justify-items: start; margin-top: var(--sp-1); }

.job-safety { display: grid; gap: var(--sp-3); }
.job-safety h2 { margin: 0; }
.job-safety .never-pay { margin: 0; }

/* Similar vacancies */
.job-similar { padding-bottom: var(--sp-6); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }