/* room page, laid out like a booking site: photo grid, title, your stay, one buy button */
.booking__grid { gap: 1.25rem; }
.gallery { display: grid; gap: 0.5rem; overflow: hidden; border-radius: 1rem; margin-block-end: 0; grid-auto-flow: row; grid-auto-columns: auto; scroll-snap-type: none; }
.gallery__item { position: relative; display: block; padding: 0; border: 0; background: #f1ede5; cursor: pointer; overflow: hidden; min-width: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; aspect-ratio: auto; transition: transform 500ms var(--ease-out); }
.gallery__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.5); color: #fff; font-size: 1.5rem; font-weight: 800; }
/* 1 photo: wide; 2: side by side; 3+: one big, then a row */
.gallery[data-count="1"] .gallery__item { aspect-ratio: 1.8; }
.gallery[data-count="2"] { grid-template-columns: 1fr 1fr; }
.gallery[data-count="2"] .gallery__item { aspect-ratio: 1; }
.gallery[data-count="3"], .gallery[data-count="4"], .gallery[data-count="5"] { grid-template-columns: repeat(6, 1fr); }
.gallery[data-count="3"] .gallery__item:nth-child(1), .gallery[data-count="4"] .gallery__item:nth-child(1), .gallery[data-count="5"] .gallery__item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 1.7; }
.gallery[data-count="3"] .gallery__item:nth-child(n+2) { grid-column: span 3; aspect-ratio: 1.3; }
.gallery[data-count="4"] .gallery__item:nth-child(n+2) { grid-column: span 2; aspect-ratio: 1; }
.gallery[data-count="5"] .gallery__item:nth-child(2), .gallery[data-count="5"] .gallery__item:nth-child(3) { grid-column: span 3; aspect-ratio: 1.6; }
.gallery[data-count="5"] .gallery__item:nth-child(n+4) { grid-column: span 2; aspect-ratio: 1; }
@media (min-width: 48rem) {
  .gallery[data-count="5"] { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
  .gallery[data-count="5"] .gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .gallery[data-count="5"] .gallery__item:nth-child(n+2) { grid-column: auto; aspect-ratio: 1.45; }
}
@media (hover: hover) { .gallery__item:hover img { transform: scale(1.04); } }
.photos { display: grid; gap: 0.75rem; align-content: start; }
.photos img { width: 100%; border-radius: 0.75rem; display: block; }

.booking__title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1.5rem; row-gap: 0.25rem; margin-block-start: 1.25rem; }
.booking__title .page-title { margin-block: 0; }
.booking__title .price--lg { margin: 0; justify-self: end; text-align: end; flex-wrap: nowrap; align-items: baseline; padding-block-end: 0.875rem; }
.booking__title .price--lg .price__night { white-space: nowrap; }
/* phones: a smaller price so it still sits beside the name; it only drops below on the very narrowest screens */
@media (max-width: 47.999rem) { .booking__title .page-title { font-size: clamp(1.375rem, 5.2vw, 1.75rem); } .booking__title .price--lg { padding-block-end: 0.75rem; row-gap: 0; justify-content: flex-end; } .booking__title .price--lg strong, .booking__title .price--lg .money { font-size: 1.1875rem; } .booking__title .price--lg .price__old { font-size: 0.8125rem; } .booking__title .price--lg .price__night { font-size: 0.75rem; } }
@media (max-width: 21.25rem) { .booking__title { grid-template-columns: 1fr; } .booking__title .price--lg { justify-self: start; padding-block-end: 0; } }
.booking__hotel { margin: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 800; color: var(--brand); }
.booking__hotel a { text-decoration: none; }
.booking__hotel a:hover { text-decoration: underline; }

/* your stay */
.stay-dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgb(0 0 0 / 0.14); border-radius: 0.875rem; overflow: hidden; }
.stay-dates__cell { display: grid; gap: 0.125rem; align-content: center; min-height: 64px; padding: 0.625rem 1rem; text-align: start; background: #fff; border: 0; font: inherit; color: inherit; cursor: pointer; }
.stay-dates__cell + .stay-dates__cell { border-inline-start: 1px solid rgb(0 0 0 / 0.14); }
.stay-dates__cell:hover { background: #faf7f0; }
.stay-dates__label { font-size: 0.8125rem; font-weight: 700; color: rgb(0 0 0 / 0.55); }
.stay-dates__value { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.stay-guests { display: grid; gap: 0.125rem; }
.stay-guests span { font-size: 0.8125rem; font-weight: 700; color: rgb(0 0 0 / 0.55); }
.stay-guests strong { color: var(--brand); font-weight: 800; }
.stay-nights { margin: 0; }

/* the one buy button: fixed to the bottom on phones, inside the panel from 1024px */
.buy { display: grid; gap: 0.5rem; }
.buy__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.0625rem; }
.buy__total strong, .buy__total .money { font-size: 1.375rem; font-weight: 800; }
.buy__note { text-align: center; font-size: 0.875rem; }
@media (max-width: 63.999rem) {
  .booking { padding-block-end: 7rem; }
  .buy { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 28; padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom)); background: #fff; border-block-start: 1px solid rgb(0 0 0 / 0.1); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08); gap: 0.25rem; }
  .buy__total { font-size: 0.9375rem; }
  .buy__total strong, .buy__total .money { font-size: 1.125rem; }
  .buy__go { min-height: 48px; }
  .buy__note { display: none; }
  .wa-float { inset-block-end: 7.5rem; }
}

/* phone tap targets: 44px minimum for links and the hotel picker */
.crumbs a { min-height: 44px; }
.results .room h3 a, .stay__link { display: inline-flex; align-items: center; min-height: 44px; }
.search__select { min-height: 32px; }
.hotel__from, .booking__hotel a { display: inline-flex; align-items: center; min-height: 44px; }
/* the hotel picker row in the search bar is a full 44px+ tap area */
.search__field { cursor: pointer; }
.search__select { position: relative; min-height: 44px; margin-block: -0.5rem; padding-block: 0.5rem; }