/* Mobile Tourism Redesign v2 — clean cinematic destination view. */
.thumbs { display: none !important; }

@media (max-width: 720px) {
  .gallery { background:#03090c !important; overflow:hidden; }

  /* Give the photo the largest share of the phone screen. */
  .gallery .hero {
    top:0 !important;
    bottom:auto !important;
    height:68vh !important;
    height:68dvh !important;
    background:#020609 !important;
  }

  .hero .gallery-main-image {
    width:100vw !important;
    height:68vh !important;
    height:68dvh !important;
    max-width:100vw !important;
    max-height:68vh !important;
    max-height:68dvh !important;
    object-fit:cover !important;
    object-position:center center !important;
    box-shadow:none !important;
  }

  .hero .gallery-backdrop {
    display:none !important;
  }

  .shade {
    background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,transparent 24%,transparent 70%,rgba(0,0,0,.40) 100%) !important;
  }

  /* Compact clean header: image remains unobstructed. */
  .gallery-top {
    top:max(9px,env(safe-area-inset-top)) !important;
    left:10px !important;
    right:10px !important;
    justify-content:space-between !important;
    pointer-events:none;
  }
  .gallery-top #backGlobe { pointer-events:auto; }
  .gallery-top #backGlobe {
    min-height:40px !important;
    padding:8px 12px !important;
    font-size:12px !important;
    background:rgba(2,11,15,.72) !important;
    border:1px solid rgba(119,238,235,.20) !important;
    backdrop-filter:blur(12px) !important;
  }
  #viewSpec { display:none !important; }

  /* Destination details live below the image, never over it. */
  .gallery-info {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:32vh !important;
    height:32dvh !important;
    max-height:none !important;
    padding:14px 18px calc(10px + env(safe-area-inset-bottom)) !important;
    display:block !important;
    background:linear-gradient(180deg,#071116 0%,#02090c 100%) !important;
    border-top:1px solid rgba(117,255,242,.10) !important;
    overflow:hidden !important;
  }

  .gallery-copy {
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .gallery-copy h1 {
    margin:0 0 5px !important;
    font-size:clamp(25px,7vw,32px) !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    max-width:100% !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gallery-copy .meta {
    margin:0 0 8px !important;
    font-size:12px !important;
    color:#6ff1ea !important;
  }
  .gallery-copy p {
    margin:0 !important;
    font-size:13px !important;
    line-height:1.55 !important;
    color:rgba(241,252,255,.88) !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .credit {
    margin-top:7px !important;
    font-size:9.5px !important;
    opacity:.60 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #counter { display:none !important; }

  /* Small navigation controls; swipe remains available. */
  .nav {
    top:34vh !important;
    top:34dvh !important;
    width:38px !important;
    height:38px !important;
    border-radius:999px !important;
    font-size:22px !important;
    background:rgba(0,8,12,.58) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:blur(8px) !important;
  }
  .prev { right:9px !important; }
  .next { left:9px !important; }

  /* Keep only AR/VR as compact floating actions near the bottom of the image. */
  .xr-controls {
    top:auto !important;
    bottom:calc(32vh + 14px) !important;
    bottom:calc(32dvh + 14px) !important;
    inset-inline-end:14px !important;
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
  }
  .xr-button {
    min-width:52px !important;
    min-height:38px !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    font-size:11px !important;
    background:rgba(0,15,21,.76) !important;
    backdrop-filter:blur(12px) !important;
  }

  .progress {
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:2px !important;
    z-index:8 !important;
  }

  /* No thumbnail strip: all 5 images keep rotating every 5 seconds. */
  #thumbs { display:none !important; }
}

@media (max-width:390px) {
  .gallery .hero { height:70vh !important; height:70dvh !important; }
  .hero .gallery-main-image { height:70vh !important; height:70dvh !important; max-height:70vh !important; max-height:70dvh !important; }
  .gallery-info { height:30vh !important; height:30dvh !important; }
  .xr-controls { bottom:calc(30dvh + 12px) !important; }
  .gallery-copy p { -webkit-line-clamp:2 !important; }
}

@media (max-width:720px) {
  .tour360-compass { display:none !important; }
  .tour360-controls { gap:0 !important; pointer-events:auto !important; }
  .tour360-controls #viewSpec { display:none !important; }
  .tour360-toggle {
    min-height:40px !important;
    padding:8px 11px !important;
    border-radius:999px !important;
    font-size:11px !important;
    background:rgba(2,11,15,.72) !important;
    backdrop-filter:blur(12px) !important;
  }
}