/* =========================================================
   V17 — Compact Standard Responsive Layout
   - Standard website proportions
   - Smaller typography
   - Reduced empty space
   - Compact room presentation
   ========================================================= */

:root{
  --header-h:84px!important;
  --standard-width:1180px;
  --compact-section:58px;
  --compact-section-mobile:40px;
  --compact-radius:14px;
  --compact-line:rgba(48,53,104,.13);
  --compact-shadow:0 8px 24px rgba(33,39,82,.08);
}

/* ---------- Global typography and spacing ---------- */
html{
  font-size:16px;
  scroll-padding-top:96px;
}

body{
  padding-bottom:88px!important;
  font-size:.94rem!important;
  line-height:1.68!important;
  overflow-x:hidden;
}

.container{
  width:min(var(--standard-width),calc(100% - 36px))!important;
}

h1,h2,h3{
  letter-spacing:-.012em;
}

h1{
  font-size:clamp(2.25rem,3.8vw,3.75rem)!important;
  line-height:1.10!important;
}

h2{
  font-size:clamp(1.72rem,2.7vw,2.55rem)!important;
  line-height:1.16!important;
}

h3{
  font-size:1.12rem!important;
  line-height:1.28!important;
}

p{
  margin-top:0;
  margin-bottom:1em;
}

.eyebrow{
  margin-bottom:9px!important;
  font-size:.63rem!important;
  letter-spacing:.18em!important;
}

.section,
.signature-section,
.editorial-dining{
  padding:var(--compact-section) 0!important;
}

.section-head{
  gap:34px!important;
  margin-bottom:24px!important;
}

.section-head p,
.intro-grid p,
.dining-grid p,
.editorial-grid p,
.feature-copy p{
  font-size:.94rem!important;
  line-height:1.72!important;
}

/* ---------- Header ---------- */
.site-header,
.site-header.scrolled{
  height:84px!important;
}

.hero-progress,
.site-header.scrolled + .hero-progress{
  top:84px!important;
}

.header-inner{
  width:min(1440px,calc(100% - 30px))!important;
  gap:17px!important;
}

.brand{
  width:250px!important;
  max-width:23vw!important;
}

.brand img,
.site-header.scrolled .brand img{
  max-height:68px!important;
}

.main-nav{
  gap:15px!important;
}

.main-nav a{
  font-size:.74rem!important;
}

.lang-switch,
.header-book{
  height:40px!important;
  font-size:.72rem!important;
}

.header-book{
  padding-inline:15px!important;
}

/* ---------- Home hero ---------- */
.hero-slider{
  height:clamp(570px,76svh,720px)!important;
  min-height:570px!important;
}

.hero-caption{
  top:50%!important;
  width:min(570px,calc(100% - 72px))!important;
}

.hero-caption h1,
.hero-caption h2{
  max-width:570px!important;
  font-size:clamp(2.45rem,4vw,3.85rem)!important;
  line-height:1.10!important;
}

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

.hero-caption p{
  max-width:530px!important;
  font-size:.92rem!important;
  line-height:1.70!important;
}

.hero-location{
  margin-bottom:10px!important;
  font-size:.58rem!important;
}

.hero-actions{
  gap:8px!important;
  margin-top:18px!important;
}

.btn{
  min-height:42px!important;
  padding:9px 17px!important;
  border-radius:9px!important;
  font-size:.80rem!important;
}

.hero-caption .btn{
  min-height:44px!important;
}

/* ---------- General page hero ---------- */
.page-hero{
  min-height:0!important;
  height:clamp(350px,45vh,460px)!important;
  padding-top:84px!important;
}

.page-hero .container{
  padding-bottom:44px!important;
}

.page-hero p{
  max-width:600px!important;
  font-size:.94rem!important;
  line-height:1.68!important;
}

/* ---------- Compact common grids/cards ---------- */
.intro-grid,
.dining-grid,
.editorial-grid{
  gap:38px!important;
}

.guide-grid,
.facility-grid,
.experience-grid,
.values-grid{
  gap:13px!important;
}

.guide-grid a,
.facility-grid article,
.experience-grid article,
.values-grid article{
  padding:20px!important;
  border-radius:13px!important;
}

.guide-grid p,
.facility-grid p,
.experience-grid p,
.values-grid p{
  font-size:.84rem!important;
  line-height:1.62!important;
}

.feature-split{
  min-height:480px!important;
}

.feature-copy{
  padding:50px clamp(28px,5vw,70px)!important;
}

.feature-image{
  min-height:390px;
}

.editorial-grid>img{
  border-radius:14px!important;
  box-shadow:var(--compact-shadow)!important;
}

.mosaic{
  gap:8px!important;
}

.mosaic img{
  border-radius:11px!important;
}

.photo-triptych{
  gap:9px!important;
}

.photo-triptych img{
  border-radius:11px!important;
}

/* ---------- Home room cards: normal standard cards ---------- */
.room-showcase-section{
  padding:var(--compact-section) 0!important;
}

.room-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}

.room-card{
  position:relative!important;
  display:flex!important;
  min-height:0!important;
  flex-direction:column;
  overflow:hidden;
  color:#25264f!important;
  border:1px solid var(--compact-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:var(--compact-shadow)!important;
}

.room-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 12px 28px rgba(33,39,82,.12)!important;
}

.room-card::after{
  display:none!important;
  content:none!important;
}

.room-card img{
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  object-fit:cover!important;
  transform:none!important;
}

.room-card:hover img{
  transform:none!important;
}

.room-card>div{
  position:static!important;
  inset:auto!important;
  display:flex;
  min-height:0!important;
  flex:1 1 auto;
  flex-direction:column;
  padding:16px 17px 17px!important;
  color:#25264f!important;
}

.room-card small{
  color:#6657c5!important;
  font-size:.64rem!important;
}

.room-card h3{
  margin:.28rem 0 .42rem!important;
  color:#25264f!important;
  font-size:1.20rem!important;
}

.room-card p{
  margin-bottom:12px!important;
  color:#687087!important;
  font-size:.80rem!important;
  line-height:1.58!important;
  -webkit-line-clamp:3!important;
}

.room-card span{
  margin-top:auto;
  color:#6657c5!important;
  font-size:.76rem!important;
}

/* ---------- Room page navigation ---------- */
.room-type-intro{
  padding:42px 0 32px!important;
}

.room-type-intro h2{
  margin-bottom:16px!important;
}

.room-type-nav{
  display:flex!important;
  width:100%;
  overflow-x:auto;
  border:1px solid var(--compact-line)!important;
  border-radius:12px;
  background:#fff;
  scrollbar-width:thin;
}

.room-type-nav a{
  flex:1 0 190px!important;
  min-height:58px!important;
  padding:10px 13px!important;
  border-top:0!important;
  border-left:1px solid var(--compact-line)!important;
  font-size:.72rem!important;
}

.room-type-nav a:first-child{
  border-left:0!important;
}

.room-type-nav span{
  font-size:.56rem!important;
}

/* ---------- Room page: standard contained two-column cards ---------- */
.room-detail-v16,
.room-detail-v16.reverse{
  display:grid!important;
  width:min(var(--standard-width),calc(100% - 36px))!important;
  min-height:0!important;
  margin:0 auto 24px!important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  overflow:hidden;
  border:1px solid var(--compact-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:var(--compact-shadow)!important;
}

.room-detail-v16.reverse .room-visual,
.room-detail-v16 .room-visual{
  order:1!important;
}

.room-detail-v16.reverse .room-copy,
.room-detail-v16 .room-copy{
  order:2!important;
}

.room-detail-v16 .room-visual{
  min-width:0;
  justify-content:flex-start!important;
  padding:20px!important;
  background:#f3f4f8!important;
}

.room-detail-v16 .room-main{
  max-height:475px;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  border-radius:11px!important;
  background:#e7e8ee!important;
  box-shadow:none!important;
}

.room-thumbs-v16{
  gap:6px!important;
  margin-top:8px!important;
  padding-bottom:2px!important;
}

.room-thumbs-v16 img{
  flex:0 0 70px!important;
  width:70px!important;
  height:50px!important;
  border-radius:6px!important;
  transform:none!important;
}

.room-thumbs-v16 img:hover,
.room-thumbs-v16 img:focus,
.room-thumbs-v16 img.active{
  transform:none!important;
}

.room-detail-v16 .room-copy{
  justify-content:flex-start!important;
  padding:28px 30px!important;
}

.room-detail-v16 .room-copy h2{
  margin-bottom:8px!important;
  font-size:clamp(1.55rem,2.2vw,2rem)!important;
}

.room-detail-v16 .room-copy>p{
  margin-bottom:12px!important;
  color:#646b82;
  font-size:.86rem!important;
  line-height:1.63!important;
}

.room-lead{
  margin-bottom:10px!important;
  font-size:.88rem!important;
}

.room-meta{
  gap:6px!important;
  margin:5px 0 14px!important;
}

.room-meta span{
  padding:5px 9px!important;
  font-size:.68rem!important;
}

.room-detail-v16 .room-copy>h3{
  margin:6px 0 8px!important;
  font-size:.90rem!important;
}

.amenity-list{
  display:grid;
  margin:0 0 15px!important;
  padding-left:18px!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:22px;
  columns:auto!important;
  color:#697087!important;
  font-size:.76rem!important;
  line-height:1.55!important;
}

.room-policy{
  gap:8px!important;
  margin:14px 0!important;
}

.room-policy section{
  padding:12px 13px!important;
  border-radius:10px!important;
}

.room-policy h3{
  margin-bottom:4px!important;
  font-size:.74rem!important;
}

.room-policy p{
  font-size:.70rem!important;
  line-height:1.53!important;
}

.room-book-button{
  min-height:40px!important;
  margin-top:2px!important;
}

.room-note{
  margin-top:10px!important;
  font-size:.68rem!important;
  line-height:1.45!important;
}

/* ---------- FAQ, gallery, contact, booking ---------- */
.faq h2{
  margin-bottom:18px!important;
}

.faq-grid{
  gap:9px!important;
}

.faq details{
  padding:0 14px!important;
  border-radius:11px!important;
}

.faq summary{
  padding:14px 0!important;
  font-size:.84rem!important;
}

.faq details p{
  margin-bottom:14px!important;
  font-size:.80rem!important;
}

.gallery-filters{
  margin-bottom:20px!important;
}

.gallery-filters button{
  padding:7px 12px!important;
  font-size:.74rem!important;
}

.gallery-grid{
  column-gap:8px!important;
}

.gallery-item{
  margin-bottom:8px!important;
}

.contact-grid,
.booking-page-grid{
  gap:18px!important;
}

.contact-card,
.map-card,
.booking-summary,
.direct-channels{
  padding:23px!important;
  border-radius:14px!important;
}

.map-card iframe{
  height:330px!important;
}

.check-times{
  margin-top:18px!important;
}

.check-times span{
  padding:12px!important;
}

/* ---------- Footer ---------- */
.site-footer{
  padding:48px 5vw 20px!important;
}

.footer-grid{
  gap:28px!important;
}

.footer-logo{
  width:min(280px,100%)!important;
  margin-bottom:13px!important;
  padding:9px 12px!important;
  border-radius:10px!important;
}

.footer-grid h3{
  margin-bottom:12px!important;
  font-size:1.02rem!important;
}

.footer-grid p{
  font-size:.80rem!important;
  line-height:1.62!important;
}

.footer-grid a{
  margin:6px 0!important;
  font-size:.80rem!important;
}

.footer-bottom{
  margin-top:30px!important;
  padding-top:14px!important;
  font-size:.68rem!important;
}

/* ---------- Booking bar compact ---------- */
.booking-dock{
  bottom:max(10px,env(safe-area-inset-bottom))!important;
}

.booking-shell{
  max-width:930px;
}

.booking-field{
  min-height:48px!important;
}

.booking-search{
  min-height:48px!important;
  padding-inline:18px!important;
  font-size:.78rem!important;
}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
  .container{
    width:min(100% - 30px,980px)!important;
  }

  .main-nav{
    gap:11px!important;
  }

  .main-nav a{
    font-size:.69rem!important;
  }

  .room-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .room-detail-v16,
  .room-detail-v16.reverse{
    width:min(100% - 30px,940px)!important;
    grid-template-columns:1fr!important;
  }

  .room-detail-v16 .room-main{
    max-height:560px;
  }

  .room-detail-v16 .room-copy{
    padding:26px 28px!important;
  }

  .room-type-nav a{
    flex-basis:180px!important;
  }

  .footer-grid{
    grid-template-columns:1.25fr 1fr 1fr!important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  :root{
    --header-h:76px!important;
  }

  body{
    padding-bottom:76px!important;
    font-size:.90rem!important;
  }

  .site-header,
  .site-header.scrolled{
    height:76px!important;
  }

  .hero-progress,
  .site-header.scrolled + .hero-progress{
    top:76px!important;
  }

  .container{
    width:calc(100% - 24px)!important;
  }

  .brand{
    width:190px!important;
    max-width:58vw!important;
  }

  .brand img,
  .site-header.scrolled .brand img{
    max-height:60px!important;
  }

  h1{
    font-size:clamp(2rem,9vw,2.65rem)!important;
  }

  h2{
    font-size:clamp(1.55rem,7vw,2rem)!important;
  }

  h3{
    font-size:1rem!important;
  }

  .section,
  .signature-section,
  .editorial-dining{
    padding:var(--compact-section-mobile) 0!important;
  }

  .hero-slider{
    height:clamp(560px,76svh,660px)!important;
    min-height:560px!important;
  }

  .hero-caption{
    left:14px!important;
    right:14px!important;
    bottom:108px!important;
    width:auto!important;
  }

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

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

  .hero-actions{
    gap:7px!important;
  }

  .hero-caption .btn{
    min-height:40px!important;
    padding:8px 13px!important;
    font-size:.72rem!important;
  }

  .page-hero{
    height:330px!important;
    padding-top:76px!important;
  }

  .page-hero .container{
    padding-bottom:30px!important;
  }

  .page-hero p{
    font-size:.84rem!important;
  }

  .intro-grid,
  .section-head,
  .dining-grid,
  .editorial-grid{
    gap:22px!important;
  }

  .room-card-grid{
    grid-template-columns:1fr!important;
    gap:13px!important;
  }

  .room-card{
    display:grid!important;
    grid-template-columns:116px minmax(0,1fr);
  }

  .room-card img{
    height:100%!important;
    min-height:148px!important;
    aspect-ratio:auto!important;
  }

  .room-card>div{
    padding:13px!important;
  }

  .room-card h3{
    font-size:1.03rem!important;
  }

  .room-card p{
    font-size:.74rem!important;
    -webkit-line-clamp:2!important;
  }

  .room-type-intro{
    padding:31px 0 24px!important;
  }

  .room-type-nav a{
    flex-basis:170px!important;
    min-height:52px!important;
    padding:8px 11px!important;
  }

  .room-detail-v16,
  .room-detail-v16.reverse{
    width:calc(100% - 20px)!important;
    margin-bottom:16px!important;
    border-radius:12px!important;
  }

  .room-detail-v16 .room-visual{
    padding:10px!important;
  }

  .room-detail-v16 .room-main{
    max-height:none;
    aspect-ratio:4/3!important;
    border-radius:8px!important;
  }

  .room-thumbs-v16 img{
    flex-basis:62px!important;
    width:62px!important;
    height:44px!important;
  }

  .room-detail-v16 .room-copy{
    padding:20px 16px!important;
  }

  .room-detail-v16 .room-copy h2{
    font-size:1.42rem!important;
  }

  .amenity-list{
    grid-template-columns:1fr!important;
    font-size:.74rem!important;
  }

  .room-policy{
    grid-template-columns:1fr!important;
  }

  .feature-split{
    min-height:0!important;
  }

  .feature-image{
    height:300px!important;
    min-height:0!important;
  }

  .feature-copy{
    padding:38px 20px!important;
  }

  .guide-grid a,
  .facility-grid article,
  .experience-grid article,
  .values-grid article{
    padding:16px!important;
  }

  .site-footer{
    padding:38px 18px 16px!important;
  }

  .footer-grid{
    gap:20px!important;
  }

  .footer-logo{
    width:min(240px,100%)!important;
  }

  .footer-bottom{
    margin-top:22px!important;
  }

  .contact-card,
  .map-card,
  .booking-summary,
  .direct-channels{
    padding:18px!important;
  }

  .map-card iframe{
    height:270px!important;
  }
}