/* Block Điểm mạnh + dải ảnh (Figma "Detail page → Solution" → Frame 27, 1920×1080 tính cả header 104) */

.block-highlights {
	display: grid;
	gap: 32px 16px;
	padding: clamp(32px, 4vw, 64px) var(--gutter) clamp(48px, 5vw, 80px);
	overflow-x: clip;
	background: var(--color-bg);
	isolation: isolate; /* Chữ hoà trộn difference chỉ với nền và ảnh trong section. */
}

/* Kích thước ảnh theo Figma (rộng 240 / 360 / 460 trên khung 1920, cùng tỉ lệ 4:5), tính bằng % bề ngang. */
.block-highlights__image { --w: 12.5; }
.block-highlights__image:nth-child(2),
.block-highlights__image:nth-child(4) { --w: 18.75; }
.block-highlights__image:nth-child(3) { --w: 23.96; }

.block-highlights__image {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 4 / 5;
}

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

.block-highlights__items {
	display: contents;
}

.highlight__title {
	font-size: clamp(20px, 2.29vw, 44px);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

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

/* Mobile / tablet (Figma mobile "Solution", feedback vòng 4): dải ảnh ở trên – ảnh giữa lớn, 2 ảnh bên ló ra 2 mép (căn
   giữa, phần thừa bị cắt), rồi các điểm mạnh xen kẽ trái / phải. */
@media (max-width: 1023px) {
	.block-highlights {
		grid-template-columns: minmax(0, 1fr); /* cột không giãn theo dải ảnh – dải tràn 2 mép, ảnh giữa ở giữa */
		gap: 24px;
	}

	.block-highlights__media {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-inline: calc(-1 * var(--gutter));
	}

	.block-highlights__image {
		flex: 0 0 calc(var(--w) * 1.8vw);
	}

	.block-highlights__image:nth-child(3) {
		flex-basis: min(56vw, 360px);
	}

	.block-highlights__image:not(:nth-child(3)) {
		flex-basis: min(44vw, 280px);
	}

	.highlight:nth-child(even) {
		text-align: right;
	}
}

/* Desktop: dựng theo toạ độ Figma trên phần dưới header, khung 1920 × 976. */
@media (min-width: 1024px) {
	.block-highlights {
		position: relative;
		display: block;
		aspect-ratio: 1920 / 976;
		padding: 0;
	}

	.block-highlights__media {
		position: absolute;
		top: 46.9%;          /* tâm dải ảnh: 458 / 976 */
		right: 0;
		left: 0;
		display: grid;
		grid-template-columns: 240fr 360fr 460fr 360fr 240fr;
		align-items: center;
		gap: 1.93vw;         /* 37 / 1920 */
		padding-inline: var(--gutter);
		transform: translateY(-50%);
	}

	/* Chữ trắng + difference: đen trên nền trang, màu đảo khi đè lên ảnh (chữ "PR" trong Figma). */
	.highlight {
		position: absolute;
		color: #fff;
		mix-blend-mode: difference;
	}

	/* Ngắt dòng tiêu đề theo xuống dòng biên tập viên nhập, như Figma. */
	.highlight__title {
		white-space: nowrap;
	}

	.highlight:nth-child(1) { top: 10%; left: 7%; }                           /* 98 / 976, 134 / 1920 */
	.highlight:nth-child(2) { top: 10%; right: 8.1%; text-align: right; }     /* 155 / 1920 */
	.highlight:nth-child(3) { top: 78.2%; left: 5.3%; }                       /* 763 / 976, 102 / 1920 */
	.highlight:nth-child(4) { top: 71.2%; right: 5.3%; text-align: right; }   /* 695 / 976 */
}

/* Hiệu ứng khi tải trang: dải ảnh trồi lên lần lượt từ giữa ra 2 bên, 4 điểm mạnh hiện sau.
   Khối nằm ngay màn hình đầu nên dùng CSS animation, không chờ cuộn. Animation đặt ở phần tử con
   (ảnh, chữ) vì .block-highlights__media và .highlight đã dùng transform / mix-blend-mode để định vị. */
@media (prefers-reduced-motion: no-preference) {
	.block-highlights__image {
		animation: highlights-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.block-highlights__image:nth-child(3) { animation-delay: 0s; }
	.block-highlights__image:nth-child(2),
	.block-highlights__image:nth-child(4) { animation-delay: 0.15s; }
	.block-highlights__image:nth-child(1),
	.block-highlights__image:nth-child(5) { animation-delay: 0.3s; }

	.block-highlights__image img {
		animation: highlights-image 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.highlight > * {
		animation: highlights-text 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
	}

	.highlight:nth-child(2) > * { animation-delay: 0.6s; }
	.highlight:nth-child(3) > * { animation-delay: 0.7s; }
	.highlight:nth-child(4) > * { animation-delay: 0.8s; }
}

@keyframes highlights-rise {
	from { opacity: 0; transform: translateY(80px); }
}

@keyframes highlights-image {
	from { transform: scale(1.2); }
}

@keyframes highlights-text {
	from { opacity: 0; transform: translateY(24px); }
}