/**
 * Loop Grid Custom - Styles
 *
 * Ensures the custom injected template item integrates seamlessly
 * into the CSS Grid layout as an equal grid item.
 */

/* Make the custom template item behave exactly like a loop item */
.e-loop-item-custom-template {
	/* Inherit all grid item properties from the parent grid */
	min-width: 0;
	min-height: 0;
}

/* Inner content will be handled by the widget's dynamic equal heights control */

/* --- Item Animation Logic --- */

/* By default, ensure our items are visible (acts as fallback if animation is removed) */
.lga-animated-item {
	opacity: 1;
	visibility: visible;
}

/* 1. Hide items initially ONLY if the parent explicitly has the animation class AND hasn't been animated yet */
.lga-has-item-animation:not(.lga-animated) .lga-animated-item {
	opacity: 0;
	visibility: hidden;
}

/* 2. When our IntersectionObserver detects the grid on screen, it adds .lga-animated */
.lga-has-item-animation.lga-animated .lga-animated-item {
	opacity: 1;
	visibility: visible;
	animation-name: var(--lga-item-animation);
	animation-duration: var(--lga-item-animation-duration, 1s);
	animation-fill-mode: both;
	/* Calculate delay: base delay + (index * stagger delay) */
	animation-delay: calc(
		var(--lga-item-animation-base-delay, 0ms) + 
		(var(--lga-item-index, 0) * var(--lga-item-animation-stagger, 0ms))
	);
}