/* (Sun, 06/07/2026) Claude Opus 4.8 */
/* Dining page styles. Load AFTER __sitewide-waterstreet.css and interior-header-draft-01.css */

/* ---- Top section: hours/reservations text + reservation widget ---- */
.dine-top {display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start;}
@media (min-width: 768px) {.dine-top {grid-template-columns: 1fr 220px; gap: 3rem; align-items: center;}}

/* Reservation widget shell (drop the booking embed/iframe inside, 220 x 270).
   The dashed box is just a placeholder until the embed is added. */
.res-widget {width: 220px; height: 270px; max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 13px; text-align: center;}
/* When the row stacks (below md) lift the widget above the text */
@media (max-width: 767px) {#res-widget-cell-wrap {order: -1;}}

/* ---- Square photo gallery ---- */
/* The gallery sits in its own fluid wrapper (not the stepped .container) so the
   squares scale smoothly with the window instead of freezing per tier. The column
   count is pinned to divisors of six (6 / 3 / 2) so the photos always land in
   balanced rows. Squares cap at their native 200px (never enlarged) and the
   breakpoints are set so they never shrink below ~180px before a column drops. */
.dine-gallery-wrap {width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem;}

.sq-gallery {display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 8px; justify-content: center;}
@media (min-width: 610px)  {.sq-gallery {grid-template-columns: repeat(3, minmax(0, 200px));}}
@media (min-width: 1170px) {.sq-gallery {grid-template-columns: repeat(6, minmax(0, 200px));}}
.sq-gallery img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;}

/* Swipe-view hint (only shown when the gallery becomes a scrolling strip) */
.gallery-hint {display: none; margin: 0 0 8px; font-size: .9rem; font-style: italic;}
.gallery-hint .arr {color: #d31212; font-style: normal;}

/* Below 416px two 180px squares no longer fit; hold them at 180px and let the row
   swipe sideways (about two visible at a time). Pure CSS, no JS. */
@media (max-width: 415px) {
.gallery-hint {display: block;}
.sq-gallery {display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #d31212 #e5e5e5;}
.sq-gallery img {flex: 0 0 180px; max-width: 180px; scroll-snap-align: start;}
.sq-gallery::-webkit-scrollbar {height: 8px;}
.sq-gallery::-webkit-scrollbar-track {background: #e5e5e5; border-radius: 4px;}
.sq-gallery::-webkit-scrollbar-thumb {background: #d31212; border-radius: 4px;}
.sq-gallery .iz-thumb {flex: 0 0 180px; max-width: 180px; scroll-snap-align: start;}
}

/* ---- Suppliers list (local section) ---- */
.supplier-list {list-style: none; margin: 0; padding: 0;}
.supplier-list li {padding: 5px 0; line-height: 1.4;}
.supplier-list a {color: inherit;}