/*
 * Khối hero – dual-intent: dải H1 căn giữa, hai nửa ảnh Hội nghị | Tiệc cưới, chú thích nền đặc dưới mỗi ảnh.
 * Điện thoại: một ảnh chung 4:5, nút segment chọn chú thích (JS bật lớp is-tabbed; không JS thì hiện cả hai chú thích).
 * Mobile trước, mốc 768px / 1024px.
 */

/* Khoảng dưới đủ cho thanh đặt phòng đè 24px (điện thoại) / 48px (máy tính) mà không che nút trong chú thích. */
.vh-hero-dual {
	padding-block: clamp(28px, 6vw, 64px) clamp(48px, 7vw, 80px);
}

.vh-hero-dual__head {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-bottom: clamp(20px, 4vw, 40px);
	text-align: center;
}

.vh-hero-dual__title {
	max-width: 24ch;
	margin: 0;
	font-size: var(--vh-fs-display, var(--vh-fs-h1));
	font-variation-settings: var(--vh-heading-variation, normal);
}

.vh-hero-dual__sub {
	max-width: 40rem;
	margin: 0;
	color: var(--vh-color-muted);
}

/* ---- Điện thoại: [ảnh chung] [segment] [chú thích] ---- */
.vh-hero-dual__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vh-hero-dual__half {
	display: contents;
}

.vh-hero-dual__half--0 .vh-hero-dual__media {
	order: 1;
}

.vh-hero-dual__seg {
	order: 2;
}

.vh-hero-dual__cap {
	order: 3;
}

.vh-hero-dual__half--1 .vh-hero-dual__media {
	display: none;
}

.vh-hero-dual.is-tabbed .vh-hero-dual__cap:not(.is-active) {
	display: none;
}

.vh-hero-dual__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--vh-radius-media);
	background: var(--vh-color-surface);
}

.vh-hero-dual__media .vh-img,
.vh-hero-dual__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 70vh;
	max-height: 70svh;
	object-fit: cover;
	border-radius: 0;
}

.vh-hero-dual__frame {
	position: absolute;
	inset: var(--vh-media-frame-inset, 12px);
	border: 1px solid var(--vh-media-frame-color, var(--vh-color-ornament, color-mix(in srgb, var(--vh-white) 70%, transparent)));
	pointer-events: none;
}

/* Nút segment: chọn một trong hai, nút đang chọn nền màu chính. */
.vh-hero-dual__seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--vh-color-border-strong);
	border-radius: var(--vh-radius-button);
	background: var(--vh-color-bg);
}

.vh-hero-dual__segbtn {
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: max(0px, calc(var(--vh-radius-button) - 2px));
	background: transparent;
	color: var(--vh-color-text);
	font-weight: var(--vh-fw-medium);
	line-height: 1.2;
}

.vh-hero-dual__segbtn[aria-pressed="true"] {
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
}

/* Chú thích nền đặc (ivory = surface): eyebrow, một câu, nút riêng. */
.vh-hero-dual__cap {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: clamp(16px, 3vw, 24px);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-surface);
	color: var(--vh-color-text);
}

.vh-hero-dual__cap-text {
	max-width: 36rem;
	margin: 0;
	font-size: var(--vh-fs-lead);
	line-height: 1.5;
}

.vh-hero-dual__cta {
	margin-top: 4px;
}

/* ---- Từ máy tính bảng: hai nửa 50/50, mỗi nửa ảnh trên chú thích dưới ---- */
@media (min-width: 768px) {
	.vh-hero-dual__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(16px, 2vw, 24px);
	}

	.vh-hero-dual .vh-hero-dual__seg {
		display: none;
	}

	.vh-hero-dual__half {
		display: grid;
		grid-template-rows: auto 1fr;
	}

	.vh-hero-dual__half--1 .vh-hero-dual__media {
		display: block;
	}

	.vh-hero-dual.is-tabbed .vh-hero-dual__cap:not(.is-active) {
		display: grid;
	}

	.vh-hero-dual__media {
		border-radius: var(--vh-radius-media) var(--vh-radius-media) 0 0;
	}

	.vh-hero-dual__media .vh-img,
	.vh-hero-dual__media img {
		height: clamp(320px, 56vh, 640px);
		height: clamp(320px, 56svh, 640px);
		max-height: none;
		aspect-ratio: auto;
	}

	.vh-hero-dual__cap {
		align-content: start;
		border-radius: 0 0 var(--vh-radius-card) var(--vh-radius-card);
	}
}