/* nvite digital -- the design as it is painted outside an editor.

   Geometry arrives in %, type in cqw against the container query declared
   here, so one markup blob renders correctly as a 220px listing thumbnail, a
   640px checkout preview, a full-width guest page or a 1000px offscreen frame
   being screenshotted for a preview image.

   Shared by the storefront, the admin and the preview renderer so all three
   draw the same picture. Must stay in step with shared/js/canvas-core.js,
   which draws the same model inside the editors, and with the two copies of
   CanvasRenderer.php, which emit the markup these rules style. */

.nv-canvas {
  container-type: inline-size;
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  isolation: isolate;
}

/* The card's background picture. A layer rather than a CSS background,
   because it can be panned, zoomed and turned; z-index 0 and first in the
   markup keep it under every element, which is stored at z_index 0 or more. */
.nv-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}
.nv-bg img { display: block; }

.nv-el { position: absolute; }

.nv-text {
  display: flex;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.nv-text > span { display: block; width: 100%; }

.nv-frame-clip { width: 100%; height: 100%; overflow: hidden; position: relative; }
.nv-frame-clip img { display: block; }

/* The photo's box is the frame window and carries its pan, zoom and turn; the
   picture inside sits at the smallest rectangle that covers that window while
   keeping its own proportions. That is what object-fit: cover would have
   shown, except object-fit clips the overflow away for good -- here it is
   really there, and the frame's own mask is the only thing hiding it, which is
   what lets a host pan a photo back out of the crop later. */
.nv-frame-photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Centred on the window it covers. The width and height come from the markup,
   worked out from the picture's own pixel size, because no CSS length can ask
   an image how wide it is. max-width must be beaten explicitly or a global
   img { max-width: 100% } shrinks the overflow straight back off. */
.nv-frame-photo img {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: none; max-height: none;
}
.nv-frame-empty { background: rgba(27, 25, 23, .07); }

.nv-clipdef { position: absolute; width: 0; height: 0; pointer-events: none; }

.nv-frame-border {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.nv-object { display: grid; place-items: center; }
.nv-object svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* A design served as a picture rather than as markup. Carries .nv-canvas too,
   so it drops into the same containers and inherits the same width rule. */
.nv-preview { display: block; height: auto; object-fit: cover; }