.wgp-gallery {
	--wgp-gap: 14px;
	--wgp-columns: 4;
	--wgp-radius: 8px;
	--wgp-min-col: 240px;
	--wgp-aspect: 1 / 1;
	--wgp-accent: #111111;
	--wgp-filter-bg: transparent;
	--wgp-filter-text: #333333;
	--wgp-filter-border-color: #cccccc;
	--wgp-filter-border-width: 1px;
	--wgp-filter-radius: 20px;
	--wgp-filter-active-bg: #111111;
	--wgp-filter-active-text: #ffffff;
	--wgp-filter-gap: 8px;
	--wgp-filter-padding: 6px 14px;
	--wgp-filter-hover-bg: #f2f2f2;
	--wgp-filter-hover-text: #111111;
	--wgp-filter-hover-border-color: #999999;
	--wgp-filter-weight-normal: 400;
	--wgp-filter-weight-hover: 400;
	--wgp-filter-weight-active: 700;
	--wgp-anim-duration: 350ms;
	margin: 1.5em 0;
}

/* Filtro categorie: completamente personalizzabile dal pannello Impostazioni Layout */
.wgp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wgp-filter-gap);
	margin-bottom: 16px;
}
.wgp-filter-btn {
	border: var(--wgp-filter-border-width) solid var(--wgp-filter-border-color);
	background: var(--wgp-filter-bg);
	color: var(--wgp-filter-text);
	padding: var(--wgp-filter-padding);
	border-radius: var(--wgp-filter-radius);
	font-size: .85rem;
	font-weight: var(--wgp-filter-weight-normal);
	cursor: pointer;
	transition: background var(--wgp-anim-duration) ease, color var(--wgp-anim-duration) ease, border-color var(--wgp-anim-duration) ease, font-weight var(--wgp-anim-duration) ease;
}
.wgp-filter-uppercase .wgp-filter-btn {
	text-transform: uppercase;
	letter-spacing: .03em;
}
.wgp-filter-btn:hover {
	background: var(--wgp-filter-hover-bg);
	color: var(--wgp-filter-hover-text);
	border-color: var(--wgp-filter-hover-border-color);
	font-weight: var(--wgp-filter-weight-hover);
}
.wgp-filter-btn.is-active {
	background: var(--wgp-filter-active-bg);
	color: var(--wgp-filter-active-text);
	border-color: var(--wgp-filter-active-bg);
	font-weight: var(--wgp-filter-weight-active);
}
.wgp-filter-btn.is-active:hover {
	background: var(--wgp-filter-active-bg);
	color: var(--wgp-filter-active-text);
	border-color: var(--wgp-filter-active-bg);
	font-weight: var(--wgp-filter-weight-active);
}
.wgp-filter-count {
	opacity: .65;
	font-size: .9em;
}

/* Layout: griglia uniforme, colonne fisse (default) */
.wgp-layout-grid .wgp-grid,
.wgp-layout-masonry .wgp-grid {
	display: grid;
	grid-template-columns: repeat(var(--wgp-columns), 1fr);
	gap: var(--wgp-gap);
}
.wgp-layout-grid.wgp-adaptive .wgp-grid,
.wgp-layout-masonry.wgp-adaptive .wgp-grid {
	grid-template-columns: repeat(auto-fill, minmax(var(--wgp-min-col), 1fr));
}

.wgp-layout-grid .wgp-item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--wgp-radius);
	aspect-ratio: var(--wgp-aspect);
}
.wgp-layout-grid .wgp-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wgp-anim-duration) ease, opacity var(--wgp-anim-duration) ease, filter var(--wgp-anim-duration) ease;
}

/* Layout: masonry — griglia CSS con "incastro" reale via JS (frontend.js):
   ogni immagine occupa il numero di righe corrispondente alla sua altezza
   reale, e le immagini orizzontali occupano 2 colonne automaticamente. */
.wgp-layout-masonry .wgp-grid {
	grid-auto-rows: 8px;
	grid-auto-flow: row dense;
}
.wgp-layout-masonry .wgp-item {
	display: block;
	border-radius: var(--wgp-radius);
	overflow: hidden;
}
.wgp-layout-masonry .wgp-item.wgp-span-2 {
	grid-column: span 2;
}
.wgp-layout-masonry .wgp-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wgp-anim-duration) ease, filter var(--wgp-anim-duration) ease;
}

/* Animazioni al passaggio del mouse: tipo e durata configurabili da Impostazioni Layout > Aspetto.
   drop-shadow (invece di box-shadow) perché non viene tagliata dall'overflow:hidden
   usato per gli angoli arrotondati delle miniature. */
.wgp-item {
	transition: transform var(--wgp-anim-duration) ease, filter var(--wgp-anim-duration) ease;
}
.wgp-anim-zoom .wgp-item:hover img {
	transform: scale(1.045);
}
.wgp-anim-lift .wgp-item:hover {
	transform: translateY(-6px);
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.wgp-anim-fade .wgp-item:hover img {
	filter: brightness(.72);
}

/* Elemento nascosto dal filtro */
.wgp-item.wgp-hidden {
	display: none;
}

/* Responsive: riduce colonne su schermi piccoli quando NON adattivo */
@media (max-width: 900px) {
	.wgp-layout-grid:not(.wgp-adaptive) .wgp-grid,
	.wgp-layout-masonry:not(.wgp-adaptive) .wgp-grid {
		--wgp-columns: 3;
	}
}
@media (max-width: 600px) {
	.wgp-layout-grid:not(.wgp-adaptive) .wgp-grid,
	.wgp-layout-masonry:not(.wgp-adaptive) .wgp-grid {
		--wgp-columns: 2;
	}
	.wgp-layout-masonry .wgp-item.wgp-span-2 {
		grid-column: span 1;
	}
}

.wgp-empty {
	opacity: .6;
	font-style: italic;
}

/* Lightbox */
.wgp-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--wgp-anim-duration, .2s) ease, visibility var(--wgp-anim-duration, .2s) ease;
}
.wgp-lightbox-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.wgp-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.wgp-lightbox-close,
.wgp-lightbox-prev,
.wgp-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,.1);
	border: none;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 4px;
	transition: background .2s ease;
}
.wgp-lightbox-close:hover,
.wgp-lightbox-prev:hover,
.wgp-lightbox-next:hover {
	background: var(--wgp-accent, rgba(255,255,255,.25));
}
.wgp-lightbox-close {
	top: 20px;
	right: 20px;
}
.wgp-lightbox-prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}
.wgp-lightbox-next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 600px) {
	.wgp-lightbox-prev, .wgp-lightbox-next { padding: 8px 12px; font-size: 1.2rem; }
}