/* /themes/default/assets/css/dynamic-grid.css */
/* Dynamic Grid System - Updates based on theme configuration */

/* 
   This file is dynamically generated or updated based on the theme configuration.
   It sets CSS custom properties that are used by the main grid styles.
   
   The JavaScript will read the theme configuration and update these CSS variables
   to match the desired number of columns per breakpoint.
*/

:root {
    /* Default values - will be overridden by JavaScript */
    --grid-desktop-landscape: 5;
    --grid-tablet-landscape: 4;
    --grid-mobile-landscape: 2;
    
    --grid-desktop-portrait: 4;
    --grid-tablet-portrait: 3;
    --grid-mobile-portrait: 2;
}

/* Apply the dynamic values to the grid classes */
.models-grid-landscape {
    --grid-columns-desktop: var(--grid-desktop-landscape);
    --grid-columns-tablet: var(--grid-tablet-landscape);
    --grid-columns-mobile: var(--grid-mobile-landscape);
}

.models-grid-portrait {
    --grid-columns-desktop: var(--grid-desktop-portrait);
    --grid-columns-tablet: var(--grid-tablet-portrait);
    --grid-columns-mobile: var(--grid-mobile-portrait);
}

/* Responsive Grid Debug Info (uncomment to see current values) */
/*
.models-grid::before {
    content: "Desktop: " var(--grid-columns-desktop) " | Tablet: " var(--grid-columns-tablet) " | Mobile: " var(--grid-columns-mobile);
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 9999;
}
*/