/* Poster facade for the heavy 3D tour iframes (up to ~220 MB each).
 *
 * property_utils.tour_facade() renders:
 *   .tour-facade  > iframe.tour-frame  (no src — lazy_3d.js streams it in)
 *                 > .tour-poster       (snapshot JPEG or branded fallback + loading pill)
 * lazy_3d.js adds .tour-loaded to the wrapper when the tour document finishes
 * loading, which crossfades the poster away. The poster is a screenshot of the
 * rendered tour (tools/make_3d_posters.py) so the handoff is near-seamless.
 * Always on — intentionally NOT gated behind the .bot-updates preview toggle.
 */
.tour-facade{position:relative;overflow:hidden;background:#FBF8F1}
.tour-frame{width:100%;height:100%;border:none;display:block}

.tour-poster{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;background:#0E223C;transition:opacity .7s ease}
/* !important throughout: legacy mobile.css forces img{object-fit:contain;
   height:auto;position:static}, which shrank the poster to a small top-anchored
   strip inside the tall facade on phones */
.tour-poster-img{position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;object-fit:cover !important}

/* Mobile: the detail-page facade is 1000px tall by inline style — cap it, and
   until the visitor taps (touch devices load on tap, not on scroll — the live
   tour swallows touch-scroll), the poster is the whole experience. */
@media (max-width:640px){
  /* Size the card to the poster's OWN aspect (--poster-ar, set inline by
     property_utils.tour_facade) so the whole floor plan shows with no navy
     letterbox above/below it. Once the tour loads, expand to a comfortable
     viewing box for the 3D scene. */
  .tour-facade-detail{height:auto !important;max-height:none !important;
    aspect-ratio:var(--poster-ar, 16 / 9);min-height:150px}
  .tour-facade-detail .tour-poster-img{object-fit:contain !important}
  .tour-facade-detail.tour-loaded{aspect-ratio:auto !important;
    height:58vh !important;max-height:520px !important}
}

/* Touch devices: tour loads on tap (lazy_3d.js adds .tour-tap) so page scrolling
   never fights the 3D orbit controls */
.tour-tap{cursor:pointer}
.tour-tap .tour-spinner{display:none}
.tour-tap .tour-loading-pill::before{content:"▶";font-size:11px;color:#F0A800;margin-right:2px}

/* Fallback when no snapshot exists yet: quiet navy gradient + wireframe cube */
.tour-poster-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:#8FB0D4;
  background:linear-gradient(155deg,#0E223C 0%,#16385E 55%,#0B1B30 100%);
  font:600 13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase}
.tour-poster-fallback::before{content:"";width:54px;height:54px;border:2px solid #F0A800;
  border-radius:6px;transform:rotate(45deg) skew(12deg,12deg);opacity:.85}

.tour-loading-pill{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;
  background:rgba(0,42,82,.86);color:#fff;white-space:nowrap;
  font:600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.28);backdrop-filter:blur(6px)}
.tour-spinner{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#F0A800;
  animation:tour-spin .8s linear infinite}
@keyframes tour-spin{to{transform:rotate(360deg)}}

/* Desktop suite CARDS: the auto-cropped posters are often portrait, and
   cover-fit in the wide card box over-zoomed them. Contain shows the whole
   plan on the navy backdrop. Scoped so the detail page (taller box, looks
   right with cover) and every MOBILE view keep their current behavior. */
@media (min-width:641px){
  .tour-facade:not(.tour-facade-detail) .tour-poster-img{object-fit:contain !important}
}

/* Tour document finished loading -> fade the poster out, let clicks through */
.tour-facade.tour-loaded .tour-poster{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .tour-spinner{animation:none}
  .tour-poster{transition:none}
}