/**
 * Infinite Slider — frontend styles.
 *
 * Slide sizing is driven by container query units so a slide can be a fraction
 * of the viewport without JavaScript measuring anything. The JS only moves the
 * track; layout stays in CSS.
 *
 * @package Upgrade\Infinite_Slider
 */

.uis {
	--uis-visible: 3;
	--uis-gap: 20px;
	--uis-fade: 60px;

	position: relative;
	width: 100%;
}

.uis__viewport {
	width: 100%;
	overflow: hidden;
}

.uis--horizontal .uis__viewport {
	container-type: inline-size;
}

/* Vertical needs `size` containment so 100cqb resolves, which in turn needs a
   height. Elementor's Slider Height control overrides this default. */
.uis--vertical .uis__viewport {
	height: 500px;
	container-type: size;
}

.uis__track {
	display: flex;
	gap: var(--uis-gap);
	align-items: stretch;
	will-change: transform;
}

.uis--horizontal .uis__track {
	flex-direction: row;
}

.uis--vertical .uis__track {
	flex-direction: column;
}

.uis__group {
	display: flex;
	flex: 0 0 auto;
	gap: var(--uis-gap);
	align-items: stretch;
}

.uis--horizontal .uis__group {
	flex-direction: row;
}

.uis--vertical .uis__group {
	flex-direction: column;
}

.uis__slide {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
}

.uis--horizontal .uis__slide {
	width: calc((100cqi - (var(--uis-visible) - 1) * var(--uis-gap)) / var(--uis-visible));
}

.uis--vertical .uis__slide {
	width: 100%;
	height: calc((100cqb - (var(--uis-visible) - 1) * var(--uis-gap)) / var(--uis-visible));
}

/* Without container query support, fall back to a fixed slide size rather than
   collapsing to nothing. */
@supports not (container-type: inline-size) {
	.uis--horizontal .uis__slide {
		width: 320px;
	}

	.uis--vertical .uis__slide {
		height: 240px;
	}
}

/* Fit media to slide.
 *
 * Slides in a row all stretch to the tallest one. An image left at its own
 * aspect ratio therefore ends short of the slide's bottom edge, and because
 * slide width scales with the window, that shortfall widens as the window does.
 * Filling the slide removes it.
 *
 * `object-fit` needs a definite height to fit into, so the Elementor container
 * chain between the slide and the image has to stretch first. `:where()` keeps
 * all of this at zero specificity, so anything set in the template itself still
 * wins.
 */

.uis--cover .uis__slide {
	overflow: hidden;
}

.uis--cover :where(
	.uis__slide > .elementor,
	.uis__slide > .elementor > .e-con,
	.uis__slide > .elementor > .e-con > .e-con-inner,
	.uis__slide > .elementor > .e-con > .e-con-inner > .e-con,
	.uis__slide .elementor-widget-image,
	.uis__slide .elementor-widget-image > .elementor-widget-container
) {
	height: 100%;
}

.uis--cover :where(
	.uis__slide .elementor-widget-image img,
	.uis__slide .uis__card-image
) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--uis-focal, center center);
}

/* The fallback card has no Elementor chain of its own. */

.uis--cover :where( .uis__slide .uis__card-media ) {
	flex: 1 1 auto;
	min-height: 0;
}

.uis--fade.uis--horizontal .uis__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--uis-fade), #000 calc(100% - var(--uis-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--uis-fade), #000 calc(100% - var(--uis-fade)), transparent 100%);
}

.uis--fade.uis--vertical .uis__viewport {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--uis-fade), #000 calc(100% - var(--uis-fade)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--uis-fade), #000 calc(100% - var(--uis-fade)), transparent 100%);
}

/* Fallback card, used when no skin template is selected. */

.uis__card {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.uis__card-link {
	display: flex;
	height: 100%;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.uis__card-media {
	overflow: hidden;
}

.uis__card-image {
	display: block;
	width: 100%;
	height: auto;
}

.uis__card-body {
	padding: 16px;
}

.uis__card-title {
	margin: 0 0 8px;
	font-size: 1.1em;
	line-height: 1.3;
}

.uis__card-excerpt {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5;
	opacity: 0.8;
}

/* Editor-only messages. */

.uis__notice {
	padding: 16px;
	border: 1px dashed var(--ukit-editor-notice-border, #b4b9c1);
	border-radius: 4px;
	color: var(--ukit-editor-notice-text, #6b7280);
	font-size: 13px;
	text-align: center;
}

/* Drag to scroll (Phase 9).
 *
 * Every rule below is scoped under .uis--draggable, a class the engine adds
 * only when data-uis-drag="1" and the browser has Pointer Events. Turning the
 * panel switch off means the class is never added, so none of this applies and
 * the auto-scroll-only stylesheet above is left completely untouched.
 */

/* Grab affordance, gated on real scrollability so it never lies: shown only
   when drag is enabled AND the track actually overflows (wrap > 0). */
.uis--draggable.uis--scrollable .uis__track {
	cursor: grab;
}

.uis--draggable.uis--scrollable.uis--dragging .uis__track {
	cursor: grabbing;
	user-select: none;
}

/* Links and buttons stay clickable-looking even over a grabbable track. */
.uis--draggable .uis__track a,
.uis--draggable .uis__track button {
	cursor: pointer;
}

/* Kill native image and link dragging inside a draggable track. Slide images
   default to draggable, and Elementor wraps each slide in an <a> (also
   draggable), so a press-drag starting on one would otherwise fire the
   browser's own drag-and-drop, cancel the pointer stream and freeze the track
   while a ghost image trails the cursor. The JS dragstart handler enforces the
   same thing; this is the belt to its suspenders and also removes the ghost
   cursor. Scoped under .uis--draggable, so media drags normally when the
   feature is off. */
.uis--draggable .uis__track img,
.uis--draggable .uis__track a {
	-webkit-user-drag: none;
	user-drag: none;
}

/* touch-action hands the cross-axis gesture to the browser's own compositor:
   a horizontal track lets the browser keep vertical panning (page scroll),
   and a vertical track keeps horizontal panning. The JS 8px dominant-axis
   check owns the track's own axis; this owns the other one. */
.uis--horizontal.uis--draggable .uis__track {
	touch-action: pan-y;
}

.uis--vertical.uis--draggable .uis__track {
	touch-action: pan-x;
}