/* ==========================================================================
   IMAGE HOVER MAGNIFY LENS SPECIFICATION
   ========================================================================== */

.lens {
    position: absolute;
    border: 3px solid #000000;
    border-radius: 50%;
    width: 140px; /* Lens width */
    height: 140px; /* Lens height */
    overflow: hidden;
    cursor: none; /* Hide default cursor so user focuses purely on magnification */
    z-index: 9999 !important; /* Ensure it stays cleanly stacked on top of post layout grids */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Smooth shadow depth for premium UI card pop */
    
    /* Crucial: Prevents the magnified lens from hijacking cursor pointer events */
    /* This stops the dynamic hover flicker bug from ever happening! */
    pointer-events: none !important; 
    transition: opacity 0.15s ease-in-out;
}

/* ==========================================================================
   PARENT CONTAINER OVERFLOW FIXES (EDGE COVERAGE)
   ========================================================================== */

/* Force parent containers to show overflow so the lens is never clipped at image borders */
.entry-content,
.post-content,
.single-post article,
.page-content,
.gridmode-posts-content,
.gridmode-posts-grid .template-parts {
    overflow: visible !important;
}

/* WordPress image wrappers (figure, anchor tags, picture elements, and list images)
   frequently use rigid boundary clipping. We force them to show overflow.
*/
.wp-block-image,
figure,
picture,
.gridmode-list-post-image,
.gridmode-grid-post-image,
.gridmode-grid-post-image-link,
.entry-content a {
    overflow: visible !important;
}

/* Universal Relative Parent Layout Fix:
   Forces the dynamically generated relative parent element (such as an inline anchor link <a>)
   to behave as an inline-block. This guarantees the parent wrapper perfectly fits the height 
   and width of the child image, allowing the lens to cover the absolute bottom 100% of the image.
*/
*[style*="position: relative"] {
    overflow: visible !important;
    display: inline-block !important; /* Wraps tightly around the physical image bounds */
    vertical-align: middle !important; /* Eliminates the inline baseline gap spacing at the bottom */
}