/*
 * Horizontal Scrolling Block — frontend styles.
 */

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

/*
 * Scroll clip container.
 * overflow:hidden clips the native scrollbar on Android Chrome,
 * which ignores scrollbar-width:none and ::-webkit-scrollbar.
 * The track inside has padding-bottom so the native bar is pushed
 * below this clip boundary and is never visible.
 */
.hsb-horizontal-scroll .hsb-scroll-clip {
	overflow: hidden;
	width: 100%;
}

.hsb-horizontal-scroll .hsb-scroll-track {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --hsb-gap, 16px );
	overflow-x: scroll;
	overflow-y: hidden;
	min-height: var( --hsb-min-height, auto );
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Belt-and-braces: hide native scrollbar on browsers that support it */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hsb-horizontal-scroll .hsb-scroll-track::-webkit-scrollbar {
	display: none;
}
/* When clipped: padding pushes native bar below the clip boundary */
.hsb-horizontal-scroll .hsb-scroll-track--clipped {
	padding-bottom: 30px;
	box-sizing: content-box;
}

/* Inner blocks */
.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 cursor */
.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;
	user-select: none;
	scroll-snap-type: none;
}
.hsb-horizontal-scroll.hsb-drag-enabled .hsb-scroll-track.hsb-dragging * {
	pointer-events: none;
}

/* ── Custom scrollbar ───────────────────────────────────────────── */
/* Built by view.js. Base layout only; colours/sizes are set inline. */
.hsb-custom-sb-wrap {
	display: flex;
	justify-content: center;       /* honours the track-width % setting */
}
.hsb-custom-sb-track {
	position: relative;
	overflow: hidden;
	width: 100%;
	flex-shrink: 0;
	cursor: pointer;
	box-sizing: border-box;
}
.hsb-custom-sb-thumb {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	cursor: grab;
	transition: opacity 0.15s;
	box-sizing: border-box;
}
.hsb-custom-sb-thumb:active {
	cursor: grabbing;
}
.hsb-custom-sb-thumb:hover {
	opacity: 0.85;
}

/* 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, background 0.2s, transform 0.1s;
}
.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;
}

@media ( prefers-reduced-motion: reduce ) {
	.hsb-horizontal-scroll .hsb-scroll-track { scroll-behavior: auto; }
}