/* Filters */
.wpmg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.wpmg-filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: .75em;
	padding-inline: 1em;
	border-radius: 3rem;
	border: 2px solid transparent;
	border-color: var(--wp--preset--color--stroke);
	background-color: transparent;
	color: var(--wp--preset--color--gray);
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: all .25s ease-in-out;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.wpmg-filter-btn:hover,
.wpmg-filter-btn.active {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
}

.wpmg-masonry-grid {
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Clearfix for isotope */
.wpmg-masonry-grid::after {
	content: '';
	display: block;
	clear: both;
}

/* Grid Sizer and Item matching sizing */
.wpmg-grid-sizer,
.wpmg-grid-item {
	width: calc(33.333% - var(--wp--style--block-gap, 20px) * 2 / 3);
	margin-bottom: var(--wp--style--block-gap, 20px);
}

/* Base item styles */
.wpmg-grid-item {
	float: left;
}

.wpmg-grid-item a {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	transition: transform 0.3s ease;
	position: relative;
	text-decoration: none;
}

.wpmg-grid-item img {
	display: block;
	max-width: 100%;
	height: auto;
	width: 100%;
	transition: transform 0.4s ease;
}

.wpmg-grid-item a:hover img {
	transform: scale(1.05); /* Slight zoom on hover */
}

/* Load More */
.wpmg-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--50);
}

.wpmg-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: .75em;
	padding-inline: 2em;
	border-radius: 3rem;
	border: 2px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-weight: 600;
	font-size: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: all .25s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.wpmg-load-more-btn:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
}

.wpmg-load-more-btn.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Desktop (3 columns) is the default above */

/* Tablet (2 columns) */
@media screen and (max-width: 991px) {
	.wpmg-grid-sizer,
	.wpmg-grid-item {
		width: calc(50% - var(--wp--style--block-gap, 20px) / 2);
	}
}

/* Mobile (1 column) */
@media screen and (max-width: 575px) {
	.wpmg-grid-sizer,
	.wpmg-grid-item {
		width: 100%;
	}
}