/**
 * Section 6: Set it live — Figma desktop 4095:4800 · mobile 4095:6025
 *
 * item 1400×600: 2 cột 680 gap 40, text canh GIỮA DỌC (headings y=255.5 trong 600).
 * Khung `img` 680×600 nhưng ảnh bên trong chỉ 520 rộng, đặt tại x=80
 *   → ảnh canh giữa khung theo chiều ngang (680 − 520) / 2 = 80 ✓
 * Ảnh item 1 cao 552.5 (y=23.75) và item 2 cao 494 (y=53) → cả hai canh GIỮA DỌC.
 */

#cr-set-live .cr-set-live__list {
	display: flex;
	flex-direction: column;
	gap: var(--var-40);
}

#cr-set-live .cr-set-live__item {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--var-40);
	align-items: center;
}

#cr-set-live .cr-set-live__media {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Figma: khung img cao 600 cố định ở desktop/laptop */
	min-height: 600px;
	/* Ảnh thụt vào 80px mỗi bên — đúng ở CẢ 3 frame rộng:
	     desktop 680 − 160 = 520 ✓ · laptop 616 − 160 = 456 ✓ · tablet 794 − 160 = 634 ✓ */
	padding-inline: var(--var-80);
}

#cr-set-live .cr-set-live__media img {
	width: 100%;
	height: auto;
}

#cr-set-live .cr-set-live__text {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

#cr-set-live .cr-set-live__text .cr-description {
	width: 600px;
	max-width: 100%;
}

/* Zig-zag: item 2 đảo thứ tự — text trái, ảnh phải.
   Dùng `order` thay vì direction: rtl để không lật cả nội dung bên trong. */
#cr-set-live .cr-set-live__item--reverse .cr-set-live__media {
	order: 2;
}

#cr-set-live .cr-set-live__item--reverse .cr-set-live__text {
	order: 1;
}

@media (max-width: 1024px) {
	/* Figma tablet/mobile: BỎ zig-zag — cả 2 item ảnh trên, chữ dưới,
	   ảnh chiếm trọn container (794 / 350), gap trong item 40. */
	#cr-set-live .cr-set-live__item,
	#cr-set-live .cr-set-live__item--reverse {
		grid-template-columns: 1fr;
		gap: var(--var-40);
	}

	#cr-set-live .cr-set-live__item--reverse .cr-set-live__media {
		order: 0;
	}

	#cr-set-live .cr-set-live__item--reverse .cr-set-live__text {
		order: 0;
	}

	#cr-set-live .cr-set-live__media {
		min-height: 0;
	}

	/* Figma: 2 item cách nhau 80 ở CẢ tablet lẫn mobile
	   (tablet item2 y=949, item1 kết thúc 869 · mobile item2 y=597.875, item1 kết thúc 517.875) */
	#cr-set-live .cr-set-live__list {
		gap: var(--var-80);
	}
}

@media (max-width: 640px) {
	/* Figma mobile: ảnh tràn HẾT container 350 (không còn thụt 80) —
	   khác tablet 794 vẫn thụt. Xem ghi chú ngoại lệ 640px trong base.css. */
	#cr-set-live .cr-set-live__media {
		padding-inline: 0;
	}
}