/**
 * Restaurant Menu module — layout only.
 *
 * Colours, fonts and spacing are left to the Divi typography and decoration
 * controls on the module, so this file deliberately sets no text styling.
 *
 * Breakpoints match Divi's own: tablet at 980px and phone at 767px.
 */

.spruce_divi_restaurant_menu .spruce-menu__grid {
    display: grid;
    gap: 1.5em;
    align-items: start;
}

/* Desktop column counts. */
.spruce-menu__grid--desktop-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.spruce-menu__grid--desktop-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spruce-menu__grid--desktop-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spruce-menu__grid--desktop-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .spruce-menu__grid--tablet-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .spruce-menu__grid--tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spruce-menu__grid--tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spruce-menu__grid--tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .spruce-menu__grid--phone-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .spruce-menu__grid--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spruce-menu__grid--phone-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spruce-menu__grid--phone-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.spruce_divi_restaurant_menu .spruce-menu__item {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

/* Title and price share a row, price pushed to the trailing edge. */
.spruce_divi_restaurant_menu .spruce-menu__heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
}

.spruce_divi_restaurant_menu .spruce-menu__title {
    margin: 0;
    padding: 0;
}

.spruce_divi_restaurant_menu .spruce-menu__price {
    white-space: nowrap;
}

.spruce_divi_restaurant_menu .spruce-menu__image img {
    display: block;
    width: 100%;
    height: auto;
}

.spruce_divi_restaurant_menu .spruce-menu__meta ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spruce_divi_restaurant_menu .spruce-menu__option-title {
    display: block;
    font-weight: 600;
}

.spruce_divi_restaurant_menu .spruce-menu__sizes li,
.spruce_divi_restaurant_menu .spruce-menu__addons li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

.spruce_divi_restaurant_menu .spruce-menu__option-price {
    white-space: nowrap;
}

/* Dietary tags read as a compact inline list. */
.spruce_divi_restaurant_menu .spruce-menu__tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.spruce_divi_restaurant_menu .spruce-menu__tags li {
    border: 1px solid currentColor;
    border-radius: 2em;
    padding: 0.1em 0.75em;
    font-size: 0.85em;
    line-height: 1.6;
}