/**
 * Section: make sure — Figma 4002:1808 (desktop) / 4002:2312 (mobile)
 *
 * Desktop  make-sure  HORIZONTAL gap 60 (var-60), 1400 x 560
 *   progress  28 x 116 · radius 999 · bg 2nd-bg · padding 8 (var-8) · gap 8
 *             active 12 x 40 fill #fff@80% (2nd-fg) · dot 12 x 12 fill stroke
 *   image     626 x 560  (ratio 626/560 = 1.1179)
 *   body      626 x 560, section-headings căn giữa dọc
 *   title     25 / 600 / lh 115%  ·  description 16 / 400 / lh 140%, 2nd-fg
 *
 * Mobile/tablet  4 card dọc, card gap 20 (var-20), image 350 x 313.099 (cùng ratio)
 *   Figma giữ nguyên title 25px ở mobile (instance override, không dùng token h5=20)
 */

#cd-make-sure .cd-makesure {
	display: flex;
	gap: var(--var-60);
	align-items: center;
}

/* ---------- progress (chỉ desktop) ---------- */
#cd-make-sure .cd-makesure__progress {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--var-8);
	padding: var(--var-8);
	width: 28px;
	border-radius: 999px;
	background: var(--color-2nd-bg);
}

#cd-make-sure .cd-makesure__dot {
	display: block;
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 100px;
	background: var(--color-stroke);
	transition: height .3s ease, background-color .3s ease;
}

#cd-make-sure .cd-makesure__dot.is-active {
	height: 40px;
	background: var(--color-2nd-fg);
}

#cd-make-sure .cd-makesure__dot .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- slides ---------- */
#cd-make-sure .cd-makesure__slides {
	flex: 1 1 auto;
	min-width: 0;
}

#cd-make-sure .cd-makesure__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 626 / 560;
	object-fit: cover;
}

#cd-make-sure .cd-makesure__text {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

#cd-make-sure .cd-makesure__title {
	/* Figma giữ 25px ở cả 2 breakpoint */
	font-size: 25px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
}

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
	#cd-make-sure .cd-makesure {
		min-height: 560px;
	}

	/* Các slide chồng lên nhau trong khung 560px, chuyển bằng opacity/transform */
	#cd-make-sure .cd-makesure__slides {
		position: relative;
		height: 560px;
	}

	#cd-make-sure .cd-makesure__slide {
		position: absolute;
		inset: 0;
		display: flex;
		gap: var(--var-60);
		align-items: center;
		height: 560px;
		pointer-events: none;
	}

	#cd-make-sure .cd-makesure__slide.is-active {
		pointer-events: auto;
	}

	/* Cột phải: ảnh cũ trượt lên khỏi panel, ảnh mới đẩy lên từ dưới (ease-out) */
	#cd-make-sure .cd-makesure__media {
		overflow: hidden;
	}

	#cd-make-sure .cd-makesure__media img {
		transform: translateY(100%);
		transition: transform .68s var(--cd-ease-out, ease);
	}

	#cd-make-sure .cd-makesure__slide.is-active .cd-makesure__media img {
		transform: none;
	}

	#cd-make-sure .cd-makesure__slide.is-past .cd-makesure__media img {
		transform: translateY(-100%);
	}

	/* Cột trái: nội dung cũ opacity 1 → 0, nội dung mới 0 → 1 (ease-out) */
	#cd-make-sure .cd-makesure__body {
		opacity: 0;
		transition: opacity .48s var(--cd-ease-out, ease);
	}

	#cd-make-sure .cd-makesure__slide.is-active .cd-makesure__body {
		opacity: 1;
	}

	/* Trước khi engine sticky khởi động (hoặc reduced-motion) vẫn thấy slide 1 */
	#cd-make-sure .cd-makesure__track:not([data-cd-pinned]) .cd-makesure__slide:not(.is-active) {
		visibility: hidden;
	}

	/* image 626 và body 626 chia đều phần còn lại sau progress 28 + 2 gap 60 */
	#cd-make-sure .cd-makesure__media,
	#cd-make-sure .cd-makesure__body {
		flex: 1 1 0;
		min-width: 0;
	}

	#cd-make-sure .cd-makesure__body {
		display: flex;
		align-items: center;
	}
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 1024px) {
	#cd-make-sure .cd-makesure {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	#cd-make-sure .cd-makesure__progress {
		display: none;
	}

	#cd-make-sure .cd-makesure__slides {
		display: flex;
		flex-direction: column;
		gap: var(--var-40);
	}

	#cd-make-sure .cd-makesure__slide {
		display: flex;
		flex-direction: column;
		gap: var(--var-20);
	}

	#cd-make-sure .cd-makesure__media img {
		aspect-ratio: 350 / 313.099;
	}
}

/* ---------- Tablet (Figma 4002:2003) ----------
   Ảnh slide vẫn full 794, nhưng khối chữ bên dưới giới hạn 500 và căn giữa.
   Mobile 350 < 500 → vô hiệu. */
@media (max-width: 1024px) {
	#cd-make-sure .cd-makesure__body {
		width: 100%;
		max-width: 500px;
		margin-inline: auto;
	}
}