/*
 * Image Trail for Elementor
 * Structural CSS ported from the React Bits ImageTrail component's CSS,
 * parameterized via custom properties so Elementor controls can drive them.
 */

.image-trail-widget {
	--it-img-width: 190px;
	--it-aspect-ratio: 1.1;
	--it-border-radius: 15px;
	--it-bleed: 20px;

	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
}

.image-trail-widget .content {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 100;
	background: transparent;
	overflow: visible;
}

.image-trail-widget .content__img {
	width: var( --it-img-width );
	aspect-ratio: var( --it-aspect-ratio );
	border-radius: var( --it-border-radius );
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	overflow: hidden;
	will-change: transform, filter;
}

.image-trail-widget .content__img-inner {
	background-position: 50% 50%;
	background-size: cover;
	width: calc( 100% + var( --it-bleed ) );
	height: calc( 100% + var( --it-bleed ) );
	position: absolute;
	top: calc( -1 * var( --it-bleed ) / 2 );
	left: calc( -1 * var( --it-bleed ) / 2 );
}

.image-trail-empty-notice {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1em 2em;
	color: #6d7882;
	background: rgba( 0, 0, 0, 0.03 );
	font-size: 14px;
}