/**
 * Category showcase — large, premium cards: a real product photo from
 * inside that category (see qg_category_image_url() in inc/template-tags.php)
 * fills the tile edge-to-edge (object-fit: cover, no padding), matching
 * the shop/product card media exactly, with the name and item count as
 * quiet type below. Three real collections max (qg_get_homepage_categories(3)
 * in template.php) shown three-up on a wide screen, so each card reads as
 * a genuine showcase tile rather than a small icon-sized rail entry.
 * Homepage only.
 */

.qg-categories__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--qg-space-4);
}

@media (min-width: 640px) {
	.qg-categories__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--qg-space-5);
	}
}

.qg-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.qg-category-card__media {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 4 / 5;
	/* No padding, image fills the tile edge-to-edge — matching the (now
	   white) shop/product card media exactly (see .qg-product-card__media
	   in components/product-grid/component.css), not inset/letterboxed. */
	background: var(--qg-color-bg);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius-lg);
	overflow: hidden;
	transition: border-color 0.25s var(--qg-ease), box-shadow 0.25s var(--qg-ease), transform 0.25s var(--qg-ease);
}

.qg-category-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s var(--qg-ease);
}

@media (hover: hover) and (pointer: fine) {
	.qg-category-card:hover .qg-category-card__media {
		border-color: var(--qg-color-accent);
		box-shadow: var(--qg-shadow-sm);
		transform: translateY(-2px);
	}

	.qg-category-card:hover .qg-category-card__media img {
		transform: scale(1.04);
	}
}

.qg-category-card:active .qg-category-card__media {
	transform: scale(0.98);
}

.qg-category-card__name {
	margin-top: var(--qg-space-4);
	font-family: var(--qg-font-heading);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 600;
	color: var(--qg-color-ink);
	transition: color 0.2s var(--qg-ease);
}

.qg-category-card:hover .qg-category-card__name {
	color: var(--qg-color-accent-dark);
}

.qg-category-card__count {
	margin-top: 0.2rem;
	font-family: var(--qg-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--qg-color-muted);
}

@media (prefers-reduced-motion: reduce) {
	.qg-category-card__media,
	.qg-category-card__media img {
		transition: none;
	}
}