/* ==========================================================================
   Wheel style cards (0.6.6.3)

   Each style now renders its own asset. When a photograph is installed at
   assets/images/wheels/<slug>.webp the template uses it; until then each style
   falls back to a DISTINCT css treatment keyed by slug, so no two cards can
   ever repeat - which was the original defect.
   ========================================================================== */

.wt-wheel-card__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
	/*
	 * Light studio card, not a navy tile.
	 *
	 * Every card previously sat on the same dark blue gradient, so six
	 * genuinely different wheels still read as one repeated graphic - the
	 * background was doing the repeating, not the artwork. A near-white
	 * studio sweep with a soft vignette lets each finish carry the card,
	 * which is how premium automotive catalogs present a product.
	 */
	background:
		radial-gradient(120% 90% at 50% 18%, #ffffff 0%, #f4f6f9 55%, #e7ebf1 100%);
	border-bottom: 1px solid #e6eaef;
}

/* Soft contact shadow so the wheel sits on the surface instead of floating. */
.wt-wheel-card__visual::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 11%;
	width: 46%;
	height: 7%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(16, 32, 48, .26) 0%, rgba(16, 32, 48, 0) 70%);
	pointer-events: none;
}

.wt-wheel-card__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 7% 7% 9%;
	filter: drop-shadow(0 10px 14px rgba(14, 28, 42, .18));
}

.wt-wheel-card__finish {
	margin: .1rem 0 .35rem;
	/* keep */
	color: #d6532e;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------------------------------------------- per-style CSS fallbacks */

.wt-wheel-card__rim {
	position: relative;
	display: block;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #4a5b6e, #8b9aab, #4a5b6e, #8b9aab, #4a5b6e);
	box-shadow: inset 0 0 0 7% #1b2836, 0 10px 26px rgba(0, 0, 0, .4);
}

.wt-wheel-card__rim::after {
	content: "";
	position: absolute;
	inset: 26%;
	border-radius: 50%;
	background: #16232f;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .08);
}

.wt-wheel-card__rim--shadow-sport {
	background: conic-gradient(from 10deg, #2b2b2e, #4a4a50, #2b2b2e, #4a4a50, #2b2b2e, #4a4a50, #2b2b2e);
}

.wt-wheel-card__rim--silver-touring {
	background: repeating-conic-gradient(from 0deg, #c9d2db 0deg 12deg, #7e8b99 12deg 24deg);
}

.wt-wheel-card__rim--midnight-split-spoke {
	background: repeating-conic-gradient(from 8deg, #101317 0deg 18deg, #2f3742 18deg 36deg);
}

.wt-wheel-card__rim--bronze-performance {
	background: conic-gradient(from 20deg, #7a4a1d, #c98a3c, #7a4a1d, #c98a3c, #7a4a1d);
}

.wt-wheel-card__rim--machined-truck {
	background: repeating-conic-gradient(from 0deg, #e2e7ec 0deg 22deg, #6f7c8a 22deg 44deg);
}

.wt-wheel-card__rim--black-off-road {
	background: repeating-conic-gradient(from 5deg, #14171a 0deg 30deg, #33393f 30deg 60deg);
	box-shadow: inset 0 0 0 10% #0c0f12, 0 10px 26px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.wt-wheel-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: .85rem;
	}

	.wt-wheel-card__visual {
		aspect-ratio: 16 / 10;
	}

	.wt-wheel-card__rim {
		width: 52%;
	}

	.wt-wheel-card__body {
		padding: .9rem 1rem 1.05rem;
	}

	/* Clear the fixed bottom bar so the last card scrolls fully into view. */
	.wt-wheels-page {
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wt-wheel-card__photo,
	.wt-wheel-card__rim {
		transition: transform .4s cubic-bezier(.22, .61, .36, 1);
	}

	.wt-wheel-card:active .wt-wheel-card__photo,
	.wt-wheel-card:active .wt-wheel-card__rim {
		transform: scale(1.03);
	}
}