/* ==========================================================================
   Responsive Cards Fix (2026-11-11)
   One consolidated small-screen layer for every card system on the site.
   Loaded LAST (header on all pages, and again after the homepage Figma
   sheet) because the older stylesheets define the same card grids several
   times with conflicting columns, which broke cards on small screens:
   grids overflowed or froze instead of reflowing or sliding.
   ========================================================================== */

/* Media can never push a card wider than the screen */
.mw-design-card img,
.mw-gallery-card img,
.mw-category-card img,
.mw-cat-tile-card img,
.admin-stat-card img {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Swipe strips: category cards and story strips slide left/right on touch
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .mw-categories-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        gap: 12px !important;
        padding: 4px 4px 14px !important;
        scrollbar-width: none;
    }

    .mw-categories-grid::-webkit-scrollbar {
        display: none;
    }

    .mw-categories-grid .mw-category-card {
        flex: 0 0 148px !important;
        width: 148px !important;
        scroll-snap-align: start;
    }

    .mw-catalog-stories-strip {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .mw-catalog-stories-strip::-webkit-scrollbar {
        display: none;
    }

    .mw-catalog-stories-strip > * {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* --------------------------------------------------------------------------
   Card grids: fluid two-column app layout on phones, never overflowing
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .mw-designs-grid,
    .mw-catalog-grid,
    .mw-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .mw-design-card,
    .mw-gallery-card,
    .mw-cat-tile-card {
        min-width: 0;
    }

    .mw-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Long titles wrap inside the card instead of being clipped mid-word */
    .mw-gallery-title,
    .mw-gallery-sub {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .mw-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .mw-grid-2col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .mw-nuskhy-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
    }

    .mw-nuskhy-hero-grid,
    .mw-hero-grid,
    .about-story-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 400px) {
    .mw-grid-2col {
        grid-template-columns: 1fr !important;
    }

    .mw-categories-grid .mw-category-card {
        flex-basis: 132px !important;
        width: 132px !important;
    }
}

/* --------------------------------------------------------------------------
   Admin: KPI stat cards become a swipeable snap row on small screens
   (the owner asked for cards that slide left/right), panels stay full width
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .admin-stats-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        gap: 12px !important;
        padding: 4px 4px 14px !important;
        scrollbar-width: none;
    }

    .admin-stats-grid::-webkit-scrollbar {
        display: none;
    }

    .admin-stats-grid .admin-stat-card {
        flex: 0 0 78% !important;
        scroll-snap-align: start;
        min-width: 0;
    }

    .admin-card {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .admin-stats-grid .admin-stat-card {
        flex-basis: 84% !important;
    }
}