/**
 * Hero, job search.
 *
 * Most of this hero is already in the kit and is not repeated here:
 *
 *   the band and the split grid   pages.css §1  `.page-hero`, `.page-hero--split`
 *   the white search panel        pages.css §20 `.search-panel`, `.search-panel__field`
 *   the popular-search chips      pages.css §11 `.tag--on-dark`
 *   the buttons                   components.css
 *
 * `.search-panel` in the kit IS `.c-search` from `index-c.html`, ported
 * verbatim – the kit's own comment says "reused in hero + search page". So the
 * form needs no rules of its own beyond the two field widths below.
 *
 * What is genuinely new is the employer card: a panel that has to stay legible
 * with a photograph behind it and with no photograph at all.
 */

/* The keyword field earns twice the room of the destination select. The
   mock-up capped the select at a fixed 200px; a ratio does the same job and
   survives a long country name and a narrow laptop without a breakpoint. */
.hero-search__keyword { flex: 2 1 0; }
.hero-search__destination { flex: 1 1 0; }

/* The search icons inside the panel. The kit sizes `.search-panel__field svg`
   already; this only makes sure the select keeps a caret's worth of room. */
.hero-search__destination select { cursor: pointer; }

/* Popular searches ---------------------------------------------------------- */
.hero-search__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-block-start: var(--s-3);
}

.hero-search__popular > span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-dark-muted);
}

.hero-search__chip {
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.hero-search__chip:hover {
  background: var(--on-dark-surface-hover);
  border-color: var(--on-dark-faint);
}

/* Employer card ------------------------------------------------------------
   `--hero-search-photo` is set inline by the render function when a photo is
   chosen, and is simply absent when one is not – so the scrim doubles as the
   flat navy panel and there is no second rule for the no-image state. */
.hero-search__employer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border: var(--border-hairline) solid var(--on-dark-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  background-image:
    linear-gradient(155deg, var(--photo-scrim-start), var(--photo-scrim-end)),
    var(--hero-search-photo, none);
  background-size: cover;
  background-position: center;
}

.hero-search__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.hero-search__employer h2 {
  color: var(--white);
  font-size: var(--text-xl);
}

.hero-search__employer p {
  font-size: var(--text-s);
  color: var(--on-dark-body);
}

.hero-search__points {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.hero-search__points li {
  position: relative;
  padding-inline-start: 1.5em;
  font-size: var(--text-s);
  color: var(--on-dark);
}

/* A drawn tick rather than an icon: it is a list bullet, it repeats four
   times, and it must flip with the document. */
.hero-search__points li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--gold);
  font-weight: 700;
}