/* Khối Ăn uống (B2) – venue-cards: một điểm thì thẻ rộng ảnh trái chữ phải, nhiều điểm thì lưới thẻ dọc. Mobile trước, mốc 640px / 1024px. */

.vh-venues {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-venue {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	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);
}

/* Khung 4:3 quyết định tỉ lệ ảnh; ảnh chỉ bo 2 góc trên nhờ overflow của thẻ. */
.vh-venue__media {
	position: relative;
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vh-color-surface);
}

.vh-venue__media > * {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.vh-venue__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.vh-venue__media .vh-ph {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.vh-venue__body {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1rem var(--vh-card-pad) var(--vh-card-pad);
}

.vh-venue__name {
	margin: 0;
	overflow-wrap: anywhere;
}

.vh-venue__hours {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	font-variant-numeric: tabular-nums;
}

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

.vh-venue__text {
	margin: 0;
	line-height: var(--vh-lh-body);
}

@media (min-width: 640px) {
	.vh-venues {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Một điểm: thẻ rộng nằm ngang. */
	.vh-venues--n1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.vh-venues--n1 .vh-venue {
		flex-direction: row;
	}

	.vh-venues--n1 .vh-venue__media {
		flex: 0 0 50%;
		aspect-ratio: auto;
		min-height: 280px;
	}

	.vh-venues--n1 .vh-venue__body {
		flex: 1 1 auto;
		align-content: center;
		padding: 1.5rem 1.75rem;
	}

	/* Ba điểm trên 2 cột: điểm cuối nằm giữa cho cân. */
	.vh-venues--n3 > .vh-venue:last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--vh-card-gap)) / 2);
	}
}

@media (min-width: 1024px) {
	.vh-venues--n3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vh-venues--n3 > .vh-venue:last-child {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}

	.vh-venues--n4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vh-venues--n1 .vh-venue__media {
		min-height: 340px;
	}
}