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

/* ---- Top section: hours/reservations text + reservation widget ---- */
.stay-top {display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start;}
@media (min-width: 768px) {.stay-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-btn-wrap {display: flex; align-items: center; justify-content: center;}
/* When the row stacks (below md) lift the widget above the text */
@media (max-width: 767px) {#res-btn-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. */
.stay-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;}
}

.cta-stay {
padding: 1rem 2.5rem;
font-weight: bold;
font-size: 1.125rem;
line-height: 1.125;
text-transform: uppercase;
letter-spacing: 0.05em;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
min-width: 220px;
border-style: none;
text-decoration: none !important;
text-align: center;
cursor: pointer;
display: inline-block;
}


/* ============================================================
   ROOM LISTINGS
   Three blocks per room: .room-head (name + bed/bath),
   .room-photos (main photo + additional photos), .room-body
   (rates + view-details panel).
   - Desktop (>=1024): two columns. Photos fill the left; head
     then body sit at the top of the right column (an empty 1fr
     row absorbs the leftover photo height so they stay grouped).
   - Stacked (<1024): single column in source order — head, then
     photos, then body — so the room name and bed/bath read before
     the images at every stacked size.
   The main photo and every thumbnail are .iz-thumb buttons, so
   they open the existing image-zoom lightbox (no extra JS).
   ============================================================ */

.room {display: flex; flex-direction: column; gap: 1.5rem; padding: 2.5rem 0;}
.room + .room {border-top: 1px solid #999999;}

/* Desktop: photos left (full height), head then body at the top right. */
@media (min-width: 1024px) {
.room {display: grid; grid-template-columns: 580px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "media head" "media body" "media end"; gap: 0.75rem 2.5rem; align-items: start;}
.room-head {grid-area: head; text-align: left;}
.room-photos {grid-area: media;}
.room-body {grid-area: body;}
}

/* Left photo block: capped at 580, centered when stacked */
.room-photos {max-width: 580px; margin: 0 auto;}

/* Main photo: 4:3, fills the 580 block, click to enlarge */
.room-hero {display: block; width: 100%; margin: 0;}
.room-hero img {width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;}

/* Additional photos: centered, wrapping row 15px below the main photo */
.room-thumbs {display: flex; flex-wrap: wrap; justify-content: center; gap: 7.5px; margin: 15px 0 0;}
.room-thumbs .iz-thumb {margin: 0;}
.room-thumbs .iz-thumb img {width: 120px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;}

/* Exactly four thumbnails (class added by the PHP when count == 4): one row,
   each an equal share of the photo-block width so they scale to fit and line
   up with the main photo's edges. */
.room-thumbs-4 {display: grid; grid-template-columns: repeat(4, 1fr);}
.room-thumbs-4 .iz-thumb img {width: 100%;}

.room-zoom-hint { margin: 12px 0 8px; font-size: 0.875rem; font-style: italic; color: #4b5563; text-align: center; }

/* Name + bed/bath group (centered when stacked; left-aligned at desktop) */
.room-head {display: flex; flex-direction: column; gap: 0.75rem; text-align: center;}
.room-head > h2 {margin: 0; line-height: 1.1;}
.room-head > p {margin: 0;}

/* Rates + details group */
.room-body {display: flex; flex-direction: column; gap: 0.75rem;}
.room-body > * {margin: 0;}

/* Rates: plain text, no heading */
.room-rates {margin: 0; line-height: 1.5;}

/* Expanding "view details" panel (native <details>) */
.room-details {border: 1px solid #c9b79c; border-radius: 3px; overflow: hidden;}
.room-details > summary {list-style: none; cursor: pointer; padding: 9px 14px; background: #f3efe8; color: #d31212; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.125rem;}
.room-details > summary::-webkit-details-marker {display: none;}
.room-details > summary:focus-visible {outline: 2px solid #d31212; outline-offset: 2px;}
.room-details .rd-ico {display: inline-block; width: 1em; color: #d31212;}
.room-details .rd-ico::before {content: "+"; font-size: 1.25rem;}
.room-details[open] .rd-ico::before {content: "\2212";}
.room-details-body {padding: 2px 14px 16px; line-height: 1.6;}
.room-details-body p {margin: 0 0 0.75rem;}
.room-detail-links {margin: 0; margin-top: -.75em;}
.room-detail-links a {color: #d31212; text-decoration: underline;}
.room-detail-links .sep {color: #9a9a9a; padding: 0 10px;}