/* Shared horizontal tour rails: native scroll, snap, and lightweight controls. */

.bekaa-home-scenic-strip,
.bekaa-home-tours-elevated,
.bekaa-smart-grid {
	--bekaa-rail-card-width: clamp(300px, calc((100vw - 98px) / 3.5), 420px);
	--bekaa-rail-mobile-card-width: min(78vw, 340px);
	--bekaa-rail-gap: 18px;
	--bekaa-rail-mobile-gap: 12px;
	--bekaa-rail-pad-x: 22px;
	--bekaa-rail-pad-bottom: 40px;
	--bekaa-rail-mobile-pad-x: max(12px, env(safe-area-inset-left));
	--bekaa-rail-mobile-pad-right: max(12px, env(safe-area-inset-right));
	--bekaa-rail-fade: clamp(40px, 5.2vw, 82px);
}

.bekaa-home-tours-elevated .mk-grid {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	overflow: visible;
	padding-left: var(--bekaa-rail-pad-x);
	padding-right: var(--bekaa-rail-pad-x);
}

.bekaa-home-scenic-strip .mk-padding-wrapper.wpb_row > .wpb_column,
.bekaa-home-tours-elevated .mk-padding-wrapper.wpb_row > .wpb_column {
	width: 100% !important;
	float: none !important;
}

.bekaa-home-tours-elevated .vc_column-inner {
	position: relative;
	z-index: 1;
	overflow: visible;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bekaa-home-scenic-strip .tour-image-link,
.bekaa-home-tours-elevated .tour-image-link,
.bekaa-smart-grid .tour-image-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bekaa-home-scenic-strip .tour-image-link:focus-visible,
.bekaa-home-tours-elevated .tour-image-link:focus-visible,
.bekaa-smart-grid .tour-image-link:focus-visible,
.bekaa-home-scenic-strip .bekaa-scenic-rail:focus-visible,
.bekaa-home-tours-elevated .bekaa-tours-rail:focus-visible,
.bekaa-smart-grid:focus-visible {
	outline: 2px solid #ec1d25;
	outline-offset: 2px;
}

.bekaa-home-scenic-strip .tour-image,
.bekaa-home-tours-elevated .tour-image,
.bekaa-smart-grid .tour-image {
	cursor: pointer;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail,
.bekaa-home-tours-elevated .bekaa-tours-rail,
.bekaa-smart-grid {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--bekaa-rail-gap);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 14px var(--bekaa-rail-pad-x) var(--bekaa-rail-pad-bottom);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--bekaa-rail-pad-x);
	scroll-padding-right: var(--bekaa-rail-pad-x);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail {
	padding-top: 0;
}

.bekaa-home-tours-elevated .bekaa-tours-rail {
	padding-top: 14px;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail::-webkit-scrollbar,
.bekaa-home-tours-elevated .bekaa-tours-rail::-webkit-scrollbar,
.bekaa-smart-grid::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
	background: transparent;
}

.mk-page-section.bekaa-home-scenic-strip .bekaa-scenic-rail > .tour-card,
.mk-page-section.bekaa-home-tours-elevated .bekaa-tours-rail > .tour-card,
.bekaa-smart-grid > .tour-card,
.bekaa-smart-grid > div {
	flex: 0 0 var(--bekaa-rail-card-width) !important;
	width: var(--bekaa-rail-card-width) !important;
	min-width: var(--bekaa-rail-card-width) !important;
	max-width: none;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

.bekaa-home-scenic-strip .bekaa-scenic-rail > .tour-card,
.bekaa-home-tours-elevated .bekaa-tours-rail > .tour-card,
.bekaa-smart-grid .tour-card {
	contain: paint;
	margin-top: 0;
	margin-bottom: 10px;
}

.bekaa-smart-grid .tour-card {
	width: 100%;
}

.bekaa-home-scenic-strip .bekaa-smart-grid > .tour-card {
	display: flex;
	flex-direction: column;
}

.bekaa-rail-host {
	position: relative;
	isolation: isolate;
	overflow: visible;
}

.bekaa-transform-rail-shell {
	position: relative;
	overflow: visible;
}

@supports selector(.bekaa-rail-host:has(> .bekaa-smart-grid)) {
	@media (min-width: 768px) {
		.bekaa-rail-host:has(> .bekaa-smart-grid)::before,
		.bekaa-rail-host:has(> .bekaa-smart-grid)::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			width: var(--bekaa-rail-fade);
			z-index: 3;
			pointer-events: none;
		}

		.bekaa-rail-host:has(> .bekaa-smart-grid)::before {
			left: calc(50% - 50vw);
			background: linear-gradient(to right, rgba(250, 249, 247, 1) 0%, rgba(250, 249, 247, 0.94) 38%, rgba(250, 249, 247, 0) 100%);
		}

		.bekaa-rail-host:has(> .bekaa-smart-grid)::after {
			right: calc(50% - 50vw);
			background: linear-gradient(to left, rgba(250, 249, 247, 1) 0%, rgba(250, 249, 247, 0.94) 38%, rgba(250, 249, 247, 0) 100%);
		}
	}
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.bekaa-transform-rail-shell {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		overflow: hidden;
		--bekaa-similar-gutter: 0;
		--bekaa-smart-grid-mobile-gutter-left: 0;
		--bekaa-smart-grid-mobile-gutter-right: 0;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell).bekaa-rail-host {
		overflow: hidden !important;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid {
		width: max-content !important;
		min-width: 100% !important;
		max-width: none !important;
		overflow: visible !important;
		overscroll-behavior-x: none !important;
		overscroll-behavior-y: auto !important;
		scroll-snap-type: none !important;
		touch-action: pan-y !important;
		will-change: transform !important;
		transform: translate3d(var(--bekaa-views-rail-x, 0px), 0, 0);
		transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	}

	.bekaa-transform-rail-shell .bekaa-smart-grid.bekaa-similar-experiences-grid {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell)[data-bekaa-views-rail-instant="1"] .bekaa-smart-grid.bekaa-similar-experiences-grid {
		transition-duration: 0ms !important;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid > .tour-card:not(.bekaa-card-pressing):not(.bekaa-card-touching):not(.bekaa-card-loading),
	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card:not(.bekaa-card-pressing):not(.bekaa-card-touching):not(.bekaa-card-loading) {
		scroll-snap-align: none !important;
		scroll-snap-stop: normal !important;
		will-change: auto !important;
		transform: none !important;
		transition: none !important;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-image,
	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card:not(.bekaa-card-pressing):not(.bekaa-card-touching):not(.bekaa-card-loading)::after {
		animation: none !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card:hover,
	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card:focus-within,
	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card:hover .tour-image,
	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card:focus-within .tour-image {
		animation: none !important;
		transform: none !important;
		will-change: auto !important;
	}

	.bekaa-home-scenic-strip .bekaa-scenic-rail,
	.bekaa-home-tours-elevated .bekaa-tours-rail,
	.bekaa-smart-grid {
		padding-left: 0;
		padding-right: 0;
		scroll-padding-left: 0;
		scroll-padding-right: 0;
	}

	.bekaa-rail-controls {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		right: calc(50% - 50vw);
		z-index: 30;
		pointer-events: none;
	}

	.bekaa-rail-nav {
		pointer-events: auto;
		position: absolute;
		z-index: 2;
		top: 50%;
		transform: translateY(-50%);
		width: 50px;
		height: 72px;
		border: 1px solid rgba(126, 111, 94, 0.3);
		border-radius: 999px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(248, 245, 240, 0.88) 100%);
		color: #3b332a;
		font-size: 0;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: 0.86;
		box-shadow: 0 10px 22px rgba(16, 14, 12, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.74);
		transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
	}

	.bekaa-rail-nav::before {
		content: "";
		width: 12px;
		height: 12px;
		border-top: 1.75px solid currentColor;
		border-right: 1.75px solid currentColor;
		opacity: 0.92;
	}

	.bekaa-rail-nav-prev {
		left: max(10px, env(safe-area-inset-left));
	}

	.bekaa-rail-nav-next {
		right: max(10px, env(safe-area-inset-right));
	}

	.bekaa-rail-nav-prev::before {
		transform: rotate(-135deg);
		margin-left: 3px;
	}

	.bekaa-rail-nav-next::before {
		transform: rotate(45deg);
		margin-right: 3px;
	}

	.bekaa-rail-host:hover .bekaa-rail-nav,
	.bekaa-rail-host:focus-within .bekaa-rail-nav {
		opacity: 1;
	}

	.bekaa-rail-nav:hover {
		transform: translateY(-50%) scale(1.04);
		border-color: rgba(126, 111, 94, 0.45);
		box-shadow: 0 14px 30px rgba(16, 14, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78);
	}

	.bekaa-rail-nav:active {
		transform: translateY(-50%) scale(0.98);
	}

	.bekaa-rail-nav:focus-visible {
		outline: 2px solid #c59f6a;
		outline-offset: 2px;
	}

	.bekaa-rail-nav[disabled],
	.bekaa-rail-controls[hidden] {
		opacity: 0;
		pointer-events: none;
	}

	:is(.bekaa-transform-rail-shell, .bekaa-views-parallax__rail-shell).bekaa-rail-host .bekaa-rail-controls {
		left: 0 !important;
		right: 0 !important;
	}
}

@media (max-width: 991px), (hover: none), (pointer: coarse) {
	.bekaa-rail-controls,
	.bekaa-rail-nav {
		display: none;
		pointer-events: none;
	}
}

@media (max-width: 767px) {
	.bekaa-home-scenic-strip .mk-grid,
	.bekaa-home-tours-elevated .mk-grid,
	.bekaa-home-scenic-strip .mk-padding-wrapper.wpb_row,
	.bekaa-home-tours-elevated .mk-padding-wrapper.wpb_row {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.bekaa-home-scenic-strip .mk-text-block,
	.bekaa-home-tours-elevated .mk-text-block {
		overflow: visible;
	}

	.bekaa-home-scenic-strip .bekaa-scenic-rail,
	.bekaa-home-tours-elevated .bekaa-tours-rail,
	.bekaa-smart-grid {
		gap: var(--bekaa-rail-mobile-gap);
		padding: 10px var(--bekaa-rail-mobile-pad-right) 30px var(--bekaa-rail-mobile-pad-x);
		scroll-padding-left: var(--bekaa-rail-mobile-pad-x);
		scroll-padding-right: var(--bekaa-rail-mobile-pad-right);
		overscroll-behavior-x: auto;
		overscroll-behavior-y: auto;
		touch-action: pan-x pan-y;
	}

	.mk-page-section.bekaa-home-scenic-strip .bekaa-scenic-rail > .tour-card,
	.mk-page-section.bekaa-home-tours-elevated .bekaa-tours-rail > .tour-card,
	.bekaa-smart-grid > .tour-card,
	.bekaa-smart-grid > div {
		flex-basis: var(--bekaa-rail-mobile-card-width) !important;
		width: var(--bekaa-rail-mobile-card-width) !important;
		min-width: var(--bekaa-rail-mobile-card-width) !important;
	}

	.bekaa-smart-grid .tour-image {
		height: clamp(188px, 50vw, 228px) !important;
	}

	.bekaa-smart-grid .tour-content {
		padding: 18px 18px 16px !important;
	}
}

@media (hover: none), (pointer: coarse) {
	.bekaa-home-scenic-strip .tour-card,
	.bekaa-home-tours-elevated .tour-card,
	.bekaa-smart-grid .tour-card {
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.bekaa-home-scenic-strip .tour-card .tour-image,
	.bekaa-home-tours-elevated .tour-card .tour-image,
	.bekaa-smart-grid .tour-card .tour-image {
		transform: none !important;
		transition: none !important;
	}

	.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-image::after {
		opacity: 1;
	}
}