@media (max-width: 1024px) {
    .five-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .desktop-nav {
        display: none;
    }

    .hero {
        padding-top: 3rem;
    }

    .card-grid,
    .five-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.4rem;
    }

    .profile-main-card {
        margin: -2rem 0 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        border-top: 1px solid var(--color-border);
        z-index: 30;
        }

    .mobile-bottom-nav form {
        margin: 0;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        min-height: 56px;
        border: none;
        background: white;
        color: var(--color-secondary);
        font: inherit;
        font-size: 0.82rem;
        display: grid;
        place-items: center;
        text-decoration: none;
    }

    .site-footer {
        padding-bottom: 6rem;
    }
}

@media (max-width: 700px) {
    .directory-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .community-header-card {
        margin: -2rem 0 0;
        grid-template-columns: 1fr;
    }

    .community-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .feed-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .thread-card {
        grid-template-columns: 1fr;
    }

    .thread-stats {
        text-align: left;
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 800px) {
    .course-hero-card {
        grid-template-columns: 1fr;
        padding: 1.4rem;
    }

    .lesson-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .certificate-meta-grid {
        grid-template-columns: 1fr;
    }

    .certificate-inner {
        padding: 1.5rem;
    }
}

@media (max-width: 700px) {
    .event-card {
        grid-template-columns: 1fr;
    }

    .event-date-box {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }
}