/* ==========================================================================
   Material Academy — Certification quiz
   --------------------------------------------------------------------------
   Three questions mapping a visitor's job onto one of the six programmes.
   Sits between the search and the certifications.
   Requires tokens.css.
   ========================================================================== */

.quiz {
  /* Warm band. The trust strip above is cool navy and the certifications
     below sit on paper, so this alternates temperature down the page and the
     interactive section reads as the one you are invited into. Stays inside
     the two-hue palette - this is the brass, not a third colour. */
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(192, 138, 62, 0.22), transparent 62%),
    radial-gradient(760px 380px at 92% 110%, rgba(29, 59, 94, 0.14), transparent 60%),
    linear-gradient(180deg, var(--accent-100) 0%, #f3e3cd 100%);
  border-block: 1px solid var(--accent-200);
  padding-block: var(--space-9);
  overflow: hidden;
}

/* A large ghosted glyph, echoing the numerals on the trust cards. */
.quiz::after {
  content: "?";
  position: absolute;
  right: -0.08em;
  bottom: -0.42em;
  z-index: -1;
  font-family: var(--font-serif);
  font-size: 26rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--accent-800);
  opacity: 0.06;
  pointer-events: none;
}
@media (max-width: 48rem) { .quiz::after { font-size: 15rem; } }
@media (min-width: 48rem) { .quiz { padding-block: var(--space-11); } }

.quiz__inner {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.quiz__heading {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--brand-800);
  margin-bottom: var(--space-3);
}
@media (min-width: 48rem) { .quiz__heading { font-size: var(--text-3xl); } }
.quiz__sub { color: var(--ink-700); margin-bottom: var(--space-7); }
.quiz__eyebrow { color: var(--accent-800); }

/* ==========================================================================
   The card
   ========================================================================== */
.quiz__card {
  position: relative;
  background: var(--paper-raised);
  /* Warm hairline rather than white: the card is a container, not a control,
     so it is not held to 3:1 - its identification comes from the brass top
     edge (4.69:1 on this band) and the shadow. This just stops the outline
     disappearing into the cream. */
  border: 1px solid rgba(107, 68, 21, 0.20);
  border-top: 3px solid var(--accent-700);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: start;
  box-shadow: 0 18px 44px rgba(107, 68, 21, 0.16);
}
@media (min-width: 48rem) { .quiz__card { padding: var(--space-8); } }

/* ---------- Progress ----------------------------------------------------- */
.quiz__progress {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.quiz__pip {
  width: 30px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-200);
  transition: background-color 340ms var(--ease-out), width 340ms var(--ease-out);
}
.quiz__pip.is-active { background: var(--accent-700); width: 44px; }

/* ---------- Steps -------------------------------------------------------
   The stage animates its own height so the card does not jump between
   questions of different lengths.                                          */
.quiz__stage {
  position: relative;
  transition: height 380ms var(--ease-out);
  overflow: hidden;
}
.quiz__step,
.quiz__result {
  position: absolute;
  inset: 0 0 auto 0;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;                    /* fieldsets refuse to shrink otherwise */
  opacity: 0;
  visibility: hidden;
  transform: translateX(26px);
  transition: opacity 320ms var(--ease-out),
              transform 320ms var(--ease-out),
              visibility 0s linear 320ms;
}
.quiz__step.is-active,
.quiz__result.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 380ms var(--ease-out),
              transform 380ms var(--ease-out),
              visibility 0s;
}

.quiz__q {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
  margin-bottom: var(--space-5);
  padding: 0;
}
.quiz__qn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-700);
  margin-inline-end: var(--space-3);
  letter-spacing: var(--tracking-wide);
}

/* ---------- Options ------------------------------------------------------ */
.quiz__options {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .quiz__options { grid-template-columns: repeat(2, 1fr); }
}

.quiz__opt {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  text-align: start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: transform 260ms var(--ease-out),
              border-color 260ms var(--ease-out),
              background-color 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}
/* A brass edge that slides in from the left on approach. */
.quiz__opt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent-700);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 300ms var(--ease-out);
}
.quiz__opt:hover {
  transform: translateY(-2px);
  border-color: var(--border-brand);
  background: var(--paper-raised);
  box-shadow: 0 8px 20px rgba(10, 24, 38, 0.07);
}
.quiz__opt:hover::before { transform: scaleY(1); }
.quiz__opt.is-chosen {
  border-color: var(--accent-700);
  background: var(--accent-100);
  transform: translateY(0) scale(0.985);
}

.quiz__opt-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
  margin-bottom: var(--space-1);
}
.quiz__opt-note {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-600);
  line-height: 1.45;
}

/* ==========================================================================
   Result
   ========================================================================== */
.quiz__verdict {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: var(--space-4);
}
.quiz__match {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 48rem) {
  .quiz__match { grid-template-columns: 230px 1fr; gap: var(--space-6); }
}
.quiz__match-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-sunken);
}
.quiz__match-media img { width: 100%; height: 100%; object-fit: cover; }

.quiz__match-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1.2;
}
/* The recommendation writes itself in, the same way the trust cards do. */
.quiz__match-title .w {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(0.4em);
  animation: quizWordIn 460ms var(--ease-out) forwards;
  animation-delay: calc(var(--wi, 0) * 34ms + 120ms);
}
@keyframes quizWordIn { to { opacity: 1; transform: translateY(0); } }

.quiz__match-desc { color: var(--ink-700); font-size: var(--text-base); margin-bottom: var(--space-4); }
.quiz__match-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink-600);
}
.quiz__match-price {
  margin-inline-start: auto;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
}
.quiz__match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.quiz__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-inline: var(--space-5);
  background: var(--brand-800);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.quiz__cta:hover { background: var(--accent-700); color: #fff; transform: translateY(-2px); }
.quiz__alt {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-4);
  color: var(--brand-700);
  font-weight: var(--weight-medium);
}

.quiz__restart {
  display: block;
  margin: var(--space-6) auto 0;
  min-height: 44px;
  padding-inline: var(--space-4);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-600);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.quiz__restart:hover { border-color: var(--border-brand); color: var(--brand-800); }

.quiz__fallback { margin-top: var(--space-5); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .quiz__stage,
  .quiz__step, .quiz__result,
  .quiz__opt, .quiz__opt::before,
  .quiz__pip, .quiz__cta { transition: none !important; }
  .quiz__match-title .w { animation: none !important; opacity: 1; transform: none; }
  .quiz__opt:hover, .quiz__cta:hover { transform: none; }
}