/**
 * About Timeline — horizontal company timeline (.about-grid-timeline).
 * Loaded only when the widget is present (Elementor on-demand).
 *
 * Target:
 *  - Section pad 5rem; ≤479: 3rem + left 1rem
 *  - .container-large.is-custom max-width 75.375rem
 *  - Scroller width bleeds to near viewport right edge
 *  - .scroll-content: 200.313rem × 34rem (aspect 200/34); phone width 130rem
 *  - .timeline-overlay: right white fade, desktop only (>991)
 *  - Desktop drag via JS; overflow-x auto for touch / fallback
 */

.elementor-widget-jdw-ee-about-timeline {
	width: 100%;
}

.jdw-ee-about-timeline {
	--jdw-ee-timeline-max: 75.375rem;
	--jdw-ee-timeline-inset: 1.5rem;
	--jdw-ee-timeline-overlay: #ffffff;

	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 5rem 0;
	background-color: #fff;
	/* Allow scroller to extend past parent overflow:hidden if any. */
	overflow: visible;
}

.jdw-ee-about-timeline__shell {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: var(--jdw-ee-timeline-max);
	margin-left: auto;
	margin-right: auto;
}

/*
 * Target embed:
 *   width: calc(100vw - ((100vw - 75.375rem) / 2) - 1.5rem);
 * When viewport < max, fall back to nearly full width.
 */
.jdw-ee-about-timeline__scroller {
	box-sizing: border-box;
	width: calc(100vw - ((100vw - var(--jdw-ee-timeline-max)) / 2) - var(--jdw-ee-timeline-inset));
	max-width: calc(100vw - var(--jdw-ee-timeline-inset));
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	/* Hide scrollbar; drag / touch still works. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Default cursor; JS sets grab when drag enabled on desktop. */
	cursor: default;
}

.jdw-ee-about-timeline__scroller::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Grab cursor only where drag JS is armed (viewport >768). */
@media (min-width: 769px) {
	.jdw-ee-about-timeline[data-drag="1"] .jdw-ee-about-timeline__scroller {
		/* Target sets overflow-x:hidden while drag is armed (>768). */
		cursor: grab;
	}

	.jdw-ee-about-timeline[data-drag="1"] .jdw-ee-about-timeline__scroller.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
}

.jdw-ee-about-timeline__content {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	aspect-ratio: 200 / 34;
	width: 200.313rem;
	height: 34rem;
	max-width: none;
	overflow: visible;
}

.jdw-ee-about-timeline__image {
	display: block;
	pointer-events: none;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: left center;
	border: 0;
	user-select: none;
	-webkit-user-drag: none;
}

/* Right fade — target .timeline-overlay; desktop only. */
.jdw-ee-about-timeline__overlay {
	z-index: 2;
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20%;
	height: 100%;
	background-image: linear-gradient(
		270deg,
		var(--jdw-ee-timeline-overlay) 19%,
		rgba(255, 255, 255, 0)
	);
}

@media (max-width: 991px) {
	.jdw-ee-about-timeline__overlay {
		display: none;
	}
}

/*
 * Elementor mobile (≤767) often switches track width via Style controls;
 * drop fixed height so aspect-ratio drives the image band.
 * Target phone (≤479) also uses height:auto + 130rem width.
 */
@media (max-width: 767px) {
	.jdw-ee-about-timeline__content {
		height: auto !important;
	}
}

/* Phone: shorter pad, narrower track. */
@media (max-width: 479px) {
	.jdw-ee-about-timeline {
		padding-top: 3rem;
		padding-bottom: 3rem;
		padding-left: 1rem;
	}

	.jdw-ee-about-timeline__content {
		width: 130rem;
		height: auto !important;
	}

	.jdw-ee-about-timeline__scroller {
		/* On small screens shell is full width; keep a small right inset. */
		width: calc(100vw - var(--jdw-ee-timeline-inset));
		max-width: calc(100vw - var(--jdw-ee-timeline-inset));
	}
}

/*
 * When viewport is narrower than content max, the bleed formula can go wrong
 * (negative side gutters). Cap scroller to nearly full viewport.
 */
@media (max-width: 1206px) {
	.jdw-ee-about-timeline__shell {
		max-width: 100%;
		padding-left: 0;
	}

	.jdw-ee-about-timeline__scroller {
		width: calc(100vw - var(--jdw-ee-timeline-inset));
		max-width: calc(100vw - var(--jdw-ee-timeline-inset));
	}
}