/**
 * Featured-courses slider (template-parts/home/featured-courses.php).
 * A horizontal snap-scroll track with prev/next arrow buttons.
 *
 * @package LMS_Theme
 */

/* --- Nav arrows (rendered in the section head on the right) --- */
.lms-slider-nav {
	display: flex;
	gap: 8px;
}

.lms-slider-btn {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-background);
	color: var(--color-heading);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.lms-slider-btn:hover {
	background: var(--color-accent-grad);
	border-color: transparent;
	color: #ffffff;
	transform: translateY(-1px);
}

.lms-slider-btn:focus-visible {
	outline: 3px solid var(--color-accent-light);
	outline-offset: 2px;
}

/* --- Track: horizontal snap scroll, grid fallback disabled --- */
.products.lms-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 12px;
	margin: 0 -2px;
	list-style: none;
	--per-view: 4;
}

.products.lms-slider__track::-webkit-scrollbar {
	display: none;
}

.lms-slider__track > li {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * 20px) / var(--per-view));
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.products.lms-slider__track {
		--per-view: 3;
	}
}

@media (max-width: 700px) {
	.products.lms-slider__track {
		--per-view: 2;
	}
}

@media (max-width: 480px) {
	.products.lms-slider__track {
		--per-view: 1;
	}
}