.dimu-carousel {
	--dimu-carousel-per-view: 3;
	--dimu-carousel-gap: 42px;
	--dimu-carousel-arrow-size: 32px;
	--dimu-carousel-arrow-color: #0a0a0a;
	--dimu-carousel-intrinsic: 600px;
	--dimu-carousel-peek-start: 0px;
	--dimu-carousel-peek-end: 0px;

	position: relative;
}

.dimu-carousel__viewport {
	overflow: hidden;
	/* Off screen, the browser skips style, layout and paint for everything in here.
	   'auto' in contain-intrinsic-size means the last rendered height is remembered,
	   so the placeholder is only used until the carousel has been on screen once. */
	content-visibility: auto;
	contain-intrinsic-size: auto var(--dimu-carousel-intrinsic);
	/* overflow clips at the padding edge, so slides sitting in this padding stay visible.
	   That is what shows a sliver of the neighbouring cards at the screen edges. */
	box-sizing: border-box;
	padding-left: var(--dimu-carousel-peek-start);
	padding-right: var(--dimu-carousel-peek-end);
	/* The track is dragged, so the browser should only own vertical scrolling */
	touch-action: pan-y;
	/* A press that turns into a drag must not select the card text on the way */
	user-select: none;
	-webkit-user-select: none;
}

.dimu-carousel__track {
	display: flex;
	align-items: stretch;
	gap: var(--dimu-carousel-gap);
}

/* will-change on a track several viewports wide asks the browser for an enormous
   composited layer, which on a phone costs more than the animation saves. It is applied
   only while the track is actually moving. */
.dimu-carousel.is-animating .dimu-carousel__track {
	will-change: transform;
}

.dimu-carousel__slide {
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--dimu-carousel-per-view) - 1) * var(--dimu-carousel-gap))
		/ var(--dimu-carousel-per-view)
	);
	/* Every card matches the tallest one: the track stretches the slide, the slide
	   stretches its inner row. */
	display: flex;
	flex-direction: column;
}

.dimu-carousel__slide > * {
	flex: 1 1 auto;
}

/* Links and images inside a slide start the browser's own drag and drop, which cancels
   every pointer event after it and leaves the carousel stuck. */
.dimu-carousel__slide a,
.dimu-carousel__slide img {
	-webkit-user-drag: none;
	user-drag: none;
}

/* touch-action is decided by the element the touch lands on, and that is a card, not the
   viewport. Without this the browser reads a horizontal swipe as a scroll and cancels the
   pointer before the first move event arrives. */
.dimu-carousel__track,
.dimu-carousel__slide,
.dimu-carousel__slide * {
	touch-action: pan-y;
}

/* WPBakery gives inner rows a negative horizontal margin (vc_column-gap-*, vc_row-fluid)
   so their columns' padding cancels out against the page container. Inside a slide that
   makes the card overflow its track cell and swallow the gap, so it is cancelled here.
   !important because js_composer_front.css matches at the same specificity. */
.dimu-carousel__slide > .vc_row,
.dimu-carousel__slide > .wpb_row,
.dimu-carousel__slide > .vc_row-fluid {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}

.dimu-carousel.is-dragging .dimu-carousel__viewport {
	cursor: grabbing;
}

.dimu-carousel.is-draggable .dimu-carousel__viewport {
	cursor: grab;
}

/* Nothing has moved yet, so avoid a flash of a full-width unclipped row */
.dimu-carousel:not(.is-ready) .dimu-carousel__track > * + * {
	visibility: hidden;
}

.dimu-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--dimu-carousel-arrow-size) * 1.6);
	height: calc(var(--dimu-carousel-arrow-size) * 1.6);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dimu-carousel-arrow-color);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease, background-color .2s ease;
}

.dimu-carousel__arrow:hover,
.dimu-carousel__arrow:focus-visible {
	background-color: rgb(0 0 0 / 6%);
}

.dimu-carousel__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dimu-carousel__arrow--prev { left: 0; }
.dimu-carousel__arrow--next { right: 0; }

.dimu-carousel__arrow svg {
	width: var(--dimu-carousel-arrow-size);
	height: var(--dimu-carousel-arrow-size);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Pinned scrolling. The wrapper is made as tall as the horizontal distance to travel,
   the inner sticks to the top while that distance is scrolled through, and the script
   maps one to the other. */
.dimu-carousel-pin {
	position: relative;
}

.dimu-carousel-pin__inner {
	position: sticky;
	top: var(--dimu-carousel-pin-top, 0px);
}

body.admin-bar .dimu-carousel-pin__inner {
	top: calc(var(--dimu-carousel-pin-top, 0px) + 32px);
}

@media (max-width: 782px) {
	/* Below this width the admin bar scrolls away with the page */
	body.admin-bar .dimu-carousel-pin__inner {
		top: var(--dimu-carousel-pin-top, 0px);
	}
}