/* Khối Hình ảnh – masonry: cột lệch (2 cột điện thoại, 3 cột máy tính), polaroid mỗi ảnh thứ N. */

.vh-masonry__list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 0.75rem;
}

.vh-masonry__item {
	display: block;
	margin: 0 0 0.75rem;
	break-inside: avoid;
}

.vh-masonry__item[hidden] {
	display: none;
}

.vh-masonry__fig {
	margin: 0;
}

.vh-masonry__cap {
	padding: 0.375rem 0.125rem 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	line-height: var(--vh-lh-body);
}

/* Polaroid: khung giấy, chú thích viết tay, băng dính washi; nghiêng nhẹ, không chuyển động. */
.vh-masonry__item--polaroid .vh-masonry__fig {
	position: relative;
	padding: 0.625rem 0.625rem 0.25rem;
	background: var(--vh-color-card);
	box-shadow: var(--vh-shadow-card);
	transform: rotate(-1.5deg);
}

.vh-masonry__item--polaroid:nth-child(even) .vh-masonry__fig {
	transform: rotate(1.25deg);
}

.vh-masonry__item--polaroid .vh-masonry__media {
	border-radius: 0;
}

.vh-masonry__item--polaroid .vh-masonry__fig::before {
	content: "";
	position: absolute;
	top: -0.625rem;
	left: 50%;
	z-index: 2;
	width: 4.5rem;
	height: 1.25rem;
	background: var(--vh-color-fun-2, var(--vh-color-accent));
	opacity: 0.85;
	transform: translateX(-50%) rotate(-3deg);
	pointer-events: none;
}

.vh-masonry__item--polaroid .vh-masonry__cap {
	padding: 0.5rem 0.25rem 0.375rem;
	color: var(--vh-color-text);
	font-family: var(--vh-font-accent, var(--vh-font-heading));
	font-size: var(--vh-fs-body);
	text-align: center;
}

/* 4–6 ảnh: một hàng đều thay cột lệch. */
.vh-masonry--row .vh-masonry__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	columns: auto;
}

.vh-masonry--row .vh-masonry__item {
	margin: 0;
}

@media (min-width: 1024px) {
	.vh-masonry__list {
		columns: 3;
		column-gap: 1rem;
	}

	.vh-masonry__item {
		margin-bottom: 1rem;
	}

	.vh-masonry--row .vh-masonry__list {
		grid-template-columns: repeat(var(--vh-mas-n, 4), minmax(0, 1fr));
	}

	.vh-masonry--n5 .vh-masonry__list {
		--vh-mas-n: 5;
	}

	.vh-masonry--n6 .vh-masonry__list {
		--vh-mas-n: 6;
	}

	.vh-masonry--n1 .vh-masonry__list,
	.vh-masonry--n2 .vh-masonry__list,
	.vh-masonry--n3 .vh-masonry__list {
		--vh-mas-n: 3;
	}
}