/* ===================================================================
   Page-specific: Single room
=================================================================== */

/* HERO with room name */
.room-hero{
  position:relative;
  background:var(--navy);
  color:var(--cream);
  min-height: 86vh;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column;
}
.room-hero-img{
  position:absolute; inset:0;
  background-image:url(/wp-content/uploads/2023/09/7.-Garden-bedroom.jpg);
  background-size:cover;
  background-position:center 55%;
  z-index:0;
}
.room-hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,26,38,.55) 0%, rgba(20,26,38,.18) 30%, rgba(20,26,38,.55) 80%, rgba(20,26,38,.85) 100%);
  z-index:1;
}
.room-hero-inner{
  position:relative; z-index:2;
  flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(140px, 18vh, 200px) clamp(32px,5vw,56px) clamp(48px, 6vh, 88px);
  max-width: var(--max-wide);
  margin: 0 auto;
  width:100%;
}
.crumb{
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color:rgba(245,240,232,.78);
  display:flex; gap:10px; align-items:center;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.crumb a, .crumb > span{ white-space:nowrap }
.crumb a{ color:rgba(245,240,232,.78); border-bottom:1px solid transparent; padding-bottom:2px }
.crumb a:hover{ color:var(--cream); border-bottom-color:rgba(245,240,232,.6) }
.crumb .sep{ color:rgba(245,240,232,.4) }

.room-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(56px, 7.4vw, 120px);
  line-height:.98;
  letter-spacing:-0.018em;
  color:var(--cream);
  margin:0;
  max-width:14ch;
  text-wrap:balance;
}
.room-name em{ font-style:italic; font-weight:400 }

.room-meta-row{
  margin-top: clamp(28px, 4vh, 44px);
  display:flex; flex-wrap:wrap; gap:0;
  border-top: 1px solid rgba(245,240,232,.25);
  padding-top: 24px;
}
.room-meta-row .item{
  flex: 1 1 180px;
  padding: 0 24px 0 0;
}
.room-meta-row .item + .item{
  border-left: 1px solid rgba(245,240,232,.18);
  padding-left: 24px;
}
.room-meta-row .lab{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color: rgba(245,240,232,.65);
  display:block; margin-bottom:6px;
}
.room-meta-row .val{
  font-family:var(--serif);
  font-style:italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--cream);
  line-height:1.25;
}

/* Gallery rules live in shared.css now — the gh/room-gallery block is
   used on any Lough page (e.g. dining), not just single rooms. */

/* MAIN: description + sticky booking sidebar */
.detail{ background:var(--cream); padding: clamp(80px, 10vh, 120px) 32px }
.detail-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items:start;
}
.desc-col{ display:flex; flex-direction:column; gap:32px }
.desc-col h2{ margin-top:4px }
.desc-col p.lede{ max-width:none }
.desc-col p.body-copy{ max-width:none }
.desc-pull{
  font-family:var(--serif) !important;
  font-style:italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height:1.35;
  color: var(--navy);
  border-left: 1px solid var(--gold);
  padding: 8px 0 8px 28px;
  margin: 12px 0;
  max-width:42ch;
}

/* Sticky booking card */
.book-card{
  position:sticky;
  top: 110px;
  background:var(--navy);
  color:var(--cream);
  padding: 36px 32px;
  display:flex; flex-direction:column; gap: 22px;
}
.book-card .rate-lab{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color: rgba(245,240,232,.6);
}
.book-card .rate{
  font-family:var(--serif);
  font-size: 40px; line-height:1; color:var(--cream); font-weight:400;
}
.book-card .rate small{
  font-family:var(--sans); font-size:13px; font-weight:400; letter-spacing:.02em;
  color: rgba(245,240,232,.6); margin-left:6px;
}
.book-card .rate-note{
  font-family:var(--serif); font-style:italic; font-size:15px;
  color: rgba(245,240,232,.72); line-height:1.45;
}
.book-card hr{
  border:0; border-top:1px solid rgba(245,240,232,.18); margin: 4px 0;
}
.book-fields{ display:flex; flex-direction:column; gap:14px }
.book-field{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245,240,232,.14);
  cursor:pointer;
}
.book-field .lab{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color: rgba(245,240,232,.6);
}
.book-field .val{
  font-family:var(--serif); font-style:italic;
  font-size: 18px; color: var(--cream);
  background: transparent;
  border: 0;
  padding: 0;
  text-align: right;
  cursor: pointer;
}
.book-field input.val{ font-family: var(--sans); font-style: normal; font-size: 14px; color-scheme: dark; }
.book-field select.val{ appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.book-field .val:focus{ outline: 2px solid var(--cream); outline-offset: 4px; }
.book-cta{
  display:flex; align-items:center; justify-content:center;
  height:54px;
  background:var(--cream); color:var(--navy-deep);
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.36em; text-transform:uppercase;
  border:0; cursor:pointer;
  text-decoration: none;
  transition:background .2s;
}
.book-cta:hover{ background:#fff }
.book-foot{
  text-align:center;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.04em; line-height:1.6;
  color: rgba(245,240,232,.6);
}
.book-foot a{ color: var(--cream); border-bottom:1px solid rgba(245,240,232,.4); padding-bottom:1px }
.book-foot a:hover{ color: var(--gold); border-color: var(--gold) }

/* AMENITIES */
.amen{ background:var(--cream-warm) }
.amen-head{
  display:grid; grid-template-columns: 1fr 1fr; gap:64px; margin-bottom:56px; align-items:end;
}
.amen-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.amen-item{
  background: var(--cream);
  padding: 32px 28px;
  display:flex; flex-direction:column; gap:10px;
}
.amen-item .ico{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--gold);
}
.amen-item .ico svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.25 }
.amen-item h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:20px;
  margin:6px 0 0;
  color:var(--navy);
}
.amen-item p{
  margin:0;
  font-size:14px; line-height:1.55; color:var(--stone-dark);
}

/* OTHER ROOMS */
.other{ background:var(--cream) }
.other-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.other-card{
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  background:var(--cream-warm);
  border:1px solid var(--rule);
  transition:transform .35s ease, box-shadow .35s ease;
}
.other-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(20,26,38,.25) }
.other-card .img{
  aspect-ratio: 4/3.2;
  background:var(--stone) center/cover no-repeat;
}
.other-card .body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px }
.other-card h3{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:26px; color:var(--navy);
}
.other-card .sub{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--stone-dark);
}
.other-card .arr{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color: var(--navy); border-bottom:1px solid var(--navy);
  align-self:flex-start; padding-bottom:4px; margin-top:6px;
}

/* Responsive (gallery-grid responsive rules live in shared.css) */
@media (max-width: 980px){
  .detail-inner{ grid-template-columns: 1fr; gap:48px }
  .book-card{ position:static }
  .amen-head{ grid-template-columns:1fr; gap:32px }
  .amen-grid{ grid-template-columns: 1fr 1fr }
  .other-grid{ grid-template-columns: 1fr }
  .room-meta-row .item{ flex: 1 1 50%; padding: 16px 0 }
  .room-meta-row .item + .item{ border-left:0; padding-left:0 }
}
@media (max-width: 600px){
  .amen-grid{ grid-template-columns: 1fr }
  .room-meta-row .item{ flex: 1 1 100% }
}