/**
 * [fr_visuals] cross-fading slideshow — layout + fade only.
 *
 * The fade is class-driven (visuals.js toggles .is-active); the per-image hold and
 * the order are owned by the JS, so the first image shows immediately and the next
 * only fades in after the hold. The image credit rides on the <img> title attribute
 * (a hover tooltip), so there is no visible caption to lay out.
 *
 * Tunables (override on .fr-visuals or a parent):
 *   --fr-visuals-ratio : image aspect ratio, width / height. Default 2 / 3 (portrait).
 *   --fr-visuals-fade  : cross-fade duration. Default 1.2s.
 * Per-image hold is set with the shortcode's `seconds` attribute (default 4).
 */
.fr-visuals {
	--fr-visuals-ratio: 2 / 3;
	--fr-visuals-fade: 1.2s;
	width: 100%;
}

/* All slides share one grid cell, so they stack and cross-fade without needing an
   absolute height; the cell sizes to the slides (identical media ratio = stable). */
.fr-visuals__stage {
	display: grid;
}

.fr-visuals__slide {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transition: opacity var(--fr-visuals-fade) ease;
}

/* The active slide (and the no-JS <noscript> fallback) is the visible one. */
.fr-visuals__slide.is-active,
.fr-visuals__slide--static {
	opacity: 1;
}

.fr-visuals__media {
	aspect-ratio: var(--fr-visuals-ratio);
	overflow: hidden;
}

.fr-visuals__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Reduced motion — visuals.js does not cycle; drop the fade too, just in case. */
@media (prefers-reduced-motion: reduce) {
	.fr-visuals__slide {
		transition: none;
	}
}