/**
 * Job Openings archive – page-scoped only.
 *
 * The mock-up's `p-*` block from `_mockups/jobs.html`, renamed into the
 * template's own namespace. Almost everything is already in the kit:
 * `.page-hero` and `.breadcrumb` from pages.css §1–2, `.search-panel` from §20,
 * `.filters` and the whole `.job-row` from §10, `.tag` and `.placeholder-note`
 * from §11, `.pagination` from §14, `.empty` from §19. Only what the kit
 * genuinely does not carry lives here.
 *
 * `finas_template_slug()` maps the job archive and the two job taxonomy
 * archives to this file, so it loads on all three and nowhere else.
 */

:root {
  /*
   * The archive's minimum tap target.
   *
   * 44px is the WCAG target-size floor rather than a design value, which is why
   * it is a literal and not a token – the same call `.filter-pill` sizing makes
   * in `assets/css/sections/answer-first.css` and `.pagination` makes in the
   * kit. Named once here so the pills, the destination links and the apply link
   * cannot drift apart.
   */
  --jobs-tap: 44px;
}

/* ----------------------------------------------------------------
   1. HERO – search-led
   ---------------------------------------------------------------- */

.jobs__crumb { margin-block-end: var(--s-4); }

.jobs__search { margin-block-start: var(--s-5); }

/* The keyword matters more than either dropdown, so it takes twice the free
   space. A growth factor rather than a width, so it stays right at every
   breakpoint and carries no literal. */
.jobs__field--keyword { flex-grow: 2; }

/* Destination quick links. Generated from the countries that actually have an
   open role, so the row can never offer a destination with nothing behind it –
   which is also why Singapore is here and is missing from the mock-up. */
.jobs__destinations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-block-start: var(--s-3);
}
.jobs__destinations span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-dark-muted);
}
.jobs__destinations a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-block-size: var(--jobs-tap);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--white);
  background: var(--on-dark-surface);
  border: 1px solid var(--on-dark-hairline);
  padding-block: var(--s-1);
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-fast) ease;
}
.jobs__destinations a:hover { background: var(--on-dark-surface-hover); }
.jobs__destinations a[aria-current="page"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* ----------------------------------------------------------------
   2. RESULTS BAR – count, placeholder marker, clear
   ---------------------------------------------------------------- */

.jobs__results {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  margin-block-end: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.jobs__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}
.jobs__count {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink-soft);
}
.jobs__count b {
  font-family: var(--display);
  color: var(--navy);
}
.jobs__clear { font-size: var(--text-s); }

/* ----------------------------------------------------------------
   3. INDUSTRY PILLS
   ---------------------------------------------------------------- */

.jobs__filters { margin-block-end: var(--s-5); }

/* The kit paints the selected pill through `[aria-pressed="true"]`, which is a
   button state. These pills are anchors, because a filter has to survive
   JavaScript being off and has to be shareable – and a link may not carry
   `aria-pressed`. `aria-current="page"` is the correct attribute for "this is
   the view you are looking at", so the selected treatment hangs off that.
   Also lifts the pill to a full tap target at archive size. */
.jobs__pill {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--jobs-tap);
}
.jobs__pill[aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.jobs__pill[aria-current="page"]:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}

/* ----------------------------------------------------------------
   4. THE LIST – the homepage row pattern at full width, one column deep
   ---------------------------------------------------------------- */

.jobs__list {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}

/* Title and industry tag share a baseline row and wrap together. */
.jobs__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
}

/* The dates-and-salary line sits one step quieter than the location line, so
   the row reads role → where → when without three equal greys. */
.jobs__sub { color: var(--ink-faint); }
.jobs__sub .jobs__close {
  color: var(--ink);
  font-weight: 700;
}

.jobs__list .job-row__apply { min-block-size: var(--jobs-tap); }

/* Below 400px the flag crowds the title out of its own row. */
@media (max-width: 400px) {
  .jobs__list .job-row { padding: var(--s-3) var(--s-4); }
  .jobs__list .job-row__flag {
    inline-size: var(--jobs-tap);
    block-size: var(--jobs-tap);
    font-size: var(--text-lg);
  }
  .jobs__list .job-row__body { flex-basis: calc(100% - var(--jobs-tap) - var(--s-3)); }
}

/* ----------------------------------------------------------------
   5. PAGINATION
   ---------------------------------------------------------------- */

/* `the_posts_pagination()` nests its links inside `.nav-links`, where the kit's
   `.pagination` expects them as direct children – so the flex row has to be
   re-established one level down. Scoped to this template's own class rather
   than patched into the kit. */
.jobs__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
}

/* ----------------------------------------------------------------
   6. EMPTY STATE + FOOTER STRIPS
   ---------------------------------------------------------------- */

.jobs__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

.jobs__guide-link {
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-5);
}

/* The kit's `.callout--warn` sets its own body colour; a plain link inside it
   would inherit that and stop reading as a link. */
.jobs__link {
  color: var(--red-deep);
  font-weight: 700;
  text-decoration: underline;
}
.jobs__link:hover { color: var(--red); }

/* ── Out-of-band filtering ────────────────────────────────────────────────
   The results dim while a request is in flight, so a filter that returns a
   similar-looking list still reads as "something happened". Opacity only:
   the region keeps its box, so nothing below it moves and the page does not
   shift under a thumb mid-tap. Purely an enhancement — with JavaScript off
   the class is never added and this rule never applies. */
[data-jobs-region] {
  transition: opacity var(--dur-fast) var(--ease-out);
}
[data-jobs-region].is-loading {
  opacity: 0.55;
}

/* The results heading takes focus for one move when paginating, so the
   keyboard lands in the new page of results rather than back at the top of
   the document. It must not paint a stray ring around a sr-only element. */
#finas-jobs-heading:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  [data-jobs-region] { transition: none; }
}