/* JPG Events Timeline — every rule is scoped to .jpgtl so nothing leaks into the theme. */

.jpgtl {
	--jpgtl-track: rgba(228, 176, 42, 0.22);
	--jpgtl-fill: #E4B02A;
	--jpgtl-t: 1px;
	--jpgtl-m: 22px;
	--jpgtl-mbw: 2px;
	--jpgtl-mbc: rgba(228, 176, 42, 0.45);
	--jpgtl-mbg: #0A0A0A;
	--jpgtl-mabc: #E4B02A;
	--jpgtl-mabg: #0A0A0A;
	--jpgtl-glow: rgba(228, 176, 42, 0.45);
	--jpgtl-glow-size: 14px;
	--jpgtl-mas: 1.1;
	--jpgtl-rot: 45deg;
	--jpgtl-ms-box: calc(var(--jpgtl-m) * 0.7071); /* square side so the rotated diamond's width = --jpgtl-m */
	--jpgtl-nsc: rgba(228, 176, 42, 0.75);
	--jpgtl-nsw: 1px;
	--jpgtl-nc: #E4B02A;
	--jpgtl-tc: #FDFBF7;
	--jpgtl-dc: rgba(253, 251, 247, 0.62);
	--jpgtl-gap: 48px;
	--jpgtl-marker-gap: 48px;
	--jpgtl-num-gap: 36px;
	--jpgtl-title-gap: 22px;
	--jpgtl-row-gap: 48px;
	--jpgtl-indent: 22px;
	--jpgtl-vtop: 14px;
	--jpgtl-cols: 4;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.jpgtl *,
.jpgtl *::before,
.jpgtl *::after { box-sizing: border-box; }

/* ── line ── */
.jpgtl-track {
	position: absolute;
	z-index: 0;
	left: calc(var(--jpgtl-m) / 2);
	top: calc(var(--jpgtl-m) / 2);
	right: 0;
	height: var(--jpgtl-t);
	transform: translateY(-50%);
	background: var(--jpgtl-track);
	pointer-events: none;
}
.jpgtl-line-dashed .jpgtl-track { background: repeating-linear-gradient(90deg, var(--jpgtl-track) 0 8px, transparent 8px 14px); }
.jpgtl-line-dotted .jpgtl-track { background: repeating-linear-gradient(90deg, var(--jpgtl-track) 0 var(--jpgtl-t), transparent var(--jpgtl-t) calc(var(--jpgtl-t) * 4)); min-height: 0; }
.jpgtl-fill {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--jpgtl-fill);
	transform-origin: 0 50%;
	will-change: transform;
}

/* ── steps (horizontal default) ── */
.jpgtl-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--jpgtl-cols), minmax(0, 1fr));
	column-gap: var(--jpgtl-gap);
	row-gap: var(--jpgtl-row-gap);
}
.jpgtl-step {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.jpgtl-step::before,
.jpgtl-step::marker { content: none; }

/* marker box is exactly --jpgtl-m wide; the inner square is sized so its rotated diagonal fits */
.jpgtl-marker {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--jpgtl-m);
	height: var(--jpgtl-m);
	margin: 0 0 var(--jpgtl-marker-gap);
}
.jpgtl-marker::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--jpgtl-ms-box);
	height: var(--jpgtl-ms-box);
	background: var(--jpgtl-mbg);
	border: var(--jpgtl-mbw) solid var(--jpgtl-mbc);
	transform: translate(-50%, -50%) rotate(var(--jpgtl-rot)) scale(var(--jpgtl-s, 1));
	transition: background-color .45s ease, border-color .45s ease, box-shadow .6s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.jpgtl-shape-square .jpgtl,
.jpgtl-shape-circle .jpgtl { --jpgtl-rot: 0deg; --jpgtl-ms-box: var(--jpgtl-m); }
.jpgtl-shape-circle .jpgtl-marker::before { border-radius: 50%; }

.jpgtl-step.is-active .jpgtl-marker::before {
	--jpgtl-s: var(--jpgtl-mas);
	background: var(--jpgtl-mabg);
	border-color: var(--jpgtl-mabc);
	box-shadow: 0 0 var(--jpgtl-glow-size) var(--jpgtl-glow);
}

/* ── text ── */
.jpgtl-body { min-width: 0; }
.jpgtl-num {
	display: block;
	margin: 0 0 var(--jpgtl-num-gap);
	font-family: 'Anton', sans-serif;
	font-size: 68px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: var(--jpgtl-nsw) var(--jpgtl-nsc);
	transition: -webkit-text-stroke-color .5s ease, color .5s ease;
}
.jpgtl-num-solid .jpgtl-num {
	color: var(--jpgtl-nc);
	-webkit-text-stroke: 0 transparent;
}
.jpgtl .jpgtl-title {
	margin: 0 0 var(--jpgtl-title-gap);
	padding: 0;
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.12;
	color: var(--jpgtl-tc);
}
.jpgtl .jpgtl-desc {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--jpgtl-dc);
}
.jpgtl .jpgtl-desc p { margin: 0 0 .8em; }
.jpgtl .jpgtl-desc p:last-child { margin-bottom: 0; }

/* ── vertical (mobile) — class is toggled by the script at your Elementor breakpoint ── */
.jpgtl.is-vertical .jpgtl-steps {
	display: flex;
	flex-direction: column;
	gap: var(--jpgtl-row-gap);
}
.jpgtl.is-vertical .jpgtl-step {
	padding-left: calc(var(--jpgtl-m) + var(--jpgtl-indent));
}
.jpgtl.is-vertical .jpgtl-marker {
	position: absolute;
	left: 0;
	top: var(--jpgtl-vtop);
	margin: 0;
}
.jpgtl.is-vertical .jpgtl-track {
	right: auto;
	height: auto;
	width: var(--jpgtl-t);
	transform: translateX(-50%);
}
.jpgtl.is-vertical .jpgtl-fill { transform-origin: 50% 0; }
.jpgtl-line-dashed .jpgtl.is-vertical .jpgtl-track { background: repeating-linear-gradient(180deg, var(--jpgtl-track) 0 8px, transparent 8px 14px); }
.jpgtl-line-dotted .jpgtl.is-vertical .jpgtl-track { background: repeating-linear-gradient(180deg, var(--jpgtl-track) 0 var(--jpgtl-t), transparent var(--jpgtl-t) calc(var(--jpgtl-t) * 4)); }

/* ── step reveal (only applied once the script is running, never in the editor) ── */
.jpgtl.has-reveal .jpgtl-step {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
}
.jpgtl.has-reveal .jpgtl-step.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.jpgtl .jpgtl-step,
	.jpgtl .jpgtl-marker::before,
	.jpgtl .jpgtl-fill { transition: none !important; }
	.jpgtl.has-reveal .jpgtl-step { opacity: 1; transform: none; }
}