/**
 * The mark on an image you arrived at from a search result.
 *
 * Overrides the gallery plugin's :target rule, which is right in shape and
 * wrong in timing — it starts fading one second after the fragment resolves,
 * which on a lazy-loaded masonry page is well before the image has stopped
 * moving. Here it holds until the visitor takes control, then fades.
 *
 * The colour is deliberately not currentColor. The gallery's own rule inherits
 * the surrounding text colour, which on a light page is a thin dark line
 * against a dark photograph and reads as part of the image. This is a stated
 * accent that sits outside the frame, with a white halo so it survives against
 * a photograph of any brightness.
 */

.wp-block-imagesnippets-gallery .isg-item.iss-pinned,
.isg-item.iss-pinned {
	/* Beats the plugin's animated outline, which is already mid-fade. */
	animation: none !important;
	outline: var( --iss-pin-width, 3px ) solid var( --iss-pin-color, #e8590c ) !important;
	outline-offset: var( --iss-pin-offset, 4px ) !important;
	box-shadow: 0 0 0 calc( var( --iss-pin-offset, 4px ) + var( --iss-pin-width, 3px ) ) rgba( 255, 255, 255, 0.85 );
	border-radius: var( --isg-img-radius, 4px );
	/* Keeps the mark clear of a sticky header when the browser scrolls to it. */
	scroll-margin-top: 12vh;
	scroll-margin-bottom: 12vh;
}

.isg-item.iss-pinned--releasing {
	transition: outline-color 1s ease-out, box-shadow 1s ease-out;
	outline-color: transparent !important;
	box-shadow: 0 0 0 0 rgba( 255, 255, 255, 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.isg-item.iss-pinned--releasing {
		transition: none;
	}
}

@media ( prefers-contrast: more ) {
	.isg-item.iss-pinned {
		--iss-pin-width: 4px;
	}
}