/* ========================================================================== 
   DOLONG BESPOKE — QC REFINEMENT
   Keeps the first bespoke build intact while locking crop, mobile rhythm,
   Vietnamese typography and click-to-reveal behaviour.
   ========================================================================== */

/* Fluent Forms keeps its internal form title for admin use. The modal already
   owns the customer-facing heading, so suppress duplicate/default titles. */
.dolong-bespoke .dl-booking-modal__form .ff-form-title,
.dolong-bespoke .dl-booking-modal__form .ff-el-form-title,
.dolong-bespoke .dl-booking-modal__form .form-title,
.dolong-bespoke .dl-booking-modal__form .fluentform_wrapper_3 > h3 {
	display: none !important;
}

/* Preserve the model's face in the desktop hero crop while keeping the left
   side available for editorial copy. */
@media (min-width: 821px) {
	.dl-bespoke-hero__media img {
		object-position: 58% center;
	}
}

/* Editorial title system --------------------------------------------------
   Each line has its own mask so the text lifts into place on scroll. Extra
   vertical padding prevents Vietnamese diacritics from being clipped. */
.dl-bespoke-title {
	letter-spacing: -0.038em !important;
	line-height: 1.04 !important;
}

.dl-bespoke-hero .dl-bespoke-title {
	letter-spacing: -0.046em !important;
	line-height: 0.98 !important;
}

.dl-bespoke-title-line {
	display: block;
	overflow: hidden;
	padding: 0.08em 0 0.11em;
	margin: -0.08em 0 -0.11em;
}

.dl-bespoke-title-line > span {
	display: block;
	transform: translateY(112%);
	transition: transform 760ms cubic-bezier(0.22, 0.78, 0.2, 1);
	will-change: transform;
}

.is-visible .dl-bespoke-title-line > span {
	transform: translateY(0);
}

.dl-bespoke-title-line:nth-child(2) > span {
	transition-delay: 90ms;
}

.dl-bespoke-title-line:nth-child(3) > span {
	transition-delay: 160ms;
}

@media (prefers-reduced-motion: reduce) {
	.dl-bespoke-title-line > span {
		transform: none;
		transition: none;
	}
}

/* Keep the expanded desktop panel close to the 4:5 master-image ratio. */
.dl-bespoke-language__rail {
	height: clamp(540px, 46vw, 720px);
}

.dl-bespoke-language__panel > img {
	object-position: center 42%;
	transition:
		transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
		object-position 680ms cubic-bezier(0.22, 0.78, 0.2, 1);
}

.dl-bespoke-language__panel.is-active > img {
	object-position: center 50%;
}

.dl-bespoke-language__hint {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: -28px;
	margin-bottom: 18px;
	color: rgba(22, 21, 19, 0.54);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dl-bespoke-language__hint strong {
	font-weight: 600;
}

.dl-bespoke-language__hint-arrows {
	font-size: 13px;
	letter-spacing: 0.05em;
}

.dl-bespoke-language__hint-mobile {
	display: none;
}

/* Hover selects the visual. Click/tap reveals the longer description. */
.dl-bespoke-language__panel::after {
	position: absolute;
	top: 22px;
	right: 20px;
	z-index: 2;
	content: "Xem chi tiết  +";
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 220ms ease, transform 280ms ease;
}

.dl-bespoke-language__panel.is-active::after {
	opacity: 0.84;
	transform: translateY(0);
}

.dl-bespoke-language__panel.is-expanded::after {
	content: "Thu gọn  −";
}

/* Override the v1 rule: active != expanded. */
.dl-bespoke-language__panel.is-active .dl-bespoke-language__meta > span {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	transform: translateY(8px);
}

.dl-bespoke-language__panel.is-expanded .dl-bespoke-language__meta > span {
	max-height: 124px;
	margin-top: 14px;
	opacity: 1;
	transform: translateY(0);
}

.dl-bespoke-language__panel.is-expanded .dl-bespoke-language__shade {
	background: linear-gradient(0deg, rgba(8, 8, 8, 0.84) 0%, rgba(8, 8, 8, 0.2) 55%, rgba(8, 8, 8, 0.05) 100%);
}

@media (max-width: 820px) {
	/* Vietnamese serif diacritics need more breathing room than desktop. */
	.dl-bespoke-hero h1 {
		font-size: clamp(46px, 13vw, 64px);
	}

	.dl-bespoke-intro h2,
	.dl-bespoke-language h2,
	.dl-bespoke-journey h2,
	.dl-bespoke-craft h2,
	.dl-bespoke-final h2 {
		margin-top: 14px;
		font-size: clamp(38px, 10.2vw, 52px);
	}

	.dl-bespoke-title {
		letter-spacing: -0.026em !important;
		line-height: 1.09 !important;
	}

	.dl-bespoke-hero .dl-bespoke-title {
		letter-spacing: -0.034em !important;
		line-height: 1.03 !important;
	}

	.dl-bespoke-title-line {
		padding-top: 0.11em;
		padding-bottom: 0.14em;
		margin-top: -0.11em;
		margin-bottom: -0.14em;
	}

	.dl-bespoke-intro,
	.dl-bespoke-language,
	.dl-bespoke-journey,
	.dl-bespoke-craft {
		padding-top: 72px;
		padding-bottom: 80px;
	}

	.dl-bespoke-intro__grid {
		gap: 28px;
	}

	.dl-bespoke-language__heading {
		margin-bottom: 24px;
	}

	.dl-bespoke-language__heading > div {
		gap: 16px;
	}

	.dl-bespoke-language__heading > div > p {
		line-height: 1.65;
	}

	.dl-bespoke-language__hint {
		justify-content: flex-start;
		gap: 10px;
		margin-top: 0;
		margin-bottom: 15px;
		font-size: 8px;
	}

	.dl-bespoke-language__hint-mobile {
		display: inline;
	}

	/* Shorter mobile cards keep the 4:5 master ratio without dominating a full
	   viewport, while still revealing the next card as a swipe cue. */
	.dl-bespoke-language__rail {
		grid-auto-columns: minmax(min(76vw, 350px), min(76vw, 350px));
		padding: 0 20px 10px;
		height: auto;
	}

	.dl-bespoke-language__panel,
	.dl-bespoke-language__panel.is-active {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.dl-bespoke-language__panel > img,
	.dl-bespoke-language__panel.is-active > img {
		object-position: center 42%;
	}

	.dl-bespoke-language__panel::after {
		top: 18px;
		right: 16px;
		content: "Chạm xem  +";
		opacity: 0;
	}

	.dl-bespoke-language__panel.is-active::after {
		opacity: 0.82;
	}

	.dl-bespoke-language__panel.is-expanded::after {
		content: "Thu gọn  −";
	}

	/* V1 exposed every mobile description; only a tap should reveal it. */
	.dl-bespoke-language__meta > span,
	.dl-bespoke-language__panel.is-active .dl-bespoke-language__meta > span {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		transform: translateY(8px);
	}

	.dl-bespoke-language__panel.is-expanded .dl-bespoke-language__meta > span {
		max-height: 132px;
		margin-top: 12px;
		opacity: 1;
		transform: translateY(0);
	}

	.dl-bespoke-language__footer {
		gap: 20px;
		padding-top: 22px;
	}

	.dl-bespoke-language__footer p {
		max-width: 340px;
		font-size: 18px;
		line-height: 1.48;
	}


	.dl-bespoke-craft__heading {
		margin-bottom: 46px;
	}

	.dl-bespoke-craft__grid {
		gap: 38px;
	}

	.dl-bespoke-final__inner {
		padding-block: 72px;
	}

	.dl-bespoke-final__copy > p:not(.dl-overline) {
		margin: 20px 0 24px;
		line-height: 1.68;
	}
}

@media (max-width: 540px) {
	.dl-bespoke-language__rail {
		grid-auto-columns: minmax(78vw, 78vw);
	}

	.dl-bespoke-language__panel,
	.dl-bespoke-language__panel.is-active {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 5;
	}
}