/* Phase 12 mobile production fixes: keep media visible, simplify controls, improve XR fallback. */
@media (max-width: 720px) {
  .topbar {
    top: max(6px, env(safe-area-inset-top));
    left: 6px;
    right: 6px;
    gap: 6px;
    align-items: flex-start;
  }

  .brand {
    max-width: 34vw;
    padding: 8px 9px;
    border-radius: 13px;
  }

  .brand b {
    display: block;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.15;
  }

  .brand .brand-translation,
  .brand small { display: none !important; }

  .tools {
    max-width: 64vw;
    gap: 4px;
    padding: 5px;
    border-radius: 13px;
  }

  .tools .iconbtn,
  .tools .mainbtn {
    min-width: 38px;
    min-height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 12px;
  }

  .tools .tourist-btn .btn-label { display: none !important; }
  #openDrawer { padding-inline: 9px; }

  /* The image owns the upper part of the phone. Information lives below it. */
  .gallery {
    overflow: hidden;
    background: #02080b;
  }

  .gallery .hero {
    top: 0;
    bottom: 36vh;
    bottom: 36dvh;
    overflow: hidden;
    background: #000;
  }

  .hero .gallery-main-image {
    width: 100vw !important;
    height: 64vh !important;
    height: 64dvh !important;
    max-width: 100vw !important;
    max-height: 64vh !important;
    max-height: 64dvh !important;
    object-fit: contain !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .hero .gallery-backdrop {
    inset: -14px !important;
    width: calc(100% + 28px) !important;
    height: calc(100% + 28px) !important;
    filter: blur(14px) brightness(.3) saturate(.8) !important;
  }

  .shade {
    background: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 26%, rgba(0,0,0,.08) 74%, rgba(0,0,0,.64) 100%) !important;
  }

  .gallery-top {
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    gap: 6px;
  }

  .gallery-top .chip {
    padding: 7px 9px;
    border-radius: 11px;
    font-size: 11px;
  }

  #viewSpec { display: none; }

  .gallery-info {
    left: 0 !important;
    right: 0 !important;
    bottom: 55px !important;
    height: 31vh;
    height: 31dvh;
    max-height: 31vh;
    max-height: 31dvh;
    display: block !important;
    padding: 7px 10px 4px;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2,8,11,.94), #02080b 32%, #02080b 100%);
  }

  .gallery-copy {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden;
  }

  .gallery-copy h1 {
    max-width: 100% !important;
    margin: 0 0 3px !important;
    font-size: clamp(20px, 6vw, 27px) !important;
    line-height: 1.08 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .gallery-copy .meta {
    margin-bottom: 4px !important;
    font-size: 11px !important;
    line-height: 1.25;
  }

  .gallery-copy p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .credit {
    margin-top: 3px !important;
    max-width: 100% !important;
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #counter { display: none !important; }

  .thumbs {
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    gap: 5px !important;
    padding: 0 8px !important;
  }

  .thumb {
    width: 54px !important;
    height: 39px !important;
    border-radius: 8px !important;
  }

  .nav {
    top: 31vh !important;
    top: 31dvh !important;
    width: 39px !important;
    height: 39px !important;
    font-size: 23px !important;
    background: rgba(0,0,0,.58) !important;
  }

  .prev { right: 7px !important; }
  .next { left: 7px !important; }

  /* VR/AR launch buttons stay visible and away from the destination title. */
  .xr-controls {
    top: max(58px, calc(env(safe-area-inset-top) + 50px)) !important;
    inset-inline-end: 8px !important;
    flex-direction: row !important;
    gap: 5px !important;
  }

  .xr-button {
    min-width: 46px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }

  .xr-header {
    top: max(7px, env(safe-area-inset-top)) !important;
    left: 7px !important;
    right: 7px !important;
    padding: 6px 7px 6px 10px !important;
  }

  .xr-header small { max-width: 68vw; }
  .xr-close { width: 38px; height: 38px; }

  .fallback.mode-ar .xr-ar-card {
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 52px));
    width: 94vw;
  }

  .fallback.mode-vr .xr-photo-strip,
  .fallback.mode-ar .xr-photo-strip {
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: 96vw;
    overflow-x: auto;
  }
}

@media (max-width: 390px) {
  .brand { display: none; }
  .tools { max-width: none; width: 100%; justify-content: flex-end; }
  .topbar { justify-content: flex-end; }
  .gallery-copy p { -webkit-line-clamp: 2; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .gallery .hero { bottom: 30vh; bottom: 30dvh; }
  .hero .gallery-main-image { height: 70vh !important; height: 70dvh !important; max-height: 70vh !important; max-height: 70dvh !important; }
  .gallery-info { height: 25vh; height: 25dvh; max-height: 25vh; max-height: 25dvh; bottom: 42px !important; }
  .gallery-copy p, .credit { display: none !important; }
  .thumb { width: 48px !important; height: 34px !important; }
}


/* Phase 12.1: media is server-hosted; no visitor install panel. */
#installMedia { display: none !important; }

/* Stable VR on a normal phone: portrait is a single immersive viewport. */
@media (max-width: 720px) and (orientation: portrait) {
  .fallback.mode-vr .xr-vr-stage { grid-template-columns: 1fr !important; }
  .fallback.mode-vr .xr-eye-right { display: none !important; }
  .fallback.mode-vr .xr-eye-left { border: 0 !important; }
  .fallback.mode-vr .xr-eye-left img {
    transform: translate3d(var(--xr-look-x), var(--xr-look-y), 0) scale(1.28) !important;
  }
}

/* In landscape the same fallback becomes stereoscopic for phone headsets. */
@media (max-width: 920px) and (orientation: landscape) {
  .fallback.mode-vr .xr-vr-stage { grid-template-columns: 1fr 1fr !important; }
  .fallback.mode-vr .xr-eye-right { display: block !important; }
}