/* ═══════════════════════════════════════════
   RESPONSIVE — All Media Queries
   ═══════════════════════════════════════════ */

/* ── Tablet / small desktop ── */
@media (max-width: 640px) {

    /* Gallery */
    .embla__viewport {
        padding: 2rem 0;
        perspective: 1000px;
    }
    .embla__slide {
        width: min(72vw, 300px);
        margin: 0 -26px;
    }
    .caption-row {
        gap: 1rem;
    }
    .caption-item {
        font-size: 0.78rem;
    }

    /* Timeline */
    .timeline {
        padding-left: 1rem;
        padding-right: 0.5rem;
    }
    .timeline::before {
        left: 1.4rem;
    }
    .timeline-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    .timeline-item .timeline-dot {
        margin-top: 0.35rem;
        flex-shrink: 0;
    }
    .timeline-item .timeline-content {
        text-align: left;
        flex: 1;
        min-width: 0;
    }
}

/* ── Mobile ── */
@media (max-width: 480px) {

    /* Notification */
    .notif-toast {
        left: 1rem;
        right: 1rem;
        top: 1rem;
        max-width: none;
        width: auto;
    }
    .notif-fab {
        right: 1.1rem;
        bottom: 1.1rem;
    }
    .message-card {
        padding: 2.4rem 1.5rem 2rem;
    }

    /* Music player — stacked above notif-fab, same corner */
    .music-fab {
        right: 1.1rem;
        bottom: 5rem;
    }
    .music-panel {
        right: 1.1rem;
        bottom: 8.9rem;
    }

    /* Quiz card */
    .quiz-card {
        padding: 2rem 1.3rem;
    }

    /* Diploma footer: stack place/date and signature instead of
       risking an awkward wrap on very narrow screens */
    .diploma-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
    .diploma-foot-col.right {
        text-align: left;
    }
    .diploma-signature::after {
        right: auto;
        left: 0;
    }

    /* Finale chapter certificate teaser: stack and centre */
    .finale-cert {
        flex-direction: column;
        text-align: center;
    }
    .finale-cert-text {
        text-align: center;
    }
    .finale-cert-cta {
        width: 100%;
        text-align: center;
    }
}

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    html.scroll-smooth {
        scroll-behavior: auto;
    }
}