/* Featured Image Wall
 * Variabili impostate inline su ogni wall:
 * --fiw-cols-w/d/t/m  colonne per schermi grandi / desktop / tablet / smartphone
 * --fiw-gap, --fiw-radius, --fiw-ratio, --fiw-bw, --fiw-bc
 * Le media query dei breakpoint sono aggiunte inline dal plugin.
 */

.fiw-wall {
	--fiw-cols: var(--fiw-cols-d, 6);
	display: grid;
	grid-template-columns: repeat(var(--fiw-cols), minmax(0, 1fr));
	gap: var(--fiw-gap, 1vw);
	margin: 0 0 1.5em;
	padding: 0;
}

.fiw-wall .fiw-item {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.fiw-wall .fiw-media {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate; /* clip corretto del bordo arrotondato durante le trasformazioni (Safari) */
	box-sizing: border-box;
	aspect-ratio: var(--fiw-ratio, 1 / 1);
	border: var(--fiw-bw, 0) solid var(--fiw-bc, transparent);
	border-radius: var(--fiw-radius, 50%);
	text-decoration: none;
	color: inherit;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.fiw-wall .fiw-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.5s ease, filter 0.4s ease, opacity 0.4s ease;
}

.fiw-wall.fiw-ratio-auto .fiw-img {
	height: auto;
}

.fiw-wall .fiw-media:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Effetti hover ---------------------------------------------------- */

.fiw-hover-zoom .fiw-media:hover .fiw-img,
.fiw-hover-zoom .fiw-media:focus-visible .fiw-img {
	transform: scale(1.08);
}

.fiw-hover-lift .fiw-media:hover,
.fiw-hover-lift .fiw-media:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.fiw-hover-grayscale .fiw-img {
	filter: grayscale(1);
}
.fiw-hover-grayscale .fiw-media:hover .fiw-img,
.fiw-hover-grayscale .fiw-media:focus-visible .fiw-img {
	filter: grayscale(0);
}

.fiw-hover-fade .fiw-media:hover .fiw-img,
.fiw-hover-fade .fiw-media:focus-visible .fiw-img {
	opacity: 0.7;
}

/* Zoom inverso: parte ingrandita e torna alle dimensioni reali */
.fiw-hover-zoom_out .fiw-img {
	transform: scale(1.12);
}
.fiw-hover-zoom_out .fiw-media:hover .fiw-img,
.fiw-hover-zoom_out .fiw-media:focus-visible .fiw-img {
	transform: scale(1);
}

.fiw-hover-rotate .fiw-media:hover .fiw-img,
.fiw-hover-rotate .fiw-media:focus-visible .fiw-img {
	transform: scale(1.15) rotate(4deg);
}

/* Ingrandisce l'intero riquadro, bordo compreso */
.fiw-hover-pop .fiw-media:hover,
.fiw-hover-pop .fiw-media:focus-visible {
	z-index: 2;
	transform: scale(1.08);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.fiw-hover-tilt .fiw-media:hover,
.fiw-hover-tilt .fiw-media:focus-visible {
	transform: rotate(-3deg) scale(1.03);
}

.fiw-hover-sepia .fiw-img {
	filter: sepia(0.9);
}
.fiw-hover-sepia .fiw-media:hover .fiw-img,
.fiw-hover-sepia .fiw-media:focus-visible .fiw-img {
	filter: sepia(0);
}

.fiw-hover-blur .fiw-img {
	filter: blur(3px);
	transform: scale(1.05); /* nasconde il bordo sfumato del blur */
}
.fiw-hover-blur .fiw-media:hover .fiw-img,
.fiw-hover-blur .fiw-media:focus-visible .fiw-img {
	filter: blur(0);
	transform: scale(1);
}

.fiw-hover-darken .fiw-media:hover .fiw-img,
.fiw-hover-darken .fiw-media:focus-visible .fiw-img {
	filter: brightness(0.6);
}

.fiw-hover-brighten .fiw-media:hover .fiw-img,
.fiw-hover-brighten .fiw-media:focus-visible .fiw-img {
	filter: brightness(1.18) saturate(1.1);
}

/* Riflettore: quando una immagine è attiva, le altre si attenuano */
.fiw-hover-spotlight:has(.fiw-media:hover) .fiw-media,
.fiw-hover-spotlight:has(.fiw-media:focus-visible) .fiw-media {
	opacity: 0.35;
	filter: grayscale(0.6);
}
.fiw-hover-spotlight .fiw-media {
	transition: opacity 0.35s ease, filter 0.35s ease;
}
.fiw-hover-spotlight .fiw-media:hover,
.fiw-hover-spotlight .fiw-media:focus-visible {
	opacity: 1 !important;
	filter: none !important;
}

/* Anello: usa il colore dei link del tema */
.fiw-hover-ring .fiw-media:hover,
.fiw-hover-ring .fiw-media:focus-visible {
	box-shadow: 0 0 0 3px var(--fiw-bg, #fff), 0 0 0 6px currentColor;
}

/* Riflesso di luce che attraversa l'immagine */
.fiw-hover-shine .fiw-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	transform: translateX(-120%);
}
.fiw-hover-shine .fiw-media:hover::after,
.fiw-hover-shine .fiw-media:focus-visible::after {
	transform: translateX(120%);
	transition: transform 0.8s ease;
}

/* --- Titoli ----------------------------------------------------------- */

.fiw-wall .fiw-caption {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12%; /* resta dentro anche quando l'immagine è un cerchio */
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: clamp(0.7rem, 1vw, 0.95rem);
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fiw-wall .fiw-media:hover .fiw-caption,
.fiw-wall .fiw-media:focus-visible .fiw-caption {
	opacity: 1;
}

.fiw-wall .fiw-title {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}

/* --- Messaggio per gli editor ------------------------------------------ */

.fiw-empty {
	padding: 1em;
	border: 1px dashed currentColor;
	font-size: 0.9em;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.fiw-wall .fiw-media,
	.fiw-wall .fiw-img,
	.fiw-wall .fiw-caption {
		transition: none;
	}
	.fiw-hover-zoom .fiw-media:hover .fiw-img,
	.fiw-hover-zoom .fiw-media:focus-visible .fiw-img,
	.fiw-hover-lift .fiw-media:hover,
	.fiw-hover-lift .fiw-media:focus-visible,
	.fiw-hover-zoom_out .fiw-img,
	.fiw-hover-zoom_out .fiw-media:hover .fiw-img,
	.fiw-hover-rotate .fiw-media:hover .fiw-img,
	.fiw-hover-rotate .fiw-media:focus-visible .fiw-img,
	.fiw-hover-pop .fiw-media:hover,
	.fiw-hover-pop .fiw-media:focus-visible,
	.fiw-hover-tilt .fiw-media:hover,
	.fiw-hover-tilt .fiw-media:focus-visible {
		transform: none;
	}
	.fiw-hover-shine .fiw-media::after {
		display: none;
	}
}