/* ============================================================
   SNS Valley View — Dining
   No design-handoff precedent for this section (see restaurant.templ's
   doc comment) — box/spacing borrow Rooms' section-padding pattern
   (padding + border-top, .overline/.rule-short from base.css), and the
   marquee is a genuinely new keyframe: nothing else in this codebase
   does a translateX scroll (see docs/DECISIONS.md).
   ============================================================ */

.restaurant {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.restaurant__head {
  padding: 0 var(--pad-x);
  margin-bottom: 48px;
}
.restaurant__head .overline { margin-bottom: 12px; }

.restaurant__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-cream);
}

/* Edge fade, not a hard clip: a linear mask over the marquee's outer box
   so tiles dissolve in/out at the section's edges instead of cutting off
   mid-photo. A mask, not a new color or shadow, so it doesn't touch any
   locked token. */
.restaurant__marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--pad-x),
    #000 calc(100% - var(--pad-x)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--pad-x),
    #000 calc(100% - var(--pad-x)),
    transparent 100%
  );
}

.restaurant__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: restaurantMarquee 70s linear infinite;
}
.restaurant__track:hover,
.restaurant__track:focus-within {
  animation-play-state: paused;
}

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

.restaurant__tile {
  flex: 0 0 300px;
  margin: 0;
}
.restaurant__tile .responsive-image {
  aspect-ratio: 4 / 5;
}
.restaurant__tile .responsive-image__real,
.restaurant__tile .responsive-image__blur {
  height: 100%;
}

/* ============================================================
   Responsive — same two breakpoints every other section uses.
   restaurant.templ's restaurantTileSizes must stay in sync with the
   widths set here.
   ============================================================ */
@media (max-width: 1024px) {
  .restaurant__tile { flex-basis: 240px; }
}

@media (max-width: 680px) {
  .restaurant__head { padding: 0 24px; }
  .restaurant__title { font-size: 32px; }
  .restaurant__tile { flex-basis: 200px; }
  .restaurant__track { gap: 14px; }
}

/* A continuously-moving strip of images is exactly the class of motion
   prefers-reduced-motion exists to stop — same treatment as the hero pan,
   the headline dissolve and the gallery crossfade. Paused, not removed:
   the tiles stay visible and readable, just still. */
@media (prefers-reduced-motion: reduce) {
  .restaurant__track { animation: none; }
}