/**
 * Section 8: Testimonials — Figma desktop 4095:4818 · mobile 4107:10340
 *
 * Desktop items 1400×401:
 *   khối trái  x=40  w=952  y=60  (icon 30.64×24 → quote y+48 → author y+225)
 *   line dọc   x=1032 y=95  h=211
 *   khối phải  x=1072 w=288 y=155 ("30%" cao 67 → label y+75)
 * → khoảng cách trái ↔ line = 1032 − (40+952) = 40; line ↔ phải = 40.
 *   Padding trái của cả cụm cũng là 40 (khối trái bắt đầu ở x=40).
 */

/* Figma: section 1920×676 = padding-top 140 + content-wrapper 536 + padding-bottom 0.
   Đây là section CUỐI trước footer+cta nên Figma bỏ hẳn padding dưới (footer+cta
   bắt đầu ngay tại y = 10046.5 = 9370.5 + 676). Mobile/tablet cũng vậy:
   mobile 516 = 72 + 444 + 0 · tablet 338 = 72 + 266 + 0. */
#cr-testimonial {
	padding-bottom: 0;
}

#cr-testimonial .cr-testimonial__items {
	display: grid;
	/* trái co giãn · line 1px · phải 288 cố định */
	grid-template-columns: 1fr 1px 288px;
	gap: var(--var-40);
	align-items: center;
	/* Figma: khối quote bắt đầu ở x=40 y=60 trong items 1400×401, khối số kết thúc
	   ở x=1360 → padding 60 dọc / 40 ngang. */
	padding-block: var(--var-60);
	padding-inline: var(--var-40);
}

/* line dọc — Figma: cao 211, KHÔNG chạy hết chiều cao cụm */
#cr-testimonial .cr-testimonial__items::before {
	content: '';
	grid-column: 2;
	grid-row: 1;
	width: 1px;
	height: 211px;
	background: var(--color-reverse-stroke);
}

/* ---------- khối quote ---------- */
#cr-testimonial .cr-testimonial__quote-block {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
}

#cr-testimonial .cr-testimonial__mark {
	display: block;
	width: 30.64px;
	height: 24px;
	color: var(--color-reverse-fg);
}

/* Figma: quote bắt đầu ở y=48 so với icon (icon cao 24) → cách icon 24 */
#cr-testimonial .cr-testimonial__quote {
	margin-top: var(--var-24);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-quote);
	line-height: 1.4;
	color: var(--color-reverse-fg);
}

/* Figma: author ở y=225, quote kết thúc ở 165 → cách 60 */
#cr-testimonial .cr-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--var-12);
	margin-top: var(--var-60);
}

#cr-testimonial .cr-testimonial__avatar img {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

#cr-testimonial .cr-testimonial__author-text {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
}

#cr-testimonial .cr-testimonial__author-name {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-lg);
	line-height: 1;
	color: var(--color-reverse-fg);
}

#cr-testimonial .cr-testimonial__author-role {
	color: rgba(255, 255, 255, .8);
}

/* ---------- khối số ---------- */
#cr-testimonial .cr-testimonial__stat {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	/* Figma: "30%" cao 67, label ở y=75 → cách 8 */
	gap: var(--var-8);
}

#cr-testimonial .cr-testimonial__stat-value {
	font-size: var(--fs-h1);
}

#cr-testimonial .cr-testimonial__stat-label {
	color: rgba(255, 255, 255, .8);
}

@media (max-width: 1024px) {
	/* Figma tablet 4107:10281: VẪN 2 cột — quote 494 | frame số 276 ở x=518.
	   Line dọc lúc này nằm TRONG frame số (x=0) chứ không phải một cột riêng
	   → bỏ ::before, dùng border-left; gap giữa 2 cột = 518 − 494 = 24.
	   items KHÔNG còn padding (khối quote ở x=0 y=0). */
	#cr-testimonial .cr-testimonial__items {
		grid-template-columns: 1fr 276px;
		gap: var(--var-24);
		padding: 0;
	}

	#cr-testimonial .cr-testimonial__items::before {
		display: none;
	}

	#cr-testimonial .cr-testimonial__stat {
		grid-column: 2;
		border-left: 1px solid var(--color-reverse-stroke);
		padding-left: var(--var-24);
		/* Figma: frame cao 100, nội dung canh giữa dọc */
		justify-content: center;
		min-height: 100px;
	}

	/* Figma tablet/mobile: author ở y=138/160, quote kết thúc 114/136 → cách 24 */
	#cr-testimonial .cr-testimonial__author {
		margin-top: var(--var-24);
	}
}

@media (max-width: 640px) {
	/* Figma mobile 4107:10340: xếp DỌC (tablet vẫn 2 cột — xem ghi chú ngoại lệ
	   640px trong base.css). Khối số nằm dưới, vẫn giữ line dọc bên trái. */
	#cr-testimonial .cr-testimonial__items {
		grid-template-columns: 1fr;
	}

	#cr-testimonial .cr-testimonial__quote-block,
	#cr-testimonial .cr-testimonial__stat {
		grid-column: 1;
		grid-row: auto;
	}

	/* Figma: frame 276 rộng HUG nội dung (1 + 24 + 252), không kéo full 350 */
	#cr-testimonial .cr-testimonial__stat {
		width: fit-content;
	}
}