/**
 * JDM Stuff — Tiles stylesheet
 *
 * Styles the related-vehicle tile grids for all three sources (auction,
 * wholesale, dealer inventory).  Mobile-first layout; dark-mode colours are
 * driven by [data-theme="dark"] (applied either to the ancestor
 * .jdma-unit-wrap on auction listing pages, or directly on the tile root on
 * other pages).
 *
 * Selector prefixes:
 *   .jdms-*       — new, JDM-Stuff-specific classes (safe to use freely)
 *   .jdmw-* / .used-car-card — kept for backwards compatibility with the
 *                   existing Hub favourites JS and any leftover CSS that
 *                   might target them.
 *
 * `!important` is used on most declarations because the existing theme
 * (Vehica) ships fairly aggressive card styles that override unprefixed
 * rules — once we migrate off Vehica this file should have the
 * `!important`s stripped out in one pass.
 */

/* ── Theme tokens ───────────────────────────────────────────────────────── */

.jdms-related {
	/* Light (default) */
	--jdms-bg:          transparent;
	--jdms-tile-bg:     #ffffff;
	--jdms-tile-border: #e4e4e7;
	--jdms-text:        #18181b;
	--jdms-text-muted:  #71717a;
	--jdms-price:       #e7572f;
	--jdms-price-bg:    #fff0eb;
	--jdms-heading:     #18181b;
	--jdms-cta-bg:      #ff4605;
	--jdms-cta-fg:      #ffffff;
	--jdms-shadow:      0 1px 3px rgba(0, 0, 0, 0.08);
	--jdms-shadow-hover:0 6px 16px rgba(0, 0, 0, 0.12);
	--jdms-skel-bg:     #f4f4f5;
	--jdms-skel-shine:  #eaeaec;
}

/* Dark — applies when an ancestor .jdma-unit-wrap (auction listing pages) OR
   the tile root itself has data-theme="dark". */
.jdma-unit-wrap[data-theme="dark"] .jdms-related,
.jdms-related[data-theme="dark"],
[data-theme="dark"] .jdms-related {
	--jdms-tile-bg:     #1e1e1e !important;
	--jdms-tile-border: #3a3a3a !important;
	--jdms-text:        #f4f4f5 !important;
	--jdms-text-muted:  #a1a1aa !important;
	--jdms-price:       #ff7a4a !important;
	--jdms-price-bg:    #2a1810 !important;
	--jdms-heading:     #f4f4f5 !important;
	--jdms-cta-bg:      #ff4605 !important;
	--jdms-cta-fg:      #ffffff !important;
	--jdms-shadow:      0 1px 3px rgba(0, 0, 0, 0.4) !important;
	--jdms-shadow-hover:0 6px 16px rgba(0, 0, 0, 0.6) !important;
	--jdms-skel-bg:     #262626 !important;
	--jdms-skel-shine:  #333333 !important;
}

/* ── Section wrapper ────────────────────────────────────────────────────── */

.jdms-related {
	display: block !important;
	margin: 1.5em 0 !important;
	padding: 0 !important;
	background: var(--jdms-bg) !important;
	color: var(--jdms-text) !important;
	box-sizing: border-box !important;
}

.jdms-related *,
.jdms-related *::before,
.jdms-related *::after {
	box-sizing: border-box !important;
}

.jdms-related__heading,
.jdmw-related-heading {
	margin: 0 0 0.75em 0 !important;
	padding: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--jdms-heading) !important;
	text-shadow: none !important;
}

.jdms-related__empty {
	margin: 0 !important;
	padding: 1em !important;
	color: var(--jdms-text-muted) !important;
	font-style: italic !important;
	text-align: center !important;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.jdms-tiles-grid,
.jdmw-grid {
	display: grid !important;
	/* Mobile: 2-up. Matches 70% mobile traffic. */
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 0.5em !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (min-width: 600px) {
	.jdms-tiles-grid,
	.jdmw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 900px) {
	.jdms-tiles-grid,
	.jdmw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.75em !important; }
}

/* ── Tile ───────────────────────────────────────────────────────────────── */

.jdms-tile,
.jdms-related .used-car-card {
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	color: var(--jdms-text) !important;
	background: var(--jdms-tile-bg) !important;
	border: 1px solid var(--jdms-tile-border) !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	box-shadow: var(--jdms-shadow) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
	min-width: 0 !important; /* allow children to shrink in grid cells */
}

.jdms-tile:hover,
.jdms-related .used-car-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--jdms-shadow-hover) !important;
	color: var(--jdms-text) !important;
	text-decoration: none !important;
}

.jdms-tile:focus-visible,
.jdms-related .used-car-card:focus-visible {
	outline: 2px solid var(--jdms-cta-bg) !important;
	outline-offset: 2px !important;
}

/* Media */
.jdms-tile__media,
.jdms-related .mini-carousel {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--jdms-skel-bg) !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
}

.jdms-related .jdms-tile__media img,
.jdms-related .mini-carousel img,
.jdms-related .mini-slide img,
.jdms-related .used-car-card img,
.jdms-related .used-car-card > img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Inventory source renders <img> as a direct child of .used-car-card (not
   wrapped in .mini-carousel), so it needs the same fixed aspect ratio. */
.jdms-tile--inventory > img,
.jdms-related--inventory .used-car-card > img {
	aspect-ratio: 4 / 3 !important;
	background: var(--jdms-skel-bg) !important;
}

.jdms-tile__no-image,
.jdms-related .jdmw-no-image {
	width: 100% !important;
	height: 100% !important;
	background:
		linear-gradient(45deg, transparent 48%, var(--jdms-text-muted) 48%, var(--jdms-text-muted) 52%, transparent 52%),
		var(--jdms-skel-bg) !important;
	opacity: 0.4 !important;
}

/* Info block */
.jdms-tile__info,
.jdms-related .used-car-info {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 0.6em 0.7em !important;
	gap: 0.4em !important;
	background: transparent !important;
}

.jdms-tile__title,
.jdms-related .uci-car-name {
	margin: 0 !important;
	padding: 0 !important;
}

.jdms-tile__title h3,
.jdms-related .uci-car-name h3 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--jdms-text) !important;
	text-shadow: none !important;
	font-style: normal !important;
	text-align: left !important;
	word-break: break-word !important;
}

@media (min-width: 600px) {
	.jdms-tile__title h3,
	.jdms-related .uci-car-name h3 { font-size: 0.98rem !important; }
}

.jdms-related .uci-mfg-year,
.jdms-related .uci-name-make,
.jdms-related .uci-name-model {
	display: inline !important;
	color: inherit !important;
	font: inherit !important;
}

.jdms-related .uci-mileage,
.jdms-tile__trim {
	display: inline-block !important;
	color: var(--jdms-text-muted) !important;
	font-weight: 400 !important;
	font-size: 0.85em !important;
}

/* Price */
.jdms-tile__price,
.jdms-related .uci-price-container {
	margin-top: auto !important; /* push to bottom */
	padding: 0.4em 0.6em !important;
	background: var(--jdms-price-bg) !important;
	border-radius: 4px !important;
	text-align: center !important;
}

.jdms-related .uci-price {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--jdms-price) !important;
	font-style: normal !important;
	background: transparent !important;
	text-align: center !important;
}

.jdms-related .uci-cleared {
	display: block !important;
	margin: 0.1em 0 0 0 !important;
	font-size: 0.68rem !important;
	line-height: 1.2 !important;
	color: var(--jdms-text-muted) !important;
	font-style: normal !important;
}

/* Hidden meta row (kept for markup parity with existing output) */
.jdms-related .uci-meta {
	display: none !important;
}

/* ── CTA button ─────────────────────────────────────────────────────────── */

.jdms-related__cta,
.jdms-related .jdma-btn--full {
	display: block !important;
	margin: 1em 0 0 0 !important;
	padding: 0.75em 1em !important;
	background: var(--jdms-cta-bg) !important;
	color: var(--jdms-cta-fg) !important;
	text-align: center !important;
	text-decoration: none !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	border-radius: 6px !important;
	border: 0 !important;
	transition: filter 0.15s ease !important;
}

.jdms-related__cta:hover,
.jdms-related .jdma-btn--full:hover {
	filter: brightness(1.08) !important;
	color: var(--jdms-cta-fg) !important;
	text-decoration: none !important;
}

/* ── Skeleton loading state ─────────────────────────────────────────────── */

.jdms-skeleton {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 0.5em !important;
}
@media (min-width: 600px) { .jdms-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 900px) { .jdms-skeleton { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.75em !important; } }

.jdms-tile--skeleton {
	display: block !important;
	aspect-ratio: 3 / 4 !important;
	background:
		linear-gradient(90deg,
			var(--jdms-skel-bg) 0%,
			var(--jdms-skel-shine) 50%,
			var(--jdms-skel-bg) 100%) !important;
	background-size: 200% 100% !important;
	animation: jdms-shimmer 1.2s ease-in-out infinite !important;
	border: 1px solid var(--jdms-tile-border) !important;
	border-radius: 6px !important;
}

@keyframes jdms-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Respect reduced motion — no shimmer, no hover lift. */
@media (prefers-reduced-motion: reduce) {
	.jdms-tile--skeleton { animation: none !important; }
	.jdms-tile:hover,
	.jdms-related .used-car-card:hover { transform: none !important; }
}

/* Error state */
.jdms-related--error .jdms-related__empty {
	padding: 1em !important;
	color: var(--jdms-text-muted) !important;
	text-align: center !important;
	font-style: italic !important;
}