/* Safety Gallery Premium */

/* Inactive thumbnails dim slightly; the active one is full opacity with a
   secondary "ring" (outline so it never shifts layout). */
.le-safety-gallery-premium-block .le-sgp-thumb {
	opacity: 0.6;
}
.le-safety-gallery-premium-block .le-sgp-thumb:hover {
	opacity: 0.9;
}
.le-safety-gallery-premium-block .le-sgp-thumb.is-active {
	opacity: 1;
	outline: 2px solid var(--color-secondary);
	outline-offset: 1px;
}

/* Keep a clear keyboard focus indicator distinct from the active ring. */
.le-safety-gallery-premium-block .le-sgp-thumb:focus-visible,
.le-safety-gallery-premium-block .le-sgp-ctrl:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Lightbox visibility is driven by the [hidden] attribute, independent of the
   flex utilities used for centering. */
.le-safety-gallery-premium-block .le-sgp-lightbox {
	display: none;
}
.le-safety-gallery-premium-block .le-sgp-lightbox:not( [hidden] ) {
	display: flex;
}

/* Lock background scroll while the lightbox is open. */
html.le-sgp-lock {
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.le-safety-gallery-premium-block .le-sgp-thumb,
	.le-safety-gallery-premium-block .le-sgp-ctrl {
		transition: none;
	}
}