/* T88 — Desktop homepage hero based on the selected glass-card concept.
   Scope: homepage desktop only. Mobile T87 remains unchanged. */

@media (min-width:921px){
  body.unified-header-home .page-shell{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.unified-header-home #home,
  body.unified-header-home #home .home-page{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.unified-header-home #home .home-page{
    display:block !important;
  }

  /* Full-screen cinematic stage. */
  body.unified-header-home #home .hero.hero-photo.hero-video-mode{
    position:relative !important;
    width:100% !important;
    min-height:760px !important;
    height:100svh !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#020915 !important;
  }

  body.unified-header-home #home .hero-video-mode .hero-cinematic-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  body.unified-header-home #home .hero-waterfall-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 50% !important;
    filter:saturate(1.04) contrast(1.04) brightness(.96) !important;
  }

  /* Preserve the architecture and waterfall details while keeping text readable. */
  body.unified-header-home #home .hero-video-mode .hero-cinematic-media::after{
    background:
      radial-gradient(ellipse at 50% 44%,transparent 34%,rgba(0,5,12,.08) 72%,rgba(0,5,12,.28) 100%),
      linear-gradient(90deg,rgba(0,6,14,.16),transparent 16%,transparent 84%,rgba(0,6,14,.16)) !important;
  }

  body.unified-header-home #home .hero-video-mode .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(1,7,15,.12) 0%,
        rgba(1,7,15,.05) 25%,
        rgba(1,8,16,.13) 52%,
        rgba(1,8,16,.36) 73%,
        rgba(1,7,14,.66) 100%),
      radial-gradient(ellipse at 50% 48%,rgba(235,190,77,.055),transparent 34rem) !important;
  }

  body.unified-header-home #home .hero::before,
  body.unified-header-home #home .hero::after{
    display:none !important;
    content:none !important;
  }

  /* Header: transparent, quiet and aligned like the selected concept. */
  body.unified-header-home .unified-site-header{
    top:18px !important;
    right:42px !important;
    left:42px !important;
    min-height:68px !important;
    padding:0 clamp(36px,7vw,116px) 0 0 !important;
    justify-content:flex-start !important;
  }

  body.unified-header-home .unified-site-header::before{
    inset:-18px -42px -18px !important;
    background:linear-gradient(180deg,rgba(1,8,17,.52),rgba(1,8,17,.16) 60%,transparent) !important;
  }

  body.unified-header-home .unified-site-header .top-nav{
    margin:0 !important;
    gap:clamp(28px,3vw,52px) !important;
  }

  body.unified-header-home .unified-site-header .nav-link{
    font-size:clamp(.92rem,1.05vw,1.05rem) !important;
    padding-top:12px !important;
    color:rgba(255,255,255,.94) !important;
  }

  body.unified-header-home .unified-site-header .language-switcher{
    left:0 !important;
  }

  body.unified-header-home .unified-site-header .language-current{
    min-width:112px !important;
    height:48px !important;
    padding:0 19px !important;
    background:rgba(2,12,24,.18) !important;
    border-color:rgba(225,176,63,.72) !important;
  }

  /* Main identity block. */
  body.unified-header-home #home .hero-content{
    position:absolute !important;
    z-index:4 !important;
    top:clamp(105px,12vh,132px) !important;
    right:50% !important;
    bottom:auto !important;
    left:auto !important;
    width:min(900px,72vw) !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateX(50%) !important;
    text-align:center !important;
  }

  body.unified-header-home #home .hero-logo-stage{
    margin:0 auto !important;
    padding:0 !important;
  }

  body.unified-header-home #home .main-logo{
    width:clamp(168px,14.2vw,228px) !important;
    max-height:29vh !important;
    margin:0 auto 8px !important;
    object-fit:contain !important;
    filter:
      drop-shadow(0 14px 28px rgba(0,0,0,.68))
      drop-shadow(0 0 12px rgba(231,184,66,.20)) !important;
  }

  body.unified-header-home #home .hero-kicker{
    display:none !important;
  }

  body.unified-header-home #home .hero h1{
    width:100% !important;
    margin:0 auto 9px !important;
    padding:0 18px 4px !important;
    overflow:visible !important;
    white-space:nowrap !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(3.15rem,4.7vw,4.85rem) !important;
    font-weight:900 !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
    color:#efc55f !important;
    text-shadow:
      0 4px 0 rgba(109,63,9,.16),
      0 12px 26px rgba(0,0,0,.70),
      0 0 15px rgba(235,189,75,.16) !important;
  }

  body.unified-header-home #home .hero-subtitle{
    max-width:700px !important;
    margin:0 auto !important;
    color:#fff9ec !important;
    font-family:"Cairo","Tajawal",sans-serif !important;
    font-size:clamp(1rem,1.35vw,1.24rem) !important;
    font-weight:600 !important;
    line-height:1.7 !important;
    text-shadow:0 4px 16px rgba(0,0,0,.86) !important;
  }

  body.unified-header-home #home .hero-ornament{
    display:block !important;
    width:150px !important;
    height:22px !important;
    margin:10px auto 0 !important;
    opacity:.88 !important;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.48)) !important;
  }

  /* Three equal glass cards at the bottom of the first screen. */
  body.unified-header-home #home .primary-actions{
    position:absolute !important;
    z-index:4 !important;
    right:50% !important;
    bottom:clamp(38px,5.6vh,62px) !important;
    left:auto !important;
    width:min(940px,72vw) !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateX(50%) !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:clamp(16px,1.6vw,24px) !important;
  }

  body.unified-header-home #home .feature-card{
    position:relative !important;
    min-height:182px !important;
    height:182px !important;
    padding:20px 22px 24px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    overflow:hidden !important;
    border:1px solid rgba(234,189,74,.52) !important;
    border-radius:22px !important;
    background:
      linear-gradient(180deg,rgba(126,184,255,.10) 0%,rgba(88,148,222,.08) 20%,rgba(18,44,78,.12) 50%,rgba(8,22,40,.16) 100%),
      linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.025) 24%,rgba(255,255,255,0) 42%),
      linear-gradient(180deg,rgba(6,20,38,.06),rgba(6,20,38,.10)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 0 0 1px rgba(255,255,255,.03),
      inset 0 -18px 30px rgba(2,8,18,.07),
      0 16px 34px rgba(0,0,0,.18) !important;
    -webkit-backdrop-filter:blur(4px) saturate(120%) !important;
    backdrop-filter:blur(4px) saturate(120%) !important;
  }

  body.unified-header-home #home .feature-card::before{
    content:"" !important;
    position:absolute !important;
    inset:8px !important;
    border:1px solid rgba(166,219,255,.10) !important;
    border-radius:16px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018) 24%,transparent 40%),
      radial-gradient(circle at 18% 10%,rgba(176,226,255,.08),transparent 30%) !important;
    pointer-events:none !important;
  }

  body.unified-header-home #home .feature-card::after{
    content:"" !important;
    position:absolute !important;
    right:50% !important;
    bottom:13px !important;
    left:auto !important;
    width:64px !important;
    height:1px !important;
    transform:translateX(50%) !important;
    background:linear-gradient(90deg,transparent,#d9a936 42%,#f1c55c 50%,#d9a936 58%,transparent) !important;
    opacity:.78 !important;
  }

  body.unified-header-home #home .feature-card:hover{
    transform:translateY(-4px) !important;
    border-color:#f1c963 !important;
    background:
      linear-gradient(180deg,rgba(180,228,255,.15) 0%,rgba(145,205,255,.08) 15%,rgba(17,48,82,.34) 46%,rgba(8,24,42,.42) 100%),
      linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%),
      linear-gradient(180deg,rgba(6,20,38,.11),rgba(6,20,38,.18)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 22px 44px rgba(0,0,0,.30),
      0 0 20px rgba(88,160,255,.10),
      0 0 20px rgba(224,174,56,.08) !important;
  }

  body.unified-header-home #home .feature-card .icon{
    width:60px !important;
    height:60px !important;
    flex:0 0 60px !important;
    margin:0 auto 3px !important;
    display:block !important;
    background:none !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(235,185,58,.18)) !important;
  }

  body.unified-header-home #home .feature-card .icon-menu{
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
    background-image:url("assets/custom-icons/cutlery-outline-transparent.png") !important;
  }

  body.unified-header-home #home .feature-card .icon-hotel{
    width:74px !important;
    height:58px !important;
    flex-basis:58px !important;
    background-image:url("assets/custom-icons/bed-outline-transparent.png") !important;
  }

  body.unified-header-home #home .feature-card .icon-calendar{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
    background-image:url("assets/custom-icons/calendar-outline-transparent.png") !important;
  }

  body.unified-header-home #home .feature-card strong{
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#f2c55d !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(1.15rem,1.55vw,1.38rem) !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    text-shadow:0 4px 10px rgba(0,0,0,.56) !important;
  }

  body.unified-header-home #home .feature-card small{
    min-height:0 !important;
    max-width:250px !important;
    margin:0 auto !important;
    padding:0 !important;
    color:rgba(255,250,240,.92) !important;
    font-family:"Cairo","Tajawal",sans-serif !important;
    font-size:clamp(.78rem,.92vw,.90rem) !important;
    font-weight:500 !important;
    line-height:1.55 !important;
    text-shadow:0 3px 10px rgba(0,0,0,.68) !important;
  }

  body.unified-header-home #home .hero-scroll-cue{
    display:none !important;
  }
}

/* Keep the first screen balanced on shorter desktop/laptop displays. */
@media (min-width:921px) and (max-height:820px){
  body.unified-header-home #home .hero.hero-photo.hero-video-mode{
    min-height:700px !important;
  }

  body.unified-header-home #home .hero-content{
    top:88px !important;
  }

  body.unified-header-home #home .main-logo{
    width:165px !important;
    margin-bottom:4px !important;
  }

  body.unified-header-home #home .hero h1{
    font-size:clamp(2.85rem,4.2vw,4rem) !important;
    margin-bottom:5px !important;
  }

  body.unified-header-home #home .hero-subtitle{
    font-size:1rem !important;
    line-height:1.5 !important;
  }

  body.unified-header-home #home .hero-ornament{
    width:122px !important;
    height:18px !important;
    margin-top:6px !important;
  }

  body.unified-header-home #home .primary-actions{
    bottom:28px !important;
    width:min(880px,74vw) !important;
  }

  body.unified-header-home #home .feature-card{
    min-height:154px !important;
    height:154px !important;
    padding:16px 18px 22px !important;
    gap:5px !important;
  }

  body.unified-header-home #home .feature-card .icon{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }
  body.unified-header-home #home .feature-card .icon-hotel{width:47px !important;}
  body.unified-header-home #home .feature-card .icon-menu{width:35px !important;}

  body.unified-header-home #home .feature-card strong{
    font-size:1.08rem !important;
  }

  body.unified-header-home #home .feature-card small{
    font-size:.74rem !important;
    line-height:1.42 !important;
  }
}