/* Layout fix: the exported page is missing the Squarespace runtime scripts
   that normally size and cycle the image galleries. Without them, the
   slide images render at their raw pixel size (e.g. 2500px wide), which
   breaks the page width and stacks every gallery photo one after another
   instead of showing a single slide. These rules restore the intended,
   contained layout. */

/* --- Home page photo slideshows (top food-photo gallery + bottom bar-photo
   gallery). These already sit in a correctly-sized 16:9 box; only the
   slide itself was missing a definite width, which let the raw image
   size leak out and push the whole page wider than the viewport. */
.index-gallery .gallery-wrapper {
  overflow: hidden;
}

.index-gallery .gallery-wrapper .slide-wrapper {
  display: none;
  float: none;
  width: 100%;
  height: 100%;
}

.index-gallery .gallery-wrapper .slide-wrapper.is-active {
  display: block;
}

.index-gallery .gallery-wrapper .slide-wrapper .slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.index-gallery .gallery-wrapper .slide-wrapper .slide img.load-false {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.index-gallery .circles .circle.is-active {
  background: #fff;
}

/* --- Menu / Party Room gallery blocks. These were already width-safe, but
   every slide rendered at once (display:block), stacking all of the
   photos vertically instead of showing one at a time. Show only the
   active slide; layout-fix.js toggles which one that is. */
.sqs-gallery-container.sqs-gallery-block-slideshow .sqs-gallery .slide.content-fill {
  display: none;
}

.sqs-gallery-container.sqs-gallery-block-slideshow .sqs-gallery .slide.content-fill.is-active {
  display: block;
}

.sqs-gallery-container.sqs-gallery-block-slideshow .sqs-gallery .slide.content-fill img.thumb-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* The thumbnail strip images carry an inline style="display:block" and
   have no layout rule pulling them into a row, so they stack one under
   the next instead of sitting side by side. Force a horizontal row. */
.sqs-gallery-thumbnails {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sqs-gallery-thumbnails img {
  display: inline-block !important;
  width: 61px !important;
  height: 79px !important;
  flex: 0 0 auto;
  object-fit: cover;
  cursor: pointer;
}

.sqs-gallery-thumbnails img.is-active {
  outline: 2px solid #fff;
  outline-offset: -2px;
}