/* A 360 photograph.
 *
 * The box is empty in the markup and stays empty where there is no WebGL: an
 * equirectangular frame drawn flat is a smear, so nothing is better than the
 * picture itself. What fills it is either a rectangle of the page's shared
 * canvas, which is fixed to the window and nothing to do with this box, or a
 * canvas of its own laid inside it.
 */

.ds-pano{
  position: relative;
  display: block;
  overflow: hidden;
}

/* In a column. The height comes from the aspect written on the element, or
   from a screen, so the box has one before the canvas arrives - a canvas has
   no size of its own and the column would otherwise be a line tall. */
.ds-pano-el{ width: 100% }

/* Behind a row. ds-row-bg already pins it to the four sides; this is only
   here so the rule above cannot give it a position of its own. */
.ds-row-pano{ position: absolute }

.ds-pano-own{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Where it is turned by hand.
 *
 * pan-y, so a finger going up and down the page still scrolls it and only a
 * sideways drag turns the sphere. Without it a touch anywhere on the row is
 * taken by the panorama and the page cannot be scrolled past it.
 *
 * The class goes on the row rather than on the layer where a row is what
 * carries the picture - the layer is behind the words and the pointer would
 * have to find the gaps between them. */
.ds-pano-grab{
  cursor: grab;
  touch-action: pan-y;
}

.ds-pano-grab.ds-pano-dragging{
  cursor: grabbing;
  user-select: none;
}