/* =============================================================================
   מהלך הסדנה — טיימליין עם חשיפה בגלילה
   הגאומטריה נמדדה מקנבס עיצוב ברוחב 1920px ומומרת ל-vw דרך --u
   (1px בקנבס = 0.0520833vw), כך שהיחסים נשמרים בכל רוחב מסך.
   ========================================================================== */

/* הווידג'ט ועטיפות אלמנטור שלו חייבים להיות ברוחב מלא,
   כדי שחישוב ה-margin השלילי של .mwt ינטרל בדיוק את ריפוד הקונטיינר */
.mwt-host,
.mwt-host > .elementor-widget-container,
.mwt-host .elementor-shortcode {
	width: 100%;
}

.mwt {
	--u: 0.0520833vw;          /* פיקסל אחד על קנבס 1920 */
	--b: calc(104 * var(--u)); /* קוטר תיבת המדליון */
	--cream: var(--e-global-color-accent, #f8faf8);
	--green: var(--e-global-color-secondary, #7aa06c);
	--dot: radial-gradient(circle at calc(4 * var(--u)) calc(4 * var(--u)), var(--cream) 0 calc(4 * var(--u)), transparent calc(4.5 * var(--u)));

	position: relative;
	direction: rtl;
	width: 100vw;
	margin-inline: calc(50% - 50vw); /* יציאה מריפוד הקונטיינר לרוחב מלא */
	height: calc(554 * var(--u));
}

/* הרשימה שקופה למיקום — השלבים ממוקמים מול .mwt */
.mwt__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ===== הציר המרכזי המנוקד ===== */
.mwt__spine {
	position: absolute;
	left: calc(954.5 * var(--u));
	top: 0;
	width: calc(8 * var(--u));
	height: calc(554 * var(--u));
	background-image: var(--dot);
	background-size: calc(8 * var(--u)) calc(14 * var(--u));
}

/* ===== שלב = יחידת אנימציה אחת (קו + מדליון + טקסט) ===== */
.mwt__step {
	position: absolute;
	height: calc(180 * var(--u));
	transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* רוחב 783 (ולא 692) — כדי שייכנסו אותם רווחים כמו בצד שמאל:
   122 קו + 37.5 + 498.5 טקסט + 21 + 104 מדליון = 783.
   בזכות זה הטקסט לא נוגע בקו והתרשים מתמרכז על הציר.
   ועוד 8 (סה"כ 791): המדליון נגמר בדיוק בקצה הימני של התיבה, בעוד ה-SVG
   חורג ממנה ב-4 — ו-clip-path של החשיפה נחתך בגבול התיבה, כך שהטבעת
   החיצונית של שלבים 1 ו-3 נקצצה. ההרחבה לא מזיזה דבר בפועל: הקו והמדליון
   עוגנים ב-left, ובלוק הטקסט מפצה ב-right (125 → 133). */
.mwt__step--r { left: calc(968 * var(--u)); width: calc(791 * var(--u)); }
.mwt__step--l { width: calc(774.5 * var(--u)); }

.mwt__step[data-mwt-step="1"] { top: calc(11.5 * var(--u)); }
.mwt__step[data-mwt-step="2"] { top: calc(124 * var(--u)); left: calc(176 * var(--u)); }
.mwt__step[data-mwt-step="3"] { top: calc(249.5 * var(--u)); }
.mwt__step[data-mwt-step="4"] { top: calc(362 * var(--u)); left: calc(166 * var(--u)); width: calc(784.5 * var(--u)); }

/* מצב מוסתר — נדלק רק אחרי ש-JS אתחל, כדי שבלי JS הכל יישאר גלוי */
.mwt.is-ready .mwt__spine { clip-path: inset(0 0 100% 0); }
.mwt.is-ready .mwt__step--r { clip-path: inset(0 100% 0 0); }
.mwt.is-ready .mwt__step--l { clip-path: inset(0 0 0 100%); }
.mwt.is-ready .mwt__step.is-shown { clip-path: inset(0 0 0 0); }

/* ===== הקו המחבר בין הציר לשלב ===== */
.mwt__connector {
	position: absolute;
	top: calc(86 * var(--u));
	width: calc(122 * var(--u));
	height: calc(8 * var(--u));
	background-image: var(--dot);
	background-size: calc(14 * var(--u)) calc(8 * var(--u));
}

.mwt__step--r .mwt__connector { left: 0; }
.mwt__step[data-mwt-step="2"] .mwt__connector { left: calc(652.5 * var(--u)); }
.mwt__step[data-mwt-step="4"] .mwt__connector { left: calc(662.5 * var(--u)); }

/* ===== המדליון הממוספר ===== */
.mwt__badge {
	position: absolute;
	top: calc(38 * var(--u));
	width: var(--b);
	height: var(--b);
	display: grid;
	place-items: center;
}

.mwt__step--r .mwt__badge { left: calc(679 * var(--u)); }
.mwt__step[data-mwt-step="2"] .mwt__badge { left: calc(511 * var(--u)); }
.mwt__step[data-mwt-step="4"] .mwt__badge { left: calc(521 * var(--u)); }

/* ה-SVG חורג ב-4px מכל צד מעבר לתיבה, כדי שהטבעת החיצונית לא תיחתך */
.mwt__badge svg {
	position: absolute;
	width: calc(var(--b) * 112 / 104);
	height: calc(var(--b) * 112 / 104);
	left: calc(var(--b) * -4 / 104);
	top: calc(var(--b) * -4 / 104);
}

.mwt__badge .mwt-disc { fill: var(--cream); }
.mwt__badge .mwt-ring { fill: none; stroke-linecap: round; }
.mwt__badge .mwt-ring--in { stroke: var(--green); }
.mwt__badge .mwt-ring--mid,
.mwt__badge .mwt-ring--out { stroke: var(--cream); }

.mwt__badge b {
	position: relative;
	font-family: var(--e-global-typography-secondary-font-family, "Polin-Medium"), sans-serif;
	font-weight: var(--e-global-typography-secondary-font-weight, 500);
	font-size: calc(34 * var(--u));
	line-height: 1;
	color: var(--green);
}

/* ===== בלוק הטקסט ===== */
.mwt__copy {
	position: absolute;
	top: calc(90 * var(--u));
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--u));
	text-align: right;
}

.mwt__step--r .mwt__copy { right: calc(133 * var(--u)); width: calc(498.5 * var(--u)); }
.mwt__step[data-mwt-step="2"] .mwt__copy { right: calc(284.5 * var(--u)); width: calc(490 * var(--u)); }
.mwt__step[data-mwt-step="4"] .mwt__copy { right: calc(284.5 * var(--u)); width: calc(500 * var(--u)); }

.mwt__copy h3 {
	margin: 0;
	font-family: var(--e-global-typography-secondary-font-family, "Polin-Medium"), sans-serif;
	font-weight: var(--e-global-typography-secondary-font-weight, 500);
	font-size: calc(39 * var(--u));
	line-height: 1.15;
	color: #fff;
}

.mwt__copy p {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family, "Polin-Thin"), sans-serif;
	font-weight: var(--e-global-typography-text-font-weight, 300);
	font-size: calc(24 * var(--u));
	line-height: 1.46;
	color: rgba(255, 255, 255, 0.86);
	text-wrap: pretty;
}

/* ===== נגישות — הפחתת תנועה: מצב סופי מיידי ===== */
@media (prefers-reduced-motion: reduce) {
	.mwt.is-ready .mwt__spine,
	.mwt.is-ready .mwt__step--r,
	.mwt.is-ready .mwt__step--l {
		clip-path: inset(0 0 0 0);
	}

	.mwt.is-ready .mwt__step {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =============================================================================
   מובייל וטאבלט (עד 1024px) — עמודה אחת, הציר בצד ימין

   הציר הרציף מוחלף בקטע של שלוש נקודות בין כל שני שלבים, ממורכז
   במרווח ועם רווח של לפחות 8.5px מהטבעת החיצונית של כל מדליון.
   חישוב הרווח: ה-SVG בקוטר 62 × 112/104 = 66.77px, והטבעת החיצונית
   (r=53, stroke 2.8) מגיעה עד רדיוס 54.4/56 ממנו — כלומר 32.43px מהמרכז.
   עם min-height של 78px לשלב ומרווח 34px: 2 + 39 − 32.43 = 8.57px מכל צד.
   ========================================================================== */
@media (max-width: 1024px) {

	.mwt {
		--b: 62px;
		--dot: radial-gradient(circle at 2px 2px, var(--cream) 0 2px, transparent 2.3px);

		width: 100%;
		margin-inline: 0;
		height: auto;
		padding: 26px 0;
	}

	.mwt__spine { display: none; }

	.mwt__step,
	.mwt__step--r,
	.mwt__step--l,
	.mwt__step[data-mwt-step="1"],
	.mwt__step[data-mwt-step="2"],
	.mwt__step[data-mwt-step="3"],
	.mwt__step[data-mwt-step="4"] {
		position: relative;
		inset: auto; /* מבטל את המיקום האבסולוטי של הדסקטופ */
		width: 100%;
		height: auto;
		min-height: 78px;
		display: flex;
		align-items: center;
		gap: 16px;
		padding-right: 9px;
	}

	.mwt__step + .mwt__step { margin-top: 34px; }

	/* החשיפה עוברת להסטה ושקיפות — clip-path היה חותך את
	   קטע הנקודות שיושב מחוץ לתיבת השלב */
	.mwt.is-ready .mwt__step,
	.mwt.is-ready .mwt__step--r,
	.mwt.is-ready .mwt__step--l {
		clip-path: none;
		opacity: 0;
		transform: translateX(24px);
		transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mwt.is-ready .mwt__step.is-shown {
		clip-path: none;
		opacity: 1;
		transform: none;
	}

	/* שלוש נקודות ציר, ממורכזות במרווח בן 34px שבין שני שלבים.
	   גובה 30px = 3 נקודות של 4px בצעד 13px (0–4, 13–17, 26–30). */
	.mwt__connector,
	.mwt__step--r .mwt__connector,
	.mwt__step[data-mwt-step="2"] .mwt__connector,
	.mwt__step[data-mwt-step="4"] .mwt__connector {
		display: block;
		top: -32px;
		left: auto;
		right: 38px;
		width: 4px;
		height: 30px;
		background-size: 4px 13px;
		background-repeat: repeat-y;
	}

	/* אין קטע מעל השלב הראשון */
	.mwt__step:first-child .mwt__connector { display: none; }

	.mwt__badge,
	.mwt__step--r .mwt__badge,
	.mwt__step[data-mwt-step="2"] .mwt__badge,
	.mwt__step[data-mwt-step="4"] .mwt__badge {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 var(--b);
	}

	.mwt__badge b { font-size: 24px; }

	/* רוחב קבוע למדליון ורווח קבוע מבטיחים שכל בלוקי הטקסט
	   מתחילים ומסתיימים באותו קו אנכי בכל ארבעת השלבים */
	.mwt__copy,
	.mwt__step--r .mwt__copy,
	.mwt__step[data-mwt-step="2"] .mwt__copy,
	.mwt__step[data-mwt-step="4"] .mwt__copy {
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		gap: 8px;
	}

	.mwt__copy h3 { font-size: 21px; }
	.mwt__copy p { font-size: 15px; }
}