/**
 * Category cards — grid of WooCommerce `product_cat` terms, generated
 * server-side by includes/class-category-cards.php (the .eow-category-cards
 * wrapper's inner markup is entirely replaced at render time, so the editor's
 * own canvas preview for this component just shows the empty group — the
 * real grid only exists on the front end).
 *
 * Column count is configurable per-breakpoint via the `cc-cols[-tablet|-mobile]-<N>`
 * class tokens (inspector-controls.js), same mechanism as the product
 * carousel's `perview[-tablet|-mobile]-<N>` tokens. Breakpoints (1024 / 781)
 * match course-cards.css for consistency across the plugin's components.
 *
 * Entrance animation reuses the exact same `reveal` / `stagger-<ms>` /
 * `distance-<px>` / `duration-<ms>` / `threshold-<0-nn>` token contract as
 * course-cards.css — see category-cards.js and the shared CardsPanel in
 * inspector-controls.js.
 */

.eow-category-cards-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* fallback if no cc-cols-<N> token present */
	gap: 24px;
	margin-block: 48px;
}

.eow-category-cards-grid > * {
	margin-block: 0;
}

/* ---- Desktop column count ---- */
.eow-category-cards.cc-cols-1 .eow-category-cards-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.eow-category-cards.cc-cols-2 .eow-category-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eow-category-cards.cc-cols-3 .eow-category-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eow-category-cards.cc-cols-4 .eow-category-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eow-category-cards.cc-cols-5 .eow-category-cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.eow-category-cards.cc-cols-6 .eow-category-cards-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---- Card shell ---- */
.eow-category-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
	border: 1px solid transparent;
}

.eow-category-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	border-color: var(--theme-palette-color-1, #e8c4c4);
}

.eow-category-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f1ed;
}

.eow-category-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eow-category-card__body {
	padding: 16px;
	text-align: center;
}

.eow-category-card__name {
	display: block;
	font-weight: 600;
	font-size: clamp(15px, 1.4vw, 18px);
	/* Blocksy headings colour: var --theme-palette-color-4 → #0D0E16 */
	color: var(--theme-palette-color-4, #0d0e16);
	margin-bottom: 4px;
}

.eow-category-card__count {
	display: block;
	font-size: 12px;
	/* Blocksy body text colour: var --theme-palette-color-3 → #6E6E75 */
	color: var(--theme-palette-color-3, #6e6e75);
	margin-bottom: 10px;
}

.eow-category-card__btn {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 999px;
	border: 1px solid var(--theme-palette-color-4, #0d0e16);
	color: var(--theme-palette-color-4, #0d0e16);
	font-size: 13px;
}

.eow-category-card--empty .eow-category-card__btn {
	opacity: 0.5;
}

/* ---- Scroll-in reveal ----
   distance + duration are data-driven: category-cards.js sets --reveal-distance
   and --reveal-duration from the parsed classes; the values below are only
   fall-backs for when the script has not run. */
.eow-category-card.is-reveal {
	opacity: 0;
	transform: translateY(var(--reveal-distance, 36px));
	transition:
		opacity var(--reveal-duration, 0.6s) cubic-bezier(0.22, 0.61, 0.36, 1),
		transform var(--reveal-duration, 0.6s) cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.eow-category-card.is-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---- Tablet column count ---- */
@media (max-width: 1024px) {
	.eow-category-cards-grid {
		gap: 18px;
	}
	.eow-category-cards.cc-cols-tablet-1 .eow-category-cards-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.eow-category-cards.cc-cols-tablet-2 .eow-category-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eow-category-cards.cc-cols-tablet-3 .eow-category-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.eow-category-cards.cc-cols-tablet-4 .eow-category-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Mobile column count ---- */
@media (max-width: 781px) {
	.eow-category-cards-grid {
		gap: 14px;
		margin-block: 32px;
	}
	.eow-category-cards.cc-cols-mobile-1 .eow-category-cards-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.eow-category-cards.cc-cols-mobile-2 .eow-category-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eow-category-card__name {
		font-size: 13px;
	}
	.eow-category-card__count,
	.eow-category-card__btn {
		font-size: 11px;
	}
}

/* ---- Reduced motion: show immediately ---- */
@media (prefers-reduced-motion: reduce) {
	.eow-category-card.is-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}