/* Квиз: картинка «собираем стол с мангалом» над вопросом + короткая подпись.
   [quiz-sborka 2026-10-06] Владелец одобрил кадры (seoshnik/schemes/quiz-sborka/v2):
   шаги 1–5 — кадры 1–5, экран после заявки — кадр 6 (готово, огонь).
   Один файл на оба квиза — главная (redesign/v3/index.html) и разделы (quiz_block.php).
   Кадры прозрачные, нарисованы под тёмную карточку #1A1B1B. */

.quiz-card .quiz-art{
  margin:0; padding:.9rem 1.6rem 0;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
}
.quiz-card .quiz-art__img{
  display:block; width:auto; max-width:100%;
  height:150px; aspect-ratio:8/7;
  transition:opacity .18s ease;
}
.quiz-card .quiz-art.is-swapping .quiz-art__img{ opacity:0; }
.quiz-card .quiz-art__cap{
  margin:0; font-size:.95rem; line-height:1.35; font-weight:600;
  color:var(--terra-text,#8FD3BE); text-wrap:balance;
}
/* отступ до вопроса даёт сама картинка. У fieldset легенда стоит на верхней кромке
   и padding-top уходит ПОД неё, поэтому зазор задаём снизу у картинки, а у шага-div
   (шаг 5) верхний отступ убираем */
.quiz-card .quiz-art{ padding-bottom:1.1rem; }
.quiz-card .quiz-art ~ div.quiz-step:not(.quiz-thanks){ padding-top:0; }

@media (min-width:760px){
  .quiz-card .quiz-art{ padding-top:1.1rem; padding-bottom:1.3rem; gap:.5rem; }
  .quiz-card .quiz-art__img{ height:200px; }
  .quiz-card .quiz-art__cap{ font-size:1.02rem; }
}

/* экран после заявки: карточка во всю ширину — картинка крупнее */
.quiz-card.is-done .quiz-art{ padding-top:clamp(1.2rem,3vw,2rem); }
@media (min-width:760px){
  .quiz-card.is-done .quiz-art__img{ height:230px; }
  .quiz-card.is-done .quiz-art__cap{ font-size:1.12rem; }
}
.quiz-card.is-done .quiz-art ~ .quiz-thanks.qd{ padding-top:clamp(1rem,2vw,1.6rem); }

@media (prefers-reduced-motion:reduce){
  .quiz-card .quiz-art__img{ transition:none; }
}