/* T76 — Mobile-only hero showcase. Desktop remains exactly as T75. */
.hero-scroll-cue{display:none;}

@media (max-width:760px){
  :root{--t76-mobile-stage:100svh;}

  #home .hero.hero-photo.hero-video-mode{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:#020b15 !important;
    box-shadow:0 24px 58px rgba(0,0,0,.42) !important;
  }

  /* The video owns one complete phone screen, so its architecture and pool stay visible. */
  #home .hero-video-mode .hero-cinematic-media{
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    height:100vh !important;
    height:var(--t76-mobile-stage) !important;
    min-height:720px !important;
    background:#020813 url('assets/video/alnil-waterfall-hero-mobile-t75-poster.jpg') center center / cover no-repeat !important;
  }

  #home .hero-waterfall-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 50% !important;
    filter:saturate(1.01) contrast(1.015) brightness(.99) !important;
  }

  /* Very light readability layer: no colored side bands and no heavy bottom blackout. */
  #home .hero-video-mode .hero-cinematic-media::after{
    background:
      linear-gradient(180deg,
        rgba(1,7,14,.24) 0%,
        rgba(1,7,14,.07) 19%,
        rgba(1,7,14,.02) 46%,
        rgba(1,7,14,.05) 72%,
        rgba(1,7,14,.30) 100%) !important;
  }

  #home .hero-video-mode .hero-overlay{
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    height:100vh !important;
    height:var(--t76-mobile-stage) !important;
    min-height:720px !important;
    background:
      radial-gradient(circle at 50% 28%,rgba(1,8,17,.42) 0%,rgba(1,8,17,.18) 30%,transparent 56%),
      linear-gradient(180deg,rgba(1,7,14,.08),transparent 36%,transparent 76%,rgba(1,7,14,.23)) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #home .hero-video-mode .hero-cinematic-light,
  #home .hero-video-mode .hero-stars{
    top:0 !important;
    bottom:auto !important;
    height:100vh !important;
    height:var(--t76-mobile-stage) !important;
    min-height:720px !important;
  }

  #home .hero-video-mode .hero-cinematic-light{opacity:.26 !important;}
  #home .hero-video-mode .hero-stars{display:none !important;}

  /* Text occupies only the upper part, leaving the waterfall and pool open. */
  #home .hero-content{
    position:relative !important;
    z-index:4 !important;
    width:100% !important;
    min-height:100vh !important;
    min-height:var(--t76-mobile-stage) !important;
    min-height:max(100svh,720px) !important;
    margin:0 !important;
    padding:104px 18px 150px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    background:transparent !important;
  }

  #home .hero-logo-stage{
    width:100% !important;
    margin:10px 0 0 !important;
  }

  #home .main-logo{
    width:min(166px,42vw) !important;
    max-width:166px !important;
    margin:0 auto 4px !important;
    filter:
      drop-shadow(0 14px 24px rgba(0,0,0,.72))
      drop-shadow(0 0 14px rgba(2,12,22,.72)) !important;
  }

  #home .hero h1{
    max-width:94vw !important;
    margin:4px 0 7px !important;
    font-size:clamp(2rem,8.8vw,2.46rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
    color:#f1ca63 !important;
    text-shadow:
      0 8px 22px rgba(0,0,0,.82),
      0 0 10px rgba(1,8,17,.64) !important;
  }

  #home .hero-subtitle{
    max-width:310px !important;
    margin:0 auto !important;
    font-size:clamp(.88rem,3.8vw,.99rem) !important;
    font-weight:600 !important;
    line-height:1.7 !important;
    color:#fffaf1 !important;
    text-shadow:0 5px 16px rgba(0,0,0,.88) !important;
  }

  #home .hero-ornament{
    width:min(184px,48vw) !important;
    height:24px !important;
    margin-top:7px !important;
    opacity:.92 !important;
  }

  /* Small visual cue at the bottom of the video; it scrolls to the services. */
  html{scroll-behavior:smooth;}

  #home .hero-scroll-cue{
    position:absolute !important;
    z-index:6 !important;
    top:calc(var(--t76-mobile-stage) - 72px) !important;
    left:50% !important;
    width:48px !important;
    height:48px !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(229,181,65,.66) !important;
    border-radius:50% !important;
    background:rgba(3,15,27,.36) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    backdrop-filter:blur(8px) !important;
    text-decoration:none !important;
  }

  #home .hero-scroll-cue span{
    width:15px !important;
    height:15px !important;
    display:block !important;
    border-right:2px solid #fff6df !important;
    border-bottom:2px solid #fff6df !important;
    transform:translateY(-3px) rotate(45deg) !important;
  }

  /* Cards are a separate section after the complete video stage. */
  #home .primary-actions{
    position:relative !important;
    z-index:5 !important;
    width:calc(100% - 22px) !important;
    margin:-24px auto 0 !important;
    padding:16px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    border:1px solid rgba(222,175,62,.72) !important;
    border-radius:30px !important;
    background:
      radial-gradient(circle at 50% 0%,rgba(212,168,62,.07),transparent 14rem),
      linear-gradient(180deg,rgba(4,20,35,.97),rgba(2,12,23,.99)) !important;
    box-shadow:0 28px 60px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    backdrop-filter:blur(14px) !important;
    scroll-margin-top:82px !important;
  }

  #home .feature-card{
    width:100% !important;
    min-height:116px !important;
    padding:18px 88px 18px 18px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-content:center !important;
    justify-items:center !important;
    gap:7px !important;
    position:relative !important;
    direction:rtl !important;
    text-align:center !important;
    border:1px solid rgba(225,177,62,.48) !important;
    border-radius:21px !important;
    background:
      radial-gradient(circle at 100% 50%,rgba(212,168,62,.055),transparent 7rem),
      linear-gradient(180deg,rgba(7,27,45,.90),rgba(3,15,27,.96)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 24px rgba(0,0,0,.22) !important;
  }

  #home .feature-card::before{
    content:"" !important;
    position:absolute !important;
    top:17px !important;
    right:76px !important;
    bottom:17px !important;
    left:auto !important;
    width:1px !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,transparent,rgba(229,181,65,.72) 22%,rgba(229,181,65,.72) 78%,transparent) !important;
  }

  #home .feature-card::after{display:none !important;}

  #home .feature-card .icon{
    position:absolute !important;
    top:50% !important;
    right:20px !important;
    width:43px !important;
    height:43px !important;
    margin:0 !important;
    transform:translateY(-50%) !important;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.44)) !important;
  }

  #home .feature-card strong{
    width:100% !important;
    color:#efc65f !important;
    font-size:1.28rem !important;
    font-weight:900 !important;
    line-height:1.25 !important;
  }

  #home .feature-card small{
    width:100% !important;
    max-width:250px !important;
    padding:0 !important;
    color:#f1e8d9 !important;
    font-size:.84rem !important;
    font-weight:500 !important;
    line-height:1.6 !important;
  }

  #home .feature-card[data-view="booking"]{order:1 !important;}
  #home .feature-card[data-view="hotel"]{order:2 !important;}
  #home .feature-card[data-view="menu"]{order:3 !important;}

  /* The next homepage section follows the card panel naturally. */
  #home .booking-policies{margin-top:8px !important;}
}

@media (max-width:760px) and (max-height:760px){
  #home .hero-content{padding-top:90px !important;}
  #home .main-logo{width:min(145px,38vw) !important;}
  #home .hero h1{font-size:clamp(1.85rem,8.2vw,2.2rem) !important;}
  #home .hero-subtitle{font-size:.86rem !important;}
}

@media (max-width:380px){
  #home .hero-content{padding-inline:12px !important;}
  #home .main-logo{width:142px !important;}
  #home .hero h1{font-size:1.92rem !important;}
  #home .primary-actions{width:calc(100% - 14px) !important;padding:12px !important;}
  #home .feature-card{padding-left:12px !important;}
}