/* ROOM DETAIL PAGE (separate file: only /rooms/{slug} loads it).
   Shared pieces are NOT repeated here: gallery tiles + viewer, breadcrumbs, .btn-cta and .service-icon all live in site.css. */

/* Gallery on this page: phones show one big photo, the rest open in the viewer */
.gallery-grid--room .gallery-item:not(:first-child) { display: none; }
@media (min-width: 768px) {
  .gallery-grid--room .gallery-item:not(:first-child) { display: block; }
}

/* ---------- Page body ---------- */
.rd { background: #fff; }
.rd-layout {
  display: grid; gap: 1.75rem; max-width: 1320px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
  grid-template-areas: "intro" "book" "details";       /* phones: text, then the form, then amenities */
}
.rd-intro { grid-area: intro; min-width: 0; }
.rd-book { grid-area: book; }
.rd-details { grid-area: details; min-width: 0; }

.rd h1 { margin: 0 0 .35rem; font: 400 clamp(2rem, 7vw, 3.25rem)/1.1 var(--font-head); }
.rd h2 { margin: 0 0 1rem; font: 400 clamp(1.5rem, 5vw, 2rem)/1.2 var(--font-head); }
.rd-meta { margin: 0 0 1rem; font-weight: 500; color: var(--green); }

.rd-facts { display: flex; flex-wrap: wrap; gap: .4rem 0; margin: 0 0 1.25rem; padding: .75rem 0; border-block: 1px solid #e3dccb; }
.rd-facts li { padding: 0 1rem; border-left: 1px solid #d9d2c3; font-weight: 500; }
.rd-facts li:first-child { padding-left: 0; border-left: 0; }

.rd-about p { margin: 0 0 1rem; line-height: 1.7; color: #3d433a; }
.rd-about .rd-lead { font-size: 1.125rem; color: var(--ink); }

/* Amenities: icon + name, like the Services section */
.rd-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem 1.5rem; }
.amenity { display: flex; align-items: center; gap: .85rem; line-height: 1.35; }
.amenity .service-icon { width: 36px; height: 36px; }

/* ---------- Availability form (no rates) ---------- */
.rd-book { padding: 1.25rem; background: var(--cream); border-top: 3px solid var(--gold); box-shadow: 0 8px 24px rgba(29, 33, 28, .08); }
.rd-book h2 { margin-bottom: .35rem; }
.rd-book-sub { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.rd-error { margin: 0 0 .75rem; padding: .5rem .75rem; background: #fbeceb; color: var(--error); border-left: 3px solid var(--error); font-size: .9375rem; }

.rd-form { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rd-full { grid-column: 1 / -1; }
.rd-field { min-width: 0; }
.rd-field label { display: block; margin: 0 0 .25rem; font-size: .875rem; color: var(--muted); }
.rd-field input, .rd-field select {
  width: 100%; height: 46px; padding: 0 .75rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #d9d2c3; border-radius: 0;
}
.rd-field input:focus, .rd-field select:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 2px rgba(77, 94, 71, .25); }

.rd-btn { grid-column: 1 / -1; width: 100%; margin-top: .25rem; }   /* the look comes from .btn-cta */
.rd-alt { margin: .75rem 0 0; text-align: center; font-size: .9375rem; color: var(--muted); }
.rd-alt a { font-weight: 500; color: var(--green); }

@media (min-width: 992px) {
  .rd-layout {
    grid-template-columns: minmax(0, 1fr) 400px; column-gap: 3rem; align-items: start; padding-top: 2.5rem;
    grid-template-areas: "intro book" "details book";
  }
  .rd-book { position: sticky; top: calc(var(--header-h) + 1rem); }   /* form stays visible while reading */
}