/* css/pages/reservations.css
   Page-scoped rules for reservations.html, loaded after css/style.css.
   Everything else on the page comes from the shared components. */

/* Gateway tiles carry an eyebrow above the h2; the tile's own flex gap spaces them. */
.gateway__tile > .eyebrow { margin-bottom: 0; }

/* Without JS, SCM.bookUrl can never be applied, so blocks meant for the live
   booking app stay hidden and the request forms are the route. With JS,
   js/main.js sets [hidden] on these itself. */
html:not(.js) #routes [data-bookurl="set"] { display: none; }

/* The Surf tile groups its heading and its two routes, each spaced like a tile. */
.gateway__head, .gateway__route { display: flex; flex-direction: column; gap: 12px; }
.gateway__head .eyebrow { margin-bottom: 0; }
.gateway__route p { margin-bottom: 0; }

/* Desktop: Chalets and Beach Club side by side at equal height, Surf full width
   below with its heading and two routes in three columns. This keeps the two
   long request forms from leaving a hole under a short Surf tile. */
@media (min-width: 1081px) {
  #routes .gateway { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  #routes #surf { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(24px, 3vw, 44px); align-items: start; }
}

/* Tablet and phone: one column that fills the wrap, like the sections around it. */
@media (max-width: 1080px) {
  #routes .gateway { max-width: none; }
}
@media (max-width: 860px) {
  #enquiry .intro__body, #enquiry .form { max-width: none; }
}

/* Book your stay in the Chalets tile (form[data-stay-search], behaviour in
   js/main.js 4b), shown once SCM.bookUrl is set. Arrival and departure, then
   adults and children, two by two with the button under them; one row of
   four while the tile runs full width (700px to 1080px); one column below
   360px. The button fills the width below 560px. */
#chalets .stay-search { max-width: none; margin-top: 6px; }
#chalets .stay-search__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
#chalets .stay-search .form__field { margin-bottom: 0; }
#chalets .stay-search__fields .btn { grid-column: 1 / -1; justify-self: start; }
#chalets .stay-search .form__state { margin-top: 16px; }
@media (min-width: 700px) and (max-width: 1080px) {
  #chalets .stay-search__fields { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); }
}
@media (max-width: 560px) {
  #chalets .stay-search__fields .btn { justify-self: stretch; }
}
@media (max-width: 359px) {
  #chalets .stay-search__fields { grid-template-columns: minmax(0, 1fr); }
}

/* Request forms inside the tiles: a smaller title and one intro line. */
.gateway__form { max-width: none; }
.gateway__form h3 { font-size: var(--t-h4); margin-bottom: 6px; }
.gateway__form > p.soft { margin-bottom: 18px; }
/* The guest checkbox: the whole line is a 44px touch target. */
.gateway__form .form__check { align-items: center; }
.gateway__form .form__check label { display: inline-flex; align-items: center; min-height: 44px; }
.gateway__form .form__check input { margin-top: 0; }

/* Two lines under the three tiles: WhatsApp is for assistance; privacy and terms. */
.gateway__foot { margin-top: clamp(20px, 3vw, 32px); }
.gateway__foot p { max-width: 64ch; margin-bottom: .4em; }

/* Find us: the address lines, then the map. */
#find-us address { margin-bottom: 1em; }
#find-us .map { margin-top: clamp(20px, 3vw, 32px); }
#find-us .map__line a { display: inline-flex; align-items: center; min-height: 44px; }