/* =============================================================================
 * SKOL — Texture Zoom
 *
 * Opt-in image-zoom-on-hover (and tap-on-mobile).
 *
 * USAGE: In the block editor, add `texture-zoom` to a block's Additional CSS
 * Classes (Advanced panel). Works on any block containing an <img> — single
 * image blocks, gallery items, GenerateBlocks carousel slides, etc.
 * ========================================================================== */

/* Constrain the image so the zoom happens inside the box, not bleeding out.
 * We target both the wrapper the user adds the class to AND common image
 * containers inside it (covers GenerateBlocks carousel + image blocks). */
.texture-zoom,
.texture-zoom .gb-image-wrapper,
.texture-zoom .wp-block-image,
.texture-zoom .swiper-slide,
.texture-zoom .gb-carousel-item,
.texture-zoom figure {
	overflow: hidden;
}

.texture-zoom img {
	display: block;
	transition: transform .45s ease;
	cursor: zoom-in;
	will-change: transform;
}

/* Desktop hover zoom + mobile tap-toggle (is-zoomed class added by JS) */
@media (hover: hover) {
	.texture-zoom img:hover {
		transform: scale(2);
	}
}

.texture-zoom img.is-zoomed {
	transform: scale(2);
	cursor: zoom-out;
}

/* Optional: tweak zoom level per instance by adding texture-zoom--3x for 3x,
 * texture-zoom--4x for 4x */
.texture-zoom--3x img:hover,
.texture-zoom--3x img.is-zoomed {
	transform: scale(3);
}
.texture-zoom--4x img:hover,
.texture-zoom--4x img.is-zoomed {
	transform: scale(4);
}