/**
 * TO Horizontal Scroll Gallery — vertical scroll drives horizontal track.
 * Scoped: .toaew-hsg / --toaew-hsg-*
 *
 * Scroll down → images move right-to-left (default).
 * Scroll up   → images move left-to-right.
 */

.toaew-hsg {
	--toaew-hsg-gap: 18px;
	--toaew-hsg-radius: 16px;
	--toaew-hsg-aspect: 2 / 3;
	--toaew-hsg-visible: 5;
	--toaew-hsg-scroll: 200;
	--toaew-hsg-bg: transparent;
	--toaew-hsg-x: 0px;
	--toaew-hsg-fit: cover;

	position: relative;
	width: 100%;
	background: var( --toaew-hsg-bg );
	min-height: calc( var( --toaew-hsg-scroll ) * 1vh );
}

.toaew-hsg__spacer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.toaew-hsg__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0 clamp( 12px, 2vw, 28px );
}

.toaew-hsg__viewport {
	width: 100%;
	overflow: hidden;
}

.toaew-hsg__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: var( --toaew-hsg-gap );
	width: max-content;
	margin: 0;
	padding: 4vh 0 6vh;
	list-style: none;
	transform: translate3d( var( --toaew-hsg-x ), 0, 0 );
	will-change: transform;
}

.toaew-hsg__item {
	flex: 0 0 auto;
	width: var( --toaew-hsg-item-w, 200px );
	margin: 0;
}

.toaew-hsg__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var( --toaew-hsg-aspect );
	border-radius: var( --toaew-hsg-radius );
	overflow: hidden;
	background: #e8e8e8;
	box-shadow: 0 10px 30px rgba( 15, 15, 15, 0.08 );
}

.toaew-hsg--alternate .toaew-hsg__item.is-large .toaew-hsg__frame {
	aspect-ratio: 2 / 3.15;
}

.toaew-hsg--alternate .toaew-hsg__item.is-small .toaew-hsg__frame {
	aspect-ratio: 2 / 2.45;
}

.toaew-hsg--alternate .toaew-hsg__item.is-small {
	padding-bottom: 4%;
}

.toaew-hsg__img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
	pointer-events: none;
	user-select: none;
}

.toaew-hsg--fit-contain .toaew-hsg__img {
	object-fit: contain !important;
}

.toaew-hsg--fit-fill .toaew-hsg__img {
	object-fit: fill !important;
}

.toaew-hsg__caption {
	margin-top: 8px;
	font-size: 0.75rem;
	line-height: 1.3;
	color: #6b7280;
	text-align: center;
}

.toaew-hsg--equal .toaew-hsg__frame {
	aspect-ratio: var( --toaew-hsg-aspect );
}

@media ( max-width: 1024px ) {
	.toaew-hsg {
		--toaew-hsg-visible: 4;
		--toaew-hsg-gap: 14px;
	}
}

@media ( max-width: 767px ) {
	.toaew-hsg {
		--toaew-hsg-visible: 3;
		--toaew-hsg-gap: 12px;
	}

	.toaew-hsg__sticky {
		min-height: 70vh;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.toaew-hsg__track {
		transform: none !important;
	}
}