/**
 * Customer Review Section ("Đánh giá thực tế của khách hàng", trang chủ). Toàn bộ
 * giá trị --review-* là CSS custom property do tmnhanphat_render_customer_review_css_vars()
 * sinh ra, gắn bằng wp_add_inline_style() trong inc/enqueue.php (PROJECT_RULES.md mục
 * 22) — file này KHÔNG hardcode giá trị người dùng đổi được trong Customizer.
 *
 * Marquee dọc vô hạn THUẦN CSS (KHÔNG slider/Swiper, KHÔNG JS đo chiều cao): mỗi
 * .review-marquee__track chứa 2 bản danh sách giống nhau (PHP render 2 lần khi
 * Animation bật) rồi @keyframes translateY 0 → -50% loop vô hạn — vì 2 nửa giống
 * nhau tuyệt đối, khi đi hết nửa đầu thì nửa sau đã ở đúng vị trí visual ban đầu,
 * điểm nối vô hình mà không cần JS tính toán. Column hướng "down" chỉ đảo
 * animation-direction (không cần keyframe riêng).
 */

.review-home {
	position: relative;
	margin-block: var(--review-margin, 0);
	padding-block: var(--review-padding, 50px);
	background-color: var(--review-bg, #ffffff);
	background-image: var(--review-bg-image, none);
	background-size: cover;
	background-position: center;
}

.review-home__container {
	max-width: var(--review-container-width, var(--container-max-width));
}

/* ==================== HEADER ==================== */
.review-home__header {
	text-align: var(--review-title-align, center);
}

.review-home__heading {
	margin: 0 0 20px; /* Chuẩn hoá: heading → nội dung 20px (trước 9px tới gạch đã bỏ). */
	color: var(--review-title-color, #E31F2B);
	/* Figma 85/900 — fluid theo tỉ lệ container, trần = setting theo breakpoint. */
	font-size: clamp(28px, calc(85 * var(--fig1px)), var(--review-title-size, 85px));
	font-weight: 900;
	line-height: 1.21;
	letter-spacing: -0.02em; /* Taste B: tracking âm nhẹ cho display lớn (premium). */
}

/* Figma: 2 từ cuối title màu xanh brand — hằng thiết kế (template tự tách span). */
.review-home__heading-accent {
	color: #046AB5;
}

/* Gạch đôi motif (cũ dùng chung News/Quote/FAQ) ĐÃ BỎ — heading dùng TYPOGRAPHY làm
   điểm nhấn (chuẩn hoá Design System, không underline). */

.review-home__description {
	margin: 0 var(--review-desc-margin-x, auto) var(--review-header-margin, 59px);
	max-width: var(--review-desc-max-width, 820px);
	color: var(--review-desc-color, #464646);
	font-size: clamp(16px, calc(20 * var(--fig1px)), var(--review-desc-size, 20px)); /* Migrate: sàn 16. */
	line-height: 1.5; /* Taste A: body văn xuôi leading thoáng. */
}

/* ==================== MARQUEE ==================== */
.review-marquee {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--review-column-gap, 24px);
	/* Chiều cao khung nhìn cố định — vùng cuộn bên trong, không kéo giãn section theo
	   tổng số Review (dù Posts Per Column lớn). Figma: cột marquee cao 840px — co theo
	   tỉ lệ container. */
	height: min(840px, calc(840 * var(--fig1px)));
	overflow: hidden;
}

/* Gradient Mask trên/dưới — che mép cuộn cho card "xuất hiện/biến mất" mượt, đúng design. */
.review-marquee::before,
.review-marquee::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	z-index: 2;
	height: var(--review-mask-height, 80px);
	pointer-events: none;
}

.review-marquee::before {
	top: 0;
	background: linear-gradient(180deg, var(--review-mask-color, #ffffff) 0%, transparent 100%);
}

.review-marquee::after {
	bottom: 0;
	background: linear-gradient(0deg, var(--review-mask-color, #ffffff) 0%, transparent 100%);
}

.review-marquee__column {
	flex: 1;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}

.review-marquee__track {
	display: flex;
	flex-direction: column;
	gap: var(--review-card-gap, 24px);
	will-change: transform;
	/* Chống flicker trên một số GPU khi transform chạy dài (compositing layer ổn định). */
	backface-visibility: hidden;
	/* LINEAR bắt buộc (mục 7 audit) — tốc độ đều tuyệt đối, không ease/tăng giảm tốc. */
	animation: tmnp-review-scroll var(--review-speed, 40s) linear infinite;
}

.review-marquee__column[data-column="1"] .review-marquee__track {
	animation-direction: var(--review-col1-direction, normal);
}

.review-marquee__column[data-column="2"] .review-marquee__track {
	animation-direction: var(--review-col2-direction, reverse);
}

.review-marquee__column[data-column="3"] .review-marquee__track {
	animation-direction: var(--review-col3-direction, normal);
}

@keyframes tmnp-review-scroll {
	from {
		transform: translateY(0);
	}

	to {
		/* -50% = đúng 1 lần chiều cao danh sách GỐC (track chứa 2 bản giống nhau) —
		   không phụ thuộc Card Gap/chiều cao Card cụ thể, luôn khớp mọi cấu hình. */
		transform: translateY(-50%);
	}
}

/* Pause on Hover — thuần CSS, chỉ áp dụng khi setting bật (class do PHP gắn có điều kiện).
   3 điều kiện chống "kẹt pause" quanh nút Tạm dừng/Phát (nút nằm BÊN TRONG marquee):
   1) @media (hover: hover): touch không có hover thật — tap xong :hover DÍNH trên element
      tới lần chạm kế → mobile kẹt pause vĩnh viễn nếu không loại.
   2) :not(:has(.review-marquee__toggle:hover)): chuột đang đậu trên nút thì không pause —
      bấm Play phải thấy chạy NGAY, không phải rời chuột khỏi nút mới chạy.
   3) :has(:focus-visible:not(...)) thay :focus-within: click/tap để lại focus THƯỜNG trên
      nút → :focus-within cũ giữ pause mãi dù JS đã gỡ .is-paused; :focus-visible chỉ khớp
      focus bàn phím, và loại trừ chính nút toggle (Enter bấm Play xong focus vẫn ở nút). */
@media (hover: hover) {
	.review-marquee--pause-hover:hover:not(:has(.review-marquee__toggle:hover)) .review-marquee__track {
		animation-play-state: paused;
	}
}

.review-marquee--pause-hover:has(:focus-visible:not(.review-marquee__toggle)) .review-marquee__track {
	animation-play-state: paused;
}

/* JS gắn khi tab ẩn / prefers-reduced-motion / nút Tạm dừng — dừng animation. */
.review-marquee.is-paused .review-marquee__track {
	animation-play-state: paused;
}

/* ==================== NÚT TẠM DỪNG/PHÁT (WCAG 2.2.2) ==================== */
/* Nút tròn nhỏ góc trên phải khung marquee — pause-hover không dùng được trên touch
   nên cần control nhìn thấy được. z-index 3 để nổi trên gradient mask (z-index 2). */
.review-marquee__toggle {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #D0D8E3;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 0.9);
	color: #046AB5;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.review-marquee__toggle:hover {
	background-color: #ffffff;
	color: var(--color-primary, #046AB5);
}

/* Đang chạy → hiện icon pause; đã dừng (.is-paused trên root) → hiện icon play. */
.review-marquee__toggle-play,
.review-marquee.is-paused .review-marquee__toggle-pause {
	display: none;
}

.review-marquee.is-paused .review-marquee__toggle-play {
	display: block;
}

/* ==================== REVIEW CARD ==================== */
.review-card {
	flex-shrink: 0;
	padding: var(--review-card-padding, 25px);
	border: var(--review-card-border, 1px solid #212121);
	border-radius: var(--review-card-radius, 10px);
	background-color: var(--review-card-bg, #ffffff);
	box-shadow: var(--review-card-shadow, none);
	transition: box-shadow 0.25s ease;
}

.review-card:hover {
	box-shadow: var(--review-card-hover-shadow, 0 14px 34px rgb(6 24 44 / 0.14));
}

.review-card__head {
	display: flex;
	align-items: center;
	gap: 12px; /* Figma: avatar → tên 12px. */
	margin-bottom: 22px; /* Figma: head → comment 22px. */
}

.review-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--review-avatar-size, 44px);
	width: var(--review-avatar-size, 44px);
	height: var(--review-avatar-size, 44px);
	border-radius: var(--review-avatar-radius, 100%);
	overflow: hidden;
	background-color: #F1F3F5;
	color: #C4C9D0;
}

.review-card__avatar-image {
	width: 100%;
	height: 100%;
	object-fit: var(--review-avatar-fit, cover);
	object-position: center;
}

.review-card__avatar-fallback {
	width: 55%;
	height: 55%;
}

.review-card__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.review-card__name {
	color: var(--review-name-color, #1a1a1a);
	/* Figma: 15/400, lh 24px (160%). */
	font-size: var(--review-name-size, 15px);
	font-weight: var(--review-name-weight, 400);
	line-height: 1.6;
}

.review-card__role {
	color: var(--review-role-color, #667180);
	font-size: var(--review-role-size, 13px);
	line-height: 1.23; /* Figma: lh 16px (123%). */
}

.review-card__comment {
	margin: 0;
	color: var(--review-comment-color, #000000);
	font-size: var(--review-comment-size, 15px);
	line-height: 1.6; /* Figma: lh 24px (160%). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--review-comment-clamp, 4);
	overflow: hidden;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
	.review-marquee {
		height: 560px;
	}
}

@media (max-width: 599px) {
	.review-marquee {
		height: 480px;
	}

	.review-card {
		padding: calc(var(--review-card-padding, 20px) * 0.85);
	}
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
	.review-marquee__track {
		animation: none;
	}
}