/*
 * Virgo CMS - Panorama Viewer module styles.
 *
 * A local Pannellum-powered 360° equirectangular viewer. The stage is the
 * Pannellum render target; its height comes from --pv-height and its aspect
 * from --pv-aspect (the image's intrinsic width/height ratio). Interaction is
 * the .is-ready class (flipped by the frontend engine on Pannellum's load
 * event) so a half-loaded viewer never receives input; a loading overlay
 * (.panorama-viewer__loading) using the system's standard spinner is shown
 * until then, and Pannellum's own native load box is suppressed.
 *
 * The controls (zoom, fullscreen, compass) are custom buttons built by the
 * frontend engine and bound to the Pannellum API — Pannellum's native controls
 * are disabled in the engine config. Each button uses a Bootstrap Icons glyph
 * in a separate <i> element from the <button> background, so dark-mode recolor
 * works cleanly (the icon inherits color; no filter:invert that would also
 * invert the background). The compass needle is rotated every frame by the
 * engine reading Pannellum's yaw. Control positions use CSS logical properties
 * so they mirror correctly in RTL (driven by the root dir attribute).
 *
 * Runtime values come from CSS custom properties set inline by the renderer
 * (the only sanctioned inline-style use): --pv-height, --pv-radius, --pv-aspect.
 */

.panorama-viewer {
    --pv-height: 500px;
    --pv-radius: 12px;

    box-sizing: border-box;
    position: relative;
    width: 100%;
    border-radius: var(--pv-radius);
    overflow: hidden;
    background: #141a18;
}

/* frameless off → a thin border hugs the stage edge-to-edge (no padding, so the
 * image and the frame have zero gap). Shadow utilities (shadow-none / shadow-sm
 * / shadow / shadow-lg) apply to the root either way. */
.panorama-viewer--framed {
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.panorama-viewer *,
.panorama-viewer *::before,
.panorama-viewer *::after {
    box-sizing: border-box;
}

/* Stage: the Pannellum render target. Height is fixed; width fills the module
 * column. When --pv-aspect is set (the image's intrinsic ratio) the aspect-ratio
 * property constrains the rendered height (overriding --pv-height when the
 * column is narrow); otherwise the stage uses --pv-height alone. The stage is
 * also the positioning context for every overlay (loading, overlay caption,
 * controls, compass): pinning them here keeps them aligned to the image even
 * when a "below" caption flows beneath the stage and grows the root. */
.panorama-viewer__stage {
    position: relative;
    width: 100%;
    height: var(--pv-height);
    aspect-ratio: var(--pv-aspect, auto);
    background: #141a18 center / cover no-repeat;
}

/* Suppress Pannellum's native loading box (a translucent black square with an
 * orbiting-square spinner) and its XHR-driven progress/byte children. The
 * system's standard spinner (.panorama-viewer__loading below) replaces it.
 * Pannellum sets display:inline in JS, so !important is required. Scoped to
 * this module's viewer to avoid touching any other Pannellum instance. */
.panorama-viewer .pnlm-load-box,
.panorama-viewer .pnlm-lbox,
.panorama-viewer .pnlm-loading,
.panorama-viewer .pnlm-lbar,
.panorama-viewer .pnlm-lbar-fill,
.panorama-viewer .pnlm-lmsg {
    display: none !important;
}

/* Loading overlay: covers the stage while Pannellum fetches the equirectangular
 * image, replaced by the panorama on Pannellum's load event (the engine adds
 * .is-ready to the root). Sits above .pnlm-ui (z-index:1). Uses the system's
 * standard spinner SVG, colored via --primary-color. pointer-events:none so the
 * overlay never blocks Pannellum's first-interaction handling (e.g. lazy
 * gyroscope activation on first tap). */
.panorama-viewer__loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.panorama-viewer__loading-spinner {
    color: var(--primary-color);
}

/* Hide the overlay once Pannellum reports load (.is-ready) or fails (.has-error). */
.panorama-viewer.is-ready .panorama-viewer__loading,
.panorama-viewer.has-error .panorama-viewer__loading {
    display: none;
}

/* <noscript> static fallback image. Hidden once JS/Pannellum takes over. */
.panorama-viewer__fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.panorama-viewer.is-ready .panorama-viewer__fallback,
.panorama-viewer:not(:has(noscript)) .panorama-viewer__fallback {
    display: none;
}

/* Caption. The overlay variant sits as a bottom band over the stage; the below
 * variant flows beneath it. Logical properties keep RTL correct. The wrapper is
 * a flex column so the title and description stack with a small gap. */
.panorama-viewer__caption {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    color: #fff;
}

.panorama-viewer__caption--overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    /* Above Pannellum's render + UI layers (z-index:1) but below the interactive
     * controls (z-index:3) so the zoom/fullscreen buttons and compass stay
     * clickable and never hidden behind the caption gradient band. */
    z-index: 2;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    pointer-events: none;
}

.panorama-viewer__caption--below {
    padding: 10px 14px;
    background: #1d2522;
}

.panorama-viewer__caption-title {
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 600;
}

/* Description body. Clamped to 3 lines on both positions. The below variant
 * sits on the dark #1d2522 band so its text is dimmed white (rgba .7); the
 * overlay variant rides the black gradient so it is a brighter white (.9). */
.panorama-viewer__caption--below .panorama-viewer__caption-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.panorama-viewer__caption--overlay .panorama-viewer__caption-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Focus-visible outline for keyboard users reaching Pannellum controls. */
.panorama-viewer :focus-visible {
    outline: 2px solid var(--primary-color, #1d6b5e);
    outline-offset: 2px;
}

/* ============================================
   CUSTOM CONTROLS (zoom, fullscreen, compass)
   ============================================ */

/* The native Pannellum controls are disabled in the engine config; these
 * custom buttons replace them. Built by the engine and bound to the Pannellum
 * API (setHfov / toggleFullscreen / setYaw). Icon (<i>) and background
 * (<button>) are separate elements so dark-mode recolor is clean. Positions use
 * physical offsets + a [dir="rtl"] override so they mirror in RTL (logical
 * properties cannot inherit RTL through Pannellum's injected container). Scoped
 * to this module's viewer.
 *
 * Control + compass visuals mirror the panorama_hotspot module exactly (same
 * black translucent chips, sizes, hover, corner placement) so both panorama
 * modules render identical controls. There is no separate dark-mode palette:
 * the black-translucent surface reads correctly in both light and dark themes. */

/* Controls stack (zoom + fullscreen + rotate). Sits at the bottom-right in LTR
 * and the bottom-left in RTL. Physical offsets + an explicit [dir="rtl"] override
 * are used (NOT CSS logical properties): the controls live inside the Pannellum
 * stage, whose injected container does not carry the page dir, so logical
 * properties cannot reliably inherit the RTL state. The [dir] selector on the
 * module root (rendered with the language's text direction) is the source of
 * truth. pointer-events:none on the wrapper so the empty gaps between buttons
 * never swallow drag/pan input; each button re-enables its own hits. */
.panorama-viewer__controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

[dir="rtl"] .panorama-viewer__controls {
    right: auto;
    left: 12px;
}

.panorama-viewer__controls .panorama-viewer__btn {
    pointer-events: auto;
}

/* Button base — black translucent chip (mirrors panorama_hotspot). The Bootstrap
 * Icons glyph inherits color from the button, so no filter:invert is needed. */
.panorama-viewer__btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.panorama-viewer__btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.75);
}

.panorama-viewer__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.panorama-viewer__btn i {
    font-size: 18px;
    line-height: 1;
}

/* Compass — sits at the top-right in LTR and the top-left in RTL (physical
 * offsets + [dir="rtl"] override — same rationale as .panorama-viewer__controls:
 * logical properties cannot inherit RTL through Pannellum's injected container).
 * A round focal control; clicking returns the view to north (handled by the
 * engine). Slightly larger than the zoom/fullscreen chips so the needle reads
 * clearly. */
.panorama-viewer__compass {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
}

[dir="rtl"] .panorama-viewer__compass {
    right: auto;
    left: 12px;
}

.panorama-viewer__compass i {
    font-size: 22px;
    line-height: 1;
}

/* The needle: a Bootstrap Icons glyph rotated every frame by the engine via
 * style.transform (runtime DOM mutation, not static inline-style markup — the
 * same mechanism Pannellum uses internally). */
.panorama-viewer__compass-needle {
    display: inline-block;
    transform-origin: center center;
}

/* Controls and compass appear only once the panorama has loaded (hidden while
 * the loading overlay is shown and on error). */
.panorama-viewer:not(.is-ready) .panorama-viewer__controls,
.panorama-viewer:not(.is-ready) .panorama-viewer__compass {
    display: none;
}

/* Pannellum's native device-orientation button (.pnlm-orientation-button) is
 * auto-injected on orientation-capable devices (mobiles) when gyroscope support
 * is on. It has no config toggle to suppress it, and it duplicates the module's
 * own controls at the top-left, so it is hidden here. The module's gyroscope
 * handling (lazy activation on first tap) keeps working independently of this
 * button. */
.panorama-viewer .pnlm-orientation-button {
    display: none !important;
}