/* Shared clickable styles (cards, pills, badges, etc.) */

.clickable {
	--clickable-scale: 1.03;
	--clickable-active-scale: 0.98;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	will-change: transform;
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

	.clickable:hover {
		transform: scale(var(--clickable-scale));
		box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
	}

	.clickable:focus-visible {
		outline: 3px solid rgba(17, 24, 39, 0.35);
		outline-offset: 3px;
	}

	.clickable:active {
		transform: scale(var(--clickable-active-scale));
	}

.clickable-sm {
	--clickable-scale: 1.05;
}

/* Clickable item styles (zoom the image on hover) */

.clickable-item {
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: inline-block;
}

	.clickable-item img {
		--clickable-item-scale: 1.05;
		--clickable-item-active-scale: 0.98;
		will-change: transform;
		transition: transform 0.15s ease-in-out;
		transform-origin: center;
	}

	.clickable-item:hover img {
		transform: scale(var(--clickable-item-scale));
	}

	.clickable-item:focus-visible {
		outline: 3px solid rgba(17, 24, 39, 0.35);
		outline-offset: 3px;
	}

	.clickable-item:active img {
		transform: scale(var(--clickable-item-active-scale));
	}