/* =========================================================
   Responsive — mobile-first adjustments
========================================================= */

@media (max-width: 900px) {
    .quiz-layout {
        grid-template-columns: 1fr;
    }
    .palette-toggle { display: inline-flex; }

    .quiz-palette {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(320px, 84vw);
        z-index: 200;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
    }
    .quiz-palette.open { transform: translateX(0); }
    .palette-close { display: inline-flex; }

    .hero-split {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 0 24px;
    }
    .hero-right { order: -1; } /* show the video above the text on smaller screens */
}

@media (max-width: 640px) {
    .audio-player { padding: 10px 12px; gap: 8px; }
    .audio-player audio { min-width: 0; width: 100%; }
    .container { padding: 0 16px; }
    .hero-split { padding: 24px 0 20px; }
    .question-card { padding: 22px; }
    .quiz-topbar-inner { padding: 10px 14px; }
    .quiz-topbar-right { gap: 8px; }
    .brand-text { display: none; }
    .quiz-topbar .brand-logo { height: 34px; }
    .quiz-nav { flex-direction: column-reverse; align-items: stretch; }
    .quiz-nav-arrows { display: flex; }
    .quiz-nav-arrows .btn { flex: 1; }
    .cta-buttons { flex-direction: column; }
    .cta-buttons .btn { width: 100%; }
    .parts-table { font-size: 13px; }
    .parts-table th, .parts-table td { padding: 9px 8px; }
}