/* Round16 — Anti-leak Discount — section stop ("Stop discount leak effortlessly")
   Figma desktop 4368:2972 + 4372:9145 · laptop 4372:6705 · phone 4372:8843 */

/* ---- hàng ngang: indicator | chữ | ảnh (gap 60) ----
   Thứ tự 2 cột theo SRS ("Left column" = chữ, "Right column" = ảnh), KHÔNG theo
   Figma (Figma xếp ảnh trái / chữ phải) — claude.md dòng 44: Figma lệch Jira thì
   theo Jira. Xem ghi chú đầy đủ ở section-stop/index.php. */
.al-stop__body {
	display: flex;
	align-items: center;
	gap: var(--var-60);
}

/* ---- step indicator (Figma 4372:9146 — cột dọc, bg 2nd-bg, radius 999, pad 8) ---- */
.al-stop__progress {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--var-8);
	padding: var(--var-8);
	background: var(--color-2nd-bg);
	border-radius: var(--radius-pill);
}

.al-stop__dot {
	display: block;
	width: var(--var-12);
	height: var(--var-12);
	border-radius: var(--radius-pill);
	background: var(--color-stroke);
	transition:
		height var(--al-swap-ms) var(--al-ease-out),
		background-color var(--al-swap-ms) var(--al-ease-out);
}

/* Bước đang mở: viên thuốc 12 x 40, màu 2nd-fg (#FFFFFF @ 80%) */
.al-stop__dot.is-active {
	height: var(--var-40);
	background: var(--color-2nd-fg);
}

/* ---- sân khấu: 4 bước xếp chồng cùng 1 ô grid ---- */
.al-stop__stage {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
}

.al-stop__step {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: var(--var-60);
	min-width: 0;
}

/* Cột ảnh (bên PHẢI) — Figma 4372:9151 (626 x 600). overflow: hidden để ảnh
   trượt ra/vào trong lòng panel đúng như SRS mô tả. */
.al-stop__media {
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--al-stop-media-col);
	aspect-ratio: var(--al-ratio-stop);
	overflow: hidden;
}

.al-stop__media-inner {
	width: 100%;
	height: 100%;
	transition: transform var(--al-swap-ms) var(--al-ease-out);
}

.al-stop__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Bước chưa tới: ảnh chờ ở PHÍA DƯỚI panel.
   Bước đã qua: ảnh trượt LÊN TRÊN ra khỏi panel. */
.al-stop__step.is-after .al-stop__media-inner {
	transform: translateY(100%);
}

.al-stop__step.is-before .al-stop__media-inner {
	transform: translateY(-100%);
}

.al-stop__step.is-active .al-stop__media-inner {
	transform: none;
}

/* Cột chữ (bên TRÁI) — cross-fade (Figma 4372:9197) */
.al-stop__copy {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
	opacity: 0;
	transition: opacity var(--al-swap-ms) var(--al-ease-out);
	pointer-events: none;
}

.al-stop__step.is-active .al-stop__copy {
	opacity: 1;
	pointer-events: auto;
}

/* Figma: description của step rộng tối đa 600 */
.al-stop__copy .al-description {
	max-width: 600px;
}

/* ---- <=1024: bỏ sticky + indicator, 4 bước xếp dọc (Figma 4372:8843) ---- */
@media (max-width: 1024px) {
	/* Figma phone: padding-bottom của section này là 200, không phải 140 */
	.al-stop {
		padding-bottom: var(--al-stop-pb-mobile);
	}

	.al-stop__body {
		display: block;
	}

	.al-stop__progress {
		display: none;
	}

	.al-stop__stage {
		display: flex;
		flex-direction: column;
		gap: var(--var-40);
	}

	.al-stop__step {
		flex-direction: column;
		align-items: stretch;
		gap: var(--var-20);
	}

	/* flex: none BẮT BUỘC — cùng lý do với .al-tabs__panel: step đổi sang column
	   nên `flex: 1 1 0` của desktop rơi vào trục dọc, ảnh sập height 0. */
	.al-stop__media,
	.al-stop__copy {
		flex: none;
	}

	/* Desktop theo SRS là chữ-trái/ảnh-phải nên DOM đặt chữ trước. Figma phone
	   (4372:8846) lại là ẢNH TRÊN, CHỮ DƯỚI — đảo lại bằng `order` để không phải
	   đụng markup. */
	.al-stop__media {
		order: 0;
	}

	.al-stop__copy {
		order: 1;
	}

	.al-stop__media {
		max-width: none;
	}

	.al-stop__step.is-after .al-stop__media-inner,
	.al-stop__step.is-before .al-stop__media-inner,
	.al-stop__step.is-active .al-stop__media-inner {
		transform: none;
	}

	.al-stop__step .al-stop__copy {
		opacity: 1;
		pointer-events: auto;
	}

	.al-stop__copy .al-description {
		max-width: none;
	}
}