/* =============================================================
   Menu and Events page templates.
   Loaded only on those templates. Colours come exclusively from the
   theme tokens in site.css, so every design and palette applies.
   ============================================================= */

/* ---------- Shared ---------- */
/* Editorial designs narrow --shell for long reading; menu grids, packages
   and the booking form need room on every design. */
.page-template-template-menu .shell:not(.shell--wide),
.page-template-template-events .shell:not(.shell--wide) { max-width: max(var(--shell), 1220px); }
.menu-section,
.events-book,
#packages, #occasions, #the-room { scroll-margin-top: calc(var(--header-h) + 3.5rem); }

/* ---------- Menu: introduction and jump list ---------- */
.menu-intro__text { max-width: 62ch; text-align: center; }
.menu-intro__text p { margin-inline: auto; }

.menu-jump {
  position: sticky; top: calc(var(--header-h) - 1px); z-index: 20;
  background: var(--header-bar);
  backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid var(--line-light);
}
.menu-jump ul {
  display: flex; gap: .5rem; margin: 0; padding: .75rem 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.menu-jump ul::-webkit-scrollbar { display: none; }
.menu-jump li { flex: none; scroll-snap-align: start; }
.menu-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .35rem 1rem;
  border: 1px solid var(--line-light); border-radius: 999px;
  color: var(--cream-text); text-decoration: none; white-space: nowrap;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.menu-jump a:hover,
.menu-jump a:focus-visible { border-color: var(--brass); color: var(--brass-bright); }

/* ---------- Menu: sections ---------- */
.menu-section__grid {
  display: grid; gap: clamp(1.75rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .menu-section__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 2.4fr); align-items: start; }
  .menu-section__head { position: sticky; top: calc(var(--header-h) + 5rem); }
}
.menu-section__head .display { margin-bottom: .9rem; }
.menu-section__intro { color: var(--muted); margin: 0 0 .75rem; max-width: 36ch; }
.menu-section__note {
  display: inline-block; margin: .25rem 0 0; padding: .45rem .8rem;
  border-left: 2px solid var(--brass); color: var(--cream-text); font-size: .86rem;
  background: rgb(var(--brass-rgb) / .08);
}

.menu-list {
  display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none;
}
@media (min-width: 1180px) { .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-dish {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--line-light);
}
.menu-dish--photo { grid-template-columns: 76px minmax(0, 1fr); }
.menu-dish__photo { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line-light); }
.menu-dish__head { display: flex; align-items: baseline; gap: .6rem; }
.menu-dish__name {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.12rem, 1rem + .4vw, 1.32rem); line-height: 1.25; color: var(--cream);
}
.menu-dish__leader {
  flex: 1 1 1.5rem; min-width: 1.5rem; height: 0; align-self: center; transform: translateY(.2em);
  border-bottom: 1px dotted rgb(var(--cream-text-rgb) / .32);
}
.menu-dish__price {
  flex: none; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500;
  color: var(--brass-bright); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.menu-dish__options { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: .35rem 0 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--brass-bright); font-variant-numeric: tabular-nums; }
.menu-dish__options span + span::before { content: "·"; margin-right: 1.1rem; color: var(--muted); }
.menu-dish__allergens { display: inline-flex; align-items: center; gap: .3rem; margin-left: .15rem; }
.menu-dish__allergens abbr {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .3rem;
  border-radius: 4px; background: rgb(var(--cream-text-rgb) / .08); color: var(--muted);
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; cursor: help;
}
.section--cream .menu-dish__options { color: var(--accent-on-light); }
.menu-dish__desc { margin: .4rem 0 0; color: var(--muted); font-size: .93rem; line-height: 1.6; max-width: 58ch; }
.menu-dish__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.menu-tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: .05rem .5rem;
  border: 1px solid var(--line-light); border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream-text);
}
.menu-tag abbr { text-decoration: none; cursor: help; }
.menu-tag--v, .menu-tag--vg { border-color: rgb(var(--brass-rgb) / .55); color: var(--brass-bright); }
.menu-tag--chef { background: rgb(var(--brass-rgb) / .16); border-color: transparent; color: var(--brass-bright); }
.menu-tag--spice { color: var(--saffron); letter-spacing: .12em; border-color: rgb(var(--saffron-rgb) / .45); }

/* Light schemes: sections and text flip with the tokens; only the warm
   accents need the deeper "on light" variant to stay legible. */
.section--cream .menu-dish__name { color: var(--slate); }
.section--cream .menu-dish__price,
.section--cream .menu-tag--v, .section--cream .menu-tag--vg, .section--cream .menu-tag--chef { color: var(--accent-on-light); }

.menu-key { border-top: 1px solid var(--line-light); }
.menu-key__inner { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
.menu-key__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .86rem; }
.menu-key__list li { display: inline-flex; align-items: center; gap: .5rem; }
.menu-key__note { margin: 0; max-width: 68ch; color: var(--muted); font-size: .9rem; }

/* ---------- Events: key facts ---------- */
.events-facts { background: var(--ink); border-bottom: 1px solid var(--line-light); }
.events-facts__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin: 0; padding: 0;
}
.events-facts__item {
  display: flex; flex-direction: column-reverse; justify-content: center; gap: .35rem;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(.75rem, 2vw, 1.5rem); text-align: center;
  border-inline-start: 1px solid var(--line-light);
}
.events-facts__item:first-child { border-inline-start: 0; }
.events-facts__item dd {
  margin: 0; font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); color: var(--brass-bright);
}
.events-facts__item dt { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) {
  .events-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-facts__item:nth-child(odd) { border-inline-start: 0; }
  .events-facts__item:nth-child(n + 3) { border-top: 1px solid var(--line-light); }
}

/* ---------- Events: introduction ---------- */
.events-intro__grid {
  display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .events-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.events-intro__grid--text { max-width: 52rem; }
.events-intro__media { margin: 0; position: relative; }
.events-intro__media::after {
  content: ""; position: absolute; inset: clamp(.75rem, 2vw, 1.25rem) calc(-1 * clamp(.75rem, 2vw, 1.25rem)) calc(-1 * clamp(.75rem, 2vw, 1.25rem)) clamp(.75rem, 2vw, 1.25rem);
  border: 1px solid rgb(var(--brass-rgb) / .45); border-radius: var(--radius); z-index: -1; pointer-events: none;
}
.events-intro__media { isolation: isolate; }
.events-intro__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 899px) { .events-intro__img { aspect-ratio: 4 / 3; } }

/* ---------- Events: occasions ---------- */
.events-occasions__grid {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden;
}
.events-occasion {
  position: relative; padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--ink); transition: background-color .45s var(--ease);
}
.events-occasion:hover { background: var(--ink-soft); }
.events-occasion__num {
  display: block; margin-bottom: 1.1rem; font-family: var(--font-display); font-size: 1rem;
  letter-spacing: .12em; color: var(--brass-bright);
}
.events-occasion h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--cream); }
.events-occasion p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* ---------- Events: packages ---------- */
.events-packages__grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.events-package {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--ink); border: 1px solid var(--line-light); border-radius: var(--radius);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.events-package:hover { transform: translateY(-4px); border-color: rgb(var(--brass-rgb) / .5); }
.events-package--featured {
  border-color: var(--brass);
  background: linear-gradient(160deg, var(--indigo) 0%, var(--ink) 70%);
  box-shadow: 0 30px 60px -30px rgb(var(--shadow-rgb) / .55);
}
.events-package__flag {
  position: absolute; top: 0; right: clamp(1.25rem, 3vw, 2rem); transform: translateY(-50%);
  margin: 0; padding: .3rem .8rem; border-radius: 999px;
  background: var(--brass); color: var(--on-accent);
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.events-package__name { margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); color: var(--cream); }
.events-package__price { margin: 0 0 1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.events-package__price span { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 1.8rem + 1.6vw, 3.1rem); line-height: 1; color: var(--brass-bright); }
.events-package__price small { color: var(--muted); font-size: .85rem; }
.events-package__summary { margin: 0 0 .25rem; color: var(--cream-text); font-size: .95rem; }
.events-package__includes { margin: 1.25rem 0 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line-light); }
.events-package__cta { margin-top: auto; }
.events-packages__note { margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; max-width: 64ch; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- Events: the room ---------- */
.events-room__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) { .events-room__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.events-room__intro { color: var(--muted); margin: 0 0 .5rem; max-width: 52ch; }
.events-room__features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); column-gap: 1.5rem; }
.events-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.events-gallery__item { margin: 0; min-height: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink-soft); }
.events-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.events-gallery__item:hover img { transform: scale(1.04); }
/* Mosaics: the frame sets the proportions, pictures crop to fill. */
.events-gallery--1 { grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 3; }
.events-gallery--2 { aspect-ratio: 16 / 10; }
.events-gallery--3 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 4 / 3; }
.events-gallery--4 { grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1; }
.events-gallery--5 { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 3 / 2; }
.events-gallery--3 .events-gallery__item:first-child,
.events-gallery--5 .events-gallery__item:first-child { grid-row: span 2; }
@media (max-width: 699px) {
  .events-gallery--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; aspect-ratio: auto; }
  .events-gallery--5 .events-gallery__item { aspect-ratio: 1; }
  .events-gallery--5 .events-gallery__item:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* ---------- Events: booking ---------- */
.events-book__form { min-width: 0; }
.events-book__contact {
  display: grid; gap: 1px; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden;
}
.events-book__contact li { display: grid; gap: .3rem; padding: 1.25rem 1.4rem; background: var(--ink-soft); }
.events-book__contact span { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.events-book__contact a { color: var(--cream); text-decoration: none; font-family: var(--font-display); font-size: 1.2rem; overflow-wrap: anywhere; }
.events-book__contact a:hover { color: var(--brass-bright); }
.events-book__deposit { margin: 1.25rem 0 0; padding: 1rem 1.15rem; border-left: 2px solid var(--brass); background: rgb(var(--brass-rgb) / .08); color: var(--cream-text); font-size: .9rem; }

/* ---------- Events: questions ---------- */
.events-faq__grid { display: grid; gap: clamp(1.75rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .events-faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.events-faq__intro { color: var(--muted); max-width: 40ch; }
.events-faq__list { border-top: 1px solid var(--line-light); }
.events-faq__item { border-bottom: 1px solid var(--line-light); }
.events-faq__item summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 1.2rem 2.5rem 1.2rem 0; min-height: 44px;
  font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); font-weight: 500; color: var(--cream);
}
.events-faq__item summary::-webkit-details-marker { display: none; }
.events-faq__item summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.events-faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.events-faq__item p { margin: 0 0 1.35rem; color: var(--muted); max-width: 64ch; }

@media (prefers-reduced-motion: reduce) {
  .events-package, .events-gallery__item img, .events-occasion, .menu-jump a { transition: none; }
  .events-package:hover, .events-gallery__item:hover img { transform: none; }
}