/* Public site, phone-first polish (loaded after style.css on test / preview pages) */

/* QCM answers: same width, left aligned, site font (they are <button> elements) */
.quiz-options > li { display: block; }
.quiz-option {
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: var(--navy);
  min-height: 56px;
}
.quiz-option > span:not(.letter) { flex: 1 1 auto; min-width: 0; }
.quiz-question { line-height: 1.35; }

/* Free test: while a section runs, drop the intro hero so the question is the page */
body:has(#free-exam-stage:not([hidden])) .free-exam-hero,
body:has(#free-exam-report:not([hidden])) .free-exam-hero { display: none; }

@media (max-width: 640px) {
  #free-exam-intro .grid > * { min-width: 0; }
  .free-exam-section { grid-template-columns: auto minmax(0, 1fr); }
  .free-exam-section > .btn { grid-column: 2; grid-row: 2; justify-self: start; }
  .free-exam-hero { padding-block: 28px 30px; }
  .free-exam-hero .lead { font-size: 1rem; }
  .free-exam-hero .hero-points { gap: 8px; margin-top: 18px; }
  .free-exam-hero .hero-points span { font-size: 12.5px; padding: 6px 10px; }

  .free-exam-actions .btn { width: 100%; min-height: 54px; justify-content: center; text-align: center; font-size: 16px; }
  .free-exam-notice { margin-top: 16px; padding: 14px 16px; }
  .free-exam-notice p { font-size: .9rem; line-height: 1.45; }

  /* Quit link: quiet, under the title instead of a big outlined button */
  .free-exam-stage-head { gap: 6px; margin-bottom: 14px; }
  .free-exam-stage-head .btn {
    border: 0; background: transparent; box-shadow: none;
    padding: 4px 0; min-height: 0; font-size: 14px; font-weight: 700;
    color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px;
  }
  #free-exam-quiz.card { padding: 18px 16px; }
  .quiz-question { font-size: 18px; margin-bottom: 18px; }
  .quiz-options { gap: 9px; }
  .quiz-option { padding: 13px 14px; gap: 12px; }

  /* Hero buttons: full width, same height, on the preview pages */
  .theory-hero .btn, .hero .hero-actions .btn { width: 100%; min-height: 54px; justify-content: center; text-align: center; font-size: 16px; }
}