/* ============ Публичная страница квиза (/s/{код}) ============
   Перенесено из NDBH: там эти правила лежали прямо в шаблоне страницы
   (website_quiz_full.html). Здесь — отдельным файлом, потому что страницу
   у нас рисует Next, а не Django-шаблон.

   Задача правил простая: квиз по центру, во всю высоту экрана, обычный
   контент с полями и ограничением по ширине, а обложка — во всю ширину.
   ============ */

html, body { margin:0; padding:0; min-height:100%; }

.wq-full{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:0; box-sizing:border-box; container-type:inline-size; }
.wq-full > #quizWidget{ width:100%; }

/* Лендинг и сайт начинаются сверху: страницу читают и листают, а не
   проходят по одному вопросу. */
.wq-full.wq-top{ align-items:flex-start; padding:26px 0 40px; }
@media (max-width:520px){ .wq-full.wq-top{ padding:10px 0 24px; } }

/* обычный (не-обложечный) контент центрируем и даём поля, обложка — во всю ширину */
.wq-full .wq-widget, .wq-full .wq-hd, .wq-full .wq-bens{
  max-width:1240px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.wq-full .wq-widget, .wq-full .wq-hd{ padding-left:20px; padding-right:20px; }

/* На телефоне полотно идёт от края до края: поля страницы и карточки
   складывались в 38px с каждой стороны — пятая часть экрана уходила в
   пустоту, а текст ломался по три слова в строку. */
@media (max-width:520px){
  .wq-full{ padding:0; }
  .wq-full .wq-widget, .wq-full .wq-hd{ padding-left:0; padding-right:0; }
}