/**
 * Clean Style - Menu Item Grid Layout
 * 2x2 Grid Layout für Menu Items - OPTIMIZED 2026-01-10
 *
 * @author Firma: 4Unit Systems Integration GmbH
 *         Adresse: Jahnstraße 36, 34582 Borken (Hessen)
 *         Telefon: 05682 73 48 26
 *         E-Mail: info@4unit.com
 *         Website: https://4unit.com
 */

/* Grid Container Spalten-Layout */
.category-items.items-list.menu-grid-cols-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.category-items.items-list.menu-grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.category-items.items-list.menu-grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Mobile: Immer 1 Spalte */
@media (max-width: 768px) {
    .category-items.items-list.menu-grid-cols-2,
    .category-items.items-list.menu-grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet: 2-spaltig für 3-spaltig Layout */
@media (min-width: 769px) and (max-width: 1024px) {
    .category-items.items-list.menu-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 2x2 Grid Layout für Menu Items */
.category-items.items-list .menu-item,
.menu-list-layout .menu-item {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 1rem !important;
    row-gap: 0.75rem !important;
    align-items: start !important;
    padding: 1rem !important;
}

.category-items.items-list .menu-item > .menu-item-image,
.menu-list-layout .menu-item > .menu-item-image {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100px !important;
    height: 100px !important;
}

.category-items.items-list .menu-item > .menu-item-content,
.menu-list-layout .menu-item > .menu-item-content {
    grid-row: 1 !important;
    grid-column: 2 !important;
    min-height: 100px !important;
}

.category-items.items-list .menu-item > .price-grid,
.menu-list-layout .menu-item > .price-grid {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.category-items.items-list .menu-item > .menu-item-actions,
.menu-list-layout .menu-item > .menu-item-actions {
    grid-row: 2 !important;
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Wenn KEIN Bild vorhanden ist - alles in einer Spalte */
.category-items.items-list .menu-item:not(:has(.menu-item-image)),
.menu-list-layout .menu-item:not(:has(.menu-item-image)) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
}

.category-items.items-list .menu-item:not(:has(.menu-item-image)) > .menu-item-content,
.menu-list-layout .menu-item:not(:has(.menu-item-image)) > .menu-item-content {
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-height: auto !important;
}

.category-items.items-list .menu-item:not(:has(.menu-item-image)) > .price-grid,
.menu-list-layout .menu-item:not(:has(.menu-item-image)) > .price-grid {
    grid-row: 2 !important;
    grid-column: 1 !important;
}

.category-items.items-list .menu-item:not(:has(.menu-item-image)) > .menu-item-actions,
.menu-list-layout .menu-item:not(:has(.menu-item-image)) > .menu-item-actions {
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-content: flex-start !important;
    margin-left: auto !important;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .category-items.items-list .menu-item,
    .menu-list-layout .menu-item {
        grid-template-columns: 80px 1fr !important;
        column-gap: 0.75rem !important;
        row-gap: 0.5rem !important;
        padding: 0.75rem !important;
    }

    .category-items.items-list .menu-item > .menu-item-image,
    .menu-list-layout .menu-item > .menu-item-image {
        width: 80px !important;
        height: 80px !important;
    }

    .category-items.items-list .menu-item > .menu-item-content,
    .menu-list-layout .menu-item > .menu-item-content {
        min-height: 80px !important;
    }
}