/* Cover Image Rotator */

/* Crossfade: all background layers share the Cover class, so they already
   sit stacked beneath the overlay and content. We just animate opacity. */
.has-cir-rotator .wp-block-cover__image-background {
	transition: opacity var(--cir-fade, 800ms) ease-in-out;
}

/* Injected layers fill the Cover the same way the core one does. */
.has-cir-rotator .cir-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.has-cir-rotator .wp-block-cover__image-background {
		transition: none;
	}
}

/* ---- Editor sidebar: image manager ---- */
.cir-thumb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 8px 0;
}

.cir-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow: hidden;
	background: #f0f0f1;
}

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

.cir-thumb-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.cir-thumb-remove:hover {
	background: #d63638;
}

.cir-hint {
	color: #757575;
	font-size: 12px;
	margin: 8px 0;
}