/**
 * Hero, standard page.
 *
 * The band, the H1, the lede and the action row are `.page-hero` in pages.css
 * §1 and are not repeated here. The breadcrumb is §2, the pill is `.tag--on-dark`
 * from §11, and the buttons are components.css. What is left is the quick-link
 * row, which the mock-ups grew twice in two different shapes:
 *
 *   services.html  `.p-route` – numbered circles joined by dashed segments, and
 *                  not links at all
 *   faqs.html      `.p-jump`  – lettered pills that jump to a group below
 *
 * They are one control here (section inventory §3.1), so they are one
 * treatment: the pill from FAQs, carrying the dashed marker ring from Services.
 * The dashed connector between Services' circles is the one thing that did not
 * survive – it reads as a route between six stages and as a mistake between six
 * jump links, and a variant switch to choose between them is exactly what
 * AGENTS.md §1.2 forbids.
 */

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

/* The row itself. `gap` rather than margins so a wrapped second line spaces
   the same as the first. */
.hero-page__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}

/* `.tag--on-dark` already carries the fill, the border and the pill radius.
   This adds the tap target and the room the marker ring needs on the leading
   edge. 48px is the same floor every button in the theme sits on – these are
   often the only in-page navigation on a phone. */
.hero-page__chip {
  gap: 0.55em;
  min-height: var(--btn-min-height);
  padding-inline: 0.4em 1.2em;
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

/* Only the linked chips respond – a stage in a sequence is not clickable, and
   hovering one must not suggest it is. */
a.hero-page__chip:hover {
  background: var(--on-dark-surface-hover);
  border-color: var(--on-dark-faint);
}

/* The marker ring: dashed gold on Services' 01…06, solid-reading on FAQs'
   A…F. Sized in em so it tracks the chip's own type rather than needing a
   second breakpoint. */
.hero-page__marker {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2em;
  block-size: 2em;
  border-radius: 50%;
  background: var(--on-dark-surface);
  border: var(--border-rule) dashed var(--gold-arc);
  color: var(--gold);
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
}