/**
 * Section 4: 5-steps listing — Figma desktop 4095:4785 · mobile 4095:6010
 *
 * Dial (--dial-u = "đơn vị tỉ lệ" dạng length: 1px ở desktop, .4px ở mobile,
 * .8px ở tablet — mọi kích thước dial = hằng số Figma × var(--dial-u)):
 *   vòng tròn  Ø1000, stroke 1px stroke
 *   marker     bán kính 514, cách nhau 30°, xoay theo góc
 *   chấm       Ø20 #ff000f · số 32 màu 1st-fg (inactive: opacity .3, chấm ẩn)
 *   gap        8 giữa chấm và số
 *
 * KHÁC creator-discovery: ở đây 3 cột BẰNG NHAU 565.33 (1856 = 565.33×3 + 80×2),
 * không phải dial 538 + 2 cột 579.
 */

#cr-steps {
	/* Figma frame clipsContent = true — cắt phần vòng quay tràn sang trái.
	   overflow-x: clip (không phải hidden) để không phá position: sticky bên trong. */
	overflow-x: clip;
	overflow-y: visible;
}

/* Section này full-bleed: content-wrapper = 1856 = 1920 − 2 × 32 */
#cr-steps .cr-container--wide {
	max-width: none;
}

#cr-steps .cr-steps {
	--dial-u: 1px;
	--dial-diameter: calc(1000 * var(--dial-u));
	--dial-radius: calc(514 * var(--dial-u));

	display: flex;
	align-items: center;
	gap: var(--var-80);
}

/* ---------- dial ---------- */
/* Figma: 3 cột bằng nhau — (100% − 2 × gap 80) / 3
     desktop 1856 → 565.33 ✓
     laptop  1272 → 370.67 ✓ */
#cr-steps .cr-steps__dial {
	position: relative;
	flex: none;
	width: calc((100% - 2 * var(--var-80)) / 3);
	height: 1076px;
}

/* Tâm vòng tròn neo theo mép PHẢI của cột dial.
   Figma: dial 1076 đặt tại x = −511.09 trong cột 565.33 → tâm (538) ở 26.91,
   marker active (0.56°) ở 26.91 + 514 = 540.9 → cách mép phải 565.33 − 540.9 = 24.4 */
#cr-steps .cr-steps__circle {
	position: absolute;
	left: calc(100% - var(--dial-radius) - 24 * var(--dial-u));
	top: 50%;
	width: var(--dial-diameter);
	height: var(--dial-diameter);
	margin-left: calc(var(--dial-diameter) / -2);
	margin-top: calc(var(--dial-diameter) / -2);
	border: 1px solid var(--color-reverse-stroke);
	border-radius: 50%;
}

#cr-steps .cr-steps__marker {
	position: absolute;
	left: calc(100% - var(--dial-radius) - 24 * var(--dial-u));
	top: 50%;
	transform-origin: 0 0;
	transform: rotate(calc(var(--angle) + var(--cr-dial-base, 0deg))) translateX(var(--dial-radius));
	/* là <button> — bỏ style mặc định, chỉ marker của bộ đầu mới bắt click */
	padding: 0;
	background: none;
	border: 0;
}

#cr-steps .cr-steps__marker-inner {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--dial-u));
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--cr-dial-base, 0deg)));
}

#cr-steps .cr-steps__dot {
	width: calc(20 * var(--dial-u));
	height: calc(20 * var(--dial-u));
	flex: none;
	border-radius: 50%;
	background: #ff000f;
}

/* Figma: text node rộng cố định 20, line-height 32, căn giữa
   → marker inner = 20 + gap 8 + 20 = 48 × 32 */
#cr-steps .cr-steps__num {
	width: calc(20 * var(--dial-u));
	flex: none;
	font-size: calc(32 * var(--dial-u));
	line-height: calc(32 * var(--dial-u));
	text-align: center;
	color: var(--color-reverse-fg);
}

/* trạng thái marker TĨNH theo Figma (khi chưa có JS) */
#cr-steps .cr-steps__marker.is-dim .cr-steps__dot { opacity: 0; }
#cr-steps .cr-steps__marker.is-dim .cr-steps__num { opacity: .3; }
#cr-steps .cr-steps__marker.is-off { opacity: 0; }

/* ---------- text + media ---------- */
#cr-steps .cr-steps__text,
#cr-steps .cr-steps__media {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
}

#cr-steps .cr-steps__text-inner {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
	width: 100%;
}

/* Figma: section-headings cột 2 cao 75 = h4 36.8 + gap 16 + description 22.4 */
#cr-steps .cr-steps__title {
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.15;
	color: var(--color-reverse-fg);
}

/* Ảnh mỗi step có tỉ lệ RIÊNG (step 4 cao 726, các step khác 600) → để trình
   duyệt suy ra từ width/height attribute, không ép aspect-ratio chung.
   max-height + object-fit: chặn ảnh cao nhất (step 4) tràn ra ngoài khối khi
   khối bị thu lại cho vừa viewport — xem ghi chú --steps-fit bên dưới. */
#cr-steps .cr-steps__media img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
	/* Figma dựng khối cao 1076. Nhưng đây là khối DÍNH (sticky) nên nó phải lọt
	   trong viewport — mà laptop thường chỉ cao 800–950px. Đo được ở vh 960:
	   khối tràn 182px xuống dưới màn hình, ảnh step 4 (cao nhất, 726) bị cắt đáy.
	   → thu cả khối cho vừa phần màn hình còn lại sau header.
	   Màn cao ≥ 1196 thì --steps-fit = 1, giữ nguyên 100% kích thước Figma. */
	#cr-steps .cr-steps {
		--steps-fit: min(1, calc((100vh - 120px) / 1076px));
		--dial-u: calc(1px * var(--steps-fit));
		height: calc(1076px * var(--steps-fit));
	}

	/* vòng quay co theo --dial-u nên tự khớp; chỉ cần đồng bộ chiều cao khung */
	#cr-steps .cr-steps__dial {
		height: calc(1076px * var(--steps-fit));
	}

	/* cột ảnh chiếm trọn chiều cao khối để max-height của <img> có mốc quy chiếu */
	#cr-steps .cr-steps__media {
		align-self: stretch;
		justify-content: center;
	}
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 1024px) {
	/* Figma: vòng quay ở tablet đúng gấp ĐÔI mobile
	     Ø 400 → 800 · chấm 8 → 16 · số 12.8 → 25.6
	   nên --dial-u nội suy tuyến tính theo bề rộng viewport, khớp 2 mốc Figma:
	     390px → .4   ·   834px → .8
	   Đây là MỘT quy tắc fluid, không phải breakpoint thứ ba. */
	#cr-steps .cr-steps {
		--dial-u: calc(.4px + (100vw - 390px) * 0.0009009009);
		flex-direction: column;
		align-items: stretch;
		gap: var(--var-40);
		height: auto;
	}

	/* Khung nhìn dial: Figma 350×120 @390 và 794×150 @834 */
	#cr-steps .cr-steps__dial {
		width: 100%;
		height: calc(120px + (100vw - 390px) * 0.06756757);
		overflow: hidden;
		/* marker đang chọn nằm ở đáy vòng tròn = giữa khung nhìn */
		--cr-dial-base: 90deg;
	}

	/* Figma tablet: nội dung panel rộng tối đa 500 và căn giữa (frame 4107:10472) */
	#cr-steps .cr-steps__text,
	#cr-steps .cr-steps__media {
		width: 100%;
		max-width: 500px;
		margin-inline: auto;
	}

	/* Ô đang chọn ở đáy vòng tròn → marker xếp DỌC: chấm trên cung, số dưới */
	#cr-steps .cr-steps__marker-inner {
		flex-direction: column;
	}

	/* Tâm vòng tròn: đáy vòng cách đáy khung nhìn đúng 38 × --dial-u
	     mobile 120 − 15.2 − 200 = −95.2   ✓ Figma
	     tablet 150 − 30.4 − 400 = −280.4  ✓ Figma */
	#cr-steps .cr-steps__circle,
	#cr-steps .cr-steps__marker {
		left: 50%;
		top: calc(100% - 38 * var(--dial-u) - var(--dial-diameter) / 2);
	}

	#cr-steps .cr-steps__circle {
		margin-top: calc(var(--dial-diameter) / -2);
	}
}

/* ============================================================
   Effect "Step spinner" (spec khách — 5-steps listing)
   Vòng quay xoay −30°/step để marker của step đang chọn về vị trí 0° (bên phải).
   Marker active: chấm đỏ + số sáng. Marker khác: số mờ 30%, ẩn chấm.
   ============================================================ */
#cr-steps .cr-steps__dial {
	--cr-dial-rot: 0deg;
}

#customer-referral.cr-motion-ready #cr-steps .cr-steps__circle,
#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker {
	transition: transform .72s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Xoay cả cụm marker quanh tâm vòng tròn.
 *   vị trí marker  = --angle + --cr-dial-base + --cr-dial-rot
 *   hướng nội dung = --rot   + --cr-dial-rot
 *   → inner bù lại: −--cr-dial-base
 *
 * --cr-dial-base: vị trí "ô active" trên vòng tròn.
 *   desktop 0°  → active bên phải (tâm ở mép trái cột)
 *   mobile  90° → active ở đáy giữa khung
 */
#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker {
	transform: rotate(calc(var(--angle) + var(--cr-dial-base, 0deg) + var(--cr-dial-rot))) translateX(var(--dial-radius));
}

#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker-inner {
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--cr-dial-base, 0deg)));
	transition: transform .72s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Trạng thái do JS điều khiển thay cho is-dim/is-off tĩnh của Figma */
#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker.is-off { opacity: 1; }

#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker .cr-steps__dot { opacity: 0; }
#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker .cr-steps__num { opacity: .3; }

#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker.is-current .cr-steps__dot { opacity: 1; }
#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker.is-current .cr-steps__num { opacity: 1; }

#cr-steps .cr-steps__dot,
#cr-steps .cr-steps__num {
	transition: opacity .4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- panels ---------- */
#cr-steps .cr-steps__panels {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* Mỗi panel = text 565.33 + gap 80 + media 565.33 */
#cr-steps .cr-steps__panel {
	display: flex;
	align-items: center;
	gap: var(--var-80);
	width: 100%;
	transition: opacity .42s cubic-bezier(0.22, 0.61, 0.36, 1), transform .42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#customer-referral.cr-motion-ready #cr-steps .cr-steps__panel:not(.is-active) {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

@media (min-width: 1025px) {
	/* Khối panels cao đúng 1076 nhờ align-self: stretch, nên TẤT CẢ panel đều
	   absolute inset 0 — để panel đầu ở position: relative thì nó chỉ cao bằng
	   nội dung và bị dính lên đỉnh, lệch so với các panel còn lại. */
	#cr-steps .cr-steps__panels {
		align-self: stretch;
	}

	#cr-steps .cr-steps__panel {
		position: absolute;
		inset: 0;
		height: 100%;
	}
}

@media (max-width: 1024px) {
	#cr-steps .cr-steps__panel {
		flex-direction: column;
		align-items: stretch;
		gap: var(--var-20);
	}

	/* Spinner chạy cả ở mobile (xem scripts.js): các panel chồng lên nhau và
	   crossfade như desktop. Panel đầu giữ trong luồng để khối panels vẫn có
	   chiều cao tự nhiên. */
	#cr-steps .cr-steps__panel {
		position: absolute;
		inset: 0;
	}

	#cr-steps .cr-steps__panel:first-child {
		position: relative;
	}
}

@media (prefers-reduced-motion: reduce) {
	#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker,
	#customer-referral.cr-motion-ready #cr-steps .cr-steps__marker-inner,
	#cr-steps .cr-steps__panel { transition: none; }
}