/**
 * Hero, employer.
 *
 * The navy band, the split grid, the H1 and the action row are all pages.css §1
 * (`.page-hero`, `.page-hero--navy`, `.page-hero--split`), and the buttons are
 * components.css – `.btn--ghost-on-dark` for the second action, never
 * `.btn--ghost`, which is blue text on a navy ground and illegible (AGENTS.md
 * §2, mock-up defect 7.10).
 *
 * What is left is the quick-facts panel. It is the same object as the employer
 * card on the homepage hero and is deliberately NOT shared with it: the two
 * live in different sections, and a shared `.facts-panel` is precisely the
 * collision the id-prefix rule exists to prevent (inventory §2.2). The cost is
 * a dozen duplicated declarations; the alternative is a bug that only appears
 * on a page carrying both.
 */

.hero-employer__eyebrow { margin-block-start: var(--s-4); }

/* The panel ---------------------------------------------------------------
   `--hero-employer-photo` is set inline by the render function only when a
   photo is chosen. Absent, the scrim alone paints the panel, so the no-photo
   state needs no rule of its own. */
.hero-employer__facts {
  display: flex;
  flex-direction: column;
  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-employer-photo, none);
  background-size: cover;
  background-position: center;
}

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

.hero-employer__facts ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.hero-employer__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--text-s);
  line-height: 1.55;
  color: var(--on-dark-strong);
}

/* Sized in em so the icon tracks the line it labels rather than needing its
   own breakpoint. */
.hero-employer__facts li svg {
  flex: none;
  inline-size: 1.2em;
  block-size: 1.2em;
  margin-block-start: 0.2em;
  color: var(--gold);
}

/* The opening words of each fact, which carry the checkable part – a licence,
   a year, a count. White against the 88% body text around them. */
.hero-employer__facts li b { color: var(--white); }