.site-logo img {
	display: block;
}

.hero {
	position: relative;
	height: 100vh;
	/* svh = phần màn hình THẬT SỰ nhìn thấy trên mobile, không tính thanh địa chỉ của
	   trình duyệt. Dùng 100vh trơn thì hero cao hơn khung nhìn nên chữ bị đẩy xuống
	   dưới thanh công cụ. Dòng vh ở trên là dự phòng cho trình duyệt cũ. */
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

/* <picture> chỉ là lớp bọc chọn nguồn ảnh — không được xen vào bố cục, để <img>
   bên trong vẫn định vị tuyệt đối theo .hero như khi đứng một mình. */
.hero picture {
	display: contents;
}

.hero__video,
.hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* MOBILE: ảnh hero là ảnh NGANG (~2.4:1) nhưng khung ở đây là khung DỌC (~1:2.2),
   nên object-fit: cover phóng ảnh lên rất lớn và cắt mất hai bên — khách chỉ thấy
   một mảng vàng, không đọc ra logo. Hạ chiều cao hero để tỉ lệ khung bớt dọc,
   phần ảnh nhìn thấy được rộng hơn hẳn.
   Muốn hết hẳn thì cần một bản ảnh cắt sẵn theo khung dọc — việc đó làm ở khâu ảnh. */
@media (max-width: 767px) {
	.hero {
		height: 78svh;
		min-height: 460px;
	}

	/*
	 * KHI CÓ ẢNH DỌC RIÊNG: dùng contain, KHÔNG dùng cover.
	 *
	 * Vì sao: khung hero trên điện thoại có tỉ lệ khác nhau tuỳ máy và tuỳ chiều cao
	 * thanh địa chỉ — đo trên iPhone 375×812 ra 0,59, máy khác lại khác. Ảnh dọc cắt
	 * sẵn tỉ lệ 3:4 (0,75) vẫn "thừa bề ngang" so với khung 0,59, nên cover tiếp tục
	 * cắt hai bên và lại mất chữ PICTURES — đúng lỗi đang định sửa.
	 *
	 * contain thì ảnh luôn lọt trọn khung, không bao giờ bị cắt, bất kể máy nào.
	 * Phần khung thừa lấy nền cùng màu với nền của ảnh (#0d0c0f — màu lấy từ 4 góc
	 * ảnh gốc) nên không nhìn ra chỗ nối.
	 */
	.hero--mobile-art {
		background-color: #0d0c0f;
	}

	.hero--mobile-art .hero__poster {
		object-fit: contain;
	}
}

/* YouTube background: iframe phóng to 130% + căn giữa để che khung 16:9 và letterbox đen của player */
.hero__youtube {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.hero__youtube iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130vw;
	height: 73.125vw; /* 130vw * 9/16 */
	min-height: 130vh;
	min-width: 231.1vh; /* 130vh * 16/9 */
	transform: translate(-50%, -50%);
	border: 0;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.2));
}

.hero__content {
	position: relative;
	padding-bottom: var(--space-xl);
}

.hero__tagline {
	color: var(--color-text);
	max-width: 40ch;
}