/* Block Quy trình – How we work (Figma "Detail page" → Frame 27, 1920×1080, nền trắng) */

/* Mobile theo Figma "UIUX Design- mobile" (khung 390: chữ nền 36px, ảnh 358 × 191, 2 cụm chữ dưới ảnh – cụm trái / phải theo
   góc của công đoạn, tiêu đề 20px, các bước 14px). */
.block-process {
	display: grid;
	gap: 24px;
	padding: clamp(40px, 5.6vw, 108px) var(--gutter) clamp(40px, 4.6vw, 90px);
	background: #fff;
	isolation: isolate; /* Chữ trang trí nằm trên nền trắng của section; chữ công đoạn hoà trộn trong section. */
}

/* Section đầu trang (Our responsibility): khung Figma 1080 tính cả header – kéo lên sau header, nối liền section kế. */
.block-process--first {
	margin-block: 0;
}

@media (min-width: 1024px) {
	.block-process--first {
		margin-top: calc(-1 * var(--header-height));
	}
}

/* Mobile / tablet: khung không tạo hộp riêng, các phần xếp theo lưới của section. */
.block-process__frame {
	display: contents;
}

.block-process__decor {
	color: var(--color-text-subtle);
	font-size: clamp(30px, 9.2vw, 168px);
	line-height: 1.15;
	white-space: normal;
}

.block-process__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 1200 / 640;
}

.block-process__media {
	position: relative;
}

.block-process__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nhiều cảnh: ảnh các cảnh chồng lên nhau, chỉ ảnh cảnh đang xem hiện (không có JS: ảnh cảnh đầu).
   Chọn theo data-scene: plugin WebP bọc mỗi ảnh trong <picture> (display: contents). */
.block-process__media img:not([data-scene="0"]) {
	position: absolute;
	inset: 0;
	display: none;
}

.is-cycling .block-process__media img {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
}

.is-cycling .block-process__media img.is-active {
	opacity: 1;
}

/* Đổi cảnh: ảnh mới hiện ngay (cắt cảnh như ref) và thu nhẹ về cỡ thật. */
.is-cycling .block-process__media img.is-entering {
	animation: process-image-in 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes process-image-in {
	from { transform: scale(1.06); }
}

.block-process__steps {
	display: grid;
	gap: 20px;
}

/* Công đoạn ở góc phải (Figma): canh phải cả trên mobile. */
.process-step--tr,
.process-step--br {
	text-align: right;
}

.process-step__title {
	font-size: clamp(20px, 2.71vw, 52px);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.process-step__items {
	margin-top: 4px;
	font-size: clamp(14px, 1.46vw, 28px);
	line-height: 1.25;
}

/* Desktop: dựng theo toạ độ Figma trên khung 1920 × 1080. */
@media (min-width: 1024px) {
	/* Khung Figma 1920 × 1080 giữ tỉ lệ, cao không quá 1 màn hình (feedback vòng 4: nội dung trọn trong màn hình ở màn
	   rộng / thấp), căn giữa; cỡ chữ theo bề ngang khung (cqi) để cả bố cục co theo khung. */
	.block-process {
		display: block;
		padding: 0;
	}

	.block-process__frame {
		position: relative;
		display: block;
		width: min(100%, 100vh * 1920 / 1080);
		margin-inline: auto;
		aspect-ratio: 1920 / 1080;
		container-type: inline-size;
	}

	.block-process__decor {
		font-size: 8.75cqi;
	}

	.process-step__title {
		font-size: max(26px, 2.71cqi);
	}

	.process-step__items {
		margin-top: 8px;
		font-size: max(17px, 1.46cqi);
	}

	.block-process__decor {
		position: absolute;
		top: 10%;            /* 108 / 1080 */
		left: 50%;
		width: 86%;          /* 1650 / 1920 */
		white-space: nowrap;
		transform: translateX(-50%);
	}

	.block-process__media {
		position: absolute;
		top: 32.4%;          /* 350 / 1080 */
		left: 18.75%;        /* 360 / 1920 */
		width: 62.5%;        /* 1200 / 1920 */
	}

	.block-process__steps {
		display: contents;
	}

	/* Chữ trắng + difference: đen trên nền trắng, màu đảo khi đè lên ảnh. */
	.process-step {
		position: absolute;
		color: #fff;
		mix-blend-mode: difference;
	}

	/* Tiêu đề 1 dòng như Figma ("PRE-PRODUCTION" vừa khít khung 615 / 1920 – màn nhỏ hơn bị xuống dòng). */
	.process-step__title {
		white-space: nowrap;
	}

	.process-step--tr { top: 28.7%; right: 5.2%; width: 40%; text-align: right; }  /* 310 / 1080, 100 / 1920, 769 / 1920 */
	.process-step--bl { top: 71.1%; left: 5.2%; width: 32%; }                      /* 768 / 1080, 615 / 1920 */
	.process-step--tl { top: 28.7%; left: 5.2%; width: 32%; }
	.process-step--br { top: 71.1%; right: 5.2%; width: 40%; text-align: right; }
}

/* Đổi cảnh (assets/js/process.js, desktop và mobile): chỉ công đoạn của cảnh đang xem hiện; chữ cảnh mới bắt đầu ở chỗ
   chữ cảnh cũ cùng hàng (JS đặt translate) rồi trượt sang chỗ của nó. Công đoạn ẩn vẫn có trong cây trợ năng.
   Tiêu đề co theo chữ (inline-block) để JS đo đúng mép chữ, không phải mép khung. */
.is-cycling .process-step {
	transition: translate 0.7s cubic-bezier(0.45, 0, 0.15, 1);
}

.is-cycling .process-step__title {
	display: inline-block;
}

/* Mobile: 2 hàng (cụm trên / cụm dưới); công đoạn các cảnh chồng lên nhau trong hàng của mình để chiều cao không nhảy. */
@media (max-width: 1023px) {
	.is-cycling .process-step--tl,
	.is-cycling .process-step--tr {
		grid-area: 1 / 1;
	}

	.is-cycling .process-step--bl,
	.is-cycling .process-step--br {
		grid-area: 2 / 1;
	}
}

.is-cycling .process-step:not(.is-current) {
	opacity: 0;
	pointer-events: none;
}