/* ============================================================
   La Porteñita Lodge — v2 (Luxury Refinement)
   Built ENTIRELY on the home v2 component system in /style.css
   (home-v2.css + design-v2.css). This file only adds the few
   lodge-specific pieces the homepage doesn't have:
   sub-headings inside editorial panels, the day timeline tweak,
   the recipe carousel slides, the rooms gallery + dialog and the
   FAQ accordion. Everything else reuses home classes verbatim.
   Jira HH-194 · Branch design/la-portenita-lodge-v2
   ============================================================ */

/* ── Parity with home inline styles ─────────────────────────
   Home index.html ships these in an inline <style>; we mirror
   them so full-bleed sections never cause x-overflow and the
   hero logo shrinks on scroll exactly like the homepage. ── */
main#main-content { overflow-x: clip; }
#hero { overflow: clip; }
.hero-logo { transition: width 360ms cubic-bezier(0.4, 0, 0.2, 1); transform-origin: left center; }
img.hero-logo.is-small { width: 132px; }

/* ── Hero — Ken Burns ───────────────────────────────────────── */
@keyframes lp-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%); }
}
#hero picture img {
  animation: lp-ken-burns 20s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

/* ── .section-ink — dark section ────────────────────────────
   Defined in the home-v2.css source but NOT present in the built
   /style.css yet, so we ship it here for the dark Dining and
   Getting-There sections. Identical to the home definition. ── */
.section-ink {
  position: relative; isolation: isolate;
  background: var(--ink-900, #0f0d0a);
  color: var(--bone-50, #faf7f1);
  padding: clamp(4rem, 9vw, 8rem) 0;
  overflow: hidden;
}
.section-ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 13, 10, 0.5), rgba(15, 13, 10, 0.85));
}

/* ── Split sections — foto y texto 50/50, sección crece al contenido */
@media (min-width: 1024px) {
  #living .cordoba-grid  { grid-template-columns: 1fr 1fr; min-height: unset; }
  #outdoors .land-grid   { grid-template-columns: 1fr 1fr; min-height: unset; }
}

/* ── Sub-headings inside .land-text / .cordoba-text panels ────
   The home editorial panels only style h2 + p. Lodge content is
   denser (keyword-bearing H3s), so we add a token-matched H3. ── */
.land-text h3,
.cordoba-text h3 {
  font-family: var(--font-heading, "Tenor Sans", serif);
  font-weight: 400;
  font-size: var(--fs-h4, 1.25rem);
  letter-spacing: var(--ls-heading, -0.01em);
  color: var(--copper-500, #8a4f29);
  margin: var(--space-5, 40px) 0 calc(-1 * var(--space-1, 8px));
}
.land-text h3:first-of-type,
.cordoba-text h3:first-of-type { margin-top: var(--space-3, 24px); }
/* The 20K stat pill sits right under the H2 */
.land-text .shooting-stat { margin-bottom: var(--space-2, 16px); }

/* ── The Estate — top-align the editorial columns ───────────
   .lodges-intro is bottom-aligned (great for the home's short
   copy) but leaves a big void above a tall title here. Align to
   the top, richen the H2 and add a gold accent rule. ── */
.lp-estate-intro { align-items: end; }
@media (min-width: 768px) { .lp-estate-intro { grid-template-columns: 1fr 1.35fr; gap: clamp(2.5rem, 5vw, 5rem); } }
.lp-estate-intro h2 { color: var(--ink-900, #0f0d0a); margin-top: var(--space-2, 16px); }
.lp-estate-intro .estate-rule {
  width: 56px; height: 2px; background: var(--gold-500, #c9a227);
  margin-top: var(--space-5, 40px);
}
.lp-estate-intro p + p { margin-top: var(--space-3, 24px); }
/* Data facts under the title — 2-col spec grid, balances the
   left column height against the body copy on the right */
.estate-facts {
  list-style: none; margin: var(--space-4, 32px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.estate-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;
}
.estate-facts li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-500, #c9a227); flex-shrink: 0;
}

/* ── The Hunt — slider: H2+stat header fixed, 3 sub-topics ────
   Each headline is one slide with its own photo, navigated with
   arrows + dots. Compact (one slide tall) instead of a long
   scroll. Reuses home .test-arrow / .test-dot for controls. ── */
.lp-hunt-section .hunt-head { max-width: 860px; margin: 0 auto var(--space-7, 56px); text-align: center; }
.lp-hunt-section .hunt-head .eyebrow { display: block; margin-bottom: var(--space-2, 16px); }
.lp-hunt-section .hunt-head h2 { margin: 0 0 var(--space-4, 32px); color: var(--ink-900, #0f0d0a); font-size: clamp(1.75rem, 3vw, 2.5rem); }
.lp-hunt-section .hunt-head .shooting-stat { justify-content: center; }

.hunt-slider { position: relative; overflow: hidden; }
.hunt-slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hunt-slides::-webkit-scrollbar { display: none; }
.hunt-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; align-items: stretch; min-height: 58vh;
}
.hunt-slide-text {
  display: flex; flex-direction: column; gap: var(--space-3, 24px);
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem)
           clamp(2rem, 4vw, 3.5rem)
           clamp(3rem, 6vw, 5rem)
           max(2rem, calc((100vw - 1280px) / 2 + 2rem));
}
.hunt-slide-num {
  font-size: var(--fs-eyebrow, 0.8125rem); letter-spacing: var(--ls-eyebrow, 0.18em);
  text-transform: uppercase; color: var(--gold-700, #7e6207); font-weight: 600;
}
.hunt-slide-text h3 {
  font-family: var(--font-heading, "Tenor Sans", serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem); letter-spacing: var(--ls-heading, -0.01em);
  color: var(--ink-900, #0f0d0a); margin: 0; line-height: 1.2;
}
.hunt-slide-text p {
  color: var(--bone-600, #4f4636); font-size: var(--fs-body-lg, 1.125rem);
  line-height: 1.65; font-weight: 300; margin: 0; max-width: 54ch;
}
.hunt-slide-media {
  position: relative; overflow: hidden; border-radius: 0;
}
.hunt-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hunt-prev, .hunt-next { position: static; transform: none; }
.hunt-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5, 40px); padding: var(--space-6, 48px) 0;
}

@media (max-width: 900px) {
  .hunt-slide { grid-template-columns: 1fr; min-height: auto; }
  .hunt-slide-media {
    order: -1;
    height: 56vw;    /* fijo proporcional = ~16:9, igual en todos los slides */
    aspect-ratio: unset;
    min-height: 0; border-radius: 0;
  }
  .hunt-slide-text { padding: clamp(1.5rem, 5vw, 3rem) 1.5rem; }
}

/* ── A Day — reuse .bullets, force 3 columns on desktop ─────── */
@media (min-width: 1024px) {
  .bullets.bullets--day { grid-template-columns: repeat(3, 1fr); }
}

/* ── Dining — header centrado ────────────────────────────────── */
#dining { padding: clamp(48px, 6vh, 72px) 0; } /* compact: override section-ink 112px */
.dining-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(32px, 4vh, 48px);
}
.dining-eyebrow { color: var(--gold-300, #e6c75c); }
.dining-rule {
  width: 48px; height: 1px;
  background: var(--gold-500, #c9a227);
  margin: 16px auto 20px;
}
.dining-head h2 {
  color: var(--bone-50, #faf7f1);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  margin: 0 0 12px;
}
.dining-sub {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-heading, "Tenor Sans", serif);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  font-style: italic; font-weight: 400;
  color: var(--gold-300, #e6c75c);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.chef-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1.5px solid var(--gold-500, #c9a227);
  font-style: normal; /* reset italic from parent */
}
.dining-lede {
  color: var(--bone-300, #c9bea7);
  font-size: 1rem;
  font-weight: 300; line-height: 1.65;
  max-width: 70ch; margin: 0 auto;
}

/* ── Dining — strip full-width con cards portrait ────────────── */
.dining-strip {
  padding: 0 max(2rem, calc((100vw - 1280px) / 2 + 2rem));
}
.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-slider-wrap { position: relative; }
.recipe-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;
  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; }
}

/* ── Rooms — horizontal slider ──────────────────────────────── */
.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(300px, 33vw, 500px);
  height: 320px;
  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-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;
  margin-top: 0;
  z-index: 2;
}
.rooms-nav .rec-arrow { pointer-events: auto; }
/* Overlay sobre fotos oscuras — reemplaza el estilo beige/oscuro */
.rooms-nav .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 .rooms-nav-dark:hover {
  background: rgba(15,13,10,0.6) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: #fff !important;
}

/* Dialog lightbox */
#roomViewer { background: transparent; border: none; padding: 0; overflow: visible; }
#roomViewer[open]::backdrop { background: rgba(6,4,2,0.95); }
.room-viewer-inner {
  position: relative; display: inline-block; line-height: 0;
}
#roomViewerImg {
  display: block;
  max-width: 88vw; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm, 4px);
  transition: opacity 150ms ease;
}
.room-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,13,10,0.28); border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, opacity 200ms; z-index: 2;
}
.room-nav-btn:hover { background: rgba(15,13,10,0.6); border-color: rgba(255,255,255,0.65); color: #fff; }
.room-nav-btn:disabled { opacity: 0.25; pointer-events: none; }
.room-nav-prev { left: 12px; }
.room-nav-next { right: 12px; }
.room-close {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  transition: background 200ms; backdrop-filter: blur(4px);
}
.room-close:hover { background: rgba(255,255,255,0.35); }

/* ── Reviews — rating H&H style ─────────────────────────────── */
.reviews-rating {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--space-3, 24px);
}
.reviews-stars {
  color: var(--gold-500, #c9a227);
  font-size: 1.1rem; letter-spacing: 3px;
}
.reviews-score {
  font-family: var(--font-heading, "Tenor Sans", serif);
  font-size: 1.1rem; font-weight: 400;
  color: var(--ink-900, #0f0d0a);
}
.reviews-label {
  font-size: var(--fs-eyebrow, 0.8125rem);
  letter-spacing: var(--ls-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--bone-600, #4f4636);
}

/* ── FAQs — premium numbered accordion ──────────────────────── */
.faq-section-head { max-width: 680px; margin-bottom: var(--space-12, 96px); }
.faq-section-head h2 { margin-top: var(--space-2, 16px); }






/* Smooth expand animation */

/* ── Getting There — overrides sobre section-charter global ──────
   Hereda todo de style.css: layout, charter-facts, tipografía.
   Solo cambia: imagen de fondo, gradiente invertido (texto izq),
   y elimina el margin-top propio de la home.              ── */
#getting-there.section-charter { margin-top: 0; }
#getting-there.section-charter::before {
  background: url("images/getting-there/lp-getting-there.jpg") center/cover;
  filter: saturate(0.7) brightness(0.55);
}
/* Gradiente de izq a der: oscuro izquierda donde va el texto */
#getting-there.section-charter::after {
  background: linear-gradient(270deg,
    rgba(15,13,10,0.08) 0%,
    rgba(15,13,10,0.62) 45%,
    rgba(15,13,10,0.90) 100%
  );
}

/* ── Outdoors — slider horizontal (pool ↔ chapel) ───────────── */
.lp-outdoor-slider { /* hereda land-photo: position:relative, overflow:hidden, min-height:50vh */ }

.lp-outdoor-track {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lp-outdoor-track::-webkit-scrollbar { display: none; }
.lp-outdoor-track img {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  min-height: 50vh;
}

/* Flechas — esquina inferior derecha */
.lp-outdoor-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10, 8, 5, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
}
.lp-outdoor-arrow:hover { background: rgba(10, 8, 5, 0.82); }
.lp-outdoor-arrow .material-symbols-outlined { font-size: 18px; }
.lp-outdoor-prev { left: 1rem; }
.lp-outdoor-next { right: 1rem; }

/* Dots — centro inferior */
.lp-outdoor-dots {
  position: absolute; bottom: 1.5rem;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}

/* ── Dining — chef byline (reuses .host-byline centrado) ─────── */
.dining-chef-byline { margin-bottom: var(--space-4, 32px); }

/* Zoho: ver /components/call-widget.js — estilos inyectados globalmente */

/* ---------- FAQs dark (igual que Guayascate) ---------- */
.lodge-faqs {
  background: var(--ink-900, #0f0d0a);
  padding: clamp(4rem, 9vw, 8rem) 0;
  color: var(--bone-50, #faf7f1);
}
.lodge-faqs .faq-section-head { text-align: center; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lodge-faqs .faq-section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 2.2vw, 2.5rem);
  color: var(--bone-50, #faf7f1);
  margin-top: 0.5rem;
}
.lodge-faqs .eyebrow { color: var(--gold-300, #e6c75c); }