/* =========================================================
   LITTLE HOI AN - ROOM DETAIL LANDSCAPE LAYOUT
   Scoped to avoid conflicts with global / Hoi An Moon styles
========================================================= */

.lha-room-hero,
.lha-room-detail,
.lha-room-detail *{
  box-sizing:border-box;
}

.lha-room-hero.contact-hero,
.contact-hero.lha-room-hero{
  position:relative;
  height:75vh;
  min-height:620px;
  overflow:hidden;
  background:#130f0d;
}

.lha-room-hero-media{
  position:absolute;
  inset:0;
  z-index:1;
}

.lha-room-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.03);
  filter:saturate(.94) contrast(1.03);
}

.lha-room-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to bottom,rgba(15,11,9,.18) 0%,rgba(15,11,9,.34) 46%,rgba(15,11,9,.62) 100%);
}

.lha-room-hero-content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 32px 84px;
}

.lha-room-kicker{
  margin:0 0 14px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#d8c1a2;
}

.lha-room-hero-content h1{
  margin:0;
  font-family:var(--font-title);
  font-size:clamp(34px,5.2vw,72px);
  line-height:.96;
  font-weight:400;
  letter-spacing:-.025em;
  text-transform:none;
  color:#f4eadf;
  text-shadow:0 10px 38px rgba(0,0,0,.42);
}

.lha-room-detail{
  --cream:var(--cream,#f7efec);
  --soft:#f1eadf;
  --soft-2:#efe5d7;
  --red:var(--primary,#bc955c);
  --ink:#211b17;
  --muted:#5f544f;
  --line:rgba(139,3,4,.22);
  --warm-line:rgba(65,52,44,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  background:var(--cream);
  color:var(--ink);
  overflow:hidden;
}

.lha-room-container{
  width:min(1160px,calc(100% - 92px));
  margin:0 auto;
}

.lha-room-intro{
  padding:108px 0 72px;
  text-align:center;
}

.lha-room-intro-inner{
  max-width:780px;
}

.lha-room-eyebrow,
.lha-room-label{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
}

.lha-room-intro h2{
  width:min(700px,100%);
  margin:16px auto 22px;
  font-family:var(--font-title);
  font-size:30px;
  line-height:1.12;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:none;
  color:#322d29;
}

.lha-room-intro p{
  width:min(620px,100%);
  margin:0 auto;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.72;
  font-weight:400;
  letter-spacing:.003em;
  color:var(--ink);
}

.lha-room-line{
  display:block;
  width:116px;
  height:1px;
  margin:34px auto 0;
  background:rgba(139,3,4,.38);
}

.lha-room-list{
  width:min(1160px,calc(100% - 92px));
  margin:0 auto;
  padding:0 0 122px;
}

.lha-room-card{
  background:var(--soft);
  border:0 !important;
  box-shadow:0 22px 70px rgba(70,48,36,.035);
}

.lha-room-card + .lha-room-card{
  margin-top:46px;
}


/* FULL-FRAME IMAGE FIX: image fills the landscape slider, no frame/border around image block */
.lha-room-detail .lha-room-card{
  border:0 !important;
}

.lha-room-detail .lha-room-slider,
.lha-room-detail .lha-room-slides,
.lha-room-detail .lha-room-slides img{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.lha-room-detail .lha-room-slides img{
  object-fit:cover !important;
  object-position:center center !important;
}

/* LANDSCAPE IMAGE ON TOP - CONTENT BELOW */
.lha-room-slider{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:420px;
  max-height:650px;
  overflow:hidden;
  background:#e8ded1;
  isolation:isolate;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.lha-room-slides,
.lha-room-slides img{
  position:absolute;
  inset:0;
}

.lha-room-slides img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:0;
  visibility:hidden;
  transform:scale(1.006);
  transition:opacity 1.05s ease, visibility 1.05s ease, transform 1.65s cubic-bezier(.18,.72,.22,1);
  background:transparent !important;
}

.lha-room-slides img.is-active{
  opacity:1;
  visibility:visible;
  z-index:2;
  transform:scale(1);
}

.lha-room-slider:hover .lha-room-slides img.is-active{
  transform:scale(1.012);
}

.lha-room-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:8 !important;
  width:46px !important;
  height:46px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.62) !important;
  border-radius:999px !important;
  background:rgba(30,22,18,.20) !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transform:translateY(-50%) !important;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease) !important;
  backdrop-filter:blur(5px);
}

.lha-room-arrow--prev{ left:24px !important; }
.lha-room-arrow--next{ right:24px !important; }

.lha-room-arrow svg{
  width:22px !important;
  height:22px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.7 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  display:block !important;
}

.lha-room-arrow:hover{
  background:rgba(139,3,4,.86) !important;
  border-color:rgba(139,3,4,.86) !important;
  transform:translateY(-50%) scale(1.035) !important;
}

.lha-room-dots{
  position:absolute;
  left:50%;
  bottom:22px;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transform:translateX(-50%);
}

.lha-room-dots button{
  width:8px !important;
  height:8px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.82) !important;
  border-radius:50% !important;
  background:transparent !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:width .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease) !important;
}

.lha-room-dots button.is-active{
  width:28px !important;
  border-radius:999px !important;
  background:#fff !important;
  border-color:#fff !important;
}

.lha-room-content{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;
  align-items:start;
  padding:54px 60px 52px;
}

.lha-room-main-copy,
.lha-room-facilities{
  min-width:0;
}

.lha-room-main-copy h2{
  margin:11px 0 22px;
  font-family:var(--font-title);
  font-size:30px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.012em;
  text-transform:none;
  color:#302b27;
}

.lha-room-main-copy p{
  margin:24px 0 0;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.82;
  font-weight:400;
  letter-spacing:.003em;
  color:var(--ink);
}

.lha-room-specs{
  margin:0 0 0;
  padding:0 0 24px;
  border-bottom:1px solid var(--warm-line);
}

.lha-room-specs h3,
.lha-room-facilities h3{
  margin:0 0 15px;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#6f6863;
}

.lha-room-specs dl{
  margin:0;
  display:grid;
  gap:8px;
  font-family:var(--font-body);
}

.lha-room-specs dl div{
  display:grid;
  grid-template-columns:minmax(132px,.8fr) minmax(0,1fr);
  gap:18px;
  align-items:baseline;
}

.lha-room-specs dt,
.lha-room-specs dd{
  margin:0;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
  letter-spacing:.005em;
  color:var(--ink);
}

.lha-room-specs .is-special dt,
.lha-room-specs .is-special dd{
  color:var(--red);
}

.lha-room-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin:24px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--warm-line);
  font-family:var(--font-body);
}

.lha-room-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#3b332e;
}

.lha-room-meta i{
  width:16px !important;
  min-width:16px !important;
  height:16px !important;
  display:inline-grid !important;
  place-items:center !important;
  color:var(--red) !important;
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}

.lha-room-facilities{
  padding-top:2px;
}

.lha-room-facilities ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px 22px !important;
}

.lha-room-facilities li{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(65,52,44,.09) !important;
  font-family:var(--font-body) !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  letter-spacing:.002em !important;
  color:#332d29 !important;
}

.lha-room-facilities li::before{
  display:none !important;
  content:none !important;
}

.lha-room-facilities i{
  flex:0 0 22px !important;
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  display:inline-grid !important;
  place-items:center !important;
  overflow:hidden !important;
  color:var(--red) !important;
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  transform:none !important;
}

.lha-room-facilities span{
  min-width:0;
}

.lha-room-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  padding-top:8px;
}

.lha-room-book,
.lha-room-secondary{
  min-width:154px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid var(--red);
  font-family:var(--font-body);
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}

.lha-room-book{
  background:var(--red);
  color:#fff;
}

.lha-room-secondary{
  background:transparent;
  color:var(--red);
}

.lha-room-book::before,
.lha-room-secondary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .62s cubic-bezier(.22,.72,.22,1);
}

.lha-room-book::before{ background:var(--soft); }
.lha-room-secondary::before{ background:var(--red); }

.lha-room-book:hover{
  color:var(--red);
  transform:translateY(-1px);
}

.lha-room-secondary:hover{
  color:#fff;
  transform:translateY(-1px);
}

.lha-room-book:hover::before,
.lha-room-secondary:hover::before{
  transform:scaleX(1);
}

/* Fade in */
.fadein-up{
  opacity:0;
  transform:translate3d(0,var(--fade-y,78px),0) scale(var(--fade-scale,.982));
  transition:opacity var(--fade-duration,2.15s) cubic-bezier(.16,.72,.18,1), transform var(--fade-duration,2.15s) cubic-bezier(.16,.72,.18,1);
  transition-delay:var(--fade-delay,0s);
  will-change:opacity,transform;
}

.fadein-up.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

.lha-room-hero.fadein-up{ --fade-y:42px; --fade-scale:1; --fade-duration:2.2s; }
.lha-room-hero-content.fadein-up,
.lha-room-hero-content h1.fadein-up{ --fade-y:64px; --fade-duration:2.45s; --fade-delay:.18s; }
.lha-room-card.fadein-up{ --fade-y:90px; --fade-duration:2.35s; }
.lha-room-slider.fadein-up{ --fade-y:68px; --fade-duration:2.2s; }

@media (max-width:1180px){
  .lha-room-list,
  .lha-room-container{
    width:min(1060px,calc(100% - 64px));
  }

  .lha-room-content{
    padding:46px 46px 48px;
    gap:42px;
  }
}

@media (max-width:920px){
  .lha-room-hero.contact-hero,
  .contact-hero.lha-room-hero{
    height:66vh;
    min-height:520px;
  }

  .lha-room-intro{
    padding:82px 0 56px;
  }

  .lha-room-list,
  .lha-room-container{
    width:calc(100% - 34px);
  }

  .lha-room-slider{
    min-height:0;
    aspect-ratio:4 / 3;
  }

  .lha-room-content{
    grid-template-columns:1fr;
    gap:34px;
    padding:36px 28px 38px;
  }

  .lha-room-actions{
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  .lha-room-hero.contact-hero,
  .contact-hero.lha-room-hero{
    height:58vh;
    min-height:460px;
  }

  .lha-room-hero-content{
    padding:128px 22px 70px;
  }

  .lha-room-hero-content h1{
    font-size:42px;
  }

  .lha-room-intro h2,
  .lha-room-main-copy h2{
    font-size:28px;
  }

  .lha-room-list,
  .lha-room-container{
    width:calc(100% - 24px);
  }

  .lha-room-card + .lha-room-card{
    margin-top:32px;
  }

  .lha-room-slider{
    aspect-ratio:3 / 2;
  }

  .lha-room-content{
    padding:30px 18px 32px;
  }

  .lha-room-specs dl div{
    grid-template-columns:1fr;
    gap:2px;
  }

  .lha-room-facilities ul{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .lha-room-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .lha-room-book,
  .lha-room-secondary{
    width:100%;
  }

  .lha-room-arrow{
    width:40px !important;
    height:40px !important;
  }

  .lha-room-arrow--prev{ left:12px !important; }
  .lha-room-arrow--next{ right:12px !important; }
}

@media (max-width:420px){
  .lha-room-hero-content h1{
    font-size:35px;
  }

  .lha-room-slider{
    aspect-ratio:1 / 1;
  }
}


/* =========================================================
   ROOM HERO BANNER — match Contact banner exactly
   Scoped only to .lha-room-hero, no room content interference
========================================================= */
.lha-room-hero.contact-hero,
.contact-hero.lha-room-hero{
  position:relative !important;
  height:75vh !important;
  min-height:620px !important;
  overflow:hidden !important;
  background:#0f0b09 !important;
}

.lha-room-hero .lha-room-hero-media{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
}

.lha-room-hero .lha-room-hero-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  transform:scale(1.02) !important;
  filter:saturate(.92) contrast(1.02) !important;
}

.lha-room-hero .lha-room-hero-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:linear-gradient(to bottom,rgba(12,10,9,.18) 0%,rgba(12,10,9,.32) 45%,rgba(12,10,9,.58) 100%) !important;
}

.lha-room-hero .lha-room-hero-content{
  position:relative !important;
  z-index:3 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:140px 32px 80px !important;
}

.lha-room-hero .lha-room-hero-content h1{
  margin:0 !important;
  font-family:var(--font-title) !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#f4eadf !important;
  text-shadow:0 6px 34px rgba(0,0,0,.34) !important;
}

.lha-room-hero .lha-room-kicker{
  display:none !important;
}

@media(max-width:820px){
  .lha-room-hero.contact-hero,
  .contact-hero.lha-room-hero{
    height:58vh !important;
    min-height:520px !important;
  }

  .lha-room-hero .lha-room-hero-content{
    padding-top:120px !important;
  }

  .lha-room-hero .lha-room-hero-content h1{
    font-size:clamp(48px,12vw,76px) !important;
  }
}

@media(max-width:560px){
  .lha-room-hero.contact-hero,
  .contact-hero.lha-room-hero{
    height:54vh !important;
    min-height:440px !important;
  }

  .lha-room-hero .lha-room-hero-content{
    padding:110px 24px 60px !important;
  }

  .lha-room-hero .lha-room-hero-content h1{
    font-size:30px !important;
    line-height:1.08 !important;
  }
}