/**
 * Cards.
 *
 * Four hover treatments live here, selected by a body class the Customizer
 * sets. Only one is ever active, and each animates transform or opacity
 * only — properties the compositor handles without a layout pass, so a grid
 * of 24 cards stays smooth on a mid-range phone.
 */

.wpx-grid {
	display: grid;
	gap: var(--wpx-gutter);
	grid-template-columns: repeat(auto-fill, minmax(var(--wpx-card-min), 1fr));
}

.wpx-card {
	position: relative;
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow: hidden;
	transition:
		transform var(--wpx-duration) var(--wpx-ease-out),
		box-shadow var(--wpx-duration) var(--wpx-ease),
		border-color var(--wpx-duration) var(--wpx-ease);
	will-change: transform;
}

.wpx-card__link { display: block; color: inherit; }

.wpx-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--wpx-surface-3);
}

.wpx-card__cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wpx-duration) var(--wpx-ease-out);
}

.wpx-card__title {
	margin: 0;
	padding: var(--wpx-space-3);
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	line-height: 1.35;
	color: var(--wpx-text);
	transition: color var(--wpx-transition);

	/* Two lines, then ellipsis — keeps every card in a row the same height
	   regardless of title length. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wpx-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpx-space-2);
	padding: 0 var(--wpx-space-3) var(--wpx-space-3);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-dim);
}

.wpx-sep { opacity: 0.5; }

.wpx-card__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgb(from var(--wpx-bg) r g b / 0.72);
	opacity: 0;
	transition: opacity var(--wpx-duration) var(--wpx-ease);
}

.wpx-card__overlay-label {
	padding: var(--wpx-space-2) var(--wpx-space-4);
	border: 2px solid var(--wpx-accent);
	border-radius: var(--wpx-radius-pill);
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transform: translateY(8px);
	transition: transform var(--wpx-duration) var(--wpx-ease-out);
}

/* --- Badges ------------------------------------------------------------ */

.wpx-badges {
	position: absolute;
	inset-block-start: var(--wpx-space-2);
	inset-inline-start: var(--wpx-space-2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpx-space-1);
	max-width: calc(100% - var(--wpx-space-4));
}

.wpx-badge {
	padding: 2px var(--wpx-space-2);
	border-radius: var(--wpx-radius-sm);
	background: rgb(from var(--wpx-bg) r g b / 0.82);
	color: var(--wpx-text);
	font-size: var(--wpx-text-xs);
	font-weight: var(--wpx-weight-medium);
	line-height: 1.5;
	backdrop-filter: blur(4px);
}

.wpx-badge--free         { background: var(--wpx-success); }
.wpx-badge--demo         { background: var(--wpx-secondary); }
.wpx-badge--early-access { background: var(--wpx-accent); }
.wpx-badge--new          { background: var(--wpx-accent); }

/* --- Hover: lift (default) --------------------------------------------- */

.wpx-hover-lift .wpx-card:hover,
.wpx-hover-lift .wpx-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--wpx-accent);
	box-shadow: var(--wpx-shadow-lg);
}

.wpx-hover-lift .wpx-card:hover .wpx-card__title { color: var(--wpx-accent); }

/* --- Hover: zoom -------------------------------------------------------- */

.wpx-hover-zoom .wpx-card:hover .wpx-card__cover,
.wpx-hover-zoom .wpx-card:focus-within .wpx-card__cover {
	transform: scale(1.07);
}

.wpx-hover-zoom .wpx-card:hover { border-color: var(--wpx-border-strong); }

/* --- Hover: overlay ----------------------------------------------------- */

.wpx-hover-overlay .wpx-card:hover .wpx-card__overlay,
.wpx-hover-overlay .wpx-card:focus-within .wpx-card__overlay {
	opacity: 1;
}

.wpx-hover-overlay .wpx-card:hover .wpx-card__overlay-label { transform: translateY(0); }

/* --- Hover: tilt -------------------------------------------------------- */

.wpx-hover-tilt .wpx-card {
	transform-style: preserve-3d;
	perspective: 800px;
}

.wpx-hover-tilt .wpx-card:hover,
.wpx-hover-tilt .wpx-card:focus-within {
	transform: perspective(800px) rotateX(4deg) translateY(-3px);
	box-shadow: var(--wpx-shadow-lg);
	border-color: var(--wpx-accent);
}

/* --- Hover: none -------------------------------------------------------- */

.wpx-hover-none .wpx-card,
.wpx-hover-none .wpx-card__cover { transition: none; }

/* Motion off, or the visitor asked for reduced motion: keep the state
   change so hover still reads, drop the movement. */
.wpx-motion-off .wpx-card:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.wpx-card:hover,
	.wpx-card:focus-within { transform: none; }

	.wpx-card:hover .wpx-card__cover { transform: none; }
}