/**
 * WEPRO: Gallery Scroll — Horizontal scroll driven by wheel events.
 *
 * Container height = image height. No viewport hacks.
 * JS intercepts wheel events to translate track horizontally.
 */

/* ═══════════════════════════════════════════
   BASE (Mobile: horizontal swipe)
   ═══════════════════════════════════════════ */

.wsk-gallery-scroll {
	background: var(--wsk-gs-bg, transparent);
	position: relative;
	width: 100%;
}

.wsk-gallery-scroll__sticky {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.wsk-gallery-scroll__sticky::-webkit-scrollbar {
	display: none;
}

/* Track: horizontal row, native swipe on mobile */
.wsk-gallery-scroll__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wsk-gs-gap, 16px);
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 1.5rem);
}

/* ─── Text panel ─── */
.wsk-gallery-scroll__header {
	flex: 0 0 auto;
	width: clamp(200px, 55vw, 280px);
	text-align: var(--wsk-gs-header-align, left);
	margin-bottom: 0;
	margin-right: clamp(0.5rem, 2vw, 1rem);
}

.wsk-gallery-scroll__label {
	display: block;
	font-family: var(--wsk-gs-label-font-family, inherit);
	font-size: var(--wsk-gs-label-font-size, 0.75rem);
	font-weight: var(--wsk-gs-label-font-weight, 500);
	font-style: var(--wsk-gs-label-font-style, normal);
	letter-spacing: var(--wsk-gs-label-letter-spacing, 0.15em);
	text-transform: var(--wsk-gs-label-text-transform, uppercase);
	color: var(--wsk-gs-label-color, rgba(120,100,80,1));
	margin-bottom: 8px;
}

.wsk-gallery-scroll__title {
	font-family: var(--wsk-gs-title-font-family, inherit);
	font-size: var(--wsk-gs-title-font-size, clamp(2rem, 4vw, 3.2rem));
	font-weight: var(--wsk-gs-title-font-weight, 700);
	font-style: var(--wsk-gs-title-font-style, normal);
	line-height: var(--wsk-gs-title-line-height, 1.2);
	color: var(--wsk-gs-title-color, inherit);
	margin: 0 0 12px;
}

.wsk-gallery-scroll__description {
	font-family: var(--wsk-gs-description-font-family, inherit);
	font-size: var(--wsk-gs-description-font-size, clamp(1rem, 2vw, 1.25rem));
	font-weight: var(--wsk-gs-description-font-weight, 400);
	font-style: var(--wsk-gs-description-font-style, normal);
	line-height: var(--wsk-gs-description-line-height, 1.6);
	color: var(--wsk-gs-description-color, rgba(0,0,0,0.6));
	margin: 0;
}

/* ─── Items ─── */
.wsk-gallery-scroll__item {
	flex: 0 0 auto;
	height: var(--wsk-gs-image-height-mobile, 350px);
	margin: 0;
}

.wsk-gallery-scroll__img {
	display: block;
	height: 100%;
	width: auto;
	object-fit: cover;
	border-radius: var(--wsk-gs-image-radius, 8px);
}

/* ─── Responsive font-size ─── */
@media (max-width: 639px) {
	.wsk-gallery-scroll__label { font-size: var(--wsk-gs-label-font-size-sm, var(--wsk-gs-label-font-size, 0.7rem)); }
	.wsk-gallery-scroll__title { font-size: var(--wsk-gs-title-font-size-sm, var(--wsk-gs-title-font-size, clamp(1.5rem, 6vw, 2rem))); }
	.wsk-gallery-scroll__description { font-size: var(--wsk-gs-description-font-size-sm, var(--wsk-gs-description-font-size, 1rem)); }
}

@media (min-width: 640px) and (max-width: 1024px) {
	.wsk-gallery-scroll__label { font-size: var(--wsk-gs-label-font-size-md, var(--wsk-gs-label-font-size, 0.75rem)); }
	.wsk-gallery-scroll__title { font-size: var(--wsk-gs-title-font-size-md, var(--wsk-gs-title-font-size, clamp(2rem, 4vw, 3rem))); }
	.wsk-gallery-scroll__description { font-size: var(--wsk-gs-description-font-size-md, var(--wsk-gs-description-font-size, clamp(1rem, 2vw, 1.15rem))); }
}

/* ═══════════════════════════════════════════
   DESKTOP (1025px+): Horizontal scroll
   ═══════════════════════════════════════════ */

@media (min-width: 1025px) {
	/* Avada overflow fix */
	.fusion-fullwidth:has(.wsk-gallery-scroll),
	.fusion-builder-row:has(.wsk-gallery-scroll),
	.fusion-layout-column:has(.wsk-gallery-scroll),
	.fusion-column-wrapper:has(.wsk-gallery-scroll),
	.fusion-column-inner-bg:has(.wsk-gallery-scroll) {
		overflow: visible !important;
	}

	/* Container: height = content */
	.wsk-gallery-scroll__sticky {
		position: relative;
		overflow: hidden;
		padding: clamp(1.5rem, 3vh, 3rem) clamp(2rem, 3vw, 3rem);
		box-sizing: border-box;
	}

	.wsk-gallery-scroll__track {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--wsk-gs-gap, 24px);
		padding: 0;
		will-change: transform;
		backface-visibility: hidden;
	}

	/* Text panel */
	.wsk-gallery-scroll__header {
		flex: 0 0 auto;
		width: var(--wsk-gs-max-width, 300px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 0;
		margin-right: clamp(1rem, 3vw, 3rem);
		padding: 0;
	}

	/* Items: height from param, width auto from aspect ratio */
	.wsk-gallery-scroll__item {
		flex: 0 0 auto;
		height: var(--wsk-gs-image-height, 500px);
		opacity: 1;
		transform: none;
		transition: none;
	}

	.wsk-gallery-scroll__img {
		display: block;
		height: 100%;
		width: auto;
		object-fit: cover;
		border-radius: var(--wsk-gs-image-radius, 12px);
	}
}

/* ─── Navigation arrows (desktop only) ─── */
.wsk-gallery-scroll__arrow {
	display: none;
}

@media (min-width: 1025px) {
	.wsk-gallery-scroll__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: clamp(1.5rem, 3vh, 2.5rem);
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: 1px solid rgba(0,0,0,0.15);
		background: rgba(255,255,255,0.85);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		color: rgba(0,0,0,0.5);
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 10;
		padding: 0;
		outline: none;
	}

	.wsk-gallery-scroll__arrow:focus-visible {
		outline: 2px solid rgba(0,0,0,0.4);
		outline-offset: 2px;
	}

	.wsk-gallery-scroll__arrow:hover {
		border-color: rgba(0,0,0,0.35);
		color: rgba(0,0,0,0.8);
		background: rgba(255,255,255,0.95);
		transform: scale(1.08);
	}

	.wsk-gallery-scroll__arrow:active {
		transform: scale(0.95);
	}

	.wsk-gallery-scroll__arrow--prev {
		right: calc(48px + clamp(2rem, 3vw, 3rem) + 12px);
	}

	.wsk-gallery-scroll__arrow--next {
		right: clamp(2rem, 3vw, 3rem);
	}

	.wsk-gallery-scroll__arrow[disabled] {
		opacity: 0.25;
		cursor: default;
		pointer-events: none;
	}
}

/* ═══════════════════════════════════════════
   LIGHTBOX MODE
   ═══════════════════════════════════════════ */

.wsk-gallery-scroll--lightbox .wsk-gallery-scroll__item {
	cursor: pointer;
}

.wsk-gallery-scroll--lightbox .fusion-lightbox {
	display: block;
	height: 100%;
	line-height: 0;
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.wsk-gallery-scroll__track { will-change: auto; }
	.wsk-gallery-scroll__item { opacity: 1; transform: none; transition: none; }
}