/**
 * 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;
	}
}


/* =========================================================================
   Rail layout (display_mode = rail) — responsive: orientation, widths, sides,
   line style, and hover are all controllable. Orientation is set per device
   via the wrapper class zz-tl-o{-device}-{vertical|horizontal}. The line uses
   a border so it supports solid / dashed / dotted, and is clipped to the first
   and last nodes. Nodes reuse .zz-tl-marker; the year reuses .zz-tl-subtitle.
   ========================================================================= */
.zz-tl-rail {
	--zz-tl-line-size: 2px;
	--zz-tl-line-color: #d9dce3;
	--zz-tl-line-style: solid;
	--zz-tl-rail-gap: 28px;
	--zz-tl-year-w: 84px;
	--zz-tl-rail-w: 44px;
	--zz-tl-card-w: 240px;
	display: flex;
}
.zz-tl-rail .zz-tl-r-item { text-decoration: none; color: inherit; }
.zz-tl-rail .zz-tl-r-rail { position: relative; display: flex; }
.zz-tl-rail .zz-tl-marker {
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: 50%;
	min-width: 16px;
	min-height: 16px;
	background: #ffffff;
	border: 3px solid #2f6bff;
}
.zz-tl-rail .zz-tl-r-card {
	height: auto;
	transition: transform var(--zz-tl-hover-dur, 300ms) ease, box-shadow var(--zz-tl-hover-dur, 300ms) ease, background-color var(--zz-tl-hover-dur, 300ms) ease, border-color var(--zz-tl-hover-dur, 300ms) ease;
}
.zz-tl-rail .zz-tl-r-card:hover {
	transform: translateY(var(--zz-tl-hover-y, 0)) scale(var(--zz-tl-hover-scale, 1));
}
.zz-tl-rail .zz-tl-r-yeartop { display: none; }
.zz-tl-rail .zz-tl-r-yeartop,
.zz-tl-rail .zz-tl-r-yearside { line-height: 1.1; }
.zz-tl-rail.hide-desc .zz-tl-desc { display: none; }
@media (prefers-reduced-motion: reduce) {
	.zz-tl-rail .zz-tl-r-card { transition: none; }
}

/* ---- Desktop orientation ---- */

.zz-tl-o-vertical .zz-tl-rail { flex-direction: column; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-item { display: grid; align-items: stretch; column-gap: 16px; grid-template-rows: none; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-rail { grid-area: rail; flex-direction: column; align-items: center; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-seg { width: 0; height: auto; border-top: 0; border-left: var(--zz-tl-line-size) var(--zz-tl-line-style, solid) var(--zz-tl-line-color); }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-seg-a { flex: 0 0 16px; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-seg-b { flex: 1 1 auto; min-height: 16px; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-card { grid-area: card; padding-bottom: var(--zz-tl-rail-gap); }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-card { padding-bottom: 0; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-item:first-child .zz-tl-r-seg-a { border-color: transparent; }
.zz-tl-o-vertical .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-seg-b { border-color: transparent; }
.zz-tl-o-vertical .zz-tl-rail.is-standard .zz-tl-r-yearside { display: block; }
.zz-tl-o-vertical .zz-tl-rail.is-standard .zz-tl-r-yeartop { display: none; }
.zz-tl-o-vertical .zz-tl-rail.is-standard.is-yleft .zz-tl-r-item { grid-template-columns: var(--zz-tl-year-w) var(--zz-tl-rail-w) minmax(0, 1fr); grid-template-areas: "year rail card"; }
.zz-tl-o-vertical .zz-tl-rail.is-standard.is-yleft .zz-tl-r-yearside { grid-area: year; text-align: right; padding-top: 12px; }
.zz-tl-o-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-item { grid-template-columns: minmax(0, 1fr) var(--zz-tl-rail-w) var(--zz-tl-year-w); grid-template-areas: "card rail year"; }
.zz-tl-o-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-yearside { grid-area: year; text-align: left; padding-top: 12px; }
.zz-tl-o-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-card { text-align: right; }
.zz-tl-o-vertical .zz-tl-rail.is-alternate .zz-tl-r-yearside { display: none; }
.zz-tl-o-vertical .zz-tl-rail.is-alternate .zz-tl-r-yeartop { display: block; }
.zz-tl-o-vertical .zz-tl-rail.is-alternate .zz-tl-r-item { grid-template-columns: minmax(0, 1fr) var(--zz-tl-rail-w) minmax(0, 1fr); }
.zz-tl-o-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(odd) { grid-template-areas: ". rail card"; }
.zz-tl-o-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) { grid-template-areas: "card rail ."; }
.zz-tl-o-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) .zz-tl-r-card { text-align: right; }

.zz-tl-o-horizontal .zz-tl-rail { flex-direction: row; align-items: stretch; overflow-x: auto; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-item { flex: 1 0 0; min-width: var(--zz-tl-card-w); display: grid; grid-template-columns: none; grid-template-rows: 1fr auto 1fr; grid-template-areas: "top" "rail" "bottom"; column-gap: 0; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-rail { grid-area: rail; flex-direction: row; align-items: center; justify-content: center; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-seg { height: 0; width: auto; border-left: 0; border-top: var(--zz-tl-line-size) var(--zz-tl-line-style, solid) var(--zz-tl-line-color); flex: 1 1 auto; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-item:first-child .zz-tl-r-seg-a { border-color: transparent; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-seg-b { border-color: transparent; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-yearside { display: none; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-yeartop { display: block; margin-bottom: 6px; }
.zz-tl-o-horizontal .zz-tl-rail .zz-tl-r-card { max-width: var(--zz-tl-card-w); margin: 0 auto; padding: 0 12px; }
.zz-tl-o-horizontal .zz-tl-rail.is-standard.is-cbelow .zz-tl-r-card { grid-area: bottom; align-self: start; padding-top: 14px; }
.zz-tl-o-horizontal .zz-tl-rail.is-standard.is-cabove .zz-tl-r-card { grid-area: top; align-self: end; padding-bottom: 14px; }
.zz-tl-o-horizontal .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(odd) .zz-tl-r-card { grid-area: bottom; align-self: start; padding-top: 14px; }
.zz-tl-o-horizontal .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) .zz-tl-r-card { grid-area: top; align-self: end; padding-bottom: 14px; }

/* ---- Tablet orientation (<=1024px) ---- */
@media (max-width: 1024px) {

.zz-tl-o-tablet-vertical .zz-tl-rail { flex-direction: column; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-item { display: grid; align-items: stretch; column-gap: 16px; grid-template-rows: none; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-rail { grid-area: rail; flex-direction: column; align-items: center; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-seg { width: 0; height: auto; border-top: 0; border-left: var(--zz-tl-line-size) var(--zz-tl-line-style, solid) var(--zz-tl-line-color); }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-seg-a { flex: 0 0 16px; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-seg-b { flex: 1 1 auto; min-height: 16px; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-card { grid-area: card; padding-bottom: var(--zz-tl-rail-gap); }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-card { padding-bottom: 0; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-item:first-child .zz-tl-r-seg-a { border-color: transparent; }
.zz-tl-o-tablet-vertical .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-seg-b { border-color: transparent; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard .zz-tl-r-yearside { display: block; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard .zz-tl-r-yeartop { display: none; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard.is-yleft .zz-tl-r-item { grid-template-columns: var(--zz-tl-year-w) var(--zz-tl-rail-w) minmax(0, 1fr); grid-template-areas: "year rail card"; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard.is-yleft .zz-tl-r-yearside { grid-area: year; text-align: right; padding-top: 12px; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-item { grid-template-columns: minmax(0, 1fr) var(--zz-tl-rail-w) var(--zz-tl-year-w); grid-template-areas: "card rail year"; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-yearside { grid-area: year; text-align: left; padding-top: 12px; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-card { text-align: right; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-alternate .zz-tl-r-yearside { display: none; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-alternate .zz-tl-r-yeartop { display: block; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-alternate .zz-tl-r-item { grid-template-columns: minmax(0, 1fr) var(--zz-tl-rail-w) minmax(0, 1fr); }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(odd) { grid-template-areas: ". rail card"; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) { grid-template-areas: "card rail ."; }
.zz-tl-o-tablet-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) .zz-tl-r-card { text-align: right; }

.zz-tl-o-tablet-horizontal .zz-tl-rail { flex-direction: row; align-items: stretch; overflow-x: auto; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-item { flex: 1 0 0; min-width: var(--zz-tl-card-w); display: grid; grid-template-columns: none; grid-template-rows: 1fr auto 1fr; grid-template-areas: "top" "rail" "bottom"; column-gap: 0; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-rail { grid-area: rail; flex-direction: row; align-items: center; justify-content: center; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-seg { height: 0; width: auto; border-left: 0; border-top: var(--zz-tl-line-size) var(--zz-tl-line-style, solid) var(--zz-tl-line-color); flex: 1 1 auto; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-item:first-child .zz-tl-r-seg-a { border-color: transparent; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-seg-b { border-color: transparent; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-yearside { display: none; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-yeartop { display: block; margin-bottom: 6px; }
.zz-tl-o-tablet-horizontal .zz-tl-rail .zz-tl-r-card { max-width: var(--zz-tl-card-w); margin: 0 auto; padding: 0 12px; }
.zz-tl-o-tablet-horizontal .zz-tl-rail.is-standard.is-cbelow .zz-tl-r-card { grid-area: bottom; align-self: start; padding-top: 14px; }
.zz-tl-o-tablet-horizontal .zz-tl-rail.is-standard.is-cabove .zz-tl-r-card { grid-area: top; align-self: end; padding-bottom: 14px; }
.zz-tl-o-tablet-horizontal .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(odd) .zz-tl-r-card { grid-area: bottom; align-self: start; padding-top: 14px; }
.zz-tl-o-tablet-horizontal .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) .zz-tl-r-card { grid-area: top; align-self: end; padding-bottom: 14px; }
}

/* ---- Mobile orientation (<=767px) ---- */
@media (max-width: 767px) {

.zz-tl-o-mobile-vertical .zz-tl-rail { flex-direction: column; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-item { display: grid; align-items: stretch; column-gap: 16px; grid-template-rows: none; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-rail { grid-area: rail; flex-direction: column; align-items: center; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-seg { width: 0; height: auto; border-top: 0; border-left: var(--zz-tl-line-size) var(--zz-tl-line-style, solid) var(--zz-tl-line-color); }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-seg-a { flex: 0 0 16px; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-seg-b { flex: 1 1 auto; min-height: 16px; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-card { grid-area: card; padding-bottom: var(--zz-tl-rail-gap); }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-card { padding-bottom: 0; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-item:first-child .zz-tl-r-seg-a { border-color: transparent; }
.zz-tl-o-mobile-vertical .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-seg-b { border-color: transparent; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard .zz-tl-r-yearside { display: block; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard .zz-tl-r-yeartop { display: none; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard.is-yleft .zz-tl-r-item { grid-template-columns: var(--zz-tl-year-w) var(--zz-tl-rail-w) minmax(0, 1fr); grid-template-areas: "year rail card"; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard.is-yleft .zz-tl-r-yearside { grid-area: year; text-align: right; padding-top: 12px; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-item { grid-template-columns: minmax(0, 1fr) var(--zz-tl-rail-w) var(--zz-tl-year-w); grid-template-areas: "card rail year"; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-yearside { grid-area: year; text-align: left; padding-top: 12px; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-standard.is-yright .zz-tl-r-card { text-align: right; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-alternate .zz-tl-r-yearside { display: none; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-alternate .zz-tl-r-yeartop { display: block; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-alternate .zz-tl-r-item { grid-template-columns: minmax(0, 1fr) var(--zz-tl-rail-w) minmax(0, 1fr); }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(odd) { grid-template-areas: ". rail card"; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) { grid-template-areas: "card rail ."; }
.zz-tl-o-mobile-vertical .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) .zz-tl-r-card { text-align: right; }

.zz-tl-o-mobile-horizontal .zz-tl-rail { flex-direction: row; align-items: stretch; overflow-x: auto; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-item { flex: 1 0 0; min-width: var(--zz-tl-card-w); display: grid; grid-template-columns: none; grid-template-rows: 1fr auto 1fr; grid-template-areas: "top" "rail" "bottom"; column-gap: 0; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-rail { grid-area: rail; flex-direction: row; align-items: center; justify-content: center; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-seg { height: 0; width: auto; border-left: 0; border-top: var(--zz-tl-line-size) var(--zz-tl-line-style, solid) var(--zz-tl-line-color); flex: 1 1 auto; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-item:first-child .zz-tl-r-seg-a { border-color: transparent; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-item:last-child .zz-tl-r-seg-b { border-color: transparent; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-yearside { display: none; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-yeartop { display: block; margin-bottom: 6px; }
.zz-tl-o-mobile-horizontal .zz-tl-rail .zz-tl-r-card { max-width: var(--zz-tl-card-w); margin: 0 auto; padding: 0 12px; }
.zz-tl-o-mobile-horizontal .zz-tl-rail.is-standard.is-cbelow .zz-tl-r-card { grid-area: bottom; align-self: start; padding-top: 14px; }
.zz-tl-o-mobile-horizontal .zz-tl-rail.is-standard.is-cabove .zz-tl-r-card { grid-area: top; align-self: end; padding-bottom: 14px; }
.zz-tl-o-mobile-horizontal .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(odd) .zz-tl-r-card { grid-area: bottom; align-self: start; padding-top: 14px; }
.zz-tl-o-mobile-horizontal .zz-tl-rail.is-alternate .zz-tl-r-item:nth-child(even) .zz-tl-r-card { grid-area: top; align-self: end; padding-bottom: 14px; }
}