/* blocks/category-slider-section
 *
 * Scroll-snap carousel — no slider library. The track scrolls horizontally and
 * snaps to each slide; the arrows in assets/custom.js just scroll it by one
 * slide width. Change --slides-visible to show a different number per row.
 */

.section-category-slider {
	--slides-visible: 4;
	--slide-gap: 24px;
}

.section-category-slider .section-head {}
.section-category-slider .section-title {}
.section-category-slider .content {}

.section-category-slider .category-slider {
	position: relative;
}

.section-category-slider .slider-track {
	display: flex;
	gap: var(--slide-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.section-category-slider .slider-track::-webkit-scrollbar { display: none; }

.section-category-slider .slide {
	flex: 0 0 calc(
		(100% - (var(--slides-visible) - 1) * var(--slide-gap)) / var(--slides-visible)
	);
	scroll-snap-align: start;
}

.section-category-slider .slide-image img { width: 100%; }
.section-category-slider .slide-content {}
.section-category-slider .slide-title {}
.section-category-slider .slide-subtext {}

/* Arrows — hidden by custom.js when everything already fits. */
.section-category-slider .category-slider-arrows {
    display: flex;
    justify-content: space-between;
    margin-left: -9%;
    position: absolute;
    width: 118%;
    top: 37%;
}

.section-category-slider .category-slider-arrows button {
	border: 0;
	background: none;
	cursor: pointer;
	padding: unset!important;
}

.section-category-slider .category-slider-arrows button[disabled] {
	opacity: .35;
	cursor: default;
}

@media (max-width: 1200px) {
	.section-category-slider { --slides-visible: 3; }
}

@media (max-width: 1024px) {
	.section-category-slider { --slides-visible: 2; }
}

@media (max-width: 767px) {
	.section-category-slider { --slides-visible: 1; }
}