/*
 * CILI: zoom into an artwork on its page (the owner's request of 2026-10-19, ADR-0023; WEB-700).
 *
 * The cover's link to the full-size image and PhotoSwipe 5.4.4's look (assets/vendor/photoswipe-5.4.4/photoswipe.css, loaded
 * before this file), in the site's tokens: the ink token for the ground (the lightbox is a stage scope, layout-mode.css: the
 * ink roles are the stage's inside it, so it stays dark in both modes, ADR-0045 D4), at 98% (the library's own opacity stays 1, assets/js/zoom.js),
 * grayscale controls, the site's line icons (inline SVG from lcr_icon(), cili/utillz/zoom.php), the small type for the counter.
 * Enqueued on an artwork's own page only. The library's own rules stay for what they do (the sliding, the zoom, the gestures);
 * every rule here is scoped under `.pswp` and wins over the library's by `html body`, whatever the order.
 */

/* ------------------------------------------------------------------------------------------- the cover's link */

html body .ulz-cover a.lcr-zoom-link {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--lcr-radius-picture);
	cursor: zoom-in;
}

html body .ulz-cover a.lcr-zoom-link:focus-visible {
	outline: var(--lcr-web-focus-ring) solid var(--lcr-color-ink);
	outline-offset: var(--lcr-space-4);
}

/* ------------------------------------------------------------------------------------------- the lightbox */

html body .pswp {
	--pswp-bg: color-mix(in srgb, var(--lcr-color-ink) 98%, transparent);
	--pswp-placeholder-bg: var(--lcr-color-ink-raised);
	--pswp-icon-color: var(--lcr-color-on-ink);
	--pswp-icon-color-secondary: var(--lcr-color-on-ink);
	--pswp-icon-stroke-color: var(--lcr-color-on-ink);
	--pswp-preloader-color: var(--lcr-color-on-ink-muted);
	--pswp-preloader-color-secondary: var(--lcr-color-on-ink);
	--pswp-error-text-color: var(--lcr-color-on-ink);
	font-family: var(--lcr-font-family-sans);
}

/* The controls: round, gray, 44 pixels, with the site's line icon at its icon size in the middle (the library draws filled
   32 pixel icons with a shadow outline; the site's are strokes). */
html body .pswp .pswp__top-bar {
	height: auto;
	padding: var(--lcr-space-12) var(--lcr-space-12) 0;
	align-items: center;
}

html body .pswp .pswp__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	margin: 0 0 0 var(--lcr-space-8);
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background: var(--lcr-color-ink-raised);
	box-shadow: none;
	color: var(--lcr-color-on-ink);
	opacity: 1;
}

html body .pswp .pswp__button:is(:hover, :active) {
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-on-ink-muted);
}

html body .pswp .pswp__button:focus-visible {
	outline: var(--lcr-web-focus-ring) solid var(--lcr-color-on-ink);
	outline-offset: var(--lcr-space-4);
}

html body .pswp .pswp__button--close {
	margin-right: 0;
}

html body .pswp .pswp__button .pswp__icn {
	position: static;
	flex: none;
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
	margin: 0;
	fill: none;
	color: var(--lcr-color-on-ink);
	transform: none;
}

/* Zoom shows "+" and, while the image is zoomed in, "-". */
html body .pswp .pswp__button--zoom .lcr-zoom-out,
html body .pswp.pswp--zoomed-in .pswp__button--zoom .lcr-zoom-in {
	display: none;
}

html body .pswp.pswp--zoomed-in .pswp__button--zoom .lcr-zoom-out {
	display: block;
}

html body .pswp .pswp__button--arrow {
	top: 50%;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	margin-top: calc(var(--lcr-size-icon-button) / -2);
}

html body .pswp .pswp__button--arrow--prev {
	left: var(--lcr-space-16);
}

html body .pswp .pswp__button--arrow--next {
	right: var(--lcr-space-16);
}

html body .pswp .pswp__button--arrow:disabled {
	display: none;
}

/* The counter, "1 / 3": small type, on the ink ground, with no shadow. */
html body .pswp .pswp__counter {
	height: auto;
	margin: 0 auto 0 var(--lcr-space-8);
	color: var(--lcr-color-on-ink);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-type-small-font-weight);
	line-height: var(--lcr-type-small-line-height);
	text-shadow: none;
	opacity: 1;
}

/* The owner's watermark over the picture, as Heilz's gallery popup lays it (assets/css/layout-artwork.css). */
html body .pswp .lcr-zoom-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	max-width: 25%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
}

html body .pswp .lcr-zoom-watermark img {
	display: block;
	max-width: 100%;
}

/* The picture's corners, as the artwork's own page draws them. */
html body .pswp .pswp__img {
	border-radius: var(--lcr-radius-picture);
}

/* No motion: the library already turns its own transitions off for this preference; the button hovers follow. */
@media (prefers-reduced-motion: reduce) {
	html body .pswp .pswp__button {
		transition: none;
	}
}