/**
 * Verify steps.
 *
 * Ported from `_mockups/why-finas.html` (`.p-verify`, `.p-licence`, `.p-warn`),
 * prefixed per inventory §2.2. `pages.css` owns `.dark-band`, `.step-rail`,
 * `.step` and `.callout`; this file re-skins the rail for the navy ground and
 * adds the two structural parts the kit has no equivalent for.
 *
 * WHY THE RAIL OVERRIDES NEED TWO CLASSES. `.step:last-child::before` in the
 * kit carries a pseudo-class, so a single-class override would lose to it on
 * every step. `.verify-steps .step::before` beats it, and
 * `.verify-steps .step:last-child::before` then restores the gold final marker.
 * Order in this file is load-bearing: general first, last-child second.
 *
 * WHY THE STEP COPY IS RE-DECLARED. This file used to say that `.dark-band p`
 * already painted the step copy at --on-dark-body, so restating the mock-up's
 * `.p-verify .step p` here would change nothing. That was wrong, and the review
 * caught it: `.dark-band p` (pages.css:140) and `.step p` (pages.css:256) are
 * both one class plus one element, so they tie on specificity and SOURCE ORDER
 * decides. `.step p` is 116 lines later, so it wins, and every check on this
 * navy band rendered --ink-soft on navy at 1.61:1. `.verify-steps .step p` is
 * two classes and beats both, which is what puts the copy back on
 * --on-dark-body at 10.08:1.
 *
 * MOCK-UP DEFECT, ported as intended rather than as rendered. `.p-licence__no`
 * declares `color:var(--gold)` but sits on an <h3>, so `.dark-band h3` (one
 * class + one element) outranks it and the number renders white in the browser.
 * The declaration is unambiguous about intent and gold on navy clears AA, so
 * the rule below is written with enough specificity to actually apply. If the
 * white number is what was signed off, deleting the `color` line restores it.
 *
 * Breakpoints are literal px because `var()` is invalid inside a media query.
 */

.verify-steps {
  /* This section is a named anchor on Why Choose FINAS (#verify) and is linked
     from the hero, so it must clear the sticky header when jumped to. */
  scroll-margin-block-start: var(--sticky-offset);
}

.verify-steps__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* The kit centres the rail at container-narrow. Here it is a column in a
   two-column grid, so it fills its track instead. */
.verify-steps__rail {
  max-width: none;
  margin-inline: 0;
}

/* The kit's `.step p` is written for the light ground the rail normally sits
   on. Here the rail is on navy, so the copy has to come back to the on-dark
   ramp. See the header note on why one class is not enough. */
.verify-steps .step p {
  color: var(--on-dark-body);
}

.verify-steps .step::before {
  background: var(--white);
  color: var(--blue);
}

.verify-steps .step:last-child::before {
  background: var(--gold);
  color: var(--navy);
}

/* The dashed joining line reads as gold on navy, not blue-tint. */
.verify-steps .step::after {
  background-image: linear-gradient(180deg, var(--on-dark-arc-strong) 55%, transparent 45%);
}

/* ---------------------------------------------------------------------------
 * The licence panel. Sticky, so the number stays beside whichever check the
 * reader is on – the whole argument of the section is "go and check it".
 * ------------------------------------------------------------------------- */
.verify-steps__licence {
  position: sticky;
  inset-block-start: var(--sticky-offset);
  background: var(--on-dark-surface-soft);
  border: 1px solid var(--on-dark-hairline);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.verify-steps__licence-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.verify-steps__licence-kicker svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.verify-steps .verify-steps__licence-no {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--gold);
  /* Licence numbers are long and unbroken. Better to break one than to let it
     push the panel wider than its track. */
  overflow-wrap: anywhere;
}

.verify-steps__licence p { font-size: var(--text-s); }

.verify-steps__licence small {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--on-dark-muted);
}

/* ---------------------------------------------------------------------------
 * Illegal-recruitment warning. A `.callout--warn` laid out as icon + body.
 * ------------------------------------------------------------------------- */
.verify-steps__warn {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-5);
}

.verify-steps__warn > svg {
  width: 28px;
  height: 28px;
  color: var(--red-deep);
  margin-block-start: 0.1em;
}

.verify-steps__warn .callout__label { font-size: var(--text-s); }

@media (max-width: 900px) {
  .verify-steps__grid { grid-template-columns: 1fr; }
  .verify-steps__licence { position: static; }
}

@media (max-width: 560px) {
  .verify-steps__warn { grid-template-columns: 1fr; }
}