/* Block Hero chữ trái + ảnh phải (Figma "Detail page → School unifrom" → Frame 27: 1920 × 1080 tính cả header 104, nền #FFC557;
   H1 Zalando 800 92px #1E1E1E, khối chữ 885 × 236 (2 dòng 112, gap 12) ở left 80, giữa khung; ảnh 903 × 722 bo 16 ở left 961, top 229) */

.block-split-hero {
	display: grid;
	gap: 32px;
	padding: clamp(40px, 6vw, 80px) var(--gutter);
	background: #ffc557;
}

.block-split-hero__title {
	position: relative;
	z-index: 1; /* dấu chấm cuối "SCHOOLS." chạm mép ảnh như Figma */
	display: grid;
	gap: clamp(4px, 0.63vw, 12px);
	font-size: clamp(34px, 4.79vw, 92px);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text);
}

.block-split-hero__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 903 / 722;
}

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

/* Section kế tiếp (Our school partners) cách hero 83 thay vì khoảng cách section chung 160. */
.block-split-hero + .section {
	margin-top: clamp(48px, 4.32vw, 83px);
}

/* Desktop: dựng theo toạ độ Figma, kéo lên sau header như khung 1080. */
@media (min-width: 1024px) {
	.block-split-hero {
		position: relative;
		display: block;
		margin-top: calc(-1 * var(--header-height));
		padding: 0;
		aspect-ratio: 1920 / 1080;
	}

	.block-split-hero__title {
		position: absolute;
		top: 50%;
		left: 4.17%;         /* 80 / 1920 */
		transform: translateY(-50%);
		white-space: nowrap;
	}

	.block-split-hero__media {
		position: absolute;
		top: 21.2%;          /* 229 / 1080 */
		left: 50.05%;        /* 961 / 1920 */
		width: 47.03%;       /* 903 / 1920 */
	}
}

/* Hiệu ứng (School uniform – feedback vòng 3 "tự múa": dev tự chọn chuyển động). Hero nằm ở màn hình đầu nên dùng CSS
   animation khi tải trang, không chờ cuộn: từng dòng tiêu đề trồi lên (như hero các trang con), ảnh mở dần từ dưới lên
   và thu nhỏ về cỡ thật. Không có JS vẫn chạy; tắt khi người dùng chọn giảm chuyển động. */
@media (prefers-reduced-motion: no-preference) {
	.block-split-hero__title span {
		animation: split-hero-line 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.block-split-hero__title span:nth-child(2) {
		animation-delay: 0.2s;
	}

	.block-split-hero__media {
		animation: split-hero-media 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
	}

	.block-split-hero__media img {
		animation: split-hero-image 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
	}
}

@keyframes split-hero-line {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
}

@keyframes split-hero-media {
	from { clip-path: inset(100% 0 0 0 round var(--radius-md)); }
	to { clip-path: inset(0 round var(--radius-md)); }
}

@keyframes split-hero-image {
	from { transform: scale(1.18); }
}