/* =========================================================
   V25 — Home slide height + adaptive caption readability
   ========================================================= */

/* Show the Home picture slide as the first full screen area.
   The photo keeps object-fit: cover so it fills the page; minor cropping is allowed
   when the visitor's screen ratio is different from the slide image ratio. */
.hero-slider{
  height:100svh!important;
  min-height:720px!important;
  max-height:none!important;
  overflow:hidden!important;
  background:#11172c!important;
}

@supports not (height:100svh){
  .hero-slider{height:100vh!important;}
}

.hero-slide picture img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  filter:saturate(1.04) contrast(1.02)!important;
}

.hero-slide.active picture img{
  animation:heroV25Move 7.2s cubic-bezier(.22,.72,.18,1) both!important;
}

@keyframes heroV25Move{
  from{transform:scale(1.024)}
  to{transform:scale(1.004)}
}

/* Local shading follows the caption side so text never blends into the photo. */
.hero-slide::after,
.hero-slide.caption-right::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
}

.hero-slide.caption-left::after{
  background:
    linear-gradient(90deg,rgba(8,11,30,.46) 0%,rgba(22,24,62,.24) 38%,rgba(22,24,62,.06) 58%,transparent 78%),
    linear-gradient(0deg,rgba(8,11,30,.32) 0%,transparent 38%)!important;
}

.hero-slide.caption-right::after{
  background:
    linear-gradient(270deg,rgba(8,11,30,.46) 0%,rgba(22,24,62,.24) 38%,rgba(22,24,62,.06) 58%,transparent 78%),
    linear-gradient(0deg,rgba(8,11,30,.32) 0%,transparent 38%)!important;
}

/* Default: dark photo area → white text on a dimensional glass panel. */
.hero-slide{
  --caption-bg:linear-gradient(135deg,rgba(15,18,50,.55),rgba(30,33,84,.38));
  --caption-border:rgba(255,255,255,.30);
  --caption-title:#ffffff;
  --caption-body:rgba(255,255,255,.94);
  --caption-small:#dfe9ff;
  --caption-accent:#f4dcff;
  --caption-text-shadow:0 2px 5px rgba(0,0,0,.55),0 12px 32px rgba(0,0,0,.32);
  --caption-box-shadow:0 28px 80px rgba(5,8,28,.32), inset 0 1px 0 rgba(255,255,255,.20);
}

/* Bright photo area → dark text on soft white glass. */
.hero-slide.caption-theme-light{
  --caption-bg:linear-gradient(135deg,rgba(255,255,255,.86),rgba(247,250,255,.68));
  --caption-border:rgba(255,255,255,.72);
  --caption-title:#171a42;
  --caption-body:#303659;
  --caption-small:#565fc9;
  --caption-accent:#7b2452;
  --caption-text-shadow:none;
  --caption-box-shadow:0 26px 70px rgba(22,25,62,.22), inset 0 1px 0 rgba(255,255,255,.55);
}

.hero-slide.caption-theme-light.caption-left::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.13) 34%,transparent 66%),
    linear-gradient(0deg,rgba(16,18,45,.16) 0%,transparent 42%)!important;
}

.hero-slide.caption-theme-light.caption-right::after{
  background:
    linear-gradient(270deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.13) 34%,transparent 66%),
    linear-gradient(0deg,rgba(16,18,45,.16) 0%,transparent 42%)!important;
}

.hero-caption{
  top:54%!important;
  width:min(575px,calc(100% - 84px))!important;
  padding:28px 31px 27px!important;
  border:1px solid var(--caption-border)!important;
  border-radius:24px!important;
  background:var(--caption-bg)!important;
  box-shadow:var(--caption-box-shadow)!important;
  color:var(--caption-title)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
}

.hero-caption::before{
  content:none!important;
  display:none!important;
}

.hero-location,
.hero-caption .eyebrow{
  color:var(--caption-small)!important;
  text-shadow:var(--caption-text-shadow)!important;
}

.hero-caption h1,
.hero-caption h2{
  color:var(--caption-title)!important;
  text-shadow:var(--caption-text-shadow)!important;
  max-width:560px!important;
  font-size:clamp(2.7rem,4.2vw,4.35rem)!important;
  line-height:1.08!important;
}

html[lang="th"] .hero-caption h1,
html[lang="th"] .hero-caption h2{
  line-height:1.13!important;
}

.hero-caption p{
  color:var(--caption-body)!important;
  text-shadow:var(--caption-text-shadow)!important;
  max-width:520px!important;
  font-size:.96rem!important;
  line-height:1.74!important;
  font-weight:600!important;
}

.hero-caption .btn.primary{
  color:#fff!important;
  background:linear-gradient(135deg,#2ba8eb,#596fdf 58%,#9740b7)!important;
  border-color:rgba(255,255,255,.26)!important;
  box-shadow:0 14px 30px rgba(42,66,154,.22)!important;
}

.hero-caption .btn.outline{
  color:var(--caption-title)!important;
  border-color:var(--caption-border)!important;
  background:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.hero-slide.caption-theme-light .hero-caption .btn.outline{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(87,91,158,.18)!important;
}

/* Keep the approved compact booking button style visible above the slide. */
.booking-dock.collapsed{
  bottom:max(16px,env(safe-area-inset-bottom))!important;
}

.booking-expand.booking-expand-classic{
  border-color:rgba(255,255,255,.58)!important;
  box-shadow:0 10px 26px rgba(13,20,70,.16)!important;
}

@media(max-width:900px){
  .hero-slider{
    height:100svh!important;
    min-height:680px!important;
  }

  .hero-slide.caption-right .hero-caption,
  .hero-caption{
    left:24px!important;
    right:auto!important;
    width:min(575px,calc(100% - 48px))!important;
  }
}

@media(max-width:640px){
  .hero-slider{
    height:100svh!important;
    min-height:650px!important;
  }

  .hero-slide.caption-left::after,
  .hero-slide.caption-right::after,
  .hero-slide.caption-theme-light.caption-left::after,
  .hero-slide.caption-theme-light.caption-right::after{
    background:
      linear-gradient(0deg,rgba(8,11,30,.56) 0%,rgba(18,22,58,.30) 42%,rgba(18,22,58,.06) 72%,transparent 100%)!important;
  }

  .hero-caption,
  .hero-slide.caption-right .hero-caption{
    left:14px!important;
    right:14px!important;
    bottom:96px!important;
    top:auto!important;
    transform:none!important;
    width:auto!important;
    padding:22px 20px 21px!important;
    border-radius:20px!important;
  }

  .hero-caption h1,
  .hero-caption h2{
    font-size:clamp(2.15rem,9.6vw,2.88rem)!important;
  }

  .hero-caption p{
    font-size:.86rem!important;
    line-height:1.62!important;
  }

  .hero-actions{
    margin-top:16px!important;
  }

  .hero-actions .btn{
    flex:1 1 auto!important;
    min-height:40px!important;
    padding:8px 12px!important;
  }
}