/* ==========================================
   RESPONSIVE.CSS - Mobile-First Layout Rules
   ========================================== */

/* --- Mobile Viewports (< 640px) --- */
@media (max-width: 639px) {
    .header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .accessibility-toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .lesson-title {
        font-size: 1.25rem;
    }

    .nav-tabs li {
        min-width: 100px;
    }

    .nav-tabs button {
        padding: 8px 4px;
    }

    .step-desc {
        display: none; /* Compact tab labels on mobile */
    }

    .hero-card {
        padding: 1.5rem;
    }

    .hero-card h2 {
        font-size: 1.5rem;
    }

    .lead-text {
        font-size: 1rem;
    }

    .bio-grid {
        grid-template-columns: 1fr;
    }

    .poem-workspace-grid {
        grid-template-columns: 1fr;
    }

    .poem-display-card {
        padding: 1.25rem 0.75rem;
    }

    .poem-line {
        font-size: 1rem;
        padding: 6px 8px;
    }

    .annotation-card {
        position: static;
    }

    .lab-grid {
        grid-template-columns: 1fr;
    }

    .allusion-comparison-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .arrow-badge {
        width: fit-content;
        margin: 0 auto;
    }

    .prasar-grid {
        grid-template-columns: 1fr;
    }

    .journal-actions {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Tablet Viewports (640px – 1024px) --- */
@media (min-width: 640px) and (max-width: 1023px) {
    .poem-workspace-grid {
        grid-template-columns: 1fr;
    }

    .bio-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Desktop Viewports (> 1024px) --- */
@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}