/* Blocks 2027 – section primitives, the consultation CTA and the scroll reveal shared by the 2027 page templates
   (homepage, Giới thiệu, Trang du lịch). Loaded after site-2027.css; each page's own stylesheet loads after this one. */

html:has(.vmt-h27) {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

/* ---------- Sections ---------- */
.vmt-h27-section {
	padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 10vw, 120px);
}
.vmt-h27-section--tint {
	background: var(--tint);
}
.vmt-h27-heading {
	font-family: var(--serif);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.vmt-h27-section > .vmt-h27-container > .vmt-h27-heading {
	margin-bottom: clamp(28px, 4vw, 44px);
}
.vmt-h27-eyebrow {
	margin-bottom: 10px;
	color: var(--accent-strong);
	font-size: 15px;
	font-weight: 600;
}

/* ---------- CTA (template-parts/home-2027/cta.php) ---------- */
/* Sits after a tinted or white section, so the card carries its own top spacing. */
.vmt-h27-cta {
	padding-top: clamp(56px, 7vw, 96px);
}
.vmt-h27-cta-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	padding: clamp(28px, 5vw, 64px);
	border-radius: 24px;
	background:
		radial-gradient(
			60% 80% at 100% 0%,
			rgba(255, 68, 11, 0.12),
			rgba(255, 68, 11, 0) 70%
		),
		rgba(255, 68, 11, 0.06); /* faint brand orange (#ff440b) over the white section */
}
.vmt-h27-cta-copy > p:not(.vmt-h27-eyebrow) {
	max-width: 30em;
	margin-top: 14px;
	color: var(--ink-2);
	font-size: 17px;
}

/* Direct contact pills (same look as the Tour Mỹ Tết 2027 template): each channel in its brand colour. */
.vmt-h27-cta-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}
.vmt-h27 .vmt-h27-contact-link {
	--c-bg: var(--accent);
	--c-bg-hover: var(--accent-strong);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 18px 0 14px;
	border-radius: 9999px;
	background: var(--c-bg);
	/* Size gradients to the border box so they do not tile at the edges. */
	background-origin: border-box;
	box-shadow:
		0 1px 2px rgba(8, 30, 58, 0.25),
		0 12px 26px -12px rgba(8, 30, 58, 0.6);
	color: #fffaf0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color 0.2s,
		transform 0.2s;
}
.vmt-h27 .vmt-h27-contact-link:hover,
.vmt-h27 .vmt-h27-contact-link:focus-visible {
	background: var(--c-bg-hover);
	background-origin: border-box;
	color: #fffaf0;
	transform: translateY(-1px);
}
.vmt-h27 .vmt-h27-contact-link:active {
	transform: translateY(0) scale(0.98);
}
.vmt-h27 .vmt-h27-contact-link.is-hotline {
	/* Brand orange like the other buttons (the Tet template uses red here). */
	--c-bg: var(--accent);
	--c-bg-hover: var(--accent-strong);
	font-variant-numeric: tabular-nums;
}
.vmt-h27 .vmt-h27-contact-link.is-zalo {
	--c-bg: #0068ff;
	--c-bg-hover: #0052cc;
}
.vmt-h27 .vmt-h27-contact-link.is-messenger {
	--c-bg: linear-gradient(45deg, #0a7cff 0%, #a033ff 55%, #ff5c87 100%);
	--c-bg-hover: linear-gradient(45deg, #0066d6 0%, #8a1fe8 55%, #f0426f 100%);
}
.vmt-h27-contact-icon {
	flex: none;
}

/* Contact Form 7 keeps its default look; only the card around it is styled. */
.vmt-h27-cta-form {
	padding: clamp(20px, 3vw, 32px);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-sm);
}

/* ---------- Reveal on scroll (vmt27.reveal() in site-2027.js adds .vmt-h27-js to <html>) ----------
 * A slow, soft rise: long enough to be noticed, eased so it settles gently.
 * JS staggers siblings and removes data-vmt-reveal once done, giving hover effects back their own timing. */
.vmt-h27-js [data-vmt-reveal] {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 1s cubic-bezier(0.33, 1, 0.68, 1),
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.vmt-h27-js [data-vmt-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.vmt-h27-cta-card {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 599px) {
	.vmt-h27-cta-card {
		padding: 28px 20px;
		border-radius: var(--radius);
	}
}
@media (prefers-reduced-motion: reduce) {
	html:has(.vmt-h27) {
		scroll-behavior: auto;
	}
	.vmt-h27-js [data-vmt-reveal] {
		opacity: 1;
		transform: none;
	}
}