/* ============================================================
   Guayascate Lodge — page-specific layout
   Design System v2 (Tenor Sans / ink + bone + gold).
   Reuses global v2 primitives from /style.css:
   .eyebrow .btn-primary .btn-secondary .btn-secondary-on-dark
   .reveal .reveal-delay-* .shooting-stat* .v2-container
   ============================================================ */

/* Prevent FOUC: hide the menu web components until the browser upgrades
   them. Until defined, the slotted in-page nav (Overview, The Hunt, …)
   renders as raw inline text at the top during load. Mirror of the global
   rule in base.css (kept here so it applies without a CSS rebuild). */
/* FOUC guard: legacy menu tags no longer exist; kept only for --site legacy.css artifacts.
   The materialized shell uses site-header + styles/header.css for menu chrome. */
site-header:not(:defined) {
  visibility: hidden;
}

/* ---------- HERO — Ken Burns (matches La Porteñita) ---------- */
#hero {
  /* Keep the Ken Burns image from extending the document on narrow viewports. */
  overflow: clip;
}

#hero picture[slot="background"] img {
  animation: hero-ken-burns 20s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes hero-ken-burns {
  0%   { transform: scale(1.06) translate(2%, 1%); }
  50%  { transform: scale(1.14) translate(-1.5%, -0.8%); }
  100% { transform: scale(1.06) translate(2%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  #hero picture[slot="background"] img { animation: none; }
}

/* ---------- HERO ----------
   Inherits the homepage hero system from home-v2.css
   (#hero gradient + .hero-content 2-column grid + .hero-left/.hero-right).
   Markup mirrors the home hero for visual consistency. No overrides here. */

/* ---------- SECTION SCAFFOLD ---------- */
.lodge-section {
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.lodge-head {
  max-width: 56ch;
  margin-bottom: var(--space-4, 32px);
}
.lodge-rule {
  width: 56px;
  height: 2px;
  background: var(--gold-500, #c9a227);
  margin-top: var(--space-4, 32px);
}
.lodge-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 2.2vw, 2.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  margin: 0.75rem 0 0;
}
.lodge-head h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  margin: 1rem 0 0;
  color: var(--fg-2);
}
.hunt-copy .lodge-head h3 {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  letter-spacing: 0.01em;
  margin-top: 0.4rem;
}
.lodge-prose p {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--fg-2);
  max-width: 62ch;
}
#outdoors .land-text p { font-weight: 400; }
#hunt p { font-weight: 400; }
.lodge-prose p + p {
  margin-top: 1.25rem;
}

/* ---------- OVERVIEW + GALLERY ---------- */
.lodge-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 980px) {
  .lodge-overview {
    grid-template-columns: 1fr 1.35fr;
    align-items: start;
  }
}
.lodge-overview-copy .lodge-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- LODGE INTRO COLS (La Porteñita style — título izq, prosa der) ---------- */
.lodge-intro-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .lodge-intro-cols {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.lodge-intro-cols .intro-head h2,
.lodge-intro-cols .intro-head .lodge-head {
  max-width: none;
}
.lodge-intro-cols .intro-body .lodge-actions {
  margin-top: 2rem;
}
.lodge-intro-cols .intro-body .lodge-prose p {
  font-weight: 300;
  color: var(--fg-2);
}

/* ---------- ROOMS SLIDER (La Porteñita pattern) ---------- */
.rooms-slider-wrap { margin-top: var(--space-8, 64px); position: relative; }
.rooms-track {
  display: flex; gap: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rooms-track::-webkit-scrollbar { display: none; }
.rooms-track button {
  flex: 0 0 clamp(280px, 30vw, 480px);
  height: clamp(240px, 28vw, 340px);
  position: relative; padding: 0; border: none; cursor: pointer;
  overflow: hidden; background: var(--ink-900, #0f0d0a);
  scroll-snap-align: start; flex-shrink: 0;
}
.rooms-track button img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-slow, 600ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1));
}
.rooms-track button:hover img { transform: scale(1.05); }
.rooms-track button::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(transparent 40%, rgba(10,8,5,0.72));
  opacity: 0; transition: opacity 280ms;
}
.rooms-track button:hover::before { opacity: 1; }
@media (hover: none) { .rooms-track button::before { opacity: 1; } }
.rooms-track .room-label {
  position: absolute; bottom: 0.75rem; left: 1rem;
  z-index: 2; font-family: var(--font-heading);
  font-size: 0.85rem; letter-spacing: 0.08em;
  color: var(--bone-50, #faf7f1);
  opacity: 0; transition: opacity 280ms; pointer-events: none;
}
.rooms-track button:hover .room-label { opacity: 1; }
@media (hover: none) { .rooms-track .room-label { opacity: 1; } }
.rooms-nav {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
  padding: 0 0.75rem; pointer-events: none; z-index: 2;
}
.rooms-nav .rec-arrow { pointer-events: auto; }
.rooms-nav-dark {
  border-color: rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(15,13,10,0.28) !important;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.rooms-nav-dark:hover {
  background: rgba(15,13,10,0.6) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: #fff !important;
}

.pg-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xs, 3px);
}
.pg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow, 600ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1));
}
.pg-item:hover img { transform: scale(1.05); }
.pg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0);
  transition: background 300ms ease;
  pointer-events: none;
}
.pg-item:hover::after { background: rgba(15, 13, 10, 0.14); }

/* Hunt section — breathing room before the living-areas immersive */
#the-hunt { padding-bottom: clamp(5rem, 10vw, 9rem); }

/* Gallery slider — adapts rooms-slider-wrap to the lodge gallery */
#lodge-gallery {
  padding: 0 0 clamp(5rem, 10vw, 9rem);
}
#lodge-gallery .rooms-slider-wrap {
  margin-top: 0;
}
/* pg-item inside the slider: override aspect-ratio so rooms-track button sizing wins */
#lodge-gallery .rooms-track .pg-item {
  aspect-ratio: unset;
  height: clamp(240px, 28vw, 380px);
  border-radius: 0;
  flex: 0 0 clamp(300px, 33vw, 520px);
}

/* ---------- PHOTO MODAL LIGHTBOX ---------- */
.photo-modal {
  border: none;
  padding: 0;
  background: rgba(8, 6, 3, 0.97);
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  position: fixed;
  inset: 0;
  outline: none;
}
.photo-modal::backdrop { background: transparent; }
.photo-modal[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.pm-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.1);
  border: 1px solid rgba(250, 247, 241, 0.22);
  color: var(--bone-50, #faf7f1);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms;
  z-index: 2;
}
.pm-close:hover { background: rgba(250, 247, 241, 0.22); }
.pm-stage {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: 100%;
  padding: 0 clamp(0.5rem, 2vw, 2rem);
  flex: 1;
  min-height: 0;
}
.pm-img {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - 90px);
  object-fit: contain;
  display: block;
  border-radius: var(--radius-xs, 3px);
}
.pm-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--bone-50, #faf7f1);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms;
}
.pm-arrow:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.65); }
.pm-counter {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow, 0.8125rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.45);
  padding-bottom: 0.75rem;
}
@media (max-width: 480px) {
  .pm-arrow { width: 36px; height: 36px; }
  .pm-stage { gap: 0.25rem; padding: 0 0.25rem; }
}

/* ---------- SPLIT: image + text ---------- */
.lodge-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .lodge-split {
    grid-template-columns: 1fr 1fr;
    min-height: 88vh;
  }
  .lodge-split.is-reverse .lodge-split-media {
    order: 2;
  }
}
.lodge-split-media {
  position: relative;
  min-height: 56vh;
}
.lodge-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lodge-split-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 6rem);
  background: var(--bone-50, #faf7f1);
}
.lodge-split-body .shooting-stat {
  margin: 1.75rem 0 0.5rem;
}

/* ---------- THE HUNT (light beige split, full-bleed video on the right) ---------- */
.hunt-split {
  background: var(--bone-50, #faf7f1);
  display: grid;
  /* minmax(0, 1fr) y no 1fr: una columna 1fr nunca baja de su min-content, y
     el padding de .hunt-copy mas el texto la dejaban en 455px dentro de una
     seccion de 375. La pagina desbordaba 65px en telefono. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .hunt-split {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 78vh;
  }
}
.hunt-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Deliberately ignores the site container: text runs wider toward the
     outer viewport edge so it stays balanced with the full-bleed media. */
  padding: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem)
    clamp(1.5rem, 4.5vw, 4.5rem);
}
.hunt-copy .lodge-head { max-width: none; }
.hunt-copy .shooting-stat { margin: 0 0 0.75rem; }
.hunt-copy .lodge-prose p { max-width: 68ch; }
.hunt-season strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h4, 1.15rem);
  color: var(--fg-1, var(--ink-900));
}

/* Full-bleed media: fills its column edge-to-edge and matches the copy height */
.hunt-video,
.hunt-media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 56vh;
}
.hunt-video img,
.hunt-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow, 600ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1));
}
.hunt-media:hover img { transform: scale(1.05); }
.hunt-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 13, 10, 0.18);
  transition: background 240ms ease;
}
.hunt-video:hover img { transform: scale(1.05); }
.hunt-video:hover::after { background: rgba(15, 13, 10, 0.26); }

/* Play button — refined H&H style: thin outlined disc, gold on hover */
.hunt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 241, 0.85);
  background: rgba(15, 13, 10, 0.22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: grid;
  place-content: center;
  transition: transform 260ms var(--ease-luxury, ease), background 260ms ease, border-color 260ms ease;
}
.hunt-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--bone-50, #faf7f1);
  margin-left: 4px;
  transition: border-left-color 260ms ease;
}
.hunt-video:hover .hunt-play {
  transform: translate(-50%, -50%) scale(1.07);
  background: rgba(201, 162, 39, 0.9);
  border-color: var(--gold-300, #e6c75c);
}

/* ---------- IMMERSIVE (full-bleed photo + overlay text) ---------- */
.lodge-immersive {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 88vh;
  padding: clamp(3rem, 8vw, 7rem) var(--site-pad-x);
  text-align: center;
  overflow: hidden;
}
.lodge-immersive img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform-origin: center;
  animation: lodge-kenburns 20s ease-in-out infinite alternate;
}
@keyframes lodge-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .lodge-immersive img.bg { animation: none; }
}
.lodge-immersive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 13, 10, 0.5), rgba(15, 13, 10, 0.65));
}
.lodge-immersive .lodge-immersive-inner {
  max-width: 62ch;
}
.lodge-immersive .lodge-prose p {
  margin-inline: auto;
  color: var(--bone-200);
}
.lodge-immersive .eyebrow {
  color: var(--gold-300, #e6c75c);
}

/* ---------- DINING RECIPES — recipe-track slider ---------- */
.lodge-recipes {
  padding-bottom: clamp(4rem, 9vw, 8rem);
}
.lodge-recipes[data-theme="dark"] {
  background: var(--ink-900, #0f0d0a);
}
.lodge-recipes .recipes-head {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) var(--site-pad-x) clamp(1.5rem, 3vw, 2.5rem);
}
.lodge-recipes .eyebrow { color: var(--bone-50, #faf7f1); }
.dining-lede {
  color: var(--bone-300, #c9bea7);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  max-width: 70ch;
  margin: 0.75rem auto 0;
}
.dining-chef-byline { margin-bottom: 0.5rem; }
.lodge-recipes .recipes-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 2.2vw, 2.5rem);
  margin-top: 0.75rem;
}
.dining-strip {
  padding: 0 max(2rem, calc((100vw - 1280px) / 2 + 2rem));
}
.recipe-slider-wrap { position: relative; }
.recipe-track {
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.recipe-track::-webkit-scrollbar { display: none; }
.recipe-track .slide {
  flex: 0 0 clamp(180px, 21vw, 260px);
  height: clamp(240px, 32vh, 300px);
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  border-radius: var(--radius-md, 8px); flex-shrink: 0;
}
.recipe-track .slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-slow, 600ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1));
}
.recipe-track .slide:hover img { transform: scale(1.05); }
.recipe-track .slide-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(2rem, 30%, 4rem) 1.25rem 1.25rem;
  background: linear-gradient(to bottom, transparent 0%, rgba(8, 6, 3, 0.97) 100%);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.recipe-track .slide-content h5 {
  font-family: var(--font-heading, "Tenor Sans", serif);
  font-size: 1.2rem; font-weight: 400; letter-spacing: 0.01em;
  color: var(--bone-50, #faf7f1); margin: 0;
}
.recipe-track .slide-content .btn-secondary-on-dark { font-size: 0.72rem; padding: 5px 14px; }
.recipe-nav {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  margin-top: 0;
  z-index: 2;
}
.recipe-nav .rec-arrow { pointer-events: auto; }
.rec-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: var(--bone-50, #faf7f1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms;
}
.rec-arrow:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.65); }
@media (max-width: 640px) {
  .dining-strip { padding: 0 1.5rem; }
  .recipe-track .slide { flex: 0 0 72vw; }
}


/* ---------- BERETTA — feature section ---------- */
.lodge-beretta {
  background: var(--ink-900);
  color: var(--bone-50);
  padding: clamp(4rem, 9vw, 8rem) 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#beretta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("images/beretta-bg.jpg") center / cover no-repeat;
  filter: saturate(0.45) brightness(0.45);
}
#beretta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(15,13,10,0.82) 0%, rgba(15,13,10,0.55) 100%);
}
.lodge-beretta .beretta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 620px) {
  .lodge-beretta .beretta-grid {
    grid-template-columns: minmax(220px, 300px) 1fr;
    align-items: center;
  }
}
@media (min-width: 900px) {
  .lodge-beretta .beretta-grid {
    grid-template-columns: 340px 1fr;
  }
}
.lodge-beretta .lodge-prose p { color: var(--bone-300); }

.beretta-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  border: 1px solid rgba(250, 247, 241, 0.1);
  border-radius: var(--radius-sm, 6px);
  background: rgba(250, 247, 241, 0.03);
}
.beretta-logo-img {
  width: auto;
  height: clamp(80px, 12vw, 160px);
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: filter 400ms var(--ease-luxury, ease), opacity 400ms;
}
.beretta-logo-wrap:hover .beretta-logo-img {
  filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.08);
  opacity: 1;
}
.beretta-trident {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  width: 100%;
}
.beretta-trident .tridents {
  font-size: 1.75rem;
  letter-spacing: 0.2em;
  color: var(--gold-300);
  line-height: 1;
}
.beretta-trident .tb-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--bone-50);
  letter-spacing: 0.06em;
}
.beretta-trident .tb-sub {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--bone-400);
}

/* ---------- FINAL CTA ---------- */
.lodge-final {
  text-align: center;
}
.lodge-final .lodge-prose p {
  margin-inline: auto;
  text-align: center;
}
.lodge-final .lodge-actions {
  margin-top: 2.25rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- LODGE FACTS (icon strip) ---------- */
.lodge-facts {
  list-style: none;
  margin: var(--space-4, 32px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.lodge-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-family: var(--font-body, "Open Sans", sans-serif);
  font-size: var(--fs-eyebrow, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-500, #8a4f29);
  white-space: nowrap;
}
.lodge-facts li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500, #c9a227);
  flex-shrink: 0;
}

/* ---------- GUEST REVIEWS ----------
   Reuses the global homepage testimonials component
   (.test-head .test-slider-wrap .test-grid .testimonial-card .test-nav).
   No page-specific overrides needed. */

/* ---------- FAQs (native accordion, dark section) ----------
   Dark bg defined here because the global .section-ink utility is purged
   from the built style.css (unused on the homepage). Self-contained. */
.lodge-faqs {
  position: relative;
  isolation: isolate;
  background: var(--ink-900, #0f0d0a);
  color: var(--bone-50, #faf7f1);
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.lodge-faqs .lodge-head { margin-inline: auto; text-align: center; }
.lodge-faqs .eyebrow { color: var(--gold-300); }

/* ---------- The Lodge Video dialog (preserved) ---------- */
#theLodgeVideo {
  width: 85vw;
  aspect-ratio: 2/1;
  max-width: 85vw;
  max-height: 85vh;
}
#videoDialog { border: none; background: transparent; padding: 0; }
#videoDialog[open]::backdrop { background-color: rgba(0, 0, 0, 0.85); }

/* ---------- Rooms gallery — masonry luxury ---------- */
#roomsGallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 640px) {
  #roomsGallery { grid-template-columns: repeat(3, 1fr); }
  /* rooms 1 and 9 span 2 cols for visual hierarchy */
  #roomsGallery button:nth-child(1) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }
  #roomsGallery button:nth-child(9) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }
}
#roomsGallery button {
  position: relative;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
}
#roomsGallery button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow, 600ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1));
}
#roomsGallery button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 3, 0.65) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 300ms ease;
}
#roomsGallery button:hover img { transform: scale(1.05); }
#roomsGallery button:hover::after { opacity: 1; }
#roomsGallery button .room-label {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--bone-50, #faf7f1);
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 1;
  pointer-events: none;
}
#roomsGallery button:hover .room-label { opacity: 1; }
@media (hover: none) {
  #roomsGallery button::after { opacity: 0.6; }
  #roomsGallery button .room-label { opacity: 1; }
}

#roomSlider {
  overscroll-behavior: contain;
  background-color: transparent;
  border: none;
}
#roomSlider[open]::backdrop { background-color: hsla(0, 0%, 0%, 0.85); }
#roomSlider > * { display: none; }
#roomSlider[data-show="room1"] > #room1,
#roomSlider[data-show="room2"] > #room2,
#roomSlider[data-show="room3"] > #room3,
#roomSlider[data-show="room4"] > #room4,
#roomSlider[data-show="room5"] > #room5,
#roomSlider[data-show="room6"] > #room6,
#roomSlider[data-show="room7"] > #room7,
#roomSlider[data-show="room8"] > #room8,
#roomSlider[data-show="room9"] > #room9,
#roomSlider[data-show="room10"] > #room10 {
  display: block;
}

/* Final CTA — lodge-specific background (overrides global section-final::before) */
#hunt::before {
  background-image: url("images/hunt-2026-bg.jpg");
}