/* =========================================================================
   NAJA RESTAURANT — MENU PAGE
   Loaded after style.css on menu.html only. Reuses the homepage tokens,
   buttons, dish cards, gallery, lightbox, visit and footer styles.
   ========================================================================= */

.page-menu {
  --header-h-scrolled: 64px;
  --catbar-h: 68px;
}
/* jumps into the browsing area land below the fixed header and the sticky category bar
   (style.css already pads every jump by the header height, so only the difference is added) */
.menu-browse section, #menuResultsStart {
  scroll-margin-top: calc(var(--header-h-scrolled) + var(--catbar-h) + 16px - (var(--header-h) + 8px));
}
#menuResultsStart { display: block; }

/* =========================================================================
   01 — MENU HERO
   ========================================================================= */
.hero--menu {
  min-height: 82vh;
  min-height: 82svh;
  justify-content: center;
  padding-bottom: clamp(72px, 10vh, 120px);
}
.hero--menu .hero__content { max-width: 820px; }
.hero--menu .hero__title { font-size: clamp(2.8rem, 8vw, 6.6rem); }
.hero--menu .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.8) 26%, rgba(17, 17, 17, 0.35) 62%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(to left, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.15) 100%);
}
[dir="ltr"] .hero--menu .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.8) 26%, rgba(17, 17, 17, 0.35) 62%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(to right, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.15) 100%);
}
.hero--menu .hero__img { object-position: center 55%; }

/* =========================================================================
   02 — STICKY CATEGORY NAVIGATION
   ========================================================================= */
.menu-browse { position: relative; }

.menu-nav {
  position: sticky; top: var(--header-h-scrolled); z-index: 700;
  min-height: var(--catbar-h);
  display: flex; align-items: center;
  background: rgba(14, 14, 14, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block: 1px solid var(--brand-line);
}
.menu-nav .container { display: flex; align-items: center; }
.menu-nav__cats {
  display: flex; gap: 8px; width: 100%;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-block: 12px;
  /* fade the trailing edge to hint that the row scrolls */
  -webkit-mask-image: linear-gradient(to left, transparent, #000 40px);
  mask-image: linear-gradient(to left, transparent, #000 40px);
}
[dir="rtl"] .menu-nav__cats {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}
.menu-nav__cats::-webkit-scrollbar { display: none; }
.menu-nav .cat-btn { display: inline-flex; align-items: center; gap: 8px; }
.cat-btn__count {
  font-family: var(--font-en); font-size: 0.72rem; line-height: 1;
  padding: 4px 6px; border: 1px solid var(--brand-line); color: var(--muted);
}
.cat-btn[aria-pressed="true"] .cat-btn__count { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }
@media (min-width: 1280px) {
  .menu-nav__cats, [dir="rtl"] .menu-nav__cats { justify-content: center; -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================================
   03 — SEARCH & FILTERS
   ========================================================================= */
.menu-search { padding-block: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 44px); }
.menu-search__grid { display: grid; gap: 28px; align-items: end; }
.menu-search .section-title { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.menu-search__tools { display: grid; gap: 14px; }
.menu-search .menu__search { max-width: none; }
.menu-search__hint { font-size: 0.88rem; color: var(--muted); }
.menu-search__status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.menu-search__status .menu__count { margin: 0; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding-inline: 14px 6px;
  border: 1px solid var(--brand-soft); background: var(--brand-faint);
  font-size: 0.86rem; color: var(--cream);
}
.filter-chip__clear {
  width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted);
  transition: color 0.3s;
}
.filter-chip__clear:hover { color: var(--brand); }
@media (min-width: 900px) {
  .menu-search__grid { grid-template-columns: 0.9fr 1.1fr; gap: 6vw; }
}

/* =========================================================================
   04 — FOOD MENU GRID
   ========================================================================= */
.menu-dishes { padding-block: 0 var(--section-space); }
.menu-dishes__head { display: grid; gap: 14px; margin-block-end: clamp(28px, 4vw, 44px); }
.menu-dishes__head .section-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.menu-dishes__head .notice { margin-block-start: 0; justify-self: start; }
@media (min-width: 900px) {
  .menu-dishes__head { grid-template-columns: 1fr auto; align-items: end; }
}

.menu-cards {
  display: grid; gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .menu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .menu-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Reveal on scroll (main.js adds .is-pending only when motion is allowed).
   The transform sits on the card, not the list item, so the item's position
   stays stable for the language-switch scroll anchor. */
.menu-card > .dish-card {
  height: 100%;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.menu-card.is-pending > .dish-card { opacity: 0; transform: translateY(32px); }

.dish-card--menu .dish-card__media { aspect-ratio: 4 / 3; }
.dish-card--menu .dish-card__body { padding: 20px 20px 20px; gap: 6px; }
.dish-card--menu .dish-card__name { font-size: 1.22rem; }
.dish-card--menu .dish-card__desc { font-size: 0.9rem; }
.dish-card--menu .dish-card__meta { padding-top: 16px; margin-top: auto; }
.dish-card--menu .dish-card__meta .btn { margin-top: 0; }
.dish-card--menu .price__value { font-size: 1.15rem; }
/* tilt is gentler than on the large homepage cards */
.dish-card--menu .dish-card__inner { transform: rotateX(calc(var(--rx) * 0.6)) rotateY(calc(var(--ry) * 0.6)); }

.menu-card__cat {
  font-size: 0.74rem; color: var(--brand); letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-en);
}
.menu-card__cat:lang(ar), [lang="ar"] .menu-card__cat { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 0.84rem; }
.menu-card__badge {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  padding: 5px 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--cream); background: rgba(17, 17, 17, 0.72); border: 1px solid var(--brand-soft);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Branded frame for dishes that have no verified photo yet */
.menu-card__ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center;
}
.menu-card__ph-mark {
  font-family: var(--font-script); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; direction: ltr;
  color: transparent; -webkit-text-stroke: 1px rgba(238, 29, 35, 0.55);
}
.menu-card__ph-text { font-size: 0.8rem; color: var(--muted); }

.menu-dishes .menu__empty { margin-top: 0; }

/* =========================================================================
   05 — FEATURED GALLERY (6-image composition)
   ========================================================================= */
@media (min-width: 1024px) {
  .gallery-grid--menu .gallery-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
  .gallery-grid--menu .gallery-item:nth-child(2) { grid-column: 7 / 10; grid-row: 1 / 3; }
  .gallery-grid--menu .gallery-item:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 2; }
  .gallery-grid--menu .gallery-item:nth-child(4) { grid-column: 10 / 13; grid-row: 2 / 3; }
  .gallery-grid--menu .gallery-item:nth-child(5) { grid-column: 1 / 5; grid-row: 3 / 4; }
  .gallery-grid--menu .gallery-item:nth-child(6) { grid-column: 5 / 13; grid-row: 3 / 4; }
}

/* =========================================================================
   06 — ORDER
   ========================================================================= */
.order-cta .visit__head { padding-top: 8px; }
.order-cta__pending { margin-top: 30px; }
.order-cta .visit__info:not([hidden]) { margin-top: clamp(48px, 7vw, 80px); }
/* when cells are hidden, let the remaining ones share the row */
@media (min-width: 640px) {
  .order-cta .visit__info { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .order-cta .visit__cell { border-inline-end: 1px solid var(--brand-line); }
  .order-cta .visit__cell:last-of-type { border-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-card.is-pending > .dish-card { opacity: 1; transform: none; }
  .dish-card--menu .dish-card__inner { transform: none !important; }
}

/* the secondary-language name follows the card's reading edge */
[dir="ltr"] .dish-card--menu .dish-card__alt { text-align: left; }
[dir="rtl"] .dish-card--menu .dish-card__alt { text-align: right; }