/* Chalets page (chalets.html): page-scoped rules only.
   Everything else comes from css/style.css. Loaded after it. */

/* Hero title: keep the brand name on one line, so the title breaks as
   "Chalets at / Surf Club Midigama" and never inside the name. */
.page-chalets .hero__title-name { white-space: nowrap; }

/* Book your stay, at the very top of the page, under the header and above
   the opening photograph (form[data-stay-search], behaviour in js/main.js
   4b). The header already draws the line above it, so the band has no top
   rule and its bottom rule is dropped too: the photograph closes it. A band
   on the cream ground: the title, then arrival, departure, adults, children and the
   button on one row. Below 860px the fields sit two by two with the button
   full width under them; below 360px, one column. The same fields sit in
   the Chalets tile on reservations.html (css/pages/reservations.css). */
.page-chalets .stay-search { padding-block: clamp(20px, 2.4vw, 30px); }
.page-chalets .stay-search__title { font-size: var(--t-h3); margin-bottom: 18px; }
.page-chalets .stay-search .form { max-width: none; }
.page-chalets .stay-search__fields { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) auto; gap: 16px; align-items: end; }
.page-chalets .stay-search .form__field { margin-bottom: 0; }
.page-chalets .stay-search .form__state { margin-top: 16px; }
.page-chalets .stay-search__note { font-size: var(--t-small); color: var(--ink-soft); margin: 14px 0 0; }
@media (max-width: 860px) {
  .page-chalets .stay-search__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-chalets .stay-search__fields .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 359px) {
  .page-chalets .stay-search__fields { grid-template-columns: minmax(0, 1fr); }
}

/* Amenities lists (In every room: twelve items; During your stay: four).
   Four across on desktop, three and then two below (css/style.css). Each
   item carries a top rule and the list closes with one bottom rule, so
   any number of rows reads the same. */
.page-chalets .amenities { border-bottom: 1px solid var(--line); }

/* The five chalets: one colour chip per chalet under the text, in the
   fact sheet's own swatch colours (asked for by the club, 23 Sep 2026).
   Five across on desktop, then a list. */
.page-chalets .swatches { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.page-chalets .swatch { display: flex; flex-direction: column; gap: 6px; }
.page-chalets .swatch__chip { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.page-chalets .swatch__name { font-family: var(--display); font-size: var(--t-small); color: var(--ink); line-height: 1.3; }
.page-chalets .swatch__meta { font-size: var(--t-micro); color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 700px) {
  .page-chalets .swatches { grid-template-columns: 1fr; gap: 10px; }
  .page-chalets .swatch { flex-direction: row; align-items: center; gap: 14px; }
  .page-chalets .swatch__chip { width: 44px; flex: none; }
  .page-chalets .swatch__name { min-width: 8.5em; }
}

/* Room cards: two interior photographs (Deluxe Chalet and Premier Chalet
   cards) and one card with no photograph yet (Club Premier, until the club
   confirms the room; no empty slot). The shared rule stacks them in a 520px
   column below 860px, which turns 4:5 figures into tall blocks. Here they
   stay three across down to 640px, and below that they fill the width at
   3:2; 50% 60% keeps the furniture in the 3:2 frame. */
@media (max-width: 860px) {
  .page-chalets .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 640px) {
  .page-chalets .rooms { grid-template-columns: 1fr; }
  .page-chalets .room__media { aspect-ratio: 3 / 2; }
  .page-chalets .room__media img { object-position: 50% 60%; }
}
/* A card with no photograph: while the cards sit side by side it keeps the
   row height and centres its name, line and button, so it reads as a text
   card rather than a missing picture. Stacked on phones it is a plain card. */
@media (min-width: 641px) {
  .page-chalets .room:not(:has(.room__media)) .room__body { justify-content: center; align-items: center; text-align: center; padding: 28px; }
  .page-chalets .room:not(:has(.room__media)) .room__name { font-size: var(--t-h3); }
  .page-chalets .room:not(:has(.room__media)) .btn { align-self: center; margin-top: 8px; }
  .page-chalets .room:not(:has(.room__media)) .room__more { align-self: center; }
}

/* Room details under the cards (live content only, js/main.js 8g; the
   component is in css/style.css, 16b). From 861px the long description
   sits beside the facts, amenities and button (7 to 5); a block without a
   description gives the facts the full width, up to 760px. Below 861px
   everything is one column. The amenities lists run two across with one
   closing rule under the list, so the page's own amenities rules above
   (a rule under every item) do not apply to them. */
@media (min-width: 861px) {
  .page-chalets .room-detail__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(32px, 5vw, 80px); align-items: start; }
  .page-chalets .room-detail__facts:only-child { grid-column: 1 / -1; max-width: 760px; }
}
@media (max-width: 860px) {
  .page-chalets .room-detail__text { margin-bottom: 24px; }
}
.page-chalets .room-detail .room-detail__amenities li { border-bottom: 0; }

/* Closing booking block: centred text on the lagoon field, no image. */
.page-chalets .book { margin-bottom: 0; }
.page-chalets .book__actions { justify-content: center; margin-top: 24px; }