/**
 * Filter skeleton loaders — resource, events, and job listings.
 * Used during AJAX filter requests (replaces spinner overlay).
 */

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

.hm-skeleton {
	display: block;
	border-radius: 4px;
	background: linear-gradient(
		90deg,
		#e8eef3 0%,
		#f4f7fa 45%,
		#e8eef3 90%
	);
	background-size: 200% 100%;
	animation: hm-skeleton-shimmer 1.4s ease-in-out infinite;
}

.hm-skeleton--image {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 0;
}

.hm-skeleton--tag {
	width: 38%;
	max-width: 120px;
	height: 14px;
	margin-bottom: 0.65rem;
}

.hm-skeleton--title {
	width: 88%;
	height: 22px;
	margin-bottom: 0.5rem;
}

.hm-skeleton--meta {
	width: 62%;
	height: 14px;
	margin-bottom: 0.5rem;
}

.hm-skeleton--location {
	width: 72%;
	height: 14px;
	margin-bottom: 0.5rem;
}

.hm-skeleton--line {
	width: 100%;
	height: 12px;
	margin-bottom: 0.4rem;
}

.hm-skeleton--line-short {
	width: 78%;
	height: 12px;
	margin-bottom: 0.75rem;
}

.hm-skeleton--btn {
	width: 120px;
	height: 40px;
	border-radius: 4px;
}

/* Skeleton card shells */
.card.card--skeleton {
	pointer-events: none;
	user-select: none;
}

.card.card--skeleton .card__image-wrap {
	display: block;
	overflow: hidden;
}

.card.card--skeleton .card__body {
	padding: 1rem 0 0;
}

.card--job.card--skeleton .card__body {
	padding: 1rem;
}

/* Results grid while loading */
.card-grid.is-skeleton-loading {
	min-height: 280px;
}

.hm-rf-results.is-filter-loading #hm-rf-pagination,
.hm-rf-results.is-filter-loading #hm-jf-pagination {
	opacity: 0.35;
	pointer-events: none;
}