/**
 * Mobile: horizontal swipeable card rows (all sections site-wide)
 */
@media (max-width: 768px) {
    .features-grid,
    #coursesGrid,
    .faq-list,
    .blog-grid,
    .dashboard-content-area,
    .members-grid,
    .gallery-grid,
    .topics-grid,
    #galleryImagesList {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 1rem !important;
        padding: 0 1rem 1.25rem !important;
        max-width: 100% !important;
        grid-template-columns: unset !important;
    }

    .features-grid::-webkit-scrollbar,
    #coursesGrid::-webkit-scrollbar,
    .faq-list::-webkit-scrollbar,
    .blog-grid::-webkit-scrollbar,
    .dashboard-content-area::-webkit-scrollbar,
    .members-grid::-webkit-scrollbar,
    .gallery-grid::-webkit-scrollbar,
    .topics-grid::-webkit-scrollbar,
    #galleryImagesList::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .features-grid > .feature-card,
    #coursesGrid > .feature-card,
    .faq-list > .faq-item,
    .blog-grid > .blog-card,
    .dashboard-content-area > .dashboard-card,
    .members-grid > .member-card,
    .gallery-grid > .gallery-item,
    .topics-grid > .topic-card,
    #galleryImagesList > * {
        flex: 0 0 min(88vw, 300px) !important;
        min-width: min(88vw, 300px) !important;
        max-width: min(88vw, 300px) !important;
        scroll-snap-align: start;
        grid-column: auto !important;
    }

    .gallery-grid > .gallery-item,
    #galleryImagesList > * {
        flex: 0 0 min(72vw, 260px) !important;
        min-width: min(72vw, 260px) !important;
        max-width: min(72vw, 260px) !important;
    }

    .features-grid > .empty-state,
    #coursesGrid > .empty-state,
    .members-grid > .empty-state,
    .gallery-grid > .empty-state,
    .blog-grid > .empty-state {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* FAQ: override column layout from page styles */
    .faq-list {
        flex-direction: row !important;
    }

    .faq-section {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .stats {
        padding: 3rem 0.5rem;
        overflow: hidden;
    }

    /* Landing stats: all numbers in one row, no scroll */
    .stats .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding: 0 0.75rem !important;
        max-width: 100% !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .stats .stats-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .stats .stats-grid > .stat-item {
        flex: none !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        padding: 0.6rem 0.2rem !important;
        scroll-snap-align: unset;
    }

    .stats .stat-number {
        font-family: 'Bebas Neue', sans-serif !important;
        font-size: clamp(1.5rem, 6.5vw, 2.5rem) !important;
        font-weight: 400 !important;
        line-height: 1.05 !important;
        letter-spacing: 0.5px !important;
        -webkit-font-smoothing: antialiased;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    }

    .stats .stat-label {
        display: block;
        margin-top: 0.35rem !important;
        font-size: clamp(0.55rem, 2.6vw, 0.8rem) !important;
        font-weight: 600 !important;
        color: rgba(255, 254, 247, 0.95) !important;
        letter-spacing: 0.8px !important;
        line-height: 1.2 !important;
        text-transform: uppercase;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        -webkit-font-smoothing: antialiased;
        word-break: break-word;
        hyphens: auto;
    }

    /* Member letter groups stay stacked; only cards inside each row scroll */
    #membersGrid {
        display: block !important;
        overflow-x: visible !important;
        flex-direction: column !important;
        padding: 0 1rem !important;
    }

    #membersGrid > div {
        margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    .features-grid > .feature-card,
    #coursesGrid > .feature-card,
    .faq-list > .faq-item,
    .blog-grid > .blog-card,
    .dashboard-content-area > .dashboard-card,
    .members-grid > .member-card,
    .topics-grid > .topic-card {
        flex: 0 0 min(92vw, 280px) !important;
        min-width: min(92vw, 280px) !important;
        max-width: min(92vw, 280px) !important;
    }

    .gallery-grid > .gallery-item,
    #galleryImagesList > * {
        flex: 0 0 min(78vw, 240px) !important;
        min-width: min(78vw, 240px) !important;
        max-width: min(78vw, 240px) !important;
    }

    .stats .stat-number {
        font-size: clamp(1.35rem, 6vw, 2.2rem) !important;
    }

    .stats .stat-label {
        font-size: clamp(0.5rem, 2.4vw, 0.75rem) !important;
        letter-spacing: 0.5px !important;
    }
}