/**
 * Pinned Horizontal Scroll - default styling.
 *
 * Structural layout only. Panel sizing (width, height, min-width, gap,
 * padding, radius, shadow) is driven by the element's controls through
 * Bricks-generated CSS.
 *
 * Movement (translate) is applied inline by assets/js/pinned-hscroll.js and
 * is NEVER set here, so there is no risk of selectors fighting the script.
 */

.pinned-hscroll-root {
	position: relative;
	width: 100%;
	height: 100%;
}

.pinned-hscroll-pin {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.pinned-hscroll-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	height: 100%;
	width: 100%;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.pinned-hscroll-track > * {
	flex: 0 0 auto;
	min-width: 60vw;
	height: 70vh;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* ---------------------------------------------------------------
 * OVERFLOW
 * --------------------------------------------------------------- */

.pinned-hscroll-root.is-overflow-visible .pinned-hscroll-pin {
	overflow: visible;
}

/* ---------------------------------------------------------------
 * VERTICAL ORIENTATION
 * The track is flipped to a column and panels fill the width. The
 * script translates along the Y axis instead of X.
 * Specificity (.pinned-hscroll-root.is-vertical ...) beats the base
 * panel rule so it wins even when a min-width control is applied.
 * --------------------------------------------------------------- */

.pinned-hscroll-root.is-vertical .pinned-hscroll-pin {
	/* The vertical track is taller than the pin, so it must align to the
	   top (not centre) otherwise Panel 1 starts pushed off-screen and the
	   reading order looks broken. */
	align-items: flex-start;
}

.pinned-hscroll-root.is-vertical .pinned-hscroll-track {
	flex-direction: column;
	width: 100%;
	height: auto;
}

.pinned-hscroll-root.is-vertical .pinned-hscroll-track > * {
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 60vh;
}

/* ---------------------------------------------------------------
 * SCROLL SNAP (native touch / mobile snapping)
 * --------------------------------------------------------------- */

.pinned-hscroll-root.is-snap .pinned-hscroll-track {
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.pinned-hscroll-root.is-snap.is-vertical .pinned-hscroll-track {
	scroll-snap-type: y mandatory;
}

.pinned-hscroll-root.is-snap .pinned-hscroll-track > * {
	scroll-snap-align: center;
}

/* ---------------------------------------------------------------
 * MOBILE FALLBACK
 * Static stacking when horizontal scroll is disabled on small screens.
 * --------------------------------------------------------------- */

@media (max-width: 767px) {
	.pinned-hscroll-pin {
		position: relative;
		height: auto;
		overflow: visible;
		display: block;
	}

	.pinned-hscroll-track {
		flex-direction: column;
		height: auto;
		transform: none !important;
	}

	.pinned-hscroll-track > * {
		width: 100%;
		min-width: 0;
		height: auto;
		margin-bottom: 24px;
	}
}