/* The photo page keeps the viewer bounded and the controls in normal flow. */
.panorama-page { background: #030308; }
.panorama-frame {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    color: var(--text);
}
.panorama-copy { max-width: 900px; margin: 0 auto 1.5rem; }
.panorama-back { display: inline-block; margin-bottom: .75rem; }
.panorama-frame h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; }
.panorama-intro { max-width: 60ch; margin: 0 0 .35rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); }
.panorama-caption { margin: 0; color: var(--muted); font-size: .95rem; }
.panorama-stage {
    position: relative;
    width: 100%;
    height: clamp(300px, 55svh, 640px);
    min-height: 300px;
    overflow: hidden;
    background: #090912;
    border: 1px solid #3b3c4d;
    border-radius: 10px;
    isolation: isolate;
}
.panorama-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: opacity .25s ease, visibility .25s ease;
}
.panorama-fallback[hidden] {
    opacity: 0;
    visibility: hidden;
}
#panorama {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    outline: 0;
}
#panorama:focus-visible { outline: 3px solid #f9e477; outline-offset: -3px; }
/* The global image rule must not cap Pannellum's render canvas. */
#panorama canvas { max-width: none; }
.panorama-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: 1rem 0 .65rem;
}
.panorama-controls button {
    min-width: 44px;
    min-height: 44px;
    padding: .55rem .85rem;
    color: #fff;
    background: #26283b;
    border: 1px solid #70758b;
    border-radius: 8px;
}
.panorama-controls button:hover,
.panorama-controls button[aria-pressed="true"] { background: #383d56; }
.panorama-controls button:disabled { opacity: .6; }
.panorama-zoom-group { display: inline-flex; gap: .65rem; }
.panorama-help,
.panorama-status,
.panorama-link,
.panorama-noscript { max-width: 900px; margin: .65rem auto 0; }
.panorama-help,
.panorama-status,
.panorama-noscript { color: var(--muted); font-size: .9rem; }
.panorama-status { min-height: 1.45em; }
.panorama-status:empty { display: none; }
.panorama-link { margin-top: 1rem; }
.panorama-noscript { padding: .8rem 1rem; border: 1px solid #3b3c4d; border-radius: 8px; }

/* Native fullscreen and the JavaScript fallback use the same viewport shell. */
.panorama-frame:fullscreen,
.panorama-frame.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow: auto;
    background: #030308;
}
.panorama-frame:fullscreen .panorama-copy,
.panorama-frame.is-expanded .panorama-copy,
.panorama-frame:fullscreen .panorama-help,
.panorama-frame.is-expanded .panorama-help,
.panorama-frame:fullscreen .panorama-link,
.panorama-frame.is-expanded .panorama-link { display: none; }
.panorama-frame:fullscreen .panorama-stage,
.panorama-frame.is-expanded .panorama-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
}
.panorama-frame:fullscreen .panorama-controls,
.panorama-frame.is-expanded .panorama-controls,
.panorama-frame:fullscreen .panorama-help,
.panorama-frame.is-expanded .panorama-help,
.panorama-frame:fullscreen .panorama-status,
.panorama-frame.is-expanded .panorama-status,
.panorama-frame:fullscreen .panorama-link,
.panorama-frame.is-expanded .panorama-link { flex: 0 0 auto; width: 100%; }
body.panorama-expanded { overflow: hidden; }

@media (max-width: 768px) {
    .panorama-frame { padding: 1.5rem 1rem 2.5rem; }
    .panorama-stage { height: max(280px, 55svh); min-height: 280px; }
}
@media (max-width: 768px) and (orientation: landscape) {
    .panorama-stage { height: min(460px, calc(100svh - 150px)); min-height: 220px; }
    .panorama-help, .panorama-status { margin-top: .35rem; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .panorama-fallback { transition: none; }
}