/* Block Hero trang con (Figma "About us" – Frame 80) */

.block-page-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(82svh, 720px);
	padding: clamp(48px, 6vw, 120px) var(--gutter);
	overflow: hidden;
	color: #fff;
	text-align: center;
	isolation: isolate;
	/* Góc trái trên, trái dưới và phải dưới bị cắt chéo, lộ nền trang (Figma). */
	clip-path: polygon(8% 0, 100% 0, 100% 61%, 92% 100%, 25% 100%, 0 88%, 0 18%);
}

/* Khung cắt góc đổi hình liên tục theo thời gian (feedback vòng 2, tham khảo tribestays.com/student-hostel/community):
   7 đỉnh trượt qua lại giữa 4 hình, bắt đầu và kết thúc ở hình Figma. Mọi hình chỉ cắt mép ngoài, không che chữ ở giữa. */
@media (prefers-reduced-motion: no-preference) {
	.block-page-hero:not(.block-page-hero--stacked) {
		animation: page-hero-shape 16s ease-in-out 1.2s infinite;
	}
}

@keyframes page-hero-shape {
	0%,
	100% {
		clip-path: polygon(8% 0, 100% 0, 100% 61%, 92% 100%, 25% 100%, 0 88%, 0 18%);
	}
	25% {
		clip-path: polygon(16% 0, 94% 0, 100% 30%, 86% 100%, 10% 100%, 0 74%, 0 28%);
	}
	50% {
		clip-path: polygon(3% 0, 84% 0, 100% 16%, 100% 82%, 34% 100%, 0 95%, 0 8%);
	}
	75% {
		clip-path: polygon(22% 0, 100% 0, 100% 44%, 95% 100%, 18% 100%, 2% 80%, 0 36%);
	}
}

@media (min-width: 768px) {
	.block-page-hero {
		min-height: 0;
		aspect-ratio: 1920 / 976;
	}
}

.block-page-hero > picture,
.block-page-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
}

.block-page-hero__image {
	object-fit: cover;
}

.block-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.4);
}

.block-page-hero__content {
	display: grid;
	justify-items: center;
	gap: clamp(16px, 1.67vw, 32px);
}

.block-page-hero__title {
	display: grid;
	font-size: clamp(34px, 5.63vw, 108px);
	font-weight: 800;
	line-height: 1.21;
	text-transform: uppercase;
}

.block-page-hero__subtitle {
	margin-top: clamp(4px, 1vw, 20px);
	font-family: var(--font-display);
	font-size: clamp(18px, 2.29vw, 44px);
	font-weight: 300;
	text-transform: uppercase;
}

.block-page-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 12px;
}

.block-page-hero__stats > div {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	padding-inline: clamp(12px, 1.25vw, 24px);
}

.block-page-hero__stats > div + div {
	border-left: 1px solid rgba(255, 255, 255, 0.6);
}

.block-page-hero__stats dd {
	font-family: var(--font-display);
	font-size: clamp(18px, 1.88vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.block-page-hero__stats dt {
	font-size: clamp(10px, 0.63vw, 12px);
	text-transform: uppercase;
	opacity: 0.85;
}

/* Kiểu "stacked" (Figma "Detail page → Dugarco creative" → Hero 1920×1112 tính cả header 104) */

.block-page-hero--stacked {
	clip-path: none;
}

@media (min-width: 768px) {
	.block-page-hero--stacked {
		aspect-ratio: 1920 / 1008;
		/* Figma căn chữ giữa cả khung 1112 (tính header): đẩy tâm lên nửa chiều cao header. */
		padding-bottom: calc(clamp(48px, 6vw, 120px) + var(--header-height));
	}
}

.block-page-hero--stacked::after {
	background: rgba(0, 0, 0, 0.3);
}

.block-page-hero--stacked .block-page-hero__title {
	justify-items: center;
	line-height: 1.15;
}

/* Dòng lẻ: chữ mảnh nhỏ 44px; dòng chẵn: chữ đậm lớn 108px (cỡ chung của tiêu đề hero). */
.block-page-hero--stacked .block-page-hero__title span:nth-child(odd) {
	font-size: clamp(20px, 2.29vw, 44px);
	font-weight: 400;
}

.block-page-hero--stacked .block-page-hero__title span:nth-child(even) {
	font-weight: 900;
}

/* Hiệu ứng khi tải trang: ảnh thu nhỏ dần về cỡ thật, từng dòng tiêu đề trồi lên, rồi tới phụ đề và số liệu
   (số liệu đếm tăng do assets/js/site.js). Hero nằm ngay màn hình đầu nên dùng CSS animation, không chờ cuộn. */
@media (prefers-reduced-motion: no-preference) {
	.block-page-hero__image {
		animation: page-hero-image 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.block-page-hero__title span,
	.block-page-hero__subtitle,
	.block-page-hero__stats > div {
		animation: page-hero-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	/* Dòng tiêu đề chậm hơn (feedback vòng 2: tăng thời gian hiệu ứng tiêu đề). */
	.block-page-hero__title span {
		animation-duration: 1.5s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}

	.block-page-hero__title span:nth-child(2) { animation-delay: 0.2s; }
	.block-page-hero__title span:nth-child(3) { animation-delay: 0.4s; }
	.block-page-hero__subtitle { animation-delay: 0.35s; }
	.block-page-hero__stats > div:nth-child(1) { animation-delay: 0.5s; }
	.block-page-hero__stats > div:nth-child(2) { animation-delay: 0.6s; }
	.block-page-hero__stats > div:nth-child(3) { animation-delay: 0.7s; }
	.block-page-hero__stats > div:nth-child(n + 4) { animation-delay: 0.8s; }
}

@keyframes page-hero-image {
	from { transform: scale(1.12); }
}

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