/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--button-py) var(--button-px);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-button);
  text-transform: uppercase;
  color: var(--color-cream);
  white-space: nowrap;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Outline buttons (default): fill in on hover */
.btn:hover {
  background: var(--color-cream);
  color: var(--color-olive);
}

.btn--solid {
  background: var(--color-cream);
  color: var(--color-olive);
}

/* Already-filled buttons: shade change on hover instead of inverting */
.btn--solid:hover {
  background: var(--color-cream-shade);
  color: var(--color-olive);
}

.btn--dark-text {
  color: var(--color-olive);
  border-color: var(--color-olive);
}

.btn--dark-text:hover {
  background: var(--color-olive);
  color: var(--color-cream);
}

/* A mask, not <img src>, so the icon tracks .btn's own `color` (cream by
   default, olive on hover, and vice-versa for .btn--dark-text) instead of
   the arrow-right-outline.svg file's own hardcoded cream stroke — that
   hardcoded color was making the arrow disappear into the cream hover
   background on outline buttons. */
.btn__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("/assets/icons/arrow-right-outline.svg");
  mask-image: url("/assets/icons/arrow-right-outline.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Site header — transparent and overlaid on top of the page's first
   section, so the section's own background (theme color or photo) shows
   through behind it instead of a fixed olive bar. See .hero for how the
   location pages create a "gap" above their image so the flat theme color
   is what actually sits behind the header. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  padding: var(--space-sm) var(--space-section-x);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.site-header__logo {
  /* Was a single clamp scaling continuously from 390px all the way to the
     1728px desktop reference frame — by ordinary laptop widths (~1280-
     1512px, e.g. MacBook Air/Pro logical resolutions) it had already
     grown to nearly its full size, reading as oversized against the rest
     of a compact laptop screen. Capped lower here so it plateaus through
     that whole range; the desktop-only rule below picks growth back up
     for genuinely large screens (1728px reference and up). */
  width: clamp(8.5rem, 5.73rem + 11.36vw, 10rem);
  height: auto;
}

@media (min-width: 1440px) {
  .site-header__logo {
    /* Resumes growth from the 10rem laptop plateau up to the original
       18rem size, timed to land exactly at the 1728px reference width
       (same slope shape as the base clamp above, just for this range). */
    width: clamp(10rem, -30rem + 44.44vw, 18rem);
  }
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  flex-shrink: 0;
}

.site-header__toggle img {
  width: 100%;
}

.site-header__nav {
  display: none;
}

.site-header__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.site-header__book-caret {
  display: none;
}

.site-header__dropdown-wrap {
  position: relative;
}

.site-header__dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-sm);
  background: var(--color-cream);
  border: 1px solid rgba(66, 68, 47, 0.15);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  z-index: 40;
}

.site-header__dropdown-panel[hidden] {
  display: none;
}

.site-header__dropdown-panel a {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-olive);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__dropdown-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-header__dropdown-panel a:hover .site-header__dropdown-arrow,
.site-header__dropdown-panel a:focus-visible .site-header__dropdown-arrow {
  opacity: 1;
  transform: translateX(0);
}

.site-header__dropdown-title {
  padding: 0.6rem 0.75rem 0.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-olive);
  white-space: nowrap;
}

.site-header__dropdown-panel--restaurants {
  /* This is the leftmost nav item, so right:0 (the default, anchoring the
     panel's right edge to the trigger) pushed the now-wider panel off the
     left edge of the viewport. Anchor to the trigger's left edge instead. */
  right: auto;
  left: 0;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 20rem;
}

.site-header__dropdown-links {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.site-header__dropdown-image-wrap {
  position: relative;
  width: 8rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.site-header__dropdown-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Lennan's Yard shows by default; hovering the Haddington Road link
   crossfades to its image instead — pure CSS via :has(), no JS. Falls
   back to always showing Lennan's Yard in browsers without :has()
   support, which is a harmless default, not a broken state. */
.site-header__dropdown-image[data-restaurant-image="lennans-yard"] {
  opacity: 1;
}

.site-header__dropdown-panel--restaurants:has(a[href="/haddington-road/"]:hover)
  .site-header__dropdown-image[data-restaurant-image="haddington-road"] {
  opacity: 1;
}

.site-header__dropdown-panel--restaurants:has(a[href="/haddington-road/"]:hover)
  .site-header__dropdown-image[data-restaurant-image="lennans-yard"] {
  opacity: 0;
}

.site-header__dropdown-backdrop {
  display: none;
}

@media (max-width: 1023px) {
  /* "Book a table" is the one dropdown still reachable on mobile (the
     others move into the hamburger drawer instead) — Figma has it open as
     a bottom sheet over a dimmed backdrop there, not the small popover
     desktop uses. */
  .site-header__dropdown-panel--book {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 0;
    width: 100%;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-md) var(--space-sm) var(--space-lg);
    border: none;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  }

  .site-header__dropdown-panel--book .site-header__dropdown-title {
    font-size: var(--fs-value);
    opacity: 1;
  }

  .site-header__dropdown-panel--book a {
    font-size: var(--fs-section-title);
    font-family: var(--font-display);
    font-weight: 300;
    padding: 0.5rem 0.75rem;
  }

  [data-dropdown-panel].site-header__dropdown-panel--book:not([hidden]) ~ .site-header__dropdown-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 39;
  }
}

@media (min-width: 1024px) {
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .site-header__toggle {
    display: none;
  }

  .site-header__logo {
    grid-column: 2;
    justify-self: center;
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 1.1rem + 1.9vw, 3.125rem);
  }

  .site-header__nav--left {
    grid-column: 1;
    justify-self: start;
  }

  .site-header__end {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    gap: clamp(1.5rem, 1.1rem + 1.9vw, 3.125rem);
  }

  .site-header__nav-link,
  .site-header__dropdown {
    font-family: var(--font-body);
    font-size: var(--fs-button);
    text-transform: uppercase;
    color: var(--color-cream);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
  }

  .site-header__dropdown img {
    width: 1em;
    height: 1em;
    transition: transform 0.15s ease;
  }

  .site-header__dropdown[aria-expanded="true"] img {
    transform: rotate(180deg);
  }

  .site-header__book-caret {
    display: inline-block;
  }
}

/* Pages with no dark photo/color behind the transparent header (e.g. the
   plan-an-event form, contact) — swap the whole header to the olive
   variant so it doesn't disappear against the light page background. The
   logo/hamburger/caret icons are swapped to olive-colored asset variants
   in header.njk itself (color is baked into those SVGs), this just
   handles the CSS-driven text/button colors. */
.site-header--dark-text .site-header__nav-link,
.site-header--dark-text .site-header__dropdown {
  color: var(--color-olive);
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-cream);
  z-index: 50;
  padding: var(--space-sm) var(--space-sm) var(--space-xl);
  display: none;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav[data-open="true"] {
  display: flex;
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs) var(--space-md);
}

.mobile-nav__close {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.mobile-nav__close img {
  width: 100%;
  height: 100%;
}

.mobile-nav__logo {
  width: 7.5rem;
}

.mobile-nav__logo img {
  width: 100%;
  height: auto;
}

.mobile-nav__book {
  flex-shrink: 0;
  color: var(--color-olive);
  border-color: var(--color-olive);
}

.mobile-nav__locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 var(--space-xs);
}

.mobile-nav__location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  text-transform: uppercase;
  color: var(--color-cream);
}

.mobile-nav__location img {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.mobile-nav__location--olive {
  background: var(--color-olive);
}

.mobile-nav__location--maroon {
  background: var(--color-maroon);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xs) 0;
}

.mobile-nav__link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  text-transform: uppercase;
  color: var(--color-olive);
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

/* Horizontally-scrolling photo grid/carousel (reused across Location and About pages) */
.photo-grid {
  position: relative;
  background: var(--color-cream);
  /* No side padding here at all — both edges bleed to the true viewport
     edge (per feedback: images should reach the edge, not stop short with
     a visible gap). The inset that makes the first/last image still look
     like it starts at the section's usual margin lives on the track
     itself below instead, so it's part of the scrollable content and
     scrolls away to reveal images bleeding under it, rather than being a
     fixed gap outside the scroll area that always stays empty. */
  padding: var(--space-sm) 0 var(--space-xl) 0;
}

.photo-grid__track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-left: var(--space-section-x);
  padding-right: var(--space-section-x);
  /* Without this, scroll-snap-type: mandatory + this element's own
     padding made the browser auto-scroll to scrollLeft == padding-left
     on load (a Chromium scroll-snap quirk) — the first image rendered
     flush against the edge instead of inset, as if already scrolled.
     scroll-padding tells snap "start" to account for the padding itself,
     so scrollLeft correctly rests at 0. */
  scroll-padding-left: var(--space-section-x);
  scroll-padding-right: var(--space-section-x);
}

.photo-grid__track::-webkit-scrollbar {
  display: none;
}

.photo-grid__item {
  flex: 0 0 auto;
  width: clamp(22.375rem, 15.5993rem + 29.8969vw, 41.125rem);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
}

.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-grid__prev,
.photo-grid__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  transition: background-color 0.18s ease;
}

.photo-grid__prev {
  left: calc(var(--space-section-x) + 0.75rem);
}

.photo-grid__prev .rotate-180 {
  transform: rotate(180deg);
}

.photo-grid__next {
  right: calc(var(--space-section-x) + 0.75rem);
}

/* Each arrow disappears once there's nothing left in its direction (see
   carousel.js). `[hidden]` alone won't beat the `display: flex` above, so
   this needs its own rule. */
.photo-grid__prev[hidden],
.photo-grid__next[hidden] {
  display: none;
}

.photo-grid__prev:hover,
.photo-grid__next:hover {
  background: var(--color-cream-shade);
}

.photo-grid__prev img,
.photo-grid__next img {
  width: 1.25rem;
  height: 1.25rem;
}

/* Promo card — cross-links to a restaurant (location page's "other location"
   promo, or About's pair of promo cards). Background color is set by the
   caller (theme var or explicit color) since it varies by context. */
.promo-card {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.promo-card__text {
  display: flex;
  flex-direction: column;
  /* Was 0.25rem — felt too tight against the eyebrow's own line-height,
     even though that already supplies some visual gap on its own. */
  gap: 0.5rem;
}

.promo-card__eyebrow {
  /* Figma (node 303:1307): 28px, full-opacity cream — was var(--fs-value)
     (22px max) at 0.8 opacity. */
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-cream);
}

.promo-card__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  color: var(--color-cream);
  text-transform: uppercase;
}

.promo-card__media {
  aspect-ratio: 350 / 160;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.promo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-card__cta {
  align-self: stretch;
  justify-content: space-between;
}

/* Two copies of this CTA exist (see location-content.njk): one grouped
   with the text (desktop layout), one after the image (mobile — sits
   directly under it rather than up with the title/eyebrow). Only one is
   shown at a time. */
.promo-card__cta--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .promo-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* Figma: ~76px left inset — noticeably less than --space-xl's 100px. */
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 4.75rem;
    gap: var(--space-xl);
  }

  .promo-card__text {
    order: 1;
    flex: 1 1 40%;
    min-width: 0;
  }

  .promo-card__media {
    order: 2;
    flex: 0 0 45%;
    aspect-ratio: 782 / 376;
  }

  .promo-card__cta--desktop {
    display: flex;
    align-self: flex-start;
    width: auto;
  }

  .promo-card__cta--mobile {
    display: none;
  }

  /* About page's two "Looking for" cards (desktop only — Figma node
     360:1757): text overlays the photo instead of sitting beside it. The
     photo fills the card behind a bottom gradient, inset by the card's own
     padding so a sliver of the theme color shows as a frame around it. */
  .promo-card--overlay {
    position: relative;
    display: block;
    padding: 1.25rem;
    aspect-ratio: 766 / 415;
  }

  .promo-card--overlay .promo-card__media {
    position: absolute;
    inset: 1.25rem;
    flex: none;
    aspect-ratio: auto;
  }

  .promo-card--overlay .promo-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
  }

  .promo-card--overlay .promo-card__text {
    position: relative;
    z-index: 1;
    order: 0;
    flex: none;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-md);
  }
}

/* Event enquiry form (Contact page + standalone Plan an Event page) */
.event-form {
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-section-x);
}

.event-form__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.event-form__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  color: var(--color-olive);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.event-form__subtitle {
  font-size: var(--fs-body);
  color: var(--color-olive);
  line-height: 1.5;
}

.event-form__grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-md) / 2);
  max-width: 68rem;
  margin: 0 auto;
}

.event-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-form__field--full {
  grid-column: 1 / -1;
}

.event-form__label {
  font-size: var(--fs-eyebrow);
  color: var(--color-olive);
}

.event-form__input,
.event-form__select,
.event-form__textarea {
  background: #fff;
  border: 1px solid rgba(66, 68, 47, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-value);
  color: var(--color-olive);
  width: 100%;
}

.event-form__textarea {
  min-height: 10rem;
  resize: vertical;
}

.event-form__select {
  appearance: none;
  background-image: url("/assets/icons/caret-down.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 1.25rem;
}

.event-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-top: var(--space-sm);
}

.event-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.event-form__status {
  font-size: 0.9rem;
  color: var(--color-olive);
}

.event-form__status.is-error {
  color: var(--color-maroon);
}

.event-form__terms {
  font-size: 0.8rem;
  color: var(--color-olive);
  opacity: 0.8; /* 0.7 fell just under WCAG AA contrast on cream */
}

@media (min-width: 768px) {
  .event-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Half the original row/column gap (var(--space-md) var(--space-lg)),
       per feedback that fields sat too far apart both side-by-side and
       top-to-bottom. */
    gap: calc(var(--space-md) / 2) calc(var(--space-lg) / 2);
  }

  .event-form__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Pull-quote testimonial carousel (Location and Weddings pages) */
.testimonial {
  background: var(--color-cream);
  color: var(--color-theme);
  padding: var(--space-xl) var(--space-section-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

/* Crossfades via opacity — same technique as .home__media's photo
   slideshow (crossfade.js), which has never had the reliability problems
   the earlier slide/scroll attempts here did. All slides sit stacked in
   the same grid cell (so the track's height follows the tallest one,
   with no JS height measurement needed); the *initial* active slide is
   marked directly in the HTML (see location-content.njk/weddings.njk),
   not set by JS on load — that sidesteps the exact hazard that broke the
   transform version: a transition has nothing to race against if the
   "active" state was never a runtime change to begin with. */
.testimonial__track {
  width: 100%;
  display: grid;
}

.testimonial__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.testimonial__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.testimonial__quote-icon {
  width: 2rem;
  flex-shrink: 0;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: 1.25;
  margin: 0;
}

.testimonial__scores {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.testimonial__score {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-label);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.testimonial__score.is-active {
  opacity: 1;
}

.testimonial__score img {
  height: 1.1em;
  width: auto;
  flex-shrink: 0;
}

.testimonial__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.testimonial__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
}

.testimonial__divider {
  border: none;
  border-top: 1px solid var(--color-theme);
  opacity: 0.25;
  width: 100%;
  margin: 0;
}

.testimonial__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--fs-label);
  font-weight: 400;
}

.testimonial__pagination button {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial__pagination button:disabled {
  opacity: 0.3;
  cursor: default;
}

.testimonial__pagination img {
  width: 100%;
}

.testimonial__pagination .rotate-180 {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .testimonial {
    align-items: flex-start;
  }

  .testimonial__slide {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .testimonial__quote-icon {
    margin-top: 0.5em;
  }

  .testimonial__quote {
    max-width: 75%;
  }

  /* At this width the quote-icon sits to the left of the quote text
     (flex-direction: row above) rather than stacked above it — so the
     text itself starts one icon-width + gap in from the edge, not flush
     with it. Match that same offset here so the review-platform row
     lines up with the quote text, not the icon beside it. */
  .testimonial__scores {
    padding-left: calc(2rem + var(--space-md));
  }
}

/* Split section: image one side, colored panel with heading/copy/CTA the other
   (Signature Plates on Location pages, Love Story panel on Weddings) */
.signature {
  background: var(--color-orange);
  display: flex;
  flex-direction: column;
}

.signature__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.signature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.signature__media img.is-active {
  opacity: 1;
}

.signature__content {
  padding: var(--space-lg) var(--space-section-x) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.signature__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  color: var(--color-cream);
  text-transform: uppercase;
  line-height: 1.05;
}

/* Groups body/list/CTA together so desktop's justify-content:space-between
   (below) creates one big gap after the title and this group, rather than
   spreading space evenly across all four children individually. */
.signature__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.signature__body {
  font-size: var(--fs-body);
  color: var(--color-cream);
  line-height: 1.5;
}

.signature__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: var(--fs-body);
  color: var(--color-cream);
  text-transform: uppercase;
}

.signature__content .btn {
  align-self: flex-start;
}

@media (min-width: 1024px) {
  .signature {
    flex-direction: row;
    aspect-ratio: 1728 / 1080;
  }

  .signature__media {
    flex: 0 0 49.4%;
    aspect-ratio: auto;
    height: 100%;
  }

  .signature__content {
    flex: 1;
    justify-content: space-between;
    padding: var(--space-xl);
  }

  .signature__content .btn {
    align-self: flex-start;
  }
}

/* Full-bleed "dining room" style promo banner with CTA (Location pages, Gift Vouchers) */
.dining-room {
  position: relative;
  aspect-ratio: 390 / 600;
}

.dining-room__media {
  position: absolute;
  inset: 0;
}

.dining-room__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.dining-room__image.is-active {
  opacity: 1;
}

/* Manual "next" arrow (crossfade.js: [data-crossfade-next]) — same cream
   circular button as .photo-grid__next, just single (no prev) since this
   is a full-bleed auto-cycling banner, not a scrollable track. */
.dining-room__next {
  position: absolute;
  top: 50%;
  right: var(--space-section-x);
  transform: translateY(-50%);
  z-index: 1;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  transition: background-color 0.18s ease;
}

.dining-room__next:hover {
  background: var(--color-cream-shade);
}

.dining-room__next img {
  width: 1.25rem;
  height: 1.25rem;
}

.dining-room__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-section-x);
  background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.85) 100%);
}

.dining-room__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  color: var(--color-cream);
  text-transform: uppercase;
}

.dining-room__body {
  font-size: var(--fs-body);
  color: var(--color-cream);
  max-width: 50rem;
}

.dining-room__cta {
  align-self: flex-start;
}

@media (min-width: 1024px) {
  .dining-room {
    aspect-ratio: 1728 / 1080;
  }

  .dining-room__overlay {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .dining-room__cta {
    align-self: flex-end;
  }
}

/* Full-bleed image banner with gradient + overlaid text (About, Events, Weddings) */
.media-banner {
  position: relative;
}

.media-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-banner__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-section-x);
  background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.8) 100%);
}

.media-banner__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  line-height: 64px;
  color: var(--color-cream);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 50rem;
}

/* Footer
   Grid areas so the visual grouping can differ by breakpoint without
   duplicating markup: mobile stacks everything in document order; desktop
   groups logo+social as a left column beside locations/divider/nav. */
.site-footer {
  background: var(--color-tan);
  padding: var(--space-xl) var(--space-section-x);
}

@media (min-width: 1024px) {
  .site-footer {
    /* Figma (node 713:618): measured ~123px top / ~129px bottom at the
       1728px reference — noticeably more than --space-xl's 100px max. */
    padding: 7.6875rem var(--space-section-x) 8rem;
  }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "locations"
    "divider"
    "nav"
    "social";
  gap: var(--space-lg);
}

.site-footer__logo {
  grid-area: logo;
  /* The old formula's slope was too shallow to ever reach its own max —
     it plateaued around 155px at the 1728px reference width instead of
     the intended ~386px. Corrected slope actually reaches the max there. */
  width: clamp(7.5rem, 2.65rem + 19.9vw, 24.1875rem);
}

.site-footer__locations {
  grid-area: locations;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.site-footer__location {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.site-footer__location-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-footer-heading);
  text-transform: uppercase;
  color: var(--color-cream);
  letter-spacing: -0.01em;
}

.site-footer__location-detail {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.site-footer__location-label {
  /* Figma: full-opacity cream, not dimmed. */
  font-family: var(--font-body);
  font-size: var(--fs-label);
  color: var(--color-cream);
  text-transform: uppercase;
}

.site-footer__location-value {
  font-family: var(--font-body);
  font-size: var(--fs-footer-body);
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.site-footer__location-value--address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  position: relative;
}

.site-footer__location-link-icon {
  width: 1em;
  height: 1em;
}

.site-footer__location-value--email {
  text-transform: lowercase;
}

.site-footer__location .btn {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.site-footer__divider {
  grid-area: divider;
  border: none;
  border-top: 1px solid var(--color-cream);
  margin: 0;
}

.site-footer__nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-footer-nav);
  color: var(--color-cream);
}

.site-footer__social-wrap {
  grid-area: social;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-self: end;
}

.site-footer__social {
  display: flex;
  gap: clamp(1.5rem, 1.1rem + 1.9vw, 3.125rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  /* Figma: display font (not body) at 28px — same family/scaling shape as
     the nav links and location headings beside it, just a smaller cap. */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1rem, 0.8084rem + 0.8706vw, 1.75rem);
  color: var(--color-cream);
}

/* Policies & T&Cs — deliberately understated (small, muted) beneath the
   social links, not styled as a peer nav item. */
.site-footer__legal {
  font-size: var(--fs-label);
  color: var(--color-cream);
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo   locations"
      "social divider"
      "social nav";
    /* Figma: measured ~156px between the logo and the locations column —
       noticeably wider than --space-xl's 100px max. */
    column-gap: 9.75rem;
    row-gap: var(--space-md);
  }

  .site-footer__locations {
    flex-direction: row;
    /* Figma: the two location columns are plain 50/50 flex:1 splits with
       no explicit gap between them — the visual separation comes from
       each column's own content being narrower than its half-width slot. */
    gap: 0;
  }

  .site-footer__location {
    flex: 1;
  }

  .site-footer__nav {
    flex-direction: row;
    gap: clamp(1.5rem, 1.1rem + 1.9vw, 3.125rem);
  }
}

/* Generic hover tooltip — attach `data-tooltip="Label text"` to any
   relatively-positioned trigger (link, card, button) to get a small pill
   label that fades in above it on hover/focus. Reused for the address
   "Get Directions" hint, the menu page's "Download Menu" hint, and the
   event-space cards' "Explore More" tag. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-orange);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

/* Small downward-pointing notch under the bubble, connecting it visually
   to whatever it's labelling. */
[data-tooltip]::before {
  content: "";
  position: absolute;
  /* Slight overlap with the bubble's own bottom edge (100% + 0.5rem on
     ::after) rather than sitting flush against it, so there's no hairline
     gap between the two. */
  bottom: calc(100% + 0.25rem);
  /* Near the bubble's left edge with a little padding in from it, not
     centered under the bubble. */
  left: calc(50% - 4.25rem);
  transform: translateX(-50%) translateY(4px);
  border: 0.35rem solid transparent;
  border-top-color: var(--color-orange);
  border-bottom-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}