/* Pearl of Mangrove - responsive/static frontend hardening */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:clip}
body{min-width:0}
main,section,header,footer,.max-w-7xl,.max-w-5xl{min-width:0}
img,video,svg,iframe{max-width:100%}
iframe{width:100%}
a,p,h1,h2,h3,h4,span,strong{overflow-wrap:break-word}

/* Avoid the extra blank strip that the old mobile body padding created. */
@media (max-width:1023px){body{padding-bottom:0!important}}

/* 1024-1279px is too narrow for brand + 6 nav links + booking CTA.
   Keep the compact navigation until a true desktop width. */
@media (min-width:1024px) and (max-width:1279px){
  .site-header .max-w-\[1680px\]{height:5rem!important;gap:.8rem!important}
  .site-header nav.hidden.lg\:flex{display:none!important}
  .site-header .site-book-btn{display:none!important}
  [data-mobile-menu-toggle]{display:inline-flex!important}
  [data-mobile-menu].hidden{display:none!important}
  [data-mobile-menu]:not(.hidden){display:block!important}
  [data-mobile-menu]{max-height:calc(100dvh - 5rem);overflow-y:auto;background:rgba(255,255,255,.99);box-shadow:0 18px 42px rgba(15,23,42,.08)}
  .brand-title{font-size:1.05rem!important;letter-spacing:.08em!important;max-width:calc(100vw - 150px);overflow:hidden;text-overflow:ellipsis}
  .brand-subtitle{display:none!important}
  main>section:first-child:not(.hero-video-section){margin-top:5rem!important}
  .hero-video-section{padding-top:5rem!important}
}
@media (min-width:1280px){
  [data-mobile-menu-toggle],[data-mobile-menu]{display:none!important}
  .site-header nav.hidden.lg\:flex{display:flex!important}
  .site-header .site-book-btn{display:inline-block!important}
}

/* Tablet: keep content roomy without desktop-sized gaps/heights. */
@media (min-width:768px) and (max-width:1023px){
  main>section:first-child:not(.hero-video-section){margin-top:5rem!important}
  .hero-video-section{padding-top:5rem!important}
  .site-header .max-w-\[1680px\]{height:5rem!important}
  .gap-12,.lg\:gap-16,.lg\:gap-20{gap:2.25rem!important}
  .md\:space-y-32>:not([hidden])~:not([hidden]),.md\:space-y-40>:not([hidden])~:not([hidden]){margin-top:4.5rem!important}
}

/* Phones */
@media (max-width:767px){
  main>section:first-child:not(.hero-video-section){margin-top:4.65rem!important}
  .hero-video-section{padding-top:4.65rem!important}
  section{min-width:0}
  .max-w-\[1400px\],.max-w-\[1300px\],.max-w-\[1200px\],.max-w-\[1000px\],.max-w-\[900px\]{width:100%}
  #cms-rooms-list>div>div:first-child,#cms-tours-list>div>div:first-child{height:clamp(240px,72vw,330px)!important}
  #cms-featured-rooms .group>div:first-child{height:clamp(220px,68vw,290px)!important}
  .cms-builder-card-body{padding:1.1rem!important}
  .cms-builder-list-item,.cms-menu-card{min-width:0}
  .cms-builder-list-item img,.cms-menu-card img{flex:0 0 auto}
  .cms-builder-menu-row{align-items:flex-start;flex-wrap:wrap}
  footer .grid{row-gap:2.4rem!important}
}

@media (max-width:420px){
  .site-header>div{padding-left:.7rem!important;padding-right:.7rem!important}
  .brand-lockup{gap:.55rem!important}
  .brand-title{max-width:calc(100vw - 104px)!important}
  h1{font-size:clamp(2rem,10.5vw,2.8rem)!important}
  h2{font-size:clamp(1.8rem,9vw,2.45rem)!important}
}

/* Better touch targets and form behavior */
@media (hover:none),(pointer:coarse){
  button,a,input,select,textarea{touch-action:manipulation}
  .site-nav-link:hover::after{left:50%;right:50%}
}


/* v3 laptop / mid-size desktop refinement ---------------------------------
   1366px laptops are common. Keep the full desktop navigation there, but
   reduce brand/nav spacing so nothing feels squeezed or runs off-screen. */
@media (min-width:1280px) and (max-width:1439px){
  .site-header .max-w-\[1680px\]{height:5.25rem!important;gap:.8rem!important}
  .site-header>div{padding-left:1rem!important;padding-right:1rem!important}
  .brand-lockup{gap:.7rem!important}
  .brand-mark{width:50px!important;height:50px!important}
  .brand-mark img{width:47px!important;height:47px!important}
  .brand-title{font-size:1.16rem!important;letter-spacing:.075em!important;max-width:none!important}
  .brand-subtitle{font-size:.5rem!important;letter-spacing:.16em!important;margin-top:.25rem!important}
  .site-header nav.hidden.lg\:flex{gap:1.05rem!important}
  .site-nav-link{font-size:.64rem!important;letter-spacing:.115em!important;padding:.68rem 0!important}
  .site-book-btn{padding:.72rem 1.1rem!important;font-size:.63rem!important;letter-spacing:.14em!important}
}

/* Rooms page responsive hardening without changing the original UI layout. */
.room-row,.room-row>*{min-width:0}
.room-row-media img{display:block}
@media (min-width:1024px) and (max-width:1439px){
  .rooms-hero{height:clamp(330px,46vh,430px)!important;min-height:330px!important;padding-top:5.25rem!important}
  #cms-rooms-list{row-gap:0}
  .room-row{gap:2.5rem!important}
  .room-row-media{height:390px!important}
}
@media (min-width:768px) and (max-width:1023px){
  .rooms-hero{height:clamp(310px,44vh,390px)!important;min-height:310px!important;padding-top:5rem!important}
  .room-row-media{height:360px!important}
}
@media (max-width:767px){
  .rooms-hero{height:clamp(300px,48vh,390px)!important;min-height:300px!important;padding-top:4.65rem!important}
  .room-row{gap:1.65rem!important}
  .room-row-media{height:clamp(245px,72vw,330px)!important}
  #cms-rooms-list{--tw-space-y-reverse:0}
  #cms-rooms-list>:not([hidden])~:not([hidden]){margin-top:3.8rem!important}
}

/* v7 dropdown alignment refinement ---------------------------------------
   Keep the existing form/layout dimensions, but pull select text slightly
   toward the left so dropdown controls feel visually balanced everywhere. */
select:not([multiple]){
  text-align:left!important;
  text-align-last:left!important;
  direction:ltr!important;
  padding-left:.82rem!important;
  padding-right:2rem!important;
}
select:not([multiple]) option{
  text-align:left!important;
  direction:ltr!important;
}
@media (max-width:767px){
  select:not([multiple]){
    padding-left:.75rem!important;
    padding-right:1.85rem!important;
  }
}


/* POM live footer gallery */
.pom-live-gallery {
  position: relative;
  overflow: hidden;
  background: #0f172a;
}
.pom-live-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pom-live-gallery__cell {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #111827;
}
.pom-live-gallery__cell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.12));
}
.pom-live-gallery__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform: scale(1.015);
  transition: opacity 520ms ease, transform 7s ease;
}
.pom-live-gallery__cell:hover .pom-live-gallery__img {
  transform: scale(1.07);
}
.pom-live-gallery__img.pom-live-gallery__fade {
  opacity: .06;
  transform: scale(1.03);
}
.pom-about-story-card img,
.pom-about-mosaic img {
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.pom-about-story-card:hover img,
.pom-about-mosaic a:hover img {
  transform: scale(1.045);
}
@media (min-width: 768px) {
  .pom-live-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pom-live-gallery__cell { height: 190px; }
}
@media (min-width: 1280px) {
  .pom-live-gallery__cell { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .pom-live-gallery__img,
  .pom-about-story-card img,
  .pom-about-mosaic img { transition: none !important; }
}