/* ==========================================================================
   QUIZ / FINANCIAL ASSESSMENT PAGE
   ========================================================================== */

/* ---- Hero ----
   Single-column variant of .du-hero — no media panel needed, the mock
   question card below carries the visual weight. */
.du-quiz-hero {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.du-quiz-hero .du-hero__description {
    margin-inline: auto;
}

.du-quiz-hero .du-hero__actions {
    justify-content: center;
}

/* ---- Preview section wrapper ---- */
.du-quiz-preview {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.du-quiz-preview__header {
    max-width: 640px;
    margin: 0 auto var(--space-lg);
    text-align: center;
}

.du-quiz-preview__eyebrow {
    color: var(--surface-tint);
    margin-bottom: var(--space-xs);
}

.du-quiz-preview__description {
    margin: 0;
}

.du-quiz-preview__caption {
    text-align: center;
    color: var(--outline);
    max-width: 480px;
    margin: var(--space-sm) auto 0;
}

.du-quiz-preview__notice {
    display: flex;
    justify-content: center;
    margin-top: var(--space-xl);
}

.du-quiz-preview__notice .du-cta--compact {
    max-width: 480px;
}

/* ---- Mock question card ----
   The future assessment plugin's mount point. Card chrome (border,
   radius, shadow) matches the site's existing card language
   (see .du-help-card / .du-principle-card) rather than inventing a new
   surface treatment. */
.du-quiz-mock {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background-color: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-level-1);
    padding: var(--space-lg);
}

.du-quiz-mock__badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
}

.du-quiz-mock__progress-row {
    margin-bottom: var(--space-xs);
}

.du-quiz-mock__progress-label {
    color: var(--outline);
    margin: 0;
}

.du-quiz-mock__progress-bar {
    margin-bottom: var(--space-lg);
}

.du-quiz-mock__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.du-quiz-mock__question {
    display: block;
    padding: 0;
    color: var(--on-background);
    margin-bottom: var(--space-md);
}

.du-quiz-mock__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.du-quiz-mock__option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface-container-low);
}

.du-quiz-mock__option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--outline);
    cursor: not-allowed;
}

.du-quiz-mock__option label {
    color: var(--on-surface-variant);
    cursor: not-allowed;
}

/* Disabled fieldset already dims native controls in every modern
   browser; this keeps the label text visually consistent with that. */
.du-quiz-mock__fieldset:disabled .du-quiz-mock__option {
    opacity: 0.85;
}

@media (max-width: 767px) {
    .du-quiz-mock {
        padding: var(--space-md);
    }

    .du-quiz-mock__badge {
        position: static;
        display: inline-flex;
        margin-bottom: var(--space-sm);
    }
}