/**
 * QTVR panoramas (P4.7).
 *
 * Stage is the original HTML embed 353×179. Pannellum fills that box;
 * the cylindrical JPEG is also a horizontally scrolling strip (no JS,
 * prefers-reduced-motion, or if Pannellum fails). No upscaling (D5).
 */

.pano-figure {
  margin: 0;
}

.pano {
  --pano-w: 353;
  --pano-h: 179;
  width: calc(var(--pano-w) * 1px);
  max-width: 100%;
}

.pano-instruction {
  margin: 0 0 var(--space-2, 10px);
  font-family: var(--font-body, Geneva, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size-2, 13px);
}

.pano-stage {
  position: relative;
  width: calc(var(--pano-w) * 1px);
  max-width: 100%;
  aspect-ratio: var(--pano-w) / var(--pano-h);
  background: var(--color-bg, #000);
  overflow: hidden;
}

.pano-viewer {
  display: none;
  position: absolute;
  inset: 0;
}

.pano-strip {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-color: var(--color-gray-66, #666) var(--color-bg, #000);
}

.pano-strip.is-dragging {
  cursor: grabbing;
}

.pano-strip:focus-visible {
  outline: var(--focus-ring, 2px solid #ff0000);
  outline-color: var(--color-text, #ffcc99);
  outline-offset: 2px;
}

.pano-strip img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

html.js .pano--viewer .pano-viewer {
  display: block;
}

html.js .pano--viewer .pano-strip {
  visibility: hidden;
}

.pano-viewer .pnlm-container {
  background: var(--color-bg, #000);
  outline: none;
}

.pano-viewer .pnlm-container:focus-visible {
  outline: var(--focus-ring, 2px solid #ff0000);
  outline-color: var(--color-text, #ffcc99);
  outline-offset: 2px;
}

.pano-caption {
  margin-top: var(--space-1, 5px);
  font-family: var(--font-body, Geneva, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size-2, 13px);
}