/*
 * MenU Layout Configuration
 * ==========================
 * Controls grid columns and responsive breakpoints.
 * Edit this to change how many columns of cards display.
 * 
 * NOTE: Do NOT add card structure rules here - they are in menu-cards.css
 */

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUT
   Change the percentages below to adjust column count
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: 3 columns (33.33% each) */
@media (min-width: 992px) {

    #itemsDiv .col-6,
    #itemsDiv .col-md-4,
    #itemsDiv .col-lg-4,
    #itemsDiv .col-12 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

/* Tablet: 2 columns (50% each) */
@media (min-width: 576px) and (max-width: 991px) {

    #itemsDiv .col-6,
    #itemsDiv .col-md-4,
    #itemsDiv .col-lg-3,
    #itemsDiv .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Mobile: 1 column (100%) */
@media (max-width: 575px) {

    #itemsDiv .col-6,
    #itemsDiv .col-md-4,
    #itemsDiv .col-lg-3,
    #itemsDiv .col-12 {
        flex: 0 0 100% !important;
        max-width: 90% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CONTAINER WIDTH (optional)
   Uncomment to limit max width on large screens
   ═══════════════════════════════════════════════════════════════ */
/*
@media (min-width: 1400px) {
  .container {
    max-width: 1200px;
  }
}
*/