/* Quicktabs: tabbed quick-actions box (Get in Touch / Get Directions /
   GPS Directions / Book Now). See assets/gallery.js for the tab-switching
   behaviour and the GPS tab's extra "open in new window" side effect. */
.quicktabs{border:1px solid rgba(0,0,0,.1);background:#fff;}
.quicktabs__nav{display:flex;flex-wrap:wrap;}
.quicktabs__tab{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 8px;
  font-size:12.5px;
  font-weight:600;
  background:#f4f4f4;
  color:#1c211d;
  border:none;
  border-right:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:background-color .15s ease,color .15s ease;
}
.quicktabs__tab:last-child{border-right:none;}
.quicktabs__tab:hover{background:#e8eee7;}
.quicktabs__tab.is-active{background:#69995d;color:#fff;}
.quicktabs__tab--link{background:#1c211d;color:#fff;}
.quicktabs__tab--link:hover{background:#26362b;}
.quicktabs__panels{padding:20px;}
.quicktabs__panel{display:none;}
.quicktabs__panel.is-active{display:block;}
.quicktabs__map{width:100%;height:260px;border:0;display:block;}
.quicktabs__cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#69995d;color:#fff;padding:10px 20px;font-weight:600;font-size:14px;text-decoration:none;transition:background-color .15s ease;}
.quicktabs__cta:hover{background:#255b26;}

/* Accordion of "from [city]" written directions inside the Get Directions
   quicktab panel. */
.qt-accordion__item{border-top:1px solid rgba(0,0,0,.08);}
.qt-accordion__item:first-child{border-top:none;}
.qt-accordion__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 2px;background:none;border:none;text-align:left;font-weight:600;font-size:14px;color:#1c211d;cursor:pointer;}
.qt-accordion__trigger svg{flex-shrink:0;transition:transform .15s ease;color:#69995d;}
.qt-accordion__trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.qt-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;font-size:14px;line-height:1.5;color:rgba(0,0,0,.75);}
.qt-accordion__panel.is-open{grid-template-rows:1fr;}
.qt-accordion__panel-inner{overflow:hidden;padding:0 2px;transition:padding-bottom .25s ease;}
.qt-accordion__panel.is-open .qt-accordion__panel-inner{padding-bottom:14px;}

@media (max-width:480px){
  .quicktabs__tab{flex:1 1 40%;border-bottom:1px solid rgba(0,0,0,.08);}
}

/* Help-icon tooltips on form field labels (question mark next to the
   field name). Shared across the homepage booking form and every room
   page's "Book a Room" sidebar form. */
.help-icon{position:relative;display:inline-flex;align-items:center;cursor:help;}
.help-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#333;color:#fff;padding:10px 12px;border-radius:6px;font-size:12.5px;font-weight:400;
  line-height:1.45;text-align:left;width:220px;max-width:70vw;box-shadow:0 6px 18px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none;z-index:50;}
.help-tooltip strong{display:block;margin-bottom:4px;font-weight:700;}
.help-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#333;}
.help-icon.show .help-tooltip,.help-icon:hover .help-tooltip,.help-icon:focus .help-tooltip{opacity:1;visibility:visible;}

/* About-section layout: 30% text column / 70% masonry gallery column on
   large screens (matches Tailwind's lg breakpoint — the site's Tailwind
   build is pre-compiled with no build step, so arbitrary grid-cols-[...]
   utilities that weren't in the original build don't exist at runtime;
   this rule is written by hand instead). */
@media (min-width:1024px){
  .about-layout-grid{grid-template-columns:3fr 7fr;}
}

/* Full-bleed map on the homepage's Find Us section — breaks out of the
   max-w-[1240px] content column to span the full viewport width. */
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

/* `items-end` was never used in the original site build, so — same as
   grid-cols-[...] above — it's missing from the pre-compiled Tailwind
   bundle. Needed to right-align the room-card icon column. */
.items-end{align-items:flex-end;}

/* Bare `grid-cols-3` (unlike `lg:grid-cols-3`) isn't in the pre-compiled
   Tailwind bundle either — needed for the Entire Lodge card's amenity grid. */
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* Trustindex reviews section: the widget's own injected markup collapses
   its containing flex item down to a shrink-to-fit width instead of
   stretching to the full 1240px content column — force it explicitly. */
.trustindex-section,
.trustindex-section > div{width:100%;}
.trustindex-section .ti-widget{width:100% !important;}

/* Room gallery: thumbnail carousel + lightbox with filmstrip and captions. */

.js-gallery-thumbs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.js-gallery-thumbs::-webkit-scrollbar{display:none;}
.js-gallery-thumb{scroll-snap-align:start;cursor:pointer;}

.js-gallery-hero{cursor:pointer;position:relative;}

.js-gallery{min-width:0;max-width:100%;}
.gallery-carousel{position:relative;width:100%;max-width:100%;min-width:0;}
.gallery-carousel .js-gallery-thumbs{width:100%;max-width:100%;min-width:0;padding-bottom:0;}

/* Show exactly 3 thumbnails per row (2 on small screens), like the reference
   room-page carousel — items no longer free-scroll to arbitrary widths. */
.gallery-carousel .js-gallery-thumb{flex:0 0 calc((100% - 24px) / 3);width:auto;height:100px;}
@media (max-width:480px){
  .gallery-carousel .js-gallery-thumbs{gap:8px;}
  .gallery-carousel .js-gallery-thumb{flex-basis:calc((100% - 8px) / 2);}
}

/* The room-detail layout's article column uses a bare `1fr` track (Tailwind's
   arbitrary-value grid-cols-[1fr_360px], unlike its numbered grid-cols-N utilities,
   does not get wrapped in minmax(0,1fr)) so its implicit minimum is content-based,
   not zero. A wide gallery's min-content width can force that track past its fair
   share and push the 360px sidebar out. Reassert the zero floor. */
@media (width>=64rem){
  .lg\:grid-cols-\[1fr_360px\]{grid-template-columns:minmax(0,1fr) 360px;}
}

.gallery-carousel__arrow{
  position:absolute;
  top:0;
  bottom:0;
  height:100%;
  width:34px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  border:none;
  background:#69995d;
  color:#fff;
  box-shadow:none;
  cursor:pointer;
  z-index:2;
  transition:opacity .15s ease,background-color .15s ease;
}
.gallery-carousel__arrow--prev{left:0;}
.gallery-carousel__arrow--next{right:0;}
.gallery-carousel__arrow:hover{background:#255b26;}
.gallery-carousel__arrow:disabled{opacity:0;cursor:default;pointer-events:none;}
.gallery-carousel__arrow svg{width:22px;height:22px;}

@media (max-width:480px){
  .gallery-carousel__arrow{width:28px;}
  .gallery-carousel__arrow svg{width:18px;height:18px;}
}

/* Masonry photo grid (homepage-style) — true CSS grid masonry: gallery.js
   explicitly places every tile itself (shortest-column-first, then stretches
   each column's last tile so the grid ends flush top AND bottom) rather than
   relying on CSS's grid-auto-flow:dense, which packs in DOM order and leaves
   ragged column bottoms. Wide tiles (.photo-masonry__item--wide) span two
   columns; gallery.js reads that class to decide placement, then sets the
   actual grid-column/grid-row inline. */
.photo-masonry{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:4px;
  gap:12px;
}
@media (max-width:480px){
  /* 5 fixed columns on a tiny screen means gaps eat into image width
     proportionally more than on desktop — tighten them up here. gallery.js
     re-reads the gap fresh on every layout pass, so this needs no JS
     changes to take effect correctly. */
  .photo-masonry{gap:4px;}
}
/* Small two-photo galleries (e.g. a pair from an old montage image) — the
   default 5 columns would leave 3 of them permanently empty since nothing
   ever occupies them (layoutMasonry only fills gaps in columns a tile has
   already touched), so this shrinks the grid to match the tile count. */
.photo-masonry--duo{grid-template-columns:repeat(2,1fr);}
.photo-masonry--trio{grid-template-columns:repeat(3,1fr);}
.photo-masonry__item{
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:none;
  background:none;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  line-height:0;
}
.photo-masonry__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo-masonry__item:hover img{transform:scale(1.27);transition:transform .25s ease;}
.photo-masonry__item:focus-visible{outline:2px solid #69995d;outline-offset:2px;}

/* Homepage room-card thumbnails: same hover zoom as the masonry gallery. */
.room-card-img-link{position:relative;display:block;overflow:hidden;cursor:pointer;}

/* Ultra-short room-card tagline under the title. */
.room-card-tagline{font-size:13px;}

/* "Sleeps N" badge overlaid on the bottom-right of a room card's photo. */
.room-card-sleeps-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  background:rgba(0,0,0,.55);
  padding:5px 10px;
  border-radius:999px;
}
.room-card-sleeps-badge .room-icon-label{color:#fff;font-weight:700;}
.room-card-sleeps-badge svg{color:#fff;}

/* Entire Lodge card: stack of badges (Rooms, Bathrooms, Sleeps) overlaid in
   the same bottom-right corner, instead of a single sleeps badge. */
.room-card-photo-badges{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.room-card-photo-badges .room-icon-wrap{
  background:rgba(0,0,0,.55);
  padding:5px 10px;
  border-radius:999px;
}
.room-card-photo-badges .room-icon-label{color:#fff;font-weight:700;}
.room-card-photo-badges svg{color:#fff;}

.room-card-img-link:hover .room-card-img{transform:scale(1.27);transition:transform .25s ease;}

/* Entire Lodge card: secondary (lower-priority) amenity column is hidden at
   768px and below, leaving only the 6 highlighted amenities on the right. */
.room-card-secondary-amenities{display:none;}
@media (min-width:769px){
  .room-card-secondary-amenities{display:flex;}
}

/* Whole card is clickable (see gallery.js) — show a pointer everywhere. */
.room-card{cursor:pointer;}

/* Entire Lodge homepage card spans the full grid row (col-span utilities
   aren't in the precompiled Tailwind bundle, so this is hand-written). */
@media (min-width:640px){
  .room-card--lodge{grid-column:1 / -1;}
}

/* Room-card amenity rows: label text right-aligned beside its icon (icon
   trailing at the end), each row linking to that room's page. */
.room-icon-wrap{display:flex;align-items:center;justify-content:flex-end;gap:6px;cursor:pointer;text-decoration:none;}
.room-icon-wrap:hover .room-icon-label{text-decoration:underline;}
.room-icon-label{
  font-size:12px;
  font-weight:500;
  color:#69995d;
  white-space:nowrap;
}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(8,15,9,.94);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:56px 16px 16px;
  opacity:0;
  transition:opacity .18s ease;
}
.lightbox.is-open{display:flex;opacity:1;}
body.lightbox-open{overflow:hidden;}

.lightbox__stage{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.lightbox__frame{
  position:relative;
  display:inline-flex;
  max-width:100%;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__img{
  display:block;
  max-width:min(94vw,1400px);
  max-height:calc(100dvh - 150px);
  width:auto;
  height:auto;
  object-fit:contain;
  background:#0000;
}

.lightbox__close{
  position:fixed;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  z-index:2;
}
.lightbox__close:hover{background:rgba(255,255,255,.18);}

.lightbox__nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  z-index:2;
}
.lightbox__nav:hover{background:rgba(255,255,255,.18);}
.lightbox__nav--prev{left:10px;}
.lightbox__nav--next{right:10px;}

@media (max-width:640px){
  .lightbox{padding:48px 8px 8px;}
  .lightbox__nav{width:40px;height:40px;}
  .lightbox__nav--prev{left:4px;}
  .lightbox__nav--next{right:4px;}
  .lightbox__img{max-height:calc(100dvh - 130px);}
}

.lightbox__caption-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  padding:26px 60px 12px;
  color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
  pointer-events:none;
}
.lightbox__counter{
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c9e0c2;
  margin-bottom:4px;
}
.lightbox__caption{
  margin:0;
  font-size:15px;
  color:#fff;
  opacity:.95;
}
.lightbox__caption:empty,
.lightbox__counter:empty{display:none;}

.lightbox__filmstrip{
  width:100%;
  max-width:1400px;
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:8px;
  overflow-x:auto;
  padding:4px 4px 2px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.lightbox__filmstrip::-webkit-scrollbar{display:none;}
.lightbox__filmstrip-item{
  flex:0 0 auto;
  width:64px;
  height:44px;
  border-radius:4px;
  overflow:hidden;
  border:2px solid transparent;
  opacity:.55;
  cursor:pointer;
  scroll-snap-align:center;
  transition:opacity .15s ease,border-color .15s ease;
}
.lightbox__filmstrip-item img{width:100%;height:100%;object-fit:cover;display:block;}
.lightbox__filmstrip-item:hover{opacity:.85;}
.lightbox__filmstrip-item.is-active{opacity:1;border-color:#69995d;}

@media (max-width:480px){
  .lightbox__filmstrip-item{width:48px;height:34px;}
  .lightbox__caption-bar{padding:20px 46px 10px;}
  .lightbox__caption{font-size:13px;}
}

@media (prefers-reduced-motion: reduce){
  .lightbox{transition:none;}
  .js-gallery-thumbs,.lightbox__filmstrip{scroll-behavior:auto;}
}