/* Final responsive and performance layer for the hero covers. */
.promo-hero {
  height: clamp(620px, calc(100svh - 92px), 900px);
  min-height: 620px;
}

.promo-hero .promo-track {
  backface-visibility: hidden;
}

.promo-hero .promo-slide:not(.active) * {
  animation-play-state: paused !important;
}

.storefront-slide > img {
  filter: none;
}

.promo-hero .catering-slide,
.promo-hero .rewards-slide,
.promo-hero .careers-slide {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.promo-hero .catering-slide[data-href] { cursor: pointer; }
.promo-hero .catering-slide[data-href]:focus-visible { outline: 4px solid #f2c55c; outline-offset: -4px; }

.promo-hero .catering-slide > img,
.promo-hero .rewards-slide > img,
.promo-hero .careers-slide > img {
  background: #f4efe3;
  height: 100% !important;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  position: static !important;
  width: 100%;
}

.promo-hero .poster-action {
  align-items: center;
  border: 0;
  border-radius: 0;
  bottom: auto;
  box-shadow: 0 -10px 30px rgba(3, 51, 44, .12);
  display: flex;
  gap: 18px;
  justify-content: center;
  left: auto;
  max-width: none;
  min-height: 82px;
  padding: 12px 72px 28px;
  position: static;
  right: auto;
  transform: none;
  width: 100%;
}

.promo-hero .poster-action span {
  max-width: 560px;
}

.promo-hero .catering-action .button {
  background: #f2c55c;
  border-color: #f2c55c;
  color: #063d35;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.promo-hero .catering-action .button:hover {
  background: #ffd978;
  border-color: #ffd978;
}

.promo-hero .hero-join-top {
  background: #f2c55c;
  color: #063d35;
  right: clamp(58px, 4vw, 78px);
  top: 18px;
}

.promo-hero .promo-arrow { top: 44%; }
.promo-hero .promo-dots { bottom: 9px; }

.menu-item-dialog {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Native browser panning must always win over decorative horizontal areas. */
.menu-filters,
.menu-filters button,
.promo-slider {
  touch-action: auto !important;
}

/* Keep the 3D depth and hover styling without continuous page-wide animation. */
.hero-food-card,
.menu-food-orb,
.delivery-rider-wrap,
.reel-phone-trigger .phone-shell,
.reels-social-art img {
  animation: none !important;
}

@media (max-width: 900px) {
  .promo-hero {
    height: clamp(680px, calc(100svh - 92px), 800px);
    min-height: 680px;
  }

  .promo-hero .catering-slide > img,
  .promo-hero .rewards-slide > img,
  .promo-hero .careers-slide > img {
    height: 100% !important;
  }

  .promo-hero .poster-action {
    align-items: center;
    display: flex;
    gap: 14px;
    padding: 14px 62px 30px;
    width: 100%;
  }

  .promo-hero .poster-action .button {
    flex: 0 0 auto;
  }

  .promo-hero .hero-join-top {
    right: 58px;
    top: 12px;
  }

  .menu-food-orb,
  .delivery-rider-wrap,
  .reel-phone-trigger .phone-shell,
  .reels-social-art img {
    animation: none !important;
  }
}

@media (hover: none) {
  .menu-card:hover,
  .menu-filters button:hover,
  .menu-more:hover,
  .menu-dialog-order:hover,
  .delivery-button:hover,
  .rewards-band-button:hover {
    transform: none;
  }
}

@media (max-width: 600px) {
  .promo-hero {
    height: clamp(640px, calc(100svh - 94px), 720px);
    min-height: 640px;
  }

  .promo-hero .poster-action {
    align-items: stretch;
    display: grid;
    gap: 9px;
    min-height: 132px;
    padding: 12px 52px 28px;
    text-align: center;
  }

  .promo-hero .poster-action strong { font-size: 1rem; }
  .promo-hero .poster-action small { font-size: .68rem; }
  .promo-hero .poster-action .button { padding: 10px 12px; }
  .promo-hero .hero-join-top { font-size: .74rem; padding: 9px 12px; right: 52px; top: 8px; }
  .promo-hero .promo-arrow { top: 39%; }
}

@media (max-width: 380px) {
  .promo-hero { height: 650px; min-height: 650px; }
  .promo-hero .poster-action { padding-left: 46px; padding-right: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-hero .promo-track,
  .promo-hero .promo-slide,
  .promo-hero .promo-slide * {
    animation: none !important;
    transition: none !important;
  }
}

/* Careers carousel callout stays dark, legible and aligned. */
.promo-hero .careers-action{background:#063d35;color:#fff;box-shadow:0 -10px 30px rgba(3,51,44,.12)}
.promo-hero .careers-action strong{color:#fff}
.promo-hero .careers-action small{color:#dcebe7}
.promo-hero .careers-action .careers-button{background:#f2c55c;border-color:#f2c55c;color:#063d35}