/**
 * Gallery PhotoSwipe Lightbox — integration styles.
 */

/* Signal that enriched images (gallery + standalone) are clickable to zoom. */
.wp-block-gallery[data-bmn-gps="1"] a[data-pswp-src],
.wp-block-image[data-bmn-gps-image="1"] a[data-pswp-src] {
	cursor: zoom-in;
}

/* Always-visible zoom affordance on standalone images, mirroring core's
   lightbox trigger button. The link is the positioning context so the
   button can sit in the top-right corner over the image. */
.wp-block-image[data-bmn-gps-image="1"] a[data-pswp-src] {
	position: relative;
	display: block;
}

.wp-block-image[data-bmn-gps-image="1"] .bmn-gps-zoom {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none; /* clicks pass through to the wrapping link */
	transition: background 0.2s ease;
}

.wp-block-image[data-bmn-gps-image="1"] a[data-pswp-src]:hover .bmn-gps-zoom,
.wp-block-image[data-bmn-gps-image="1"] a[data-pswp-src]:focus-visible .bmn-gps-zoom {
	background: rgba(0, 0, 0, 0.7);
}

.wp-block-image[data-bmn-gps-image="1"] .bmn-gps-zoom svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* Ensure the custom download button matches PhotoSwipe's other toolbar icons. */
.pswp__button--bmn-download-button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.pswp__button--bmn-download-button:hover,
.pswp__button--bmn-download-button:focus {
	opacity: 1;
}

.pswp__button--bmn-download-button .pswp__icn {
	/* Inherit PhotoSwipe's native icon size/position (from the 32x32 viewBox
	   and .pswp__icn rules). The white icon color and grey shadow stroke are
	   set on the two <path> children directly (see downloadIcon()). */
	fill: none;
	color: #fff;
}

/* Grey outline/halo path drawn behind the white icon. PhotoSwipe's
   .pswp__icn-shadow rule sets stroke #4f4f4f + fill none, but it also forces
   stroke-width to --pswp-icon-stroke-width (2px), which a presentation
   attribute cannot override. Because this is a LINE icon (not a filled
   glyph), a 2px grey stroke directly behind the 2px white line is fully
   hidden. Widen it here in CSS so the grey peeks out as a halo. */
.pswp__button--bmn-download-button .pswp__icn-shadow {
	stroke: var( --pswp-icon-stroke-color, #4f4f4f );
	stroke-width: 4px;
}

/* Caption shown at the bottom of the lightbox. */
.pswp__bmn-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	padding: 8px;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #fafafa;
	background: rgba( 0, 0, 0, 0.7 );
	pointer-events: none;
}

/* Respect reduced-motion preferences for the zoom transition. */
@media ( prefers-reduced-motion: reduce ) {
	.pswp--animate_opacity,
	.pswp__img,
	.pswp__zoom-wrap,
	.pswp__button--bmn-download-button {
		transition: none !important;
	}
}