/* Wraps an existing <img> so an overlay canvas can be positioned exactly
   over it without disturbing the image's own layout/flow. */
.wp-ripple-img-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.wp-ripple-img-wrap img {
  max-width: 100%;
  height: auto;
}

/* The injected canvas itself: always non-interactive so it never blocks
   clicks on real links/buttons already in the container — the container
   effects script listens on the container element instead. */
.wp-ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* The "content" mode canvas covers the whole container/column rather
   than just a wrapped image, and sits above the container's own
   children (still non-interactive) so its glow is visible over them. */
.wp-ripple-canvas-content {
  z-index: 999;
}