@import url("palette.css?v=3");
@import url("button-suite.css?v=4");

/* The scene has its own box; controls never cover its pixels. */
.viewer360-poster { position:relative; display:block; width:100%; aspect-ratio:16 / 9; min-height:240px; margin:0; padding:0; border:0; background:var(--palette-navy); cursor:pointer; overflow:hidden; }
.viewer360-poster[hidden] { display:none!important; }
.viewer360-poster .arrange-thumbnail,.viewer360-poster .arrange-thumbnail-visual { position:absolute; inset:0; width:100%; height:100%; }
.viewer360-poster img,.viewer360-poster canvas { display:block; width:100%; height:100%; object-fit:cover; }
.viewer360-poster .arrange-thumbnail-fallback { display:grid; place-items:center; width:100%; height:100%; color:var(--palette-sky); font:400 48px/1 system-ui,sans-serif; background:linear-gradient(145deg,rgba(var(--palette-white-rgb), 0.25),var(--palette-navy)); }
.viewer360-poster .arrange-thumbnail-badge { position:absolute; left:10px; bottom:10px; padding:4px 9px; border-radius:14px; color:var(--palette-white); background:rgba(var(--palette-navy-rgb), 0.8); font:700 14px/1.4 system-ui,sans-serif; }
.viewer360-ready > .video-play-button { display:none!important; }
.photo-player.viewer360-ready > img:not([hidden]) { position:absolute; inset:0; opacity:0; pointer-events:none; }
.photo-player.viewer360-active > img[hidden] { display:none!important; }
.viewer360-controls.viewer360-photo-controls { grid-template-columns:repeat(3,minmax(44px,1fr)); }
.photo-player:is(.viewer360-active,.viewer360-ready) { display:flex; flex-direction:column; align-items:stretch; position:relative; min-height:0; aspect-ratio:auto; background:var(--palette-black); line-height:normal; }
.gallery-item .photo-player { width:100%; height:100%; }
.gallery-item .photo-player > .viewer360-stage,
.gallery-item .photo-player > .viewer360-poster { flex:1 1 0; min-height:0; max-height:none; aspect-ratio:auto; }
.story-gallery .gallery-stage:has(.gallery-item.is-active img[data-projection="equirectangular"]) > .gallery-tap-zone { top:calc(50% - 22px); bottom:auto; height:44px; width:44px; z-index:8; background:rgba(var(--palette-white-rgb), 0.1); color:var(--palette-white); }
.story-gallery .gallery-stage:has(.gallery-item.is-active img[data-projection="equirectangular"]) > .gallery-prev-zone::after { content:'‹'; }
.story-gallery .gallery-stage:has(.gallery-item.is-active img[data-projection="equirectangular"]) > .gallery-next-zone::after { content:'›'; }
.story-presentation-media:has(> img[data-projection="equirectangular"]) { width:100%; height:100%; }
.viewer360-ready:has(> .viewer360-poster:not([hidden])) > video { position:absolute; inset:0; opacity:0; pointer-events:none; }
.viewer360-stage { position:relative; width:100%; min-height:240px; max-height:75svh; aspect-ratio:16 / 9; flex:none; background:var(--palette-black); }
.viewer360-stage[hidden] { display:none!important; }
.viewer360-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
:is(.video-player,.story-presentation-media):is(.viewer360-active,.viewer360-ready) { display:flex; flex-direction:column; align-items:stretch; position:relative; min-height:0; aspect-ratio:auto; background:var(--palette-black); line-height:normal; }
.viewer360-active > video[hidden] { display:none!important; }
.viewer360-controls { display:grid; grid-template-columns:repeat(4,minmax(44px,1fr)) minmax(68px,1.25fr); align-items:center; gap:6px; padding:8px; background:var(--palette-navy); color:var(--palette-white); line-height:1.3; flex:none; }
.viewer360-controls button { display:grid; place-items:center; min-width:0; min-height:44px; padding:6px; border:1px solid rgba(var(--palette-white-rgb), 0.5); border-radius:8px; background:rgba(var(--palette-white-rgb), 0.1); color:var(--palette-white); font:400 14px/1.3 system-ui,sans-serif; cursor:pointer; }
.viewer360-controls button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.viewer360-controls button[aria-pressed="true"] { background:rgba(var(--palette-white-rgb), 0.25); border-color:var(--palette-sky); }
.viewer360-controls input { grid-column:1 / -1; width:100%; min-width:0; max-width:100%; height:32px; margin:0; }
.viewer360-status { margin:0; padding:6px 10px; font:400 14px/1.4 system-ui,sans-serif; color:var(--palette-sky); background:var(--palette-navy); flex:none; }
.viewer360-status:empty { display:none; }
.viewer360-expanded { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; aspect-ratio:auto!important; z-index:12000; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); box-sizing:border-box; }
.gallery-item .viewer360-active > .viewer360-stage,
.story-presentation-media.viewer360-active > .viewer360-stage,
.viewer360-expanded > .viewer360-stage,
.gallery-item .viewer360-ready > .viewer360-poster,
.story-presentation-media.viewer360-ready > .viewer360-poster,
.viewer360-expanded > .viewer360-poster { flex:1 1 0; min-height:0; max-height:none; aspect-ratio:auto; }
.story-gallery .gallery-stage:has(.gallery-item.is-active video[data-projection="equirectangular"]) > .gallery-tap-zone { top:calc(50% - 22px); bottom:auto; height:44px; width:44px; z-index:8; background:rgba(var(--palette-white-rgb), 0.1); color:var(--palette-white); }
.story-gallery .gallery-stage:has(.gallery-item.is-active video[data-projection="equirectangular"]) > .gallery-prev-zone::after { content:'‹'; }
.story-gallery .gallery-stage:has(.gallery-item.is-active video[data-projection="equirectangular"]) > .gallery-next-zone::after { content:'›'; }
.story-presentation-media:has(> video[data-projection="equirectangular"]) { width:100%; height:100%; }
@media (max-width:600px) { .viewer360-stage,.viewer360-poster { aspect-ratio:4 / 3; } }