/*
 * Thành phần service-split, dùng chung cho dining/split và spa/split: ảnh 4:5 cạnh cột chữ canh giữa theo chiều dọc.
 * Bên ảnh theo lớp vh-ssplit--img-start|end (tự đổi bên khi hai khối split liền nhau), mặt nạ none | arch | blob,
 * danh sách liệu trình | bước | món | thực đơn trên giấy. Dải nền tô màu: vh-sv-band (dining.css). Mobile trước, mốc 768px / 1024px.
 */

.vh-ssplit {
	display: grid;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.vh-ssplit__media {
	width: 100%;
	max-width: 520px;
	justify-self: center;
}

.vh-ssplit__media img,
.vh-ssplit__media .vh-ph {
	display: block;
	width: 100%;
	border-radius: var(--vh-radius-media);
	object-fit: cover;
	filter: var(--vh-media-filter, none);
}

/* Mặt nạ vòm: 50% 50% 0 0 / 30% 30% 0 0 theo đặc tả Di Sản. */
.vh-ssplit--mask-arch .vh-ssplit__media img {
	border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}

.vh-ssplit--mask-blob .vh-ssplit__media img {
	border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
}

.vh-ssplit__body {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.vh-ssplit__head {
	margin-bottom: 0;
}

.vh-ssplit__name {
	margin: 0;
	font-size: var(--vh-fs-h3);
	line-height: max(1.25, var(--vh-lh-heading));
}

.vh-ssplit__cuisine {
	margin: -0.5rem 0 0;
	color: var(--vh-color-accent-ink);
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	text-transform: var(--vh-label-transform, none);
	letter-spacing: var(--vh-ls-label, 0);
}

.vh-ssplit__text {
	margin: 0;
	font-size: var(--vh-fs-lead);
	line-height: 1.6;
}

/* Liệu trình: tên trái, thời lượng · giá phải, kẻ mảnh. */
.vh-ssplit__treat {
	margin: 0;
	padding: 0;
	border-top: 1px var(--vh-rule-style, solid) var(--vh-color-border-strong);
	list-style: none;
}

.vh-ssplit__treat-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px var(--vh-rule-style, solid) var(--vh-color-border);
}

.vh-ssplit__treat-name {
	font-weight: var(--vh-fw-medium);
	overflow-wrap: anywhere;
}

.vh-ssplit__treat-meta {
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vh-ssplit__treat-text {
	flex-basis: 100%;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	line-height: 1.5;
}

/* Các bước nghi thức 1–3. */
.vh-ssplit__steps {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-ssplit__step {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.vh-ssplit__step-num {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--vh-font-heading);
	font-weight: var(--vh-fw-medium);
	font-variant-numeric: lining-nums;
}

.vh-ssplit__step-text {
	display: grid;
	gap: 0.125rem;
	padding-top: 0.375rem;
}

.vh-ssplit__step-name {
	font-weight: var(--vh-fw-medium);
}

.vh-ssplit__step-desc,
.vh-ssplit__step-price {
	margin: 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-ssplit__step-price {
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-variant-numeric: tabular-nums;
}

/* Thực đơn viết tay trên giấy (Homestay): nền thẻ, chữ font accent (viết tay ở #7). */
.vh-ssplit__sheet {
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	box-shadow: var(--vh-shadow-card);
}

.vh-sv-menu--sheet {
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-size: 1.0625rem;
}

.vh-sv-menu--sheet .vh-sv-menu__title {
	font-family: var(--vh-font-accent, var(--vh-font-heading));
}

.vh-ssplit__note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--vh-fs-small);
	line-height: 1.5;
}

.vh-ssplit__note .vh-i {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.125rem;
}

.vh-ssplit__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.vh-ssplit__actions .vh-i {
	flex: none;
}

@media (min-width: 768px) {
	.vh-ssplit {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.vh-ssplit--img-end {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.vh-ssplit--img-end .vh-ssplit__media {
		order: 2;
	}

	.vh-ssplit--noimg {
		grid-template-columns: minmax(0, 1fr);
		max-width: 760px;
	}
}