/* ==========================================================================
   Skeleton loader — utility classes per parti dinamiche / immagini lazy
   ========================================================================== */

@keyframes skeleton-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.skeleton,
.skeleton-text,
.skeleton-title,
.skeleton-img,
.skeleton-card {
	position: relative;
	overflow: hidden;
	background-color: #e9edf1;
	background-image: linear-gradient(
		90deg,
		#e9edf1 0%,
		#f5f7fa 50%,
		#e9edf1 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: 6px;
}

/* Placeholder puri (testo/titoli/card) non sono interattivi. */
.skeleton,
.skeleton-text,
.skeleton-title,
.skeleton-card {
	color: transparent;
	user-select: none;
	pointer-events: none;
}

/* Linea di testo */
.skeleton-text {
	display: block;
	width: 100%;
	height: 0.9em;
	margin-bottom: 0.5em;
	border-radius: 4px;
}
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-25 { width: 25%; }

/* Titolo */
.skeleton-title {
	display: block;
	width: 70%;
	height: 1.6em;
	margin-bottom: 0.75em;
	border-radius: 4px;
}

/* Blocco immagine: wrapper che mostra shimmer finché l'immagine interna
   non è caricata. Al caricamento, JS aggiunge .is-loaded che ferma
   l'animazione e fa comparire l'img. Il wrapper NON impone dimensioni
   all'img: lascia i suoi stili/attributi originali gestire il layout. */
.skeleton-img {
	border-radius: 0;
}
.skeleton-img > img {
	opacity: 0;
	transition: opacity 0.25s ease-in;
}
.skeleton-img.is-loaded {
	background: none;
	animation: none;
}
.skeleton-img.is-loaded > img {
	opacity: 1;
}

/* Card intera */
.skeleton-card {
	padding: 1rem;
	background-color: #e9edf1;
	background-image: none;
	animation: none;
	border-radius: 8px;
}

/* Accessibilità: rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.skeleton,
	.skeleton-text,
	.skeleton-title,
	.skeleton-img {
		animation: none;
	}
}