/* =========================================================
   pages/quiz.css — страница прохождения квиза
   ========================================================= */

@import "../components/cluster-badge.css";
@import "../components/breadcrumbs.css";
@import "../components/quiz-engine/progress.css";
@import "../components/quiz-engine/question.css";
@import "../components/quiz-engine/question-single.css";
@import "../components/quiz-engine/question-order.css";
@import "../components/quiz-engine/question-match.css";
@import "../components/quiz-engine/quiz-result.css";

.quiz-page {
  --cluster-color: var(--color-brand-600);
  padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px);
  background:
    radial-gradient(900px 500px at 90% -10%, color-mix(in srgb, var(--cluster-color) 8%, transparent), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg-soft) 100%);
  min-height: calc(100vh - 64px);
}

.quiz-page__inner {
  max-width: 760px;
  margin-inline: auto;
}

.quiz-page__head {
  margin-bottom: 24px;
}

.quiz-page__title {
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-block: 14px 8px;
}

.quiz-page__lead {
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 20px;
}

.quiz-page__hero {
  margin: 16px 0 24px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  aspect-ratio: 16 / 9;
}

.quiz-page__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.quiz-page__loader,
.quiz-page__error {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.quiz-page__error-title {
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: 10px;
}