/**
 * Camera Health Monitoring Carousel Mini - frontend styles
 *
 * Compact, carousel-only variant sized to live inside a column: cross-fading
 * images with the radial graphic + headline anchored bottom-left. No static
 * content panel. The first slide is marked active server-side, so it shows
 * even before JS runs. Dot navigation is inserted after the carousel by the
 * frontend script.
 */

.wp-block-critical-hit-camera-health-carousel-mini {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: #121824;
	border-radius: var(--medium-border-radius, 12px);
}

/* --- Images (bottom layer, cross-fade) ------------------------------------ */

.camera-health-carousel-mini .chcm-images {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.camera-health-carousel-mini .chcm-image {
	position: absolute;
	inset: 0;
	margin: 0;
	margin-bottom: 0 !important;
	opacity: 0;
	transition: opacity var(--chc-transition, 800ms) ease-in-out;
}

.camera-health-carousel-mini .chcm-image.is-active {
	opacity: 1;
}

/* Absolute + inset keeps the image flush even when theme or plugin CSS
   forces img { height: auto }. Imagify may wrap the img in a <picture>. */
.camera-health-carousel-mini .chcm-image picture,
.camera-health-carousel-mini .chcm-image img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Shim (solid #121824 at the bottom fading upward) ---------------------- */

.camera-health-carousel-mini .chcm-shim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to top, #121824 0%, rgba(18, 24, 36, 0) 55%);
}

/* --- Content (radial graphic + headline, slides up from the bottom) -------- */

.camera-health-carousel-mini .chcm-contents {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
}

.camera-health-carousel-mini .chcm-content {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(0.75rem, 1.5vw, 1rem);
	padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
	opacity: 0;
	transform: translateY(115%);
	transition:
		transform var(--chc-transition, 800ms) cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity var(--chc-transition, 800ms) ease;
}

.camera-health-carousel-mini .chcm-content.is-active {
	opacity: 1;
	transform: translateY(0);
}

.camera-health-carousel-mini .chcm-radial {
	flex: 0 0 auto;
	width: clamp(40px, 4vw, 56px);
}

.camera-health-carousel-mini .chcm-radial svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.camera-health-carousel-mini .chcm-headline {
	margin: 0;
	color: #fff;
	font-weight: 800;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* --- Dot navigation (built by the frontend script, sits below the block) --- */
/* Inline important styles from the script do the heavy lifting; these rules
   are a fallback layer with the same values. */

.chcm-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 16px auto 0;
}

.chcm-dots .chcm-dot {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	flex: 0 0 10px !important;
	width: 10px !important;
	height: 10px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(18, 24, 36, 0.35) !important;
	background-color: rgba(18, 24, 36, 0.35) !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 250ms ease;
}

.chcm-dots .chcm-dot.is-active {
	background: #121824 !important;
	background-color: #121824 !important;
}

/* --- Radial graphic ring rotation (camera-lens effect) --------------------- */

.camera-health-carousel-mini .chcm-radial .ring-arcs,
.camera-health-carousel-mini .chcm-radial .ring-ticks,
.camera-health-carousel-mini .chcm-radial .ring-wedges,
.camera-health-carousel-mini .chcm-radial .ring-mid,
.camera-health-carousel-mini .chcm-radial .ring-outer {
	transform-box: view-box;
	transform-origin: 194.92px 195.19px;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.camera-health-carousel-mini .chcm-radial .ring-arcs {
	animation-name: chcm-spin-cw;
	animation-duration: 22s;
}

.camera-health-carousel-mini .chcm-radial .ring-ticks {
	animation-name: chcm-spin-ccw;
	animation-duration: 38s;
}

.camera-health-carousel-mini .chcm-radial .ring-wedges {
	animation-name: chcm-spin-cw;
	animation-duration: 55s;
}

.camera-health-carousel-mini .chcm-radial .ring-mid {
	animation-name: chcm-spin-ccw;
	animation-duration: 75s;
}

.camera-health-carousel-mini .chcm-radial .ring-outer {
	animation-name: chcm-spin-cw;
	animation-duration: 95s;
}

/* Don't animate radials on hidden slides. */
.camera-health-carousel-mini .chcm-content:not(.is-active) .chcm-radial g {
	animation-play-state: paused;
}

@keyframes chcm-spin-cw {
	to {
		transform: rotate(360deg);
	}
}

@keyframes chcm-spin-ccw {
	to {
		transform: rotate(-360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.camera-health-carousel-mini .chcm-image,
	.camera-health-carousel-mini .chcm-content {
		transition: none;
	}

	.camera-health-carousel-mini .chcm-radial g {
		animation: none;
	}
}