/**handles:geshmak-horizontal-scroll**/
/* בס״ד — Geshmak! Horizontal Scroll Div
 * Structural styles for the horizontal-scroll atomic container.
 * The element ("track") lays its children in a non-wrapping row; the JS controller wraps
 * it in a .gshmk-hscroll-viewport (clip) and pins the container with GSAP ScrollTrigger.
 */

/* ---------------------------------------------------------------------------
   Track — the element the user drops children into
--------------------------------------------------------------------------- */

[data-gshmk-hscroll] {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: stretch;

	/* Promote to its own layer so the scroll-driven transform stays smooth. */
	will-change: transform;
}

/* Direct children become panels — never shrink, so the row overflows sideways. */
[data-gshmk-hscroll] > * {
	flex: 0 0 auto;
}

/* "Full screen width each" — every panel fills the viewport width. */
[data-gshmk-hscroll][data-gshmk-hscroll-items="full"] > * {
	flex: 0 0 100vw;
	width: 100vw;
	max-width: 100vw;
}

/* ---------------------------------------------------------------------------
   Stacked layout — Replace / Fade transitions. The controller adds this class;
   panels are stacked on top of each other (the first one defines the height)
   and the controller shows/crossfades them via opacity as the visitor scrolls.
--------------------------------------------------------------------------- */

[data-gshmk-hscroll].gshmk-hscroll-stacked {
	display: block;
	position: relative;
	width: 100%;
}

[data-gshmk-hscroll].gshmk-hscroll-stacked > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* First panel stays in flow so it gives the stack its height. */
[data-gshmk-hscroll].gshmk-hscroll-stacked > *:first-child {
	position: relative;
}

/* Hidden until the controller takes over (avoids a flash of the top panel). */
[data-gshmk-hscroll].gshmk-hscroll-stacked > *:not(:first-child) {
	opacity: 0;
}

/* ---------------------------------------------------------------------------
   Viewport — generated by JS to clip the row's horizontal overflow
--------------------------------------------------------------------------- */

.gshmk-hscroll-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;

	/* Isolate the stacking context from siblings. */
	isolation: isolate;
}

/* Mobile / reduced-motion fallback — a finger-swipeable horizontal strip. */
.gshmk-hscroll-viewport.is-swipe {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gshmk-hscroll-viewport.is-swipe [data-gshmk-hscroll] {
	/* Let height follow content when swiping rather than filling the screen. */
	height: auto;
}

/* ---------------------------------------------------------------------------
   Elementor editor — show the children as a scrollable strip so the author can
   see and reach every panel while building. (No pinning runs in the editor.)
--------------------------------------------------------------------------- */

.elementor-editor-active [data-gshmk-hscroll] {
	overflow-x: auto;
	overflow-y: hidden;
}