/**
 * Job openings teaser.
 *
 * Almost everything is already in the kit: `.alt-band` and `.section-head--row`
 * from pages.css §5, `.grid`/`.grid--2` from §6, and `.filters`, `.filter-pill`
 * and the whole `.job-row` from §10. `index-c.html` re-declares `.job-row`
 * locally and that copy is deliberately not ported – the kit version is
 * identical (section inventory §7.12).
 *
 * Only the three things the kit genuinely does not carry live here.
 */

/* The kit's `.filters` has no trailing gap; the mock-up sets one between the
   pills and the first row. */
.jobs-teaser__filters { margin-block-end: var(--s-5); }

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

/* The kit paints the selected pill through `[aria-pressed="true"]`, which is a
   button state. These pills are anchors so they still work with JavaScript off,
   and a link may not carry `aria-pressed` – so the "All" pill takes the same
   filled treatment from a class instead. */
.jobs-teaser__pill--all {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.jobs-teaser__pill--all:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}

/* `.grid--2` drops to one column at 720px. A job row carries a flag, a title,
   a three-part meta line and an apply link, and the mock-up collapses it at
   860px because below that the meta line wraps three deep. */
@media (max-width: 860px) {
  .jobs-teaser__grid { grid-template-columns: 1fr; }
}