/**
 * QR card explainer.
 *
 * Ported from `.p-qr` and `.p-vcard` in `_mockups/team.html`. `.section`,
 * `.dark-band`, `.eyebrow--on-dark`, `.section-title--m`, `.qr-mock` and
 * `.placeholder-note` all come from the kit.
 *
 * Every colour on this band resolves to an `--on-dark-*` token rather than a
 * white or gold literal, so the set of opacities the design uses stays a set
 * rather than growing one more member per section. Two consequences, both
 * deliberate: the dashed step ring and the route line joining the steps both
 * take `--on-dark-arc-strong` – which tokens.css names for exactly this rail –
 * rather than the mock-up's two separate one-off golds, and the step copy takes
 * `--on-dark-body` rather than an alpha 0.04 away from it.
 */

.qr-explainer__grid {
  max-width: var(--container-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.qr-explainer__heading { margin-block: var(--s-3); }

/* Beats `.dark-band p`, which is a class-plus-element selector. */
.qr-explainer .qr-explainer__intro { max-width: 56ch; }

/* ---------------------------------------------------------------------------
 * The steps: numbered by a counter, joined by a dashed gold route line.
 * ------------------------------------------------------------------------- */
.qr-explainer__steps {
  counter-reset: qstep;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-block-start: var(--s-5);
}
.qr-explainer__step {
  counter-increment: qstep;
  position: relative;
  padding-inline-start: 4.25rem;
}
.qr-explainer__step::before {
  content: counter(qstep, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px dashed var(--on-dark-arc-strong);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-s);
}
.qr-explainer__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 21px;
  top: 52px;
  bottom: calc(-1 * var(--s-4));
  width: 2px;
  background-image: linear-gradient(180deg, var(--on-dark-arc-strong) 55%, transparent 45%);
  background-size: 2px 10px;
}
/* The mock-up sets the step title in <b>; it is an item heading, so it is an
   <h3> here and takes the same size instead. Colour comes from `.dark-band h3`. */
.qr-explainer__step h3 {
  font-size: var(--text-lg);
  margin-block-end: 0.25em;
}
.qr-explainer__step span {
  display: block;
  color: var(--on-dark-body);
  font-size: var(--text-s);
  line-height: 1.6;
  max-width: 46ch;
}

.qr-explainer .qr-explainer__note {
  margin-block-start: var(--s-5);
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
 * The sample card. A white card tilted on the navy band – a drawing of the
 * printed card, never a staff record. See sections/qr-explainer.php.
 * ------------------------------------------------------------------------- */
.qr-explainer__card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--shadow-lift);
  max-width: 480px;
  margin-inline: auto;
  position: relative;
  transform: rotate(-1.75deg);
  transition: transform var(--dur-normal) var(--ease-out-soft);
}
.qr-explainer__card:hover { transform: rotate(0deg) translateY(-4px); }

/* The brand tricolour strip, echoing the printed card. Mirrored in RTL so the
   blue still leads from the reading edge. */
.qr-explainer__card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: linear-gradient(90deg, var(--blue) 0 62%, var(--red) 62% 78%, var(--gold) 78%);
}
[dir="rtl"] .qr-explainer__card::before { transform: scaleX(-1); }

.qr-explainer__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}
.qr-explainer__logo { height: 34px; width: auto; }
.qr-explainer__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex: none;
}

.qr-explainer__card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}
.qr-explainer__qr { --qr-size: 136px; }

.qr-explainer__who b {
  display: block;
  font-family: var(--display);
  font-size: var(--text-lg);
  color: var(--navy);
}
.qr-explainer__role {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: var(--s-2);
}
.qr-explainer__who ul {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.qr-explainer__who li b {
  display: inline;
  font-family: var(--body);
  font-size: inherit;
  color: var(--ink);
  font-weight: 700;
}

.qr-explainer__foot {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1.5px dashed var(--line);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  display: flex;
  gap: 0.55em;
  align-items: flex-start;
}
.qr-explainer__foot svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-block-start: 0.15em;
  color: var(--blue);
}

/* The placeholder chip is a light chip and has to stay one. Without this,
   `.dark-band p` wins on specificity and paints its text white on pale gold. */
.qr-explainer .placeholder-note {
  color: var(--gold-deep);
  margin-block-start: var(--s-4);
}

@media (max-width: 940px) {
  .qr-explainer__grid { grid-template-columns: 1fr; }
}