/**
 * Elementor Vertical Marquee Carousel — front-end styles.
 */

.vm-marquee {
	--vm-height: 520px;
	--vm-height-m: 380px;
	--vm-col-width: 360px;
	--vm-gap: 24px;
	--vm-fade: 90px;
	--vm-cols: 3;
	--vm-speed: 30;

	display: grid;
	grid-template-columns: repeat(var(--vm-cols), minmax(0, 1fr));
	gap: var(--vm-gap);
	width: 100%;
	max-width: 100%;
}

/* Each column clips its own track. */
.vm-marquee__col {
	position: relative;
	height: var(--vm-height);
	max-width: var(--vm-col-width);
	width: 100%;
	overflow: hidden;
	justify-self: center;
}

/* Top + bottom shadow / fade overlays. */
.vm-marquee--fades .vm-marquee__col::before,
.vm-marquee--fades .vm-marquee__col::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--vm-fade);
	pointer-events: none;
	z-index: 2;
}
.vm-marquee--fades .vm-marquee__col::before {
	top: 0;
	background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.vm-marquee--fades .vm-marquee__col::after {
	bottom: 0;
	background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* The moving track. Duplicated content makes the loop seamless. */
.vm-marquee__track {
	display: flex;
	flex-direction: column;
	gap: var(--vm-gap);
	will-change: transform;
	animation: vm-scroll-up var(--vm-col-speed, 30s) linear infinite;
}

/* Down-moving columns run the same keyframes reversed. */
.vm-marquee__col[data-direction="down"] .vm-marquee__track {
	animation-name: vm-scroll-down;
}

@keyframes vm-scroll-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@keyframes vm-scroll-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

/* Pause on hover. */
.vm-marquee--pause:hover .vm-marquee__track {
	animation-play-state: paused;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.vm-marquee__track {
		animation: none;
	}
}

/* ---------------- Card ---------------- */
.vm-card {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	text-align: center;
}

.vm-card__top {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	margin-bottom: 12px;
}

.vm-card__thumb {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.vm-card__name {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}

.vm-card__title {
	font-size: 13px;
	line-height: 1.3;
	opacity: 0.65;
	margin-top: 2px;
}

.vm-card__review {
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1024px) {
	.vm-marquee {
		grid-template-columns: repeat(var(--vm-cols-tablet, 2), minmax(0, 1fr));
	}
}

/* ---------------- Mobile ---------------- */
@media (max-width: 767px) {
	.vm-marquee {
		grid-template-columns: repeat(var(--vm-cols-mobile, 1), minmax(0, 1fr));
	}
	.vm-marquee__col {
		height: var(--vm-height-m, 380px);
	}
	/* Hide overflow columns beyond the mobile count. */
	.vm-marquee__col:nth-child(n + 3) {
		display: none;
	}
}