/* ============================================================
   Escondido Lodge — page-specific layout
   Design System v2 (Tenor Sans / ink + bone + gold).
   Reuses global v2 primitives from /style.css:
   .eyebrow .btn-primary .btn-secondary-on-dark
   .reveal .reveal-delay-* .shooting-stat* .v2-container
   .section-surf .section-bone .section-final .hero-*
   .land-grid .land-text .land-photo
   .host-byline .final-cta-row .final-three-up
   ============================================================ */

/* ---------- 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);
}
.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;
}
.lodge-prose p + p {
  margin-top: 1.25rem;
}
/* Hunt land-grid sections — bone background + wider h2 + lighter prose */
.land-text {
  background: var(--bone-50, #faf7f1) !important;
  color: var(--ink-900, #0f0d0a) !important;
}
.land-text h2 { max-width: 28ch; color: var(--ink-900, #0f0d0a); }
.land-text .lodge-prose p { font-weight: 300; color: var(--bone-600, #4f4636); }
#outdoors .land-text p { font-weight: 400; }
#hunt p { font-weight: 400; }

/* Inline subheading inside prose (e.g. "Pigeon Season") */
.lodge-subhead {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h4);
  color: var(--fg);
  margin: 1.75rem 0 0.25rem;
}

/* ---------- OVERVIEW + LODGE PHOTO GRID ---------- */
#the-lodge {
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.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.3fr;
    align-items: start;
  }
  .lodge-overview-copy .lodge-head {
    margin-bottom: 1.35rem;
  }
}
.lodge-overview-copy .lodge-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.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); }

/* Compact masonry — explicit row heights keep grid proportional and non-inflating */
@media (min-width: 640px) {
  #lodgePhotoGrid {
    grid-template-rows: repeat(4, clamp(68px, 9vw, 124px));
  }
  #lodgePhotoGrid .pg-item {
    aspect-ratio: unset;
    height: 100%;
    min-height: 0;
  }
  #lodgePhotoGrid .pg-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  #lodgePhotoGrid .pg-item:nth-child(7) {
    grid-column: 1 / 3;
  }
}

/* ---------- 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);
}
.lodge-split-body .shooting-stat {
  margin: 1.75rem 0 0.5rem;
}

/* ---------- 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;
}
.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: 90ch;
}
.lodge-immersive .lodge-prose p {
  margin-inline: auto;
  color: var(--bone-200);
}

/* ---------- ROOMS GALLERY (masonry) ---------- */
#roomsGallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
@media (min-width: 640px) {
  #roomsGallery { grid-template-columns: repeat(3, 1fr); }
  #roomsGallery button:nth-child(1) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }
  #roomsGallery button:nth-child(4) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }
}
#roomsGallery button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  display: block;
  aspect-ratio: 1 / 1;
}
#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(15, 13, 10, 0.55) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 300ms;
}
#roomsGallery button:hover img { transform: scale(1.05); }
#roomsGallery button:hover::after { opacity: 1; }
#roomsGallery button .room-label {
  position: absolute;
  bottom: 0.6rem;
  left: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-caption, 0.8125rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-50, #faf7f1);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
#roomsGallery button:hover .room-label { opacity: 1; }
@media (max-width: 639px) {
  #roomsGallery button::after { opacity: 0.6; }
  #roomsGallery button .room-label { opacity: 1; }
}

/* ---------- A DAY / GETTING THERE — stacked text blocks ---------- */
.lodge-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 70ch;
}
@media (min-width: 820px) {
  .lodge-blocks.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
}
.lodge-block h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-heading);
  margin: 0 0 0.75rem;
}

/* ---------- LODGE FACTS (icon strip) ---------- */
.lodge-facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.lodge-facts li {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  padding-left: 1.1rem;
}
.lodge-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500, #c9a227);
}

/* Guest reviews use the global testimonial carousel from /style.css */

/* ---------- FAQs (dark accordion) ---------- */
.lodge-faqs {
  background: var(--ink-900, #0f0d0a);
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.lodge-faqs .lodge-head h2 {
  color: var(--bone-50, #faf7f1);
}

/* ---------- LODGE INTRO — 2-col text layout (mirrors Guayascate) ---------- */
.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-prose p { font-weight: 300; color: var(--fg-2); }

/* ---------- LODGE GALLERY — full-width slider ---------- */
#lodge-gallery { padding: 0 0 clamp(5rem, 10vw, 9rem); }
#lodge-gallery .rooms-slider-wrap { margin-top: 0; }
#lodge-gallery .rooms-track .pg-item {
  aspect-ratio: unset;
  height: clamp(240px, 28vw, 380px);
  border-radius: 0;
  flex: 0 0 clamp(300px, 33vw, 520px);
}

/* ---------- ROOMS SLIDER (shared 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);
  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 .room-label {
  position: absolute; bottom: 0.6rem; left: 0.75rem;
  font-family: var(--font-body); font-size: var(--fs-caption, 0.8125rem);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-50, #faf7f1); pointer-events: none;
}
.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; }
.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); }
.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);
}

.section-final::before {
  background-image: url("images/the-lodge/11_gallery_escondido.jpg");
}