/*
 * Car category card. design/DESIGN-SYSTEM.md §4.5 (track card geometry),
 * §5.2 (cut-out render treatment), §6.1 hover inventory;
 * design/PAGE-STRUCTURE.md §3.4.
 *
 * The render sits in a fixed 150px well and is contained, never cropped. It
 * bleeds into the card's 26px padding on both sides -- the deliberate overhang
 * of §5.2 at card scale -- and carries the canonical car drop-shadow.
 *
 * The grid caps at three columns with the same max()/minmax() term the home
 * feature grid uses, so a longer list wraps 3 + 3 (§3.6).
 */

.sp-car-grid {
	--sp-car-gap: clamp(16px, 2vw, 26px);   /* TODO token: track-card grid gap (§3.4). */

	display: grid;
	gap: var(--sp-car-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(290px, (100% - 2 * var(--sp-car-gap)) / 3), 1fr)
	);
}

.sp-car {
	background: var(--sp-surface);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: var(--sp-10);
	transition:
		transform var(--sp-dur-base) var(--sp-ease),
		border-color var(--sp-dur-base) var(--sp-ease);
}

.sp-car:hover,
.sp-car:focus-within {
	transform: translateY(-6px);
	border-color: var(--sp-line-hover);
}

.sp-car__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	/* The render overhangs the card padding (§5.2). */
	margin-inline: calc(-1 * var(--sp-10));
}

.sp-car__img {
	max-width: 100%;
	max-height: 150px;
	object-fit: contain;
	filter: var(--sp-shadow-render);
}

.sp-car__tag {
	margin: var(--sp-5) 0 0;
}

.sp-car__title {
	margin: 6px 0 var(--sp-2);
	font-size: var(--sp-fs-2xl);
	font-weight: 900;
	line-height: var(--sp-lh-tight);
}

.sp-car__text {
	margin: 0;
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}