/* Resort 7 Crai - v32 mobile viewport containment and hero repair */
html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:clip !important;
}
*,*::before,*::after{box-sizing:border-box}
img,video,iframe,svg,canvas{max-width:100%}
main,header,footer,section,article,nav,div{min-width:0}

@media (max-width:700px){
  :root{--side:clamp(18px,5.2vw,24px)}

  body,main,.site-header,.unit-hero,.special-hero,.about-hero{
    width:100% !important;
    max-width:100vw !important;
  }

  /* Header must never create a wider layout than the phone viewport. */
  .site-header{
    left:0 !important;
    right:0 !important;
    margin:0 !important;
    overflow:hidden;
  }
  .site-header > *{min-width:0}

  /* Accommodation hero: keep copy inside viewport and image full bleed. */
  .unit-hero{
    min-height:min(820px,88svh) !important;
    overflow:hidden !important;
  }
  .unit-photo,.unit-overlay{
    inset:0 !important;
    width:100% !important;
    max-width:100vw !important;
  }
  .unit-photo{
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
  .unit-copy{
    width:100% !important;
    max-width:none !important;
    padding:clamp(130px,24svh,210px) var(--side) 52px !important;
    overflow:hidden;
  }
  .unit-copy .eyebrow{
    display:block;
    max-width:100%;
    font-size:.72rem !important;
    line-height:1.45;
    letter-spacing:.13em !important;
  }
  .unit-copy h1{
    width:100%;
    max-width:100%;
    margin-top:10px !important;
    font-size:clamp(2.65rem,14vw,4.15rem) !important;
    line-height:.92 !important;
    overflow-wrap:normal;
    word-break:normal;
  }
  .unit-copy p{
    width:100%;
    max-width:34rem !important;
    margin-top:18px !important;
    font-size:clamp(.94rem,4vw,1.04rem) !important;
    line-height:1.65 !important;
  }
  .unit-copy .outline-btn{
    max-width:100%;
    min-width:0;
    padding:0 18px !important;
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }

  /* Contact / values / menu special heroes. */
  .special-hero{
    min-height:min(760px,78svh) !important;
    padding:118px var(--side) 64px !important;
    overflow:hidden !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
  .special-hero-inner{
    width:100% !important;
    max-width:100% !important;
    margin-inline:auto !important;
  }
  .special-hero .eyebrow{
    display:block;
    max-width:100%;
    font-size:.72rem !important;
    letter-spacing:.14em !important;
    line-height:1.4;
  }
  .special-hero h1{
    width:100%;
    max-width:100%;
    margin:14px auto 0 !important;
    font-size:clamp(2.65rem,14.5vw,4.35rem) !important;
    line-height:.94 !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .special-hero p{
    width:100%;
    max-width:34rem !important;
    margin:20px auto 0 !important;
    font-size:clamp(.94rem,4vw,1.04rem) !important;
    line-height:1.65 !important;
  }

  /* Long section headings should shrink rather than overflow. */
  .contact-details h2,
  .hotel-story-heading h2,
  .section-heading h2,
  .values-title h2,
  .master-unit-head h2{
    max-width:100%;
    font-size:clamp(2.15rem,10.5vw,3.35rem) !important;
    overflow-wrap:anywhere;
  }

  .contact-section,.master-gallery-section,.values-section,
  .hotel-story-section,.unit-gallery-section{
    max-width:100vw !important;
    overflow:hidden;
  }

  /* Fullscreen menu itself stays scrollable but never horizontally wider. */
  .ref-menu-overlay,.ref-menu-sheet,.ref-menu-top,.ref-menu-nav,.ref-menu-bottom{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
  }
  .ref-menu-sheet{overflow-x:hidden !important}
  .ref-menu-nav a,.ref-menu-subgrid a{max-width:100%;overflow-wrap:anywhere}
}

@media (max-width:390px){
  .unit-copy h1,.special-hero h1{font-size:clamp(2.35rem,14vw,3.35rem) !important}
  .unit-copy{padding-inline:18px !important}
  .special-hero{padding-inline:18px !important}
}

/* v33 — mobile fullscreen menu comfort + accommodation card containment */
@media (max-width:700px){
  /* The overlay stays edge-to-edge, while the dark sheet gets real breathing room. */
  .ref-menu-overlay{
    left:0 !important;
    right:0 !important;
    width:auto !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }

  .ref-menu-top{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    padding:0 10px !important;
    grid-template-columns:auto auto minmax(0,1fr) !important;
    column-gap:8px !important;
  }
  .ref-menu-top .ref-menu-close{
    grid-column:1 !important;
    min-width:46px !important;
    max-width:58px !important;
    padding:4px 6px !important;
    gap:0 !important;
    overflow:hidden;
  }
  .ref-menu-top .ref-menu-close b{display:none !important}
  .ref-menu-top .site-lang-switch-menu{
    grid-column:2 !important;
    justify-self:center !important;
    margin:0 !important;
    flex:0 0 auto;
  }
  .ref-menu-top .ref-menu-book{
    grid-column:3 !important;
    justify-self:end !important;
    width:clamp(132px,41vw,166px) !important;
    min-width:0 !important;
    max-width:166px !important;
    padding:0 10px !important;
    font-size:clamp(.56rem,2.9vw,.66rem) !important;
    letter-spacing:.065em !important;
    white-space:nowrap !important;
  }
  .ref-menu-overlay.ref-layout-menu-right .ref-menu-top .ref-menu-close{grid-column:1 !important;justify-self:start !important}
  .ref-menu-overlay.ref-layout-menu-right .ref-menu-top .ref-menu-book{grid-column:3 !important;justify-self:end !important}

  .ref-menu-sheet{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:calc(100dvh - 84px) !important;
    margin:0 10px 12px !important;
    padding:10px 14px 24px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .ref-menu-brand{
    padding:10px 0 16px !important;
    gap:12px !important;
  }
  .ref-menu-logo-img{
    width:clamp(72px,22vw,88px) !important;
    max-height:88px !important;
    margin:0 auto !important;
  }

  .ref-menu-nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 4px 8px !important;
  }
  .ref-menu-nav>a,
  .ref-menu-group-toggle{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    padding:0 8px !important;
    font-size:clamp(1rem,5vw,1.14rem) !important;
    line-height:1.2 !important;
  }

  /* One wide accommodation card per row on phones. */
  .ref-menu-subgrid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    max-height:330px !important;
    padding:10px 0 14px !important;
    margin:0 !important;
  }
  .ref-menu-group.closed .ref-menu-subgrid{
    max-height:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .ref-menu-subgrid a{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:0 40px 0 18px !important;
    font-size:clamp(.75rem,3.8vw,.87rem) !important;
    line-height:1.25 !important;
    letter-spacing:.045em !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  .ref-menu-subgrid a::after{right:14px !important}

  .ref-menu-bottom{
    width:100% !important;
    max-width:100% !important;
    flex-wrap:wrap !important;
    gap:6px 16px !important;
    padding:18px 4px 6px !important;
    text-align:center;
  }
}

@media (max-width:390px){
  .ref-menu-top{padding-inline:8px !important;column-gap:6px !important}
  .ref-menu-top .ref-menu-book{width:clamp(122px,40vw,148px) !important}
  .ref-menu-sheet{margin-inline:8px !important;padding-inline:12px !important}
  .ref-menu-nav{padding-inline:2px !important}
  .ref-menu-subgrid a{padding-left:14px !important;padding-right:34px !important;font-size:.76rem !important}
}