/*
 * Khối page-hero (đầu trang con): image (ảnh nền + lớp phủ), plain (nền nhạt), split (chữ + ảnh).
 * Chữ trên ảnh luôn trắng; lớp phủ đều trên cả ảnh với độ phủ --vh-phero-a do PHP tính từ --vh-color-overlay
 * (chữ trắng ≥ 4,5:1 cả trên điểm ảnh trắng), nên đường dẫn vụn phía trên cũng đạt.
 */

.vh-s-page-hero {
	padding-block: 0;
}

.vh-phero {
	position: relative;
}

.vh-phero__eyebrow {
	margin-bottom: 6px;
}

.vh-phero__title {
	max-width: 24ch;
	margin: 0;
	text-wrap: balance;
}

.vh-phero__lead {
	max-width: 62ch;
	margin-top: 12px;
}

.vh-phero .vh-pg-pkg {
	margin-top: 16px;
}

.vh-phero--center .vh-phero__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.vh-phero--center .vh-crumbs ol {
	justify-content: center;
}

/* ---------- image ---------- */
.vh-phero--image {
	--vh-phero-min: clamp(300px, 50vh, 460px);
	display: flex;
	flex-direction: column;
	min-height: var(--vh-phero-min);
	overflow: hidden;
	isolation: isolate;
	background: var(--vh-color-deep);
	color: var(--vh-white);
}

.vh-phero--image.vh-phero--h-s {
	--vh-phero-min: clamp(240px, 38vh, 340px);
}

.vh-phero--image.vh-phero--h-l {
	--vh-phero-min: clamp(380px, 68vh, 640px);
}

.vh-phero--image .vh-phero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vh-phero--image .vh-phero__media > .vh-img,
.vh-phero--image .vh-phero__media > img,
.vh-phero--image .vh-phero__media > .vh-ph {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	filter: var(--vh-media-filter, none);
}

.vh-phero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(var(--vh-color-overlay) / var(--vh-phero-a, 0.7));
	pointer-events: none;
}

.vh-phero--image .vh-phero__in {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	padding-block: 4px clamp(28px, 5vw, 48px);
}

/* Khối chữ nằm đáy ảnh, đường dẫn vụn ở đỉnh. */
.vh-phero--image .vh-phero__text {
	margin-top: auto;
}

.vh-phero--image.vh-phero--center .vh-phero__text {
	margin-block: auto;
}

.vh-phero--image .vh-phero__title,
.vh-phero--image .vh-phero__lead,
.vh-phero--image .vh-phero__eyebrow,
.vh-phero--image .vh-crumbs ol,
.vh-phero--image .vh-crumbs a,
.vh-phero--image .vh-crumbs a:hover,
.vh-phero--image .vh-crumbs [aria-current="page"],
.vh-phero--image .vh-crumbs li + li::before {
	color: var(--vh-white);
}

.vh-phero--image .vh-crumbs a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
}

.vh-phero--image .vh-crumbs a:hover {
	text-decoration-color: currentColor;
}

/* Điều khiển trên ảnh: vòng đôi (trắng trong, tối ngoài) đạt tương phản với mọi điểm ảnh. */
.vh-phero--image :focus-visible {
	outline: 2px solid var(--vh-color-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--vh-color-focus-on-deep);
}

/* Đầu trang trong suốt phủ lên ảnh (chrome kéo khối lên đúng chiều cao đầu trang): chừa chỗ cho đầu trang. */
.vh-phero--under-header {
	min-height: calc(var(--vh-phero-min) + min(var(--vh-header-h), 56px));
}

.vh-phero--under-header .vh-phero__in {
	padding-top: calc(min(var(--vh-header-h), 56px) + 4px);
}

@media (min-width: 1024px) {
	.vh-phero--under-header {
		min-height: calc(var(--vh-phero-min) + var(--vh-header-h));
	}

	.vh-phero--under-header .vh-phero__in {
		padding-top: calc(var(--vh-header-h) + 8px);
	}
}

/* ---------- plain ---------- */
.vh-phero--plain,
.vh-phero--split {
	background: var(--vh-color-surface);
}

.vh-phero--plain .vh-phero__in,
.vh-phero--split .vh-phero__in {
	/* Khối sau đã có đệm trên riêng (.vh-s): đáy đầu trang chỉ cần vừa đủ tách nền. */
	padding-block: 4px clamp(28px, 4vw, 40px);
}

.vh-phero--plain.vh-phero--h-s .vh-phero__in {
	padding-bottom: clamp(24px, 4vw, 36px);
}

.vh-phero--plain.vh-phero--h-l .vh-phero__in {
	padding-bottom: clamp(48px, 9vw, 96px);
}

.vh-phero--plain.vh-phero--h-l .vh-phero__text {
	padding-top: clamp(8px, 3vw, 32px);
}

.vh-phero--plain .vh-phero__lead,
.vh-phero--split .vh-phero__lead {
	color: var(--vh-color-muted);
}

/* ---------- split ---------- */
.vh-phero__grid {
	display: grid;
	gap: 24px;
	align-items: center;
}

.vh-phero--split .vh-phero__media {
	overflow: hidden;
	border-radius: var(--vh-radius-media);
	background: var(--vh-color-bg);
}

.vh-phero--split .vh-phero__media > .vh-img,
.vh-phero--split .vh-phero__media > img,
.vh-phero--split .vh-phero__media > .vh-ph {
	width: 100%;
	object-fit: cover;
	filter: var(--vh-media-filter, none);
}

@media (min-width: 900px) {
	.vh-phero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(32px, 5vw, 64px);
	}

	/* align = center: ảnh trái, chữ phải. */
	.vh-phero--split.vh-phero--center .vh-phero__media {
		order: -1;
	}

	.vh-phero--split.vh-phero--center .vh-phero__text {
		align-items: flex-start;
		text-align: left;
	}
}