/* Block Ghép ảnh quanh tiêu đề (Figma "Detail page → School unifrom" → Frame 100: 1808 × 987, cách hàng logo 190;
   tiêu đề Zalando 900 92px, hộp 937 × 224 ở giữa; 10 ảnh bo 8, cách nhau ~24) */

.block-collage {
	display: grid;
	gap: 24px;
	margin: 0 var(--gutter) var(--section-space);
}

/* Hàng logo phía trên cách 190 (Frame 78 dư 70 dưới logo + 120) thay vì 160. */
.section:has(+ .block-collage) {
	margin-bottom: clamp(72px, 9.9vw, 190px);
}

.block-collage__title {
	font-size: clamp(14px, 5.09cqi, 92px); /* 92 / 1808 bề ngang khung */
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-text);
}

.block-collage__images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.block-collage__item {
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 4 / 3;
}

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

/* Mọi cỡ màn (feedback vòng 4: mobile cũng xếp ảnh lớn nhỏ, so le như Figma): toạ độ Figma (left, top, width, height trên
   khung 1808 × 987), cả cụm thu nhỏ theo bề ngang. */
@media (min-width: 0) {
	.block-collage {
		position: relative;
		display: block;
		aspect-ratio: 1808 / 987;
		container-type: inline-size;
	}

	/* Căn giữa bằng thuộc tính translate: transform để dành cho hiệu ứng hiện khi cuộn (site.js). */
	.block-collage__title {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 51.8%;        /* 937 / 1808 */
		translate: -50% -50%;
	}

	.block-collage__images {
		display: contents;
	}

	.block-collage__item {
		position: absolute;
		border-radius: clamp(4px, 0.44cqi, 8px);
		top: calc(var(--y) / 987 * 100%);
		left: calc(var(--x) / 1808 * 100%);
		width: calc(var(--w) / 1808 * 100%);
		height: calc(var(--h) / 987 * 100%);
		aspect-ratio: auto;
	}

	.block-collage__item:nth-child(1)  { --x: 0;      --y: 0;     --w: 599;   --h: 224.8; }
	.block-collage__item:nth-child(2)  { --x: 625;    --y: 0;     --w: 268;   --h: 356; }
	.block-collage__item:nth-child(3)  { --x: 917;    --y: 0;     --w: 268;   --h: 356; }
	.block-collage__item:nth-child(4)  { --x: 1209.1; --y: 0;     --w: 598.9; --h: 305.2; }
	.block-collage__item:nth-child(5)  { --x: 0;      --y: 248.6; --w: 401.4; --h: 352.4; }
	.block-collage__item:nth-child(6)  { --x: 1430.4; --y: 329.1; --w: 377.6; --h: 295.8; }
	.block-collage__item:nth-child(7)  { --x: 0;      --y: 625;   --w: 577;   --h: 362; }
	.block-collage__item:nth-child(8)  { --x: 601.6;  --y: 705.2; --w: 583.1; --h: 281.8; }
	.block-collage__item:nth-child(9)  { --x: 1209.1; --y: 648.7; --w: 385.3; --h: 338.3; }
	.block-collage__item:nth-child(10) { --x: 1618.4; --y: 648.7; --w: 189.6; --h: 338.3; }
}

/* Hiệu ứng (School uniform – feedback vòng 3 "tự múa": dev tự chọn chuyển động). Cuộn tới: ảnh lần lượt tung vào chỗ, nảy
   lò xo (site.js, REVEAL kiểu "toss"). Desktop: sau đó mỗi ảnh tự đung đưa (trôi lên xuống, nghiêng qua lại) theo nhịp
   riêng, lệch pha nhau như đang nhảy; dùng thuộc tính translate / rotate nên không đụng transform của hiệu ứng hiện.
   Rê chuột lên ảnh: ảnh đứng yên và phóng nhẹ. Tắt khi người dùng chọn giảm chuyển động. */
.block-collage__item img {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.block-collage__item:hover img {
	transform: scale(1.05);
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.block-collage__item {
		animation: collage-dance var(--dance, 6s) ease-in-out var(--dance-delay, 0s) infinite alternate;
	}

	.block-collage__item:hover {
		animation-play-state: paused;
	}

	.block-collage__item:nth-child(1)  { --dance: 6.2s; --dance-delay: -1.1s; }
	.block-collage__item:nth-child(2)  { --dance: 5.4s; --dance-delay: -3s;   --tilt: -1; }
	.block-collage__item:nth-child(3)  { --dance: 6.8s; --dance-delay: -0.4s; }
	.block-collage__item:nth-child(4)  { --dance: 5.8s; --dance-delay: -2.2s; --tilt: -1; }
	.block-collage__item:nth-child(5)  { --dance: 7.2s; --dance-delay: -4.1s; --tilt: -1; }
	.block-collage__item:nth-child(6)  { --dance: 6s;   --dance-delay: -1.7s; }
	.block-collage__item:nth-child(7)  { --dance: 5.6s; --dance-delay: -2.9s; }
	.block-collage__item:nth-child(8)  { --dance: 6.6s; --dance-delay: -0.8s; --tilt: -1; }
	.block-collage__item:nth-child(9)  { --dance: 7s;   --dance-delay: -3.6s; }
	.block-collage__item:nth-child(10) { --dance: 5.2s; --dance-delay: -2.5s; --tilt: -1; }
}

/* Biên độ nhỏ (ảnh cách nhau 24): trôi ±7px, nghiêng ±0.8°. */
@keyframes collage-dance {
	from {
		translate: 0 -7px;
		rotate: calc(var(--tilt, 1) * -0.8deg);
	}
	to {
		translate: 0 7px;
		rotate: calc(var(--tilt, 1) * 0.8deg);
	}
}