/* ============================================================
   Savory Menu — 5 display templates
   Uses theme CSS variables with safe fallbacks.
   ============================================================ */

.savory-menu-display {
  --sm-primary: var(--savory-primary, #b5432a);
  --sm-secondary: var(--savory-secondary, #1f1b16);
  --sm-accent: var(--savory-accent, #e8a33d);
  --sm-bg: var(--savory-white, #fff);
  --sm-bg-alt: var(--savory-bg-alt, #f7f2ea);
  --sm-text: var(--savory-text, #2b2620);
  --sm-muted: var(--savory-text-light, #6f665b);
  --sm-border: var(--savory-border, #e5ddd0);
  --sm-radius: var(--savory-radius, 10px);
}

/* ---- Category tabs ---- */
.savory-menu-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.savory-menu-tab {
  background: transparent; border: 1px solid var(--sm-border);
  padding: 9px 20px; border-radius: 40px; cursor: pointer;
  font-weight: 500; color: var(--sm-text); transition: background-color .25s, color .25s, border-color .25s;
}
.savory-menu-tab:hover { border-color: var(--sm-primary); color: var(--sm-primary); }
.savory-menu-tab.is-active { background: var(--sm-primary); color: #fff; border-color: var(--sm-primary); }

.savory-menu-group { margin-bottom: 56px; }
.savory-menu-group.is-hidden { display: none; }
.savory-menu-group__title { text-align: center; margin-bottom: 6px; }
.savory-menu-group__desc { text-align: center; color: var(--sm-muted); margin-bottom: 32px; }

/* ---- Dietary tags ---- */
.savory-tags { display: inline-flex; gap: 5px; vertical-align: middle; }
.savory-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 5px;
  font-size: .68rem; font-weight: 700; line-height: 1;
}
.savory-tag--veg { background: #e3f2df; color: #2e7d32; }
.savory-tag--vegan { background: #d7f0e6; color: #00795b; }
.savory-tag--gf { background: #fff3d6; color: #a6790a; }
.savory-tag--spicy { background: transparent; }

/* ---- Price ---- */
.savory-price { font-family: var(--savory-font-heading, Georgia); font-weight: 700; color: var(--sm-primary); white-space: nowrap; }
.savory-price__old { color: var(--sm-muted); font-weight: 400; font-size: .85em; }

/* ============ TEMPLATE 1: GRID WITH IMAGES ============ */
.savory-menu-display--grid-image .savory-menu-items {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.savory-dish--grid { background: var(--sm-bg); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); overflow: hidden; transition: transform .28s, box-shadow .28s; }
.savory-dish--grid:hover { transform: translateY(-5px); box-shadow: 0 12px 34px rgba(0,0,0,.1); }
.savory-dish--grid .savory-dish__media { aspect-ratio: 4/3; }
.savory-dish--grid .savory-dish__media img { width: 100%; height: 100%; object-fit: cover; }
.savory-dish--grid .savory-dish__body { padding: 20px; }
.savory-dish--grid .savory-dish__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.savory-dish--grid .savory-dish__title { margin: 0 0 6px; font-size: 1.15rem; }
.savory-dish--grid .savory-dish__desc { color: var(--sm-muted); font-size: .92rem; margin: 6px 0 10px; }

/* ============ TEMPLATE 2: CARDS WITH IMAGES ============ */
.savory-menu-display--card-image .savory-menu-items {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.savory-dish--card { background: var(--sm-bg); border-radius: var(--sm-radius); overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.07); transition: transform .28s; }
.savory-dish--card:hover { transform: translateY(-6px); }
.savory-dish--card .savory-dish__media { position: relative; aspect-ratio: 1/1; }
.savory-dish--card .savory-dish__media img { width: 100%; height: 100%; object-fit: cover; }
.savory-dish--card .savory-dish__badge { position: absolute; top: 12px; left: 12px; background: var(--sm-accent); color: var(--sm-secondary); padding: 5px 12px; border-radius: 30px; font-size: .72rem; font-weight: 700; }
.savory-dish--card .savory-dish__body { padding: 22px; }
.savory-dish--card .savory-dish__title { margin: 0 0 8px; }
.savory-dish--card .savory-dish__desc { color: var(--sm-muted); font-size: .92rem; margin-bottom: 14px; }
.savory-dish--card .savory-dish__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ============ TEMPLATE 3: FEATURED SHOWCASE ============ */
.savory-menu-display--featured-image .savory-menu-items {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px;
}
.savory-dish--featured { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; background: var(--sm-bg-alt); border-radius: var(--sm-radius); padding: 18px; }
.savory-dish--featured .savory-dish__media { width: 150px; height: 150px; border-radius: var(--sm-radius); overflow: hidden; }
.savory-dish--featured .savory-dish__media img { width: 100%; height: 100%; object-fit: cover; }
.savory-dish--featured .savory-dish__pill { display: inline-block; background: var(--sm-primary); color: #fff; padding: 3px 12px; border-radius: 30px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.savory-dish--featured .savory-dish__title { margin: 0 0 6px; }
.savory-dish--featured .savory-dish__desc { color: var(--sm-muted); font-size: .9rem; margin-bottom: 12px; }
.savory-dish--featured .savory-dish__foot { display: flex; justify-content: space-between; align-items: center; }

/* ============ TEMPLATE 4: ELEGANT LIST (NO IMAGES) ============ */
.savory-menu-display--list-text .savory-menu-items { max-width: 720px; margin: 0 auto; }
.savory-dish--list { padding: 16px 0; border-bottom: 1px dashed var(--sm-border); }
.savory-dish--list .savory-dish__line { display: flex; align-items: baseline; gap: 8px; }
.savory-dish--list .savory-dish__title { font-family: var(--savory-font-heading, Georgia); font-size: 1.15rem; font-weight: 600; color: var(--sm-secondary); }
.savory-dish--list .savory-dish__dots { flex: 1; border-bottom: 2px dotted var(--sm-border); transform: translateY(-4px); }
.savory-dish--list .savory-dish__desc { color: var(--sm-muted); font-size: .9rem; margin: 4px 0 0; }

/* ============ TEMPLATE 5: TWO-COLUMN PRICE LIST (NO IMAGES) ============ */
.savory-menu-display--columns-text .savory-menu-items {
  columns: 2; column-gap: 60px; max-width: 900px; margin: 0 auto;
}
.savory-dish--columns { break-inside: avoid; margin-bottom: 22px; }
.savory-dish--columns .savory-dish__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.savory-dish--columns .savory-dish__title { font-weight: 600; color: var(--sm-secondary); }
.savory-dish--columns .savory-dish__desc { color: var(--sm-muted); font-size: .86rem; margin: 3px 0 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .savory-menu-display--grid-image .savory-menu-items,
  .savory-menu-display--card-image .savory-menu-items { grid-template-columns: repeat(2, 1fr); }
  .savory-menu-display--featured-image .savory-menu-items { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .savory-menu-display--grid-image .savory-menu-items,
  .savory-menu-display--card-image .savory-menu-items { grid-template-columns: 1fr; }
  .savory-menu-display--columns-text .savory-menu-items { columns: 1; }
  .savory-dish--featured { grid-template-columns: 100px 1fr; }
  .savory-dish--featured .savory-dish__media { width: 100px; height: 100px; }
}