/**
 * 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-card);
	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:disabled,
.lms-slider-btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* --- Slider container --- */
.lms-slider {
	position: relative;
	width: 100%;
}

/* --- Track: horizontal snap scroll, grid fallback disabled --- */
.products.lms-slider__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	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;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

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

.products.lms-slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none !important;
	scroll-behavior: auto !important;
}

.products.lms-slider__track:focus-visible {
	outline: 2px solid var(--color-accent-light);
	outline-offset: 2px;
	border-radius: var(--radius-md);
}

.woocommerce ul.products.lms-slider__track li.product,
.products.lms-slider__track > li,
.lms-slider__track > li {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * 20px) / var(--per-view)) !important;
	width: calc((100% - (var(--per-view) - 1) * 20px) / var(--per-view)) !important;
	max-width: calc((100% - (var(--per-view) - 1) * 20px) / var(--per-view)) !important;
	min-width: 0 !important;
	scroll-snap-align: start;
	box-sizing: border-box;
}

@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;
	}
}