/**
 * C4mulo5 Speisekarte mit Bild (c4mulo5-restaurant-menu-image)
 *
 * Zweispaltiges Layout: Bild + Preisliste (classic-Stil). Bild/Liste per
 * data-c4m5-image-position bzw. Klasse links/rechts tauschbar. Dunkles
 * Standard-Design über CSS-Variablen, im Customizer überschreibbar.
 */

.c4mulo5-restaurant-menu-image {
    --rmi-bg:          #111111;
    --rmi-text:        #f3f3f3;
    --rmi-muted:       #9a9a9a;
    --rmi-price:       #ffffff;
    --rmi-divider:     rgba(255, 255, 255, 0.18);
    --rmi-heading:     #ffffff;
    --rmi-codes:       #8a8a8a;
    --rmi-gap:         48px;

    background-color: var(--rmi-bg);
    color:            var(--rmi-text);
}

/* ── Zwei-Spalten-Reihe ─────────────────────────────────────── */
.c4m5-rmi-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--rmi-gap);
}
.c4m5-rmi-row > .c4m5-rmi-image-col,
.c4m5-rmi-row > .c4m5-rmi-list-col {
    flex:      1 1 0;
    min-width: 0;
    max-width: none;       /* col-sm-6 Breite überschreiben, Gap steuert Abstand */
    padding:   0;
}

/* Bild rechts statt links: Reihenfolge tauschen */
.c4mulo5-restaurant-menu-image.c4m5-rmi-img-right .c4m5-rmi-image-col { order: 2; }
.c4mulo5-restaurant-menu-image.c4m5-rmi-img-right .c4m5-rmi-list-col  { order: 1; }

/* ── Bild ───────────────────────────────────────────────────── */
.c4m5-rmi-image {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 2px;
    object-fit:    cover;
}

/* ── Listen-Spalte (bare render_menu Ausgabe) ──────────────────
 * Der innere Wrapper kommt ohne gridContainer (bare), daher hier
 * volle Breite ohne zusätzliches Padding. */
.c4m5-rmi-list .c4m5-menu-bare {
    width:   100%;
    margin:  0;
    padding: 0;
}
.c4m5-rmi-list .c4m5-menu-group + .c4m5-menu-group {
    margin-top: 28px;
}
.c4m5-rmi-list .c4m5-menu-cat-title {
    color:         var(--rmi-heading);
    font-size:     1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin:        0 0 12px;
}

/* Einzelner Eintrag: Name links, Preis rechts, Punkt-Linie dazwischen */
.c4m5-rmi-list .c4m5-menu-item {
    padding: 0;
}
.c4m5-rmi-list .c4m5-menu-item-row {
    display:        flex;
    align-items:    baseline;
    gap:            8px;
    padding:        14px 0;
    border-bottom:  1px dotted var(--rmi-divider);
}
.c4m5-rmi-list .c4m5-menu-item:last-child .c4m5-menu-item-row {
    border-bottom: none;
}
.c4m5-rmi-list .c4m5-menu-item-main {
    flex:     1 1 auto;
    min-width: 0;
}
.c4m5-rmi-list .c4m5-menu-item-name {
    color:       var(--rmi-text);
    font-size:   1rem;
    font-weight: 500;
}
.c4m5-rmi-list .c4m5-menu-item-name strong {
    font-weight: 500;
}
.c4m5-rmi-list .c4m5-menu-codes {
    color:       var(--rmi-codes);
    font-size:   0.7rem;
    vertical-align: super;
    margin-left: 2px;
    cursor:      help;
}
.c4m5-rmi-list .c4m5-menu-item-desc {
    color:      var(--rmi-muted);
    font-size:  0.82rem;
    font-style: italic;
    margin-top: 3px;
}
.c4m5-rmi-list .c4m5-menu-item-price {
    flex:        0 0 auto;
    color:       var(--rmi-price);
    font-size:   1rem;
    font-weight: 600;
    white-space: nowrap;
    text-align:  right;
}
.c4m5-rmi-list .c4m5-menu-variants {
    list-style: none;
    margin:     0;
    padding:    0;
}
.c4m5-rmi-list .c4m5-menu-variants li {
    display: flex;
    gap:     8px;
    justify-content: flex-end;
}
.c4m5-rmi-list .c4m5-variant-label {
    color: var(--rmi-muted);
}

/* ── Responsive: untereinander stapeln ─────────────────────── */
@media (max-width: 767px) {
    .c4m5-rmi-row {
        gap: 28px;
    }
    .c4mulo5-restaurant-menu-image .c4m5-rmi-image-col,
    .c4mulo5-restaurant-menu-image .c4m5-rmi-list-col {
        flex:  1 1 100%;
        order: 0 !important;   /* auf Mobile immer Bild oben, Liste darunter */
    }
}