/*
 * TIMELINE QUY TRÌNH 6 BƯỚC + danh sách 6 bước bên dưới (26/09/2026).
 * Dùng chung trang chủ (khối 05) và trang About (khối 04). Template: template-parts/process-timeline.php
 * + template-parts/process-steps.php. Tương tác: assets/js/process-timeline.js.
 *
 * Số đo lấy đúng bản thiết kế `design_handoff_9g_process_timeline` (desktop 1312 × 440, mobile 360 × 1080).
 * Màu clip là "nhãn màu clip" của phần mềm dựng — CỐ Ý không lấy từ biến màu thương hiệu; riêng số +
 * dòng mô tả dùng --color-gold (= #FFCC33 của bản thiết kế).
 *
 * Bố cục: mặc định là bản DỌC (điện thoại + máy tính bảng); từ 1024px là bản NGANG. Dưới 1024px, cột
 * 1fr chỉ còn ~95–110px — "STORYBOARD" 13px viết hoa không lọt.
 *
 * Trạng thái sáng/mờ CHỈ bật khi JS đã chạy (.is-live trên .process-block) — không JS thì mọi bước hiện
 * đủ sáng như bản thiết kế tĩnh, không bước nào bị mờ oan.
 */

.process-block {
	margin-top: var(--space-lg);
}

.process-lead {
	max-width: 68ch;
	margin: 0 0 var(--space-md);
	color: var(--color-text-muted);
}

.process-lead strong {
	color: var(--color-cream);
	font-weight: 600;
}

.timeline {
	--tl-bg: #0e0e0e;
	--tl-line: #242424;
	--tl-tick: #8a8781;
	--tl-spine: #e0b252;
	--tl-playhead: #e42a2a;
	margin: 0 0 var(--space-lg);
	padding: clamp(1.75rem, 4vw, 4rem) clamp(1rem, 2.5vw, 2rem);
	background: var(--tl-bg);
	font-family: var(--font-body);
}

.timeline__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ================= Bản DỌC (mặc định) ================= */

.timeline__grid {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
	padding: 1rem 0 0 2.25rem;
}

/* Trục dọc */
.timeline__grid::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	width: 2px;
	background: var(--tl-spine);
}

.timeline__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: flex-start;
	/* Clip rộng đúng bằng hàng số + chữ (bản thiết kế), nhưng không bao giờ quá khung. */
	width: max-content;
	max-width: 100%;
	min-width: 0;
}

/* Chấm trên trục */
.timeline__step::before {
	content: "";
	position: absolute;
	top: 11px;
	left: -33px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tl-spine);
}

.timeline__step--wide::before {
	top: 22px;
}

/* Bản dọc: chạm vào một bước là playhead trượt tới bước đó (JS). */
.is-live .timeline__step {
	cursor: pointer;
}

.timeline__head {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.timeline__num {
	flex: none;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-gold);
}

.timeline__step--wide .timeline__num {
	font-size: 3.25rem;
	letter-spacing: -0.02em;
}

.timeline__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.timeline__name {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.timeline__step--wide .timeline__name {
	font-size: 0.875rem;
	letter-spacing: 0.12em;
}

.timeline__line {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--color-gold);
}

/* Thước timecode chỉ có ở bản ngang. */
.timeline__ruler {
	display: none;
}

.timeline__clip {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 36px;
	padding: 0 12px;
	border-radius: 3px;
	background: var(--clip);
}

.timeline__clip--audio {
	margin-top: -6px;
	background: var(--clip-audio-m, var(--clip-audio));
	opacity: 0.6;
}

.timeline__icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.timeline__wave {
	display: block;
	width: 100%;
	height: 22px;
}

/*
 * PLAYHEAD bản dọc: tam giác đỏ trỏ sang phải, nằm trên trục, một vạch mảnh chạy tới mép clip.
 * Vùng bấm 44 × 28 (bản thiết kế). Vị trí dọc do JS đặt qua --ph-y. Không JS thì ẩn: bản dọc không có
 * cách nào đặt đúng giữa clip 03 bằng CSS thuần, để lệch thì còn tệ hơn không có.
 */
.timeline__playhead {
	position: absolute;
	z-index: 3;
	top: var(--ph-y, 0px);
	left: -4px;
	display: none;
	align-items: center;
	width: 44px;
	height: 28px;
	margin-top: -14px;
	cursor: grab;
	touch-action: none;
}

.is-live .timeline__playhead {
	display: flex;
}

.timeline.is-dragging .timeline__playhead {
	cursor: grabbing;
}

.timeline__playhead-mark {
	flex: none;
	width: 14px;
	height: 14px;
	margin-left: 5px;
	background: var(--tl-playhead);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.timeline__playhead-line {
	flex: 1;
	height: 1px;
	background: var(--tl-playhead);
}

/* Chạm / phím mũi tên: playhead TRƯỢT tới clip (0.28s). Kéo tay + cuộn trang: bám tức thì. */
.timeline.is-snapping .timeline__playhead {
	transition: top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline__playhead:focus {
	outline: none;
}

.timeline__playhead:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* ================= Bản NGANG (≥1024px) ================= */

@media (min-width: 1024px) {
	.timeline__grid {
		display: grid;
		/* 03 + 05 tốn thời gian nhất ⇒ cột rộng 1.7 lần — bố cục tự nói điều đó, không cần chú thích. */
		grid-template-columns: 1fr 1fr 1.7fr 1fr 1.7fr 1fr;
		/* đầu cột · thước 36 · track 1 (40) · track 2 (6 + 40 + 10) */
		grid-template-rows: auto 36px 40px 56px;
		gap: 0;
		padding: 0;
		border-bottom: 1px solid var(--tl-line);
		/* Màn cảm ứng khổ lớn: vuốt NGANG để kéo playhead, vuốt dọc vẫn cuộn trang. */
		touch-action: pan-y;
	}

	.is-live .timeline__step {
		cursor: default;
	}

	.timeline__grid::before,
	.timeline__step::before {
		display: none;
	}

	.timeline__step {
		grid-row: 1 / -1;
		gap: 0;
		width: auto;
		max-width: none;
		align-self: stretch;
		border-left: 1px solid var(--tl-line);
	}

	/*
	 * subgrid: bốn hàng của MỌI cột dùng chung chiều cao ⇒ đầu cột dài nhất (chữ Jerry sửa, bản tiếng
	 * Việt dài hơn) đẩy thước + clip của CẢ sáu cột xuống cùng lúc, luôn thẳng hàng. Trình duyệt chưa
	 * có subgrid thì mỗi cột là một cột flex, đầu cột cao tối thiểu 176px như bản thiết kế.
	 */
	@supports (grid-template-rows: subgrid) {
		.timeline__step {
			display: grid;
			grid-template-rows: subgrid;
		}
	}

	.timeline__head {
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		min-height: 176px;
		padding: 12px 10px 22px 14px;
	}

	.timeline__num {
		display: flex;
		align-items: flex-end;
		height: 54px;
		font-size: 1.875rem;
		line-height: 0.9;
	}

	.timeline__step--wide .timeline__num {
		font-size: 3.75rem;
	}

	.timeline__text {
		gap: 10px;
	}

	.timeline__name {
		line-height: 1.3;
		letter-spacing: 0.07em;
	}

	.timeline__step--wide .timeline__name {
		font-size: 1rem;
		letter-spacing: 0.1em;
	}

	.timeline__line {
		line-height: 1.4;
		text-wrap: pretty;
	}

	.timeline__step--wide .timeline__line {
		font-size: 0.875rem;
	}

	/*
	 * Thước timecode: mỗi cột vẽ đoạn thước của mình — vạch lớn + nhãn ở mép trái, vạch nhỏ mỗi 12px.
	 * margin-left -1px + nền để PHỦ lên đường kẻ dọc giữa các cột, như dải thước liền của bản thiết kế.
	 */
	.timeline__ruler {
		position: relative;
		display: block;
		margin-left: -1px;
		border-top: 1px solid var(--tl-line);
		background:
			repeating-linear-gradient(90deg, rgba(138, 135, 129, 0.6) 0 1px, transparent 1px 12px) top left / 100% 4px no-repeat,
			var(--tl-bg);
	}

	.timeline__ruler::before,
	.timeline__step:last-child .timeline__ruler::after {
		content: "";
		position: absolute;
		top: 0;
		width: 1px;
		height: 10px;
		background: var(--tl-tick);
	}

	.timeline__ruler::before {
		left: 0;
	}

	.timeline__step:last-child .timeline__ruler::after {
		right: 0;
	}

	.timeline__tc {
		position: absolute;
		top: 14px;
		left: 6px;
		font-size: 0.6875rem;
		line-height: 1;
		letter-spacing: 0.04em;
		color: var(--tl-tick);
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}

	.timeline__tc--end {
		right: 6px;
		left: auto;
	}

	.timeline__clip {
		width: auto;
		height: 40px;
		margin: 0 4px;
	}

	.timeline__clip--audio {
		margin: 6px 4px 10px;
		background: var(--clip-audio);
	}

	.timeline__icon {
		width: 22px;
		height: 22px;
	}

	.timeline__wave {
		height: 24px;
	}

	/*
	 * PLAYHEAD bản ngang: tam giác đỏ trỏ xuống, bắt đầu 8px trên thước, vạch 2px chạy hết các track.
	 * Định vị TUYỆT ĐỐI nhưng lấy vùng lưới hàng 2 → hết làm khung (abspos trong grid) ⇒ luôn khớp đỉnh
	 * thước dù đầu cột cao bao nhiêu. Vị trí ngang: --ph-x (mặc định 38.51% = giữa clip 03, bản thiết kế).
	 * Hiện cả khi không có JS — đúng hình tĩnh của bản thiết kế.
	 */
	.timeline__playhead {
		grid-column: 1 / -1;
		grid-row: 2 / -1;
		top: -8px;
		bottom: 0;
		left: var(--ph-x, 38.51%);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 14px;
		height: auto;
		margin: 0 0 0 -7px;
		cursor: default;
		pointer-events: none;
	}

	.timeline__playhead-mark {
		width: 14px;
		height: 12px;
		margin: 0;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.timeline__playhead-line {
		flex: 1;
		width: 2px;
		height: auto;
	}
}

/*
 * 1024–1199px: cột 1fr chỉ còn ~121px ⇒ "STORYBOARD" (13px, giãn chữ 0.07em, ~98px) không lọt khoảng
 * 96px bên trong đệm 14 + 10 và bị ngắt giữa chữ (đo 26/09/2026: "STORYBOAR / D"). Thu đệm ngang lại.
 */
@media (min-width: 1024px) and (max-width: 1199px) {
	.timeline__head {
		padding-right: 6px;
		padding-left: 10px;
	}
}

/* ================= Sáng / mờ theo playhead ================= */

.timeline__head,
.timeline__clip {
	transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

/*
 * 0.6 chứ không thấp hơn: chữ vàng #FFCC33 mờ 60% trên nền #0E0E0E vẫn đạt tương phản 5.1 : 1 (WCAG AA).
 */
.is-live .timeline__step:not(.is-active) .timeline__head {
	opacity: 0.6;
}

.is-live .timeline__step:not(.is-active) .timeline__clip {
	opacity: 0.4;
}

.is-live .timeline__step:not(.is-active) .timeline__clip--audio {
	opacity: 0.25;
}

/* Clip đang được playhead chỉ: viền trắng như clip đang chọn trong phần mềm dựng. */
.is-live .timeline__step.is-active .timeline__clip {
	box-shadow: inset 0 0 0 2px #fff;
}

/* ================= Danh sách 6 bước bên dưới timeline ================= */

/*
 * Lưới 3 cột trên desktop. Với vùng nội dung 1216px và khe ngang 32px, mỗi cột rộng ĐÚNG 384px —
 * đó là bề rộng hiển thị thật của ảnh minh hoạ trang About (xem DESIGN-SPECS/).
 */
.process-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.process-steps--text {
	gap: var(--space-md);
}

.process-step {
	min-width: 0;
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	transition: border-color 0.25s ease;
}

/* Bước đang được playhead chỉ: vạch trên chuyển vàng, số sáng lên — cùng nhịp với clip trên timeline. */
.is-live .process-step.is-active {
	border-top-color: var(--color-gold);
}

.is-live .process-step.is-active .process-step__index {
	color: var(--color-gold-bright);
}

/*
 * Khung ảnh tỉ lệ 3:2 cố định ⇒ sáu thẻ luôn thẳng hàng dù sáu hình minh hoạ rộng hẹp khác nhau.
 * `contain` để hình không bị cắt; `left center` để hình canh trái theo mép cột như phần chữ.
 */
.process-step__icon {
	aspect-ratio: 3 / 2;
	/*
	 * 🔴 max-width BẮT BUỘC. Ở khổ 2 cột (768–900px) cột rộng tới 402px — tức ô ảnh sẽ PHÌNH TO
	 * HƠN cả ở desktop 3 cột (384px), và Jerry sẽ không có một con số duy nhất để xuất ảnh.
	 * Chặn ở 384px ⇒ bề rộng hiển thị lớn nhất trên MỌI khổ màn hình đúng bằng 384 × 256.
	 */
	max-width: 24rem;
	margin-bottom: var(--space-sm);
}

.process-step__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.process-step__index {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--font-display);
	font-stretch: var(--font-stretch-display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-gold);
	transition: color 0.25s ease;
}

.process-step__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display);
	font-stretch: var(--font-stretch-display);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-cream);
}

.process-step__body {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.65;
}

@media (max-width: 900px) {
	/* Ba cột bóp vào <900px thì cột chỉ còn ~270px — chữ mô tả vỡ vụn. Hai cột dễ đọc hơn. */
	.process-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/*
	 * Điện thoại: sáu thẻ xếp DỌC một cột. Ảnh minh hoạ thu nhỏ lại (Jerry chốt) — để nguyên
	 * bề ngang thẻ thì hình chiếm gần nửa màn hình mà không thêm thông tin gì.
	 */
	.process-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.process-step__icon {
		max-width: 12.5rem; /* 200px — hiển thị 200 × 133 */
		margin-bottom: var(--space-xs);
	}

	.process-step__index {
		font-size: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.timeline__head,
	.timeline__clip,
	.process-step,
	.process-step__index,
	.timeline.is-snapping .timeline__playhead {
		transition: none;
	}
}