/* ── Off-Menu CTA (homepage closer, last section before the footer) ──
   .off-menu-wrap gives this section the same radial-gradient backdrop as
   the Menu page (.menu-page in menu.css), with .off-menu itself sitting
   inset as a cream card on top of it — same relationship as .menu-page/
   .menu-inner there. */
.off-menu-wrap {
  background: radial-gradient(circle at 50% 30%, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: 0;
}

.off-menu {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-2-5);
  background: var(--color-cream);
  border-radius: 1.25rem 1.25rem 0 0;
  /* Cream background — .btn-secondary (utilities.css) needs a dark rest-state
     color here instead of its cream default, or the outline button would be
     invisible against this section's own background. */
  --btn-secondary-color: var(--color-dark);
}

/* Landing page only: .off-menu sits flush against the page/viewport edges
   there (no rounded card look), unlike menu.html/contact.html where it's
   an inset card within .off-menu-wrap. */
.off-menu--landing {
  border-radius: 0;
}

.off-menu__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.off-menu__title {
  margin: 0;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-dark);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
}

.off-menu__title-break {
  display: block;
}

.off-menu__description {
  margin: 0;
  width: 100%;
  font-family: var(--font-secondary);
  font-weight: 600;
  text-align: center;
  color: rgba(39, 33, 25, 0.75);
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.2;
}

.off-menu__buttons {
  display: flex;
  gap: var(--space-2-5);
  width: 100%;
  max-width: 474px;
  margin: 0 auto;
}

/* Button styling lives in the shared .btn/.btn-primary/.btn-secondary
   system (utilities.css) now — see .off-menu__buttons above for this
   row's layout. */

/* Card-deck: an infinite marquee. .off-menu__track holds the 6 cards twice,
   back to back, and slides left by exactly 50% of its own rendered width —
   which is always exactly one full set regardless of card size/gap — so the
   loop point is seamless. The duplicate set is aria-hidden (see markup). */
.off-menu__deck {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.off-menu__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  padding: var(--space-10) 0;
  animation: off-menu-marquee 32s linear infinite;
}

@keyframes off-menu-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .off-menu__track {
    animation: none;
  }
}

.off-menu__card {
  flex-shrink: 0;
  width: 280px;
  height: 380px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
}

.off-menu__card img,
.off-menu__card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.off-menu__card--1 { transform: rotate(-3deg); }
.off-menu__card--2 { transform: translateY(-22px) rotate(-6deg); }
.off-menu__card--3 { transform: translateY(-7px) rotate(2deg); }
.off-menu__card--4 { transform: translateY(-7px) rotate(-2deg); }
.off-menu__card--5 { transform: translateY(25px) rotate(5deg); }
.off-menu__card--6 { transform: translateY(10px) rotate(-10deg); }
.off-menu__card--7 { transform: translateY(-15px) rotate(4deg); }
.off-menu__card--8 { transform: translateY(18px) rotate(-5deg); }
.off-menu__card--9 { transform: translateY(-3px) rotate(1deg); }

@media screen and (min-width: 768px) {
  .off-menu__title-break {
    display: none;
  }

  .off-menu__description {
    max-width: 640px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1024px) {
  .off-menu {
    padding: var(--space-24) var(--space-2-5);
  }
}