/**
 * Category Grid widget styles.
 * Each category is a full-bleed image card — name + product count
 * sit on a gradient scrim at the bottom, with a hover reveal (image
 * zoom, card lift, arrow slide-in) rather than a plain text link
 * list.
 */

.cg-empty {
	text-align: center;
	padding: 60px 20px;
	color: #666;
	font-size: 1.1rem;
}

.cg-grid {
	display: grid;
	grid-template-columns: repeat(var(--cg-columns, 3), 1fr);
	gap: 28px;
}

.cg-card {
	/* !important as a guard: if some global theme rule ever resets
	   position on <a> (Astra has done this kind of broad reset
	   elsewhere on this site — same category of bug as the button
	   :focus and h3 color overrides already fixed in this and other
	   widgets), .cg-image-wrap/.cg-info below lose their containing
	   block and end up positioned against the nearest OTHER
	   positioned ancestor instead — which can be way down the page,
	   overlapping content like the footer. This is cheap insurance
	   even if that turns out not to be the actual cause here. */
	position: relative !important;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4 / 5;
	/* Belt-and-suspenders fallback for aspect-ratio: if it's ever
	   unsupported or overridden, the card would otherwise collapse to
	   0 height (its only children are position: absolute, so they
	   don't contribute height either) — exactly the kind of collapse
	   that could make content float over the footer. min-height
	   guarantees the card always occupies real space regardless. */
	min-height: 260px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
	-webkit-tap-highlight-color: transparent;
}

.cg-card:hover,
.cg-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.cg-card:focus-visible {
	outline: 2px solid #0274be;
	outline-offset: 3px;
}

.cg-image-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.cg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.cg-card:hover .cg-image,
.cg-card:focus-visible .cg-image {
	transform: scale(1.1);
}

.cg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.35) 42%,
		rgba(0, 0, 0, 0) 75%
	);
	transition: background 0.35s ease;
}

.cg-card:hover .cg-overlay,
.cg-card:focus-visible .cg-overlay {
	background: linear-gradient(
		to top,
		rgba(2, 116, 190, 0.85) 0%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0) 75%
	);
}

.cg-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 24px;
	color: #fff;
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.cg-card:hover .cg-info,
.cg-card:focus-visible .cg-info {
	transform: translateY(-6px);
}

.cg-name {
	margin: 0 0 4px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	/* Astra sets its own color on h1/h2/h3 globally, which otherwise
	   wins over .cg-info's color: #fff — same kind of theme-default
	   override already seen elsewhere in this codebase (e.g.
	   .svs-switch-btn:focus). !important forces it back to white. */
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cg-count {
	display: block;
	font-size: 0.85rem;
	opacity: 0.85;
	letter-spacing: 0.02em;
}

.cg-arrow {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: #0274be;
	font-size: 1.1rem;
	opacity: 0;
	transform: translate(8px, 8px) scale(0.8);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.cg-card:hover .cg-arrow,
.cg-card:focus-visible .cg-arrow {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

/* Users who've asked the OS/browser to reduce motion still get the
   hover state change, just without the sliding/zooming motion. */
@media (prefers-reduced-motion: reduce) {

	.cg-card,
	.cg-image,
	.cg-info,
	.cg-arrow {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================
   MOBILE (up to 768px)
========================================================== */
@media (max-width: 768px) {

	.cg-grid {
		grid-template-columns: repeat(var(--cg-columns-mobile, 2), 1fr);
		gap: 14px;
	}

	.cg-card {
		border-radius: 12px;
		aspect-ratio: 1 / 1.15;
		min-height: 160px;
	}

	.cg-info {
		padding: 14px 16px;
	}

	.cg-name {
		font-size: 1.05rem;
	}

	.cg-count {
		font-size: 0.75rem;
	}

	/* No hover on touch — the arrow and the extra image zoom only
	   make sense for a pointer that can hover away again. Name/count
	   and a resting (non-zoomed) image are always visible instead. */
	.cg-arrow {
		display: none;
	}

	.cg-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.25) 50%,
			rgba(0, 0, 0, 0) 80%
		);
	}
}