/**
 * Arvand News Featured Slider — reusable behavior layer.
 *
 * Functional states and transitions only. Elementor remains responsible for
 * typography, colors, spacing, borders, radius and image dimensions.
 *
 * Elementor setup (CSS classes only, no Elementor element IDs required):
 * - .news-feature-slider   Loop Grid wrapper (Elementor Pro Loop Grid)
 * - .news-feature-display  Large featured container
 *
 * Loop Item hooks:
 * - .news-feature-item, .news-thumb, .news-title, .news-excerpt,
 *   .news-date, .news-reading-time
 *
 * Featured container hooks:
 * - .news-feature-image, .news-feature-title, .news-feature-excerpt,
 *   .news-feature-date, .news-feature-reading-time
 */

.news-feature-slider,
.news-feature-display {
	--news-feature-slider-transition-duration: 0.45s;
}

.news-feature-slider .news-feature-item {
	cursor: pointer;
}

/*
 * Inactive thumbnails: grayscale and dimmed. The active item keeps full color
 * and normal opacity. Styles target the .news-thumb hook so both <img> and
 * background-image thumbnails are covered.
 */
.news-feature-slider .news-thumb {
	filter: grayscale(1);
	opacity: 0.72;
}

.news-feature-slider.is-initialized .news-thumb {
	transition:
		filter var(--news-feature-slider-transition-duration, 0.45s) ease,
		opacity var(--news-feature-slider-transition-duration, 0.45s) ease;
}

.news-feature-slider .news-feature-item.is-active .news-thumb {
	filter: grayscale(0);
	opacity: 1;
}

/* Keyboard focus for items made selectable by the script. */
.news-feature-slider .news-feature-item[role="button"]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/*
 * Featured display image/title act as links to the active news post.
 * Functional affordances only; Elementor keeps control of the visuals.
 */
.news-feature-display .news-feature-image[role="link"],
.news-feature-display .news-feature-title[role="link"] {
	cursor: pointer;
}

.news-feature-display .news-feature-image[role="link"]:focus-visible,
.news-feature-display .news-feature-title[role="link"]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/*
 * Featured image crossfade. The script stacks the incoming image above the
 * current one and fades the incoming layer in, so the outgoing image stays
 * visible underneath and the display never goes blank. The temporary layer is
 * removed once the fade completes, so nothing accumulates between swaps.
 */
.news-feature-display .news-feature-crossfade {
	position: absolute;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--news-feature-slider-transition-duration, 0.45s) ease;
	will-change: opacity;
	z-index: 1;
}

.news-feature-display .news-feature-crossfade.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.news-feature-slider.is-initialized .news-thumb,
	.news-feature-display .news-feature-crossfade {
		transition: none;
	}
}