/* v51 menu polish (Nov 1 2026). Loaded on /, /menu, /es/, /es/menu.
   1) Thin gold border + soft inner glow on gallery dish cards.
   2) Scroll cues for horizontal pill rows (gallery chips, menu tabs): edge fades + gold arrows,
      shown only when that side has more content (classes set by menu-polish.js). */

/* 1) Dish card borders (the ::after layer sits above the photo, so the border is never covered) */
.gallery-grid .gal-card::after {
  border-radius: inherit;
  border: 1.5px solid rgba(239, 200, 90, .72);
  box-shadow: inset 0 0 14px rgba(244, 218, 138, .22);
  transition: border-color .25s, box-shadow .25s;
}
.gallery-grid .gal-card:hover::after,
.gallery-grid .gal-card:focus-visible::after {
  border-color: #F4DA8A;
  box-shadow: inset 0 0 18px rgba(244, 218, 138, .38);
}

/* 2) Scroll cues */
.hs-wrap { position: relative; --hs-bg: 255, 253, 249; }
.hs-wrap.hs-dark { --hs-bg: 94, 26, 26; }
.hs-wrap::before, .hs-wrap::after {
  top: var(--hs-t, 0px); height: var(--hs-h, auto); bottom: auto;
  content: ""; position: absolute; top: 0; bottom: var(--hs-mb, 0px); width: 56px;
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s;
}
.hs-wrap::before { left: 0;  background: linear-gradient(90deg, rgba(var(--hs-bg), 1) 20%, rgba(var(--hs-bg), 0)); }
.hs-wrap::after  { right: 0; background: linear-gradient(270deg, rgba(var(--hs-bg), 1) 20%, rgba(var(--hs-bg), 0)); }
.hs-wrap.hs-more-l::before, .hs-wrap.hs-more-r::after { opacity: 1; }
.hs-arrow {
  position: absolute; z-index: 3; top: var(--hs-mid, 50%); transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid #EFC85A; background: #5E1A1A; color: #F4DA8A;
  display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.hs-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-arrow.l { left: 2px; } .hs-arrow.r { right: 2px; }
.hs-wrap.hs-more-l .hs-arrow.l, .hs-wrap.hs-more-r .hs-arrow.r { display: inline-flex; }
.hs-arrow:hover { background: #EFC85A; color: #5E1A1A; }
.hs-arrow:focus-visible { outline: 2px solid #EFC85A; outline-offset: 2px; }
/* Make room so the first/last pill can scroll clear of the arrows */
.hs-wrap > .gallery-chips, .hs-wrap > .menu-tabs { scroll-padding-inline: 40px; }

/* The menu tabs row is sticky: move the sticky behaviour to the wrapper so the arrows ride along */
#menu .hs-wrap.hs-tabs { position: sticky; top: calc(70px + var(--ann-h)); z-index: 40; }
#menu .hs-wrap.hs-tabs > .menu-tabs { position: relative; top: auto; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hs-wrap::before, .hs-wrap::after { transition: none; }
}

/* ---- v51 photo cards: caption below the photo, not over it ---- */
.gallery-grid {
  column-count: initial !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  align-items: stretch;
}
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
@media (max-width: 400px)  { .gallery-grid:not([data-gallery-full]) { grid-template-columns: minmax(0, 1fr); } }
.gallery-grid[data-gallery-full] { min-height: 0 !important; }
.gallery-grid .gal-card {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #2a0d0d !important;
}
.gallery-grid .gal-card.hide { display: none; }
@media (max-width: 600px) { .gallery-grid[data-gallery-full] .gal-card.over { display: none; } }
.gallery-grid .gal-card picture { overflow: hidden; flex: none; }
.gallery-grid .gal-card .gal-cap,
.gallery-grid[data-gallery-full] .gal-cap {
  position: static;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .75rem .7rem;
  background: linear-gradient(180deg, #4a1414 0%, #1f0909 100%);
  border-top: 1px solid rgba(239, 200, 90, .45);
}
.gallery-grid .gal-card .gal-name {
  text-shadow: none;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  color: #fff7ea;
}
.gallery-grid .gal-card .gal-price {
  background: #f6e6c4;
  color: #4a1414;
  box-shadow: none;
  margin-top: .05rem;
}
@media (max-width: 600px) {
  .gallery-grid .gal-card .gal-cap,
  .gallery-grid[data-gallery-full] .gal-cap {
    flex-direction: column;
    justify-content: space-between;
    gap: .4rem;
    padding: .5rem .6rem .6rem;
  }
}

/* v51: full-menu list — item name and price can never collide, at any width.
   Cards get enough room for the text column; the name wraps inside its own column
   (breaking a long single word only as a last resort); the price keeps its own column. */
.menu-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.menu-item.has-desc.has-img{grid-template-columns:auto minmax(0,1fr) auto auto}
.menu-item.has-desc:not(.has-img){grid-template-columns:minmax(0,1fr) auto auto}
.menu-item>.item-name{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.menu-item>.item-name .dish-link{overflow-wrap:break-word}
.menu-item>.item-price{min-width:max-content;flex:0 0 auto;margin-left:.35rem}
/* very narrow phones: too tight for name + price side by side, so the price drops under the name */
@media (max-width:400px){
  .menu-item.has-desc.has-img{grid-template-columns:auto minmax(0,1fr) auto}
  .menu-item.has-desc.has-img>.item-name{grid-column:2;grid-row:1}
  .menu-item.has-desc.has-img>.item-price{grid-column:2;grid-row:2;justify-self:start;text-align:left;margin-left:0}
  .menu-item.has-desc.has-img>.add-btn{grid-column:3;grid-row:1 / 3}
  .menu-item.has-desc.has-img>.item-desc{grid-column:2 / -1;grid-row:3}
}

/* ---- v51 round 3 (Nov 6 2026): equal-height gallery cards ---- */
/* Every caption reserves two lines for the dish name, so every card in the gallery has the same
   height (photo 4:3 + caption), not just the cards that share a grid row. 2.4em = 2 lines at the
   name's line-height of 1.2 (set here too so the two numbers cannot drift apart). A name longer
   than two lines still shows in full and only makes its own row taller; the cards beside it
   stretch to match (align-items: stretch above) and keep their price pill at the caption bottom
   on phones / top right on wider screens. */
.gallery-grid .gal-card .gal-name {
  line-height: 1.2;
  min-height: 2.4em;
}