/*
 * Question-image component — SSOT for <div class="quiz-q-img-wrap"><img class="question-image">.
 * Rendered by shared code on both pages:
 *   - lib/quiz-pure.js            (exam tab + admin learner preview)
 *   - features/quiz/quiz-topic-modal.js       (quiz modal)
 *   - features/gym/stat-modal-templates.js    (history/stat review modals)
 * Must load eagerly on every page that renders question markup (index.html, admin.html).
 * Do NOT fold into the lazy gym CSS bundle (core/route-css.js Tier 1) — quiz and
 * history modals render without that bundle, and admin.html never loads it.
 */
/*
 * A uniform figure block: the wrapper reserves the same vertical height for
 * every question and centres the image inside it, so a low-res thumbnail and a
 * large diagram occupy the same footprint instead of reading as two different
 * sizes. Deliberately NOT `width:100%` — that would upscale a small source
 * image into blur; only the frame is normalised, never the pixels. The image's
 * own max-height matches the frame so a tall figure cannot outgrow the block.
 */
.quiz-q-img-wrap {
  padding: 4px 0 12px 52px;
  display: flex;
  align-items: center;
  min-height: 208px;
}
.question-image {
  display: block;
  max-width: min(100%, 480px);
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
@media (max-width: 640px) {
  .quiz-q-img-wrap { padding: 4px 0 10px 0; min-height: 168px; }
  .question-image { max-height: 160px; }
}