/**
 * File Path: assets/css/front/mbs-front-responsive.css
 * F-002: Responsive column overrides
 * Component of mbs-front.css — extracted Session 94.
 * Enqueued by MBS_Front_Assets with dep: mbs-front.
 */
/* ==========================================================================
   F-002: Responsive column overrides
   At mobile widths (<=640 px) the column count is collapsed to 1.
   At tablet widths (641-900 px) the column count uses --mbs-columns-tablet (default 2).
   At desktop widths (>900 px) the user-chosen --mbs-columns setting applies.
   ========================================================================== */

@media (max-width: 640px) {
    .mbs-wrapper .mbs-layout-grid,
    .mbs-wrapper .mbs-layout-card {
        grid-template-columns: 1fr;
    }

    .mbs-wrapper .mbs-layout-masonry {
        column-count: 1;
    }
}

/* ==========================================================================
   F-002: Tablet column overrides (641 px - 900 px)
   Portrait tablets (~768 px wide) fall in this range and look better at
   2 columns than the desktop default. Landscape tablets (~1024 px wide)
   fall above 900 px and use the desktop --mbs-columns setting unchanged.
   Override --mbs-columns-tablet on .mbs-wrapper via custom CSS to adjust
   the tablet column count per block (e.g. --mbs-columns-tablet: 3).
   ========================================================================== */

@media (min-width: 641px) and (max-width: 900px) {
    .mbs-wrapper .mbs-layout-grid,
    .mbs-wrapper .mbs-layout-card {
        grid-template-columns: repeat(var(--mbs-columns-tablet, 2), 1fr);
    }

    .mbs-wrapper .mbs-layout-masonry {
        column-count: var(--mbs-columns-tablet, 2);
    }
}