/* ==========================================================================
   DUBAI RESTAURANT – EDGWARE
   Modern luxury single-page site — vanilla CSS
   --------------------------------------------------------------------------
   Contents:
     1. Design tokens (CSS custom properties)
     2. Reset & base
     3. Utilities (container, buttons, sections, reveal animations)
     4. Header / navigation (glassmorphism)
     5. Hero
     6. About
     7. Menu
     8. Gallery
     9. Testimonials
    10. Contact & form
    11. Footer
    12. Responsive breakpoints (768px / 1024px handled inline, mobile-first)
    13. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette — deep charcoal, warm sand, sophisticated gold */
  --clr-bg: #1a1a1a; /* main background      */
  --clr-bg-deep: #121110; /* darker sections      */
  --clr-surface: #232120; /* cards                */
  --clr-surface-2: #2b2825; /* raised cards         */
  --clr-line: rgba(212, 175, 55, 0.18);
  --clr-line-soft: rgba(255, 255, 255, 0.08);

  --clr-gold: #d4af37;
  --clr-gold-soft: #e6c96b; /* lighter gold for text on dark  */
  --clr-gold-deep: #a8862a;

  --clr-cream: #f3ebdd; /* primary text on dark  */
  --clr-sand: #cfc4b0; /* secondary text        */
  --clr-muted: #9b9182; /* tertiary text         */

  --clr-error: #e5766b;
  --clr-success: #8fce9a;

  /* Typography */
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Segoe UI", -apple-system, sans-serif;

  /* Spacing scale (8px rhythm) */
  --sp-1: 0.5rem; /*  8px */
  --sp-2: 1rem; /* 16px */
  --sp-3: 1.5rem; /* 24px */
  --sp-4: 2rem; /* 32px */
  --sp-6: 3rem; /* 48px */
  --sp-8: 4rem; /* 64px */
  --sp-12: 6rem; /* 96px */

  /* Effects */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 8px 28px rgba(212, 175, 55, 0.22);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* native smooth scrolling */
  scroll-padding-top: var(--header-h); /* offset for fixed header */
}

body {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px base */
  line-height: 1.65;
  color: var(--clr-sand);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  color: var(--clr-cream);
  line-height: 1.15;
  font-weight: 600;
}

a {
  color: var(--clr-gold-soft);
  text-decoration: none;
}
a:hover {
  color: var(--clr-gold);
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Visible focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — hidden until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-2);
  z-index: 2000;
  padding: var(--sp-1) var(--sp-2);
  background: var(--clr-gold);
  color: #1a1a1a;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus {
  top: 0;
  color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, 72rem); /* fluid with max-width */
  margin-inline: auto;
}

.section {
  padding-block: var(--sp-12);
}
.section--tinted {
  background: var(--clr-bg-deep);
}

/* Section headings */
.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: var(--sp-2);
}

.section-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: var(--sp-2);
}

.section-lead {
  max-width: 34rem;
  color: var(--clr-muted);
}

.section-head {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.section-head .section-lead {
  margin-inline: auto;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px; /* touch target */
  padding: 0.8rem 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background-color 0.25s,
    color 0.25s;
  touch-action: manipulation;
}
.btn:active {
  transform: scale(0.97);
}

.btn--gold {
  background: linear-gradient(135deg, #e2c158, var(--clr-gold) 45%, #b8912c);
  color: #171310;
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(212, 175, 55, 0.35);
  color: #171310;
}

.btn--ghost {
  border-color: var(--clr-line);
  color: var(--clr-cream);
  background: rgba(255, 255, 255, 0.03);
}
.btn--ghost:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold-soft);
  transform: translateY(-2px);
}

.btn--small {
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  font-size: 0.875rem;
}
.btn--full {
  width: 100%;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}
.icon--gold {
  color: var(--clr-gold);
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- Scroll reveal (driven by IntersectionObserver in script.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal--delay-1 {
  transition-delay: 0.12s;
}
.reveal--delay-2 {
  transition-delay: 0.24s;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. HEADER / NAVIGATION — glassmorphism
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(26, 26, 26, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--clr-line-soft);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}
/* Slightly denser glass once the page is scrolled (class added by JS) */
.site-header.is-scrolled {
  background: rgba(20, 19, 18, 0.82);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

/* Brand / logo placeholder */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 30%;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-gold);
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(212, 175, 55, 0.25),
      transparent 60%
    ),
    var(--clr-bg-deep);
  -webkit-border-radius: 30%;
  -moz-border-radius: 30%;
  -ms-border-radius: 30%;
  -o-border-radius: 30%;
}

.brand__text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--clr-cream);
  line-height: 1.2;
  gap: 0.25rem;
}
.brand__text small {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-gold-soft);
}

/* Nav links — mobile-first: hidden panel, shown via burger */
.nav__links {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: min(78vw, 320px);
  height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: rgb(0 0 0 / 95%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--clr-line-soft);
  transform: translateX(105%);
  transition: transform 0.35s var(--ease-out);
}
.nav__links.is-open {
  transform: translateX(0);
}

.nav__link {
  display: block;
  padding: 0.75rem 1rem; /* comfortable touch size */
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-sand);
  transition:
    color 0.2s,
    background-color 0.2s;
}
.nav__link:hover {
  color: var(--clr-gold-soft);
  background: rgba(212, 175, 55, 0.07);
}

/* Active section highlight (set by scroll-spy JS) */
.nav__link.is-active {
  color: var(--clr-gold);
  background: rgba(212, 175, 55, 0.1);
}

.nav__cta-wrap {
  margin-top: var(--sp-2);
}

/* Burger button */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--clr-line-soft);
  border-radius: 10px;
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--clr-cream);
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease-out),
    opacity 0.2s;
}
/* Burger → X */
.burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
  opacity: 0;
}
.burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* Hero backdrop — the restaurant interior photo behind a dark scrim.
   Layer order (top → bottom):
     1. warm gold tint, keeps the brand feel
     2. dark scrim — darkest at the top (under the glass header) and at the
        bottom (so the hero melts into the page), lighter through the middle.
        This is what makes the cream text readable over a bright photo.
     3. the photo itself
   Path is relative to THIS file (style/style.css), hence ../images/.        */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: /* 1. slight extra shade under the glass header */
    linear-gradient(to bottom, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0) 18%),
    /* 2. short fade into the page colour so the hero ends cleanly.
          Kept to the last 16% so it never becomes a thick dark band
          on short screens. */
    linear-gradient(to top, var(--clr-bg) 0%, rgba(26, 26, 26, 0) 16%),
    /* 3. warm gold brand tint */
    radial-gradient(
        1100px 620px at 76% 18%,
        rgba(212, 175, 55, 0.15),
        transparent 62%
      ),
    /* 4. EVEN readability scrim — one flat value everywhere, so text
          contrast is identical at every screen size */
    linear-gradient(rgba(12, 11, 10, 0.74), rgba(12, 11, 10, 0.74)),
    /* 5. the photo */ url("../images/shop__picture-2.webp");
  background-repeat: no-repeat;
  background-size: cover; /* fill the hero, never squash the photo */
  background-position: center 42%; /* favour the lights & mural, not the floor */
}

/* Soft animated golden glow behind the title */
.hero__glow {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.14),
    transparent 65%
  );
  filter: blur(30px);
  animation: glow-pulse 7s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-8);
}

.hero__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--clr-gold-soft);
  margin-bottom: var(--sp-3);
}

.hero__title {
  font-size: clamp(2.6rem, 7.5vw, 5rem);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.hero__title em {
  font-style: italic;
  background: linear-gradient(120deg, #f0d98a, var(--clr-gold), #b8912c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 38rem;
  margin: 0 auto var(--sp-4);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--clr-sand);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* Small screens: the desktop padding + type scale made the hero content
   taller than the screen itself (681px of content in a 640px viewport),
   pushing the buttons below the fold. Tighten it so the whole hero —
   headline, text and both buttons — fits without scrolling. */
@media (max-width: 600px) {
  .hero__content {
    padding-block: var(--sp-4);
  }
  .hero__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    margin-bottom: var(--sp-2);
  }
  .hero__title {
    font-size: clamp(2.1rem, 8.5vw, 2.75rem);
    margin-bottom: var(--sp-2);
  }
  .hero__sub {
    font-size: 0.98rem;
    margin-bottom: var(--sp-3);
  }
  /* Buttons share the row evenly instead of wrapping onto two lines */
  .hero__actions .btn {
    flex: 1 1 auto;
    min-width: 9.5rem;
  }
}

/* Very narrow phones (320–400px): tighten a little further so the hero
   still fits, and keep the eyebrow on a single line. */
@media (max-width: 400px) {
  .hero__content {
    padding-block: var(--sp-3);
  }
  .hero__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }
  .hero__title {
    font-size: clamp(1.9rem, 9vw, 2.3rem);
  }
  .hero__sub {
    font-size: 0.92rem;
  }
}

/* Subtle floating entrance — staggered per element */
.float-1,
.float-2,
.float-3,
.float-4 {
  animation: float-in 0.9s var(--ease-out) both;
}
.float-2 {
  animation-delay: 0.15s;
}
.float-3 {
  animation-delay: 0.3s;
}
.float-4 {
  animation-delay: 0.45s;
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle perpetual drift on the title after it lands */
.hero__title {
  animation:
    float-in 0.9s var(--ease-out) 0.15s both,
    drift 6s ease-in-out 1.2s infinite;
}
@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Scroll hint */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: 0.5rem; /* enlarge touch area */
}
.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--clr-gold), transparent);
  animation: scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.55);
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   6. ABOUT
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.about__text p {
  margin-bottom: var(--sp-2);
  max-width: 34rem;
}

.about__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.about__badges li {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--clr-line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--clr-gold-soft);
  background: rgba(212, 175, 55, 0.05);
}

/* Elegant double-framed photo placeholder */
.about__visual {
  display: grid;
}
.about__frame {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto; /* stay centered at all widths */
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      420px 260px at 70% 20%,
      rgba(212, 175, 55, 0.14),
      transparent 60%
    ),
    linear-gradient(160deg, var(--clr-surface-2), var(--clr-bg-deep));
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-card);
}
.about__frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--clr-line);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}
.about__frame-label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   7. MENU
   -------------------------------------------------------------------------- */
.menu__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-6);
}

.menu__tab {
  min-height: 44px;
  padding: 0.55rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--clr-line-soft);
  background: transparent;
  color: var(--clr-sand);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition:
    color 0.2s,
    border-color 0.2s,
    background-color 0.2s;
  touch-action: manipulation;
}
.menu__tab:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold-soft);
}
.menu__tab.is-active {
  background: linear-gradient(135deg, #e2c158, var(--clr-gold));
  border-color: transparent;
  color: #171310;
  font-weight: 600;
}

.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-3);
  align-items: stretch; /* equal card heights per row */
}

/* Dish card */
.dish {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line-soft);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s,
    box-shadow 0.3s;
}
.dish:hover {
  transform: translateY(-6px);
  border-color: var(--clr-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* JS filter hides non-matching cards */
.dish.is-hidden {
  display: none;
}

/* Image placeholder — swap the div content for <img> when photos arrive.
   The inner ::after layer provides the hover zoom. */
.dish__media {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.dish__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      300px 180px at 75% 25%,
      rgba(212, 175, 55, 0.18),
      transparent 60%
    ),
    linear-gradient(150deg, var(--clr-surface-2), #1d1a17);
  transition: transform 0.6s var(--ease-out);
}
.dish:hover .dish__media::after {
  transform: scale(1.07);
} /* hover zoom */

/* Dish photo — fills the whole media box, cropped to fit. */
.dish__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.dish:hover .dish__img {
  transform: scale(1.05);
} /* subtle zoom on hover */

.dish__media-label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.dish__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gold-soft);
  background: rgba(18, 17, 16, 0.75);
  border: 1px solid var(--clr-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.dish__body {
  padding: var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Name … dotted leader … price — keeps every price column aligned.
   The ::before pseudo-element becomes the stretching leader line. */
.dish__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.dish__price {
  order: 2;
  flex-shrink: 0
}

.dish__name {
  font-size: 1.2rem;
  min-width: 0; /* lets the flex row actually shrink it */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dish__name small {
  display: block; /* "(chips or rice)" gets its own quiet line */
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--clr-muted);
  font-weight: 400;
  line-height: 1.4;
}

/* Gold menu number — matches the numbering on the printed menu */
.dish__num {
  display: inline-block;
  min-width: 1.5em;
  margin-right: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--clr-gold);
  vertical-align: 0.3em;
}

/* Price — gold, tabular figures so columns align */
.dish__price {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dish__desc {
  font-size: 0.92rem;
  color: var(--clr-muted);
}

/* Full-width footnote card (e.g. pizza extra toppings) */
.dish--note {
  grid-column: 1 / -1;
  padding: var(--sp-3);
  text-align: center;
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed var(--clr-line);
  box-shadow: none;
}
.dish--note p {
  font-size: 0.9rem;
  color: var(--clr-sand);
}
.dish--note strong {
  color: var(--clr-gold-soft);
}
.dish--note:hover {
  transform: none;
}

/* --------------------------------------------------------------------------
   8. GALLERY — mosaic grid
   -------------------------------------------------------------------------- */
/* Same responsive rhythm as the menu grid: cards flow into as many
   columns as fit, one per row on a phone. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-3);
}

/* Tiles are 3:4 PORTRAIT to match the source photos (all 1200x1600).
   A landscape tile cropped 44% off the top and bottom of every shot,
   which cut the teapot, the juice glass and the food out of frame. */
.gallery__item {
  position: relative;
  aspect-ratio: 3 / 4; /* every tile the same shape */
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--clr-line-soft);
  transition: border-color 0.4s var(--ease-out);
}

/* Photo tile — fills the tile and crops to fit */
.gallery__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      260px 200px at 70% 30%,
      rgba(212, 175, 55, 0.14),
      transparent 60%
    ),
    linear-gradient(160deg, var(--clr-surface-2), var(--clr-bg-deep));
  transition: transform 0.6s var(--ease-out);
}

.gallery__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__ph span {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* Hover: gold border fade + slight zoom + caption slide up */
.gallery__item:hover {
  border-color: var(--clr-gold);
}
.gallery__item:hover .gallery__ph {
  transform: scale(1.06);
}

.gallery__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-2);
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--clr-cream);
  background: linear-gradient(transparent, rgba(10, 9, 8, 0.85));
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}
.gallery__item:hover .gallery__overlay,
.gallery__item:focus-within .gallery__overlay {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   9. TESTIMONIALS
   -------------------------------------------------------------------------- */
.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  max-width: 34rem;
  margin: 0 auto var(--sp-8);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.rating-summary__score {
  font-family: var(--font-head);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--clr-gold);
  line-height: 1;
}

.rating-summary__meta p {
  font-size: 0.9rem;
  color: var(--clr-muted);
}
.rating-summary__meta strong {
  color: var(--clr-sand);
}

/* Golden stars */
.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--clr-gold);
}
.star {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}
.stars--sm .star {
  width: 1.05rem;
  height: 1.05rem;
}

.reviews__grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* ---- Reviews slideshow (auto-playing carousel) ---- */
.reviews__carousel {
  max-width: 46rem;
  margin-inline: auto;
}
.reviews__carousel:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 6px;
  border-radius: var(--radius);
}

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius);
}

.carousel__track {
  display: flex;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

/* One review per slide, always exactly the viewport width */
.review-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.review-slide .review {
  height: 100%;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.carousel__controls[hidden] {
  display: none;
} /* single review — no controls */

.carousel__btn {
  display: grid;
  place-items: center;
  width: 44px; /* full touch target */
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--clr-line);
  color: var(--clr-gold-soft);
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.carousel__btn:hover {
  border-color: var(--clr-gold);
  background: rgba(212, 175, 55, 0.08);
  color: var(--clr-gold);
}
.carousel__btn svg {
  width: 20px;
  height: 20px;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The button is a comfortable touch target; ::after draws the small dot */
.carousel__dot {
  position: relative;
  width: 30px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
.carousel__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--clr-line-soft);
  transition:
    width 0.3s var(--ease-out),
    background-color 0.3s;
}
.carousel__dot:hover::after {
  background: var(--clr-gold-soft);
}
.carousel__dot.is-active::after {
  width: 26px;
  background: var(--clr-gold);
}

/* Review card — styled like an elegant Google review widget */
.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line-soft);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s;
}
.review:hover {
  transform: translateY(-5px);
  border-color: var(--clr-line);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: #171310;
  background: linear-gradient(135deg, #ecd486, var(--clr-gold));
}

.review__name {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
}
.review__badge {
  font-size: 0.75rem;
  color: var(--clr-muted);
  letter-spacing: 0.04em;
}

.review__g {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  opacity: 0.85;
}

.review__text {
  font-size: 0.95rem;
  color: var(--clr-sand);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   10. CONTACT & FORM
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.info-cards {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.info-card {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line-soft);
}
.info-card .icon--gold {
  margin-top: 0.15rem;
} /* optically align with heading */
.info-card h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-gold-soft);
  margin-bottom: 0.25rem;
}
.info-card p {
  font-size: 0.95rem;
}
.info-card a {
  color: var(--clr-cream);
}
.info-card a:hover {
  color: var(--clr-gold);
}

/* Gold-framed map */
.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 10;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.02); /* tone the map to the theme */
}

/* Form */
.contact__form {
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line-soft);
  box-shadow: var(--shadow-card);
}

.contact__form-title {
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}

.field {
  margin-bottom: var(--sp-3);
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--clr-cream);
  margin-bottom: 0.45rem;
}
.field label span {
  color: var(--clr-gold);
} /* required asterisk */

.field input,
.field textarea {
  width: 100%;
  min-height: 48px; /* touch friendly */
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--clr-cream);
  background: var(--clr-bg-deep);
  border: 1px solid var(--clr-line-soft);
  border-radius: 10px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  color-scheme: dark; /* dark native date picker */
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--clr-muted);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* Inline validation states (set by JS on blur/submit) */
.field.has-error input,
.field.has-error textarea {
  border-color: var(--clr-error);
}

.field__error {
  min-height: 1.2em;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--clr-error);
}

.form-status {
  min-height: 1.4em;
  margin-top: var(--sp-2);
  text-align: center;
  font-size: 0.9rem;
}
.form-status.is-success {
  color: var(--clr-success);
}
.form-status.is-error {
  color: var(--clr-error);
}

/* Submitting state on the button */
.btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  padding-block: var(--sp-6);
  background: var(--clr-bg-deep);
  border-top: 1px solid var(--clr-line-soft);
}

.footer__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
}
.footer__links a {
  font-size: 0.9rem;
  color: var(--clr-muted);
  padding: 0.5rem 0.25rem; /* touch padding */
}
.footer__links a:hover {
  color: var(--clr-gold-soft);
}

.footer__note {
  font-size: 0.8rem;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE — tablet & desktop enhancements (mobile-first base above)
   -------------------------------------------------------------------------- */

@media (max-width: 585px) {
  .footer__inner {
    justify-content: center;
  }

  .footer__note {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  /* .gallery__grid intentionally not overridden — auto-fill handles
     the column count at every width, exactly like .menu__grid */
  .about__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }
  .rating-summary {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  /* Desktop nav: inline links, burger hidden */
  .burger {
    display: none;
  }

  .nav__links {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }

  .nav__link {
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
  }

  .nav__cta-wrap {
    margin: 0 0 0 var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION — respect user preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  .carousel__dot {
    gap: 0.5rem;
  }
  .carousel__dot {
    width: 20px;
    height: 30px;
  }

  .carousel__dot.is-active::after {
    width: 20px;
  }
}

@media (max-width: 520px) {
  .carousel__btn {
    display: none;
  }
}