.wfc-wrap {
	--wfc-cols: 4;
	--wfc-gap: 24px;      /* space between categories */
	--wfc-gutter: 14px;   /* space inside each category tile, around image and name */
	--wfc-radius: 10px;
	--wfc-zoom: 1.06;     /* hover zoom level */
	margin: 0 0 2em;
}

.wfc-cols-1 { --wfc-cols: 1; }
.wfc-cols-2 { --wfc-cols: 2; }
.wfc-cols-3 { --wfc-cols: 3; }
.wfc-cols-4 { --wfc-cols: 4; }
.wfc-cols-5 { --wfc-cols: 5; }
.wfc-cols-6 { --wfc-cols: 6; }

.wfc-title { margin: 0 0 .75em; }

.wfc-list {
	list-style: none;
	margin: 0;
	padding: 8px; /* keeps the zoomed edge tiles from being clipped */
	display: grid;
	grid-template-columns: repeat(var(--wfc-cols), minmax(0, 1fr));
	gap: var(--wfc-gap);
}

.wfc-item { margin: 0; padding: 0; list-style: none; }

/* The whole category tile (image + name) zooms on hover */
.wfc-item a {
	position: relative;
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: var(--wfc-gutter);
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--wfc-radius);
	transition: transform .3s ease, box-shadow .3s ease;
}

.wfc-item a:hover,
.wfc-item a:focus-visible {
	transform: scale(var(--wfc-zoom));
	z-index: 2;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
}

.wfc-img {
	display: block;
	overflow: hidden;
	border-radius: calc(var(--wfc-radius) - 2px);
	aspect-ratio: 1 / 1;
	background: #f3f3f3;
}

.wfc-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Name and details centered under the image */
.wfc-text {
	display: block;
	text-align: center;
}

.wfc-name {
	display: block;
	margin-top: .7em;
	font-weight: 600;
	line-height: 1.3;
}

.wfc-count,
.wfc-desc {
	display: block;
	font-size: .85em;
	opacity: .7;
	margin-top: .15em;
}

/* Circle */
.wfc-style-circle .wfc-img { border-radius: 50%; }

/* Overlay: name sits on the image, centered */
.wfc-style-overlay .wfc-item a {
	padding: 0;
	overflow: hidden;
	border: 0;
}
.wfc-style-overlay .wfc-img { border-radius: 0; }
.wfc-style-overlay .wfc-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5em var(--wfc-gutter) var(--wfc-gutter);
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
.wfc-style-overlay .wfc-name { margin-top: 0; }

/* List (good for sidebars): image left, text vertically centered beside it */
.wfc-style-list .wfc-list { grid-template-columns: 1fr; gap: 12px; }
.wfc-style-list .wfc-item a { display: flex; align-items: center; gap: 12px; padding: 10px; }
.wfc-style-list .wfc-img { flex: 0 0 64px; width: 64px; }
.wfc-style-list .wfc-text { text-align: left; }
.wfc-style-list .wfc-name { margin-top: 0; }

/* Responsive */
@media (max-width: 900px) {
	.wfc-cols-4, .wfc-cols-5, .wfc-cols-6 { --wfc-cols: 3; }
}
@media (max-width: 600px) {
	.wfc-cols-3, .wfc-cols-4, .wfc-cols-5, .wfc-cols-6 { --wfc-cols: 2; }
	.wfc-wrap { --wfc-gap: 14px; --wfc-gutter: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.wfc-item a { transition: none; }
	.wfc-item a:hover, .wfc-item a:focus-visible { transform: none; }
}

.wfc-empty { padding: 1em; border: 1px dashed #c3c4c7; color: #646970; }