/**
 * ZZ Timeline v1.1.1 — frontend styles.
 */

.zz-tl-wrapper {
	position: relative;
	width: 100%;
}

.zz-tl-carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/* ---------- Self-contained Swiper layout ----------
 * Scoped to this widget so the timeline never depends on Elementor's
 * Swiper stylesheet being enqueued on the frontend. Without these rules
 * the slides fall out of flex layout and Swiper's transform pushes them
 * off-screen (visible in editor, invisible on the frontend).
 */
.zz-tl-carousel .swiper-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	align-items: stretch;
	transition-property: transform;
}

.zz-tl-carousel .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: auto;
	position: relative;
	transition-property: transform;
}

.zz-tl-carousel.swiper-horizontal {
	touch-action: pan-y;
}

.zz-tl-carousel.swiper-vertical {
	touch-action: pan-x;
}

.zz-tl-slide {
	height: auto;
}

/* ---------- Full layout (no slider) ----------
 * Always a CSS grid. Orientation is just the column template:
 * horizontal = repeat( cols ), vertical = 1fr (stacked). The
 * grid-template-columns value is set per breakpoint by the
 * Orientation control, so each device can differ.
 */

.zz-tl-grid {
	width: 100%;
	display: grid;
	gap: 60px;
	align-items: start;
	grid-template-columns: repeat( var( --zz-tl-cols, 3 ), minmax( 0, 1fr ) );
}

/* ---------- Item ---------- */
.zz-tl-item {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

a.zz-tl-item {
	cursor: pointer;
}

.zz-tl-grid .zz-tl-item {
	height: auto;
}

/* ---------- Marker + line head ---------- */

.zz-tl-head {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 32px;
}

.zz-tl-marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: 700;
	color: #ff6a00;
	margin-right: 14px;
}

.zz-tl-marker svg {
	display: block;
	width: 20px;
	height: 20px;
}

.zz-tl-marker img {
	display: block;
	max-width: 100%;
}

.zz-tl-line {
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background-color: #e5e5e5;
}

/* ---------- Content ---------- */

.zz-tl-content {
	display: block;
}

.zz-tl-title {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: #111;
}

.zz-tl-subtitle {
	margin: 0 0 12px;
	font-size: 15px;
	color: #666;
}

.zz-tl-desc {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	color: #888;
}

.zz-tl-image {
	margin: 0 0 16px;
}

.zz-tl-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Navigation ---------- */

.zz-tl-nav {
	display: flex;
	gap: 12px;
	margin-top: 40px;
	justify-content: flex-start;
}

.zz-tl-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid #111;
	background-color: #fff;
	color: #111;
	cursor: pointer;
	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.zz-tl-nav-btn svg {
	display: block;
}

.zz-tl-nav-btn.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Scroll-driven mode ---------- */

.zz-tl-wrapper.zz-tl-scroll .zz-tl-carousel {
	cursor: default;
}

/* ---------- Reduced motion ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.zz-tl-wrapper * {
		transition-duration: 0.01ms !important;
	}
}