/* ═══════════════════════════════════════════
   WV Quiz Results — /quiz-results/?submission=...&sig=...
   ═══════════════════════════════════════════
   Anchor-driven, 6-section page. CSS uses site tokens only —
   no new design values, no new component types. Walkthrough
   rows alternate image side via the --reversed modifier.

   Mobile-first per MOBILE-DESIGN-RULES.md.

   CHANGELOG
   ─────────
   2026-05-26: Initial build (Phase 2 of Quiz Results).
   ═══════════════════════════════════════════ */

.wv-qr {
  color: var(--wv-color-text-primary);
}

.wv-qr__section {
  padding: 48px 16px; /* NEEDS DESIGNER REVIEW — mobile vertical rhythm */
}

.wv-qr__section-inner {
  max-width: var(--wv-page-content-max);
  margin: 0 auto;
}

/* ── Admin preview banner (logged-in admin only) ────
   Visible only when ?preview=ANCHOR is passed by a user with
   manage_options. Full-bleed at the top of the page; cream
   surface + border so it reads as an out-of-band admin notice.
   Typography comes from the .wv-body class applied in template. */
.wv-qr__preview-banner {
  background: var(--wv-color-surface);
  border-bottom: 1px solid var(--wv-color-border);
  color: inherit;
  padding: 8px 16px;
  text-align: center;
}

.wv-qr__preview-banner a {
  color: inherit;
  text-decoration: underline;
}

/* ── Hero (Section 1) ──────────────── */
.wv-qr__hero {
  display: flex;
  flex-direction: column;
  gap: 32px; /* NEEDS DESIGNER REVIEW */
}

.wv-qr__hero-left,
.wv-qr__hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-qr__hero-cta-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* ── Echo panel ────────────────────── */
.wv-qr__echo {
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-md);
  padding: 24px; /* NEEDS DESIGNER REVIEW */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-qr__echo-divider {
  height: 1px;
  background: var(--wv-color-border);
  border: 0;
  margin: 0;
}

/* ── Why N, not five ───────────────── */
.wv-qr__why {
  background: var(--wv-color-card-bg);
}

.wv-qr__why-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--wv-content-max); /* NEEDS DESIGNER REVIEW — reading column */
  margin: 0 auto;
  text-align: center;
}

.wv-qr__why-closing {
  font-style: italic;
}

/* ── Walkthroughs ──────────────────── */
.wv-qr__walkthroughs {
  background: var(--wv-color-background);
}

.wv-qr__walkthroughs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 48px; /* NEEDS DESIGNER REVIEW */
}

.wv-qr__walkthrough {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-qr__walkthrough-media {
  width: 100%;
  background: var(--wv-color-placeholder);
  border-radius: var(--wv-radius-md);
  aspect-ratio: 4 / 3; /* NEEDS DESIGNER REVIEW */
  overflow: hidden;
}

.wv-qr__walkthrough-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-qr__walkthrough-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wv-qr__walkthrough-learn {
  align-self: flex-start;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.wv-qr__walkthrough-learn:hover {
  color: var(--wv-color-accent);
}

/* ── Unsell ─────────────────────────── */
.wv-qr__unsell {
  background: var(--wv-color-surface);
}

.wv-qr__unsell-inner {
  max-width: var(--wv-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-qr__unsell-sqs {
  font-style: italic;
  border-top: 1px solid var(--wv-color-border);
  padding-top: 16px;
}

/* ── Closing CTA ────────────────────── */
.wv-qr__closing {
  background: var(--wv-color-background);
  text-align: center;
}

.wv-qr__closing-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  max-width: var(--wv-content-max);
  margin: 0 auto;
}

.wv-qr__closing-cta-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* ── Fallback page ──────────────────── */
.wv-qr__fallback {
  max-width: var(--wv-content-max);
  margin: 0 auto;
  padding: 64px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* Tablet (768px+) ─────────────────── */
@media (min-width: 768px) {
  .wv-qr__section {
    padding: 80px 40px; /* NEEDS DESIGNER REVIEW */
  }

  .wv-qr__hero {
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
  }
  .wv-qr__hero-left,
  .wv-qr__hero-right {
    flex: 1 1 50%;
  }

  /* Walkthrough rows: image left + copy right; alternate on odd rows. */
  .wv-qr__walkthrough {
    flex-direction: row;
    gap: 32px;
    align-items: center;
  }
  .wv-qr__walkthrough-media,
  .wv-qr__walkthrough-copy {
    flex: 1 1 50%;
  }
  .wv-qr__walkthrough--reversed {
    flex-direction: row-reverse;
  }
}

/* Desktop (1280px+) ──────────────── */
@media (min-width: 1280px) {
  .wv-qr__section {
    padding: 96px var(--wv-page-gutter); /* NEEDS DESIGNER REVIEW */
  }
  .wv-qr__hero {
    gap: 64px;
  }
}