/*
 * Decorative masonry-like grid for homepage.
 * Uses CSS columns for a light, dependency-free masonry effect.
 */

.wpdev-home-masonry {
	padding: clamp(16px, 2vw, 32px) 0;
}

.wpdev-home-masonry__inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.wpdev-home-masonry__grid {
	/* 3-column layout on desktop */
	column-count: 3;
	column-gap: 18px;
}

/* Responsive collapse */
@media (max-width: 960px) {
	.wpdev-home-masonry__grid {
		column-count: 2;
	}
}

@media (max-width: 560px) {
	.wpdev-home-masonry__grid {
		column-count: 1;
	}
}

.wpdev-home-masonry__tile {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 18px;
	border-radius: 12px;
	background: #e9eef5;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateZ(0);
	transition: filter 150ms ease, transform 150ms ease;
	min-height: 80px;
	width: 100%;
}

@media (hover: hover) {
	.wpdev-home-masonry__tile:hover {
		filter: brightness(1.03);
		transform: translateY(-2px);
	}
}