/**
 * Vgallery - Photo Gallery Plugin Styles
 *
 * @package     Plugin.Content.vgallery
 * @since       1.0.0
 */

/* ============================================
   Base Gallery Styles
   ============================================ */

.vgallery {
	width: 100%;
	margin: 0 0 20px;
}

.vgallery-empty {
	padding: 20px;
	color: #666;
	text-align: center;
	font-style: italic;
}

/* ============================================
   Tiles Layout - CSS Grid
   ============================================ */

.vgallery-tiles {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	gap: 15px;
}


.vgallery-tiles .vgallery-item {
	width: 100%;
	aspect-ratio: 1 / 1;
}

.vgallery-tiles .vgallery-item a {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/*border-radius: 4px;*/
	background-color: #F0F0F0;
	text-decoration: none;
}

.vgallery-tiles .vgallery-item a img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.vgallery-tiles .vgallery-item a:hover img {
	transform: scale(1.1);
}

/* ============================================
   Masonry Layout - Pure CSS (column-based)
   ============================================ */

.vgallery-masonry {
	column-count: var(--cols, 4);
	column-gap: 15px;
}

.vgallery-masonry .vgallery-item {
	display: inline-block;
	width: 100%;
	margin-bottom: 15px;
	break-inside: avoid;
}

.vgallery-masonry .vgallery-item a {
	display: block;
	width: 100%;
	overflow: hidden;
	/*border-radius: 4px;*/
	background-color: #F0F0F0;
	text-decoration: none;
}

.vgallery-masonry .vgallery-item a img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.vgallery-masonry .vgallery-item a:hover img {
	transform: scale(1.03);
}


.mobile-compact {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: stretch;
}

.mobile-compact .vgallery-tiles {
	flex: 1;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

@media (width <= 1200px) {
	.vgallery-tiles {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.vgallery-masonry {
		column-count: 3 !important;
	}
}


@media (width <= 768px) {
	.vgallery-tiles {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.mobile-compact .vgallery-tiles {
		grid-template-columns: repeat(var(--cols, 4), 1fr) !important;
		gap: 5px;
	}

	.mobile-compact span {
		display: none;
	}

	.mobile-compact {
		gap: 5px;
	}


	.vgallery-masonry {
		column-count: 2 !important;
	}
}

@media (width <= 480px) {
	/* .vgallery-tiles { */

	/*    grid-template-columns: repeat(1, 1fr) !important; */

	/* } */


	.vgallery-tiles {
		--cols: 4!important;
	}

	.vgallery-tiles div:nth-child(5), .vgallery-tiles div:nth-child(6)  {
		display: none;
	}

	.vgallery-masonry {
		column-count: 1 !important;
	}
}