/* ============================================================
   Oz Carousel — front-end + shared styles (vertical layout)

   Tweakable values:
   --car-line     : outline color of the dots (black; white via block style).
   --car-blur     : strength of the frosted backdrop blur.
   --car-feather  : how far the frost fades in from each edge.
   ============================================================ */
.nuc-carousel {
	--car-line: #000;
	--car-blur: 9px;
	--car-feather: 34px;

	position: relative;
	width: 100%;             /* always fill the parent container */
	background: transparent; /* no fill of its own */
}

/* "White outline" block style (sidebar -> Styles). Default is black. */
.nuc-carousel.is-style-outline-white {
	--car-line: #fff;
}

/* Once initialised: dots column on the left, slides on the right. */
.nuc-carousel.is-initialized {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

/* ---- Frosted backdrop (two layers: feather mask + blur). */
.nuc-carousel__frost {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 var(--car-feather), #000 calc(100% - var(--car-feather)), transparent),
		linear-gradient(to bottom, transparent, #000 var(--car-feather), #000 calc(100% - var(--car-feather)), transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 var(--car-feather), #000 calc(100% - var(--car-feather)), transparent),
		linear-gradient(to bottom, transparent, #000 var(--car-feather), #000 calc(100% - var(--car-feather)), transparent);
	mask-composite: intersect;
}
.nuc-carousel__frost-blur {
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur( var(--car-blur) );
	backdrop-filter: blur( var(--car-blur) );
}

/* ---- Dots: a vertical, centered column down the LEFT side. */
.nuc-carousel__dots {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 14px;
	background: transparent;
}
/* Hollow ring. Selection is shown only by opacity (no size/thickness change). */
.nuc-carousel__dot {
	width: 9px;
	height: 9px;
	box-sizing: border-box;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--car-line);
	opacity: 0.2;            /* inactive */
	padding: 0;
	cursor: pointer;
	transition: opacity .15s ease;
}
.nuc-carousel__dot.is-active {
	opacity: 0.9;            /* selected */
}

/* ---- Slides window: fills the remaining width; height set by JS to the
        tallest slide; vertical sliding clipped here. */
.nuc-carousel__viewport {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
}
.nuc-carousel.is-initialized .nuc-carousel__viewport {
	overflow: hidden;
}

/* Hide the (empty) dots column until JS builds the dots (and in the editor,
   where the block intentionally shows slides stacked for editing). */
.nuc-carousel:not(.is-initialized) .nuc-carousel__dots {
	display: none;
}