/**
 * Click to Zoom — Insights article images
 *
 * Adapted in-theme from the Osmo "Click to Zoom (Basic)" resource. Motion is
 * driven by assets/js/click-zoom.js (GSAP, already loaded site-wide). Enqueued
 * only on single posts — see ad_enqueue_click_zoom() in functions.php.
 *
 * The overlay's padding is load-bearing: the script reads it to work out how
 * large the zoomed image may grow. Change the padding, change the max zoom.
 */

/* Zoomable images. The cursor is the affordance for pointer users; the script
   additionally promotes each image to a real keyboard target. */
[data-click-zoom-article] img,
img[data-click-zoom],
[data-click-zoom] img {
	cursor: zoom-in;
}

[data-click-zoom-article] img:focus-visible,
img[data-click-zoom]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ── The overlay ───────────────────────────────────────────────────────────
   z-index clears the fixed header (1001) and the PE sticky CTA (1200) but
   stays under the skip link (100000), which must always win.
   display:none is the closed state — the script flips it to flex. */
.ad-click-zoom {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background-color: rgba(14, 14, 14, 0.92);
	cursor: zoom-out;
}

/* No border-radius here on purpose. Article images render square-cornered, and
   a radius on the zoomed copy would pop visibly on the first frame of the FLIP,
   since the animation starts from the source image's exact box. */
.ad-click-zoom > img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	user-select: none;
	-webkit-user-drag: none;
}

/* ── Close control ────────────────────────────────────────────────────────
   The resource ships no close button: Escape and a backdrop click are the only
   exits, which leaves the dialog with nothing focusable inside it. This is both
   the visible affordance and the focus target the script moves to on open.
   Shape and focus ring mirror the shared .ad-pause-btn control. */
.ad-click-zoom__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.5);
	color: var(--wp--preset--color--secondary);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.ad-click-zoom__close:hover {
	background: rgba(0, 0, 0, 0.7);
}

.ad-click-zoom__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-click-zoom__close svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
}

@media (prefers-reduced-motion: reduce) {
	.ad-click-zoom__close {
		transition: none;
	}
}