/*
 * Horizontal Scrolling Block — frontend styles.
 * Per-instance scrollbar colors are injected by view.js (scoped to data-block-id).
 */

.hsb-horizontal-scroll {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.hsb-horizontal-scroll .hsb-scroll-track {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --hsb-gap, 16px );
	width: var( --hsb-track-w, 100% );
	margin-left: auto;
	margin-right: auto;
	overflow-x: auto;
	overflow-y: hidden;
	min-height: var( --hsb-min-height, auto );
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 20px;
}

/* Inner blocks are flex children; never let them shrink below content. */
.hsb-horizontal-scroll .hsb-scroll-track > * {
	flex-shrink: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Scroll snap */
.hsb-horizontal-scroll .hsb-scroll-track.hsb-snap {
	scroll-snap-type: x mandatory;
}
.hsb-horizontal-scroll .hsb-scroll-track.hsb-snap > * {
	scroll-snap-align: start;
}

/* Drag-enabled cursor + active state */
.hsb-horizontal-scroll.hsb-drag-enabled .hsb-scroll-track {
	cursor: grab;
}
.hsb-horizontal-scroll.hsb-drag-enabled .hsb-scroll-track.hsb-dragging {
	cursor: grabbing;
	scroll-behavior: auto;       /* don't fight finger movement */
	user-select: none;
	scroll-snap-type: none;      /* snap interferes with smooth dragging */
}
.hsb-horizontal-scroll.hsb-drag-enabled .hsb-scroll-track.hsb-dragging * {
	pointer-events: none;
}

/* Navigation arrows */
.hsb-horizontal-scroll .hsb-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1a1a1a;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
	transition: opacity 0.2s ease, background 0.2s ease, transform 0.1s ease;
}
.hsb-horizontal-scroll .hsb-nav-btn:hover {
	background: #ffffff;
}
.hsb-horizontal-scroll .hsb-nav-btn:active {
	transform: translateY( -50% ) scale( 0.95 );
}
.hsb-horizontal-scroll .hsb-nav-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.hsb-horizontal-scroll .hsb-nav-prev { left: 8px; }
.hsb-horizontal-scroll .hsb-nav-next { right: 8px; }
.hsb-horizontal-scroll .hsb-nav-btn.hsb-nav-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Respect reduced-motion: stop CSS smooth scroll too */
@media ( prefers-reduced-motion: reduce ) {
	.hsb-horizontal-scroll .hsb-scroll-track {
		scroll-behavior: auto;
	}
}