/* Vehicle listing card (template-parts/card-vehicle.php).
   `.os-vcard` lifts specificity over the generic .latest-review-card rules in
   theme.css; the archive list view (layout-overrides.css) still wins there. */

.os-vcard {
	--vc-accent: #ef4444;
	--vc-ink: #0f172a;
	--vc-muted: #64748b;
	--vc-line: #e2e8f0;
	--vc-soft: #f8fafc;
	--vc-bg: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--vc-line);
	border-radius: 16px;
	background: var(--vc-bg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
	isolation: isolate;
}
[data-theme="dark"] .os-vcard {
	--vc-ink: #f8fafc;
	--vc-muted: #94a3b8;
	--vc-line: #334155;
	--vc-soft: #0f172a;
	--vc-bg: #1e293b;
}
.os-vcard:hover,
.os-vcard:focus-within {
	transform: translateY(-6px);
	border-color: rgba(239, 68, 68, .45);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 22px 44px rgba(239, 68, 68, .14);
}

/* Whole card is the link (the title link stretches over it). */
.os-vcard .os-vcard__link { color: inherit; text-decoration: none; }
.os-vcard .os-vcard__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.os-vcard .os-vcard__link:focus-visible { outline: none; }
.os-vcard:has(.os-vcard__link:focus-visible) { outline: 3px solid rgba(239, 68, 68, .5); outline-offset: 3px; }

/* Media */
.os-vcard .latest-review-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #1e293b, #0f172a);
}
.os-vcard .latest-review-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 6, 23, .35) 0%, transparent 35%, transparent 55%, rgba(2, 6, 23, .55) 100%);
	opacity: .75;
	transition: opacity .3s ease;
	pointer-events: none;
}
.os-vcard:hover .latest-review-card__media::after { opacity: 1; }
.os-vcard .latest-review-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.os-vcard:hover .latest-review-card__image { transform: scale(1.07); }

/* Body */
.os-vcard .latest-review-card__body { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 14px 16px 16px; }
.os-vcard .latest-review-card__year { margin: 0 0 4px; color: var(--vc-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.os-vcard .latest-review-card__title {
	margin: 0 0 6px;
	color: var(--vc-ink);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}
.os-vcard:hover .latest-review-card__title { color: var(--vc-accent); }
.os-vcard .latest-review-card__excerpt {
	margin: 0 0 12px;
	color: var(--vc-muted);
	font-size: .82rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Specs: one wrapping row of icon + value */
/* Always a 2×2 grid (two rows reserved) so every card lines up the same. */
.os-vcard .latest-review-card__specs.os-vcard__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 24px); gap: 8px 12px; margin: 2px 0 14px; padding: 0; border: 0; }
.os-vcard .os-vcard__spec { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; background: none; }
.os-vcard .os-vcard__specs dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Archive list view lays specs out in one row (layout-overrides.css); no reserved second row. */
.archive-target-grid.list-view-mode .os-vcard .os-vcard__specs { grid-template-rows: none; }
.os-vcard .os-vcard__specs dt { display: inline-flex; margin: 0; }
.os-vcard .os-vcard__specs dd { margin: 0; color: var(--vc-ink); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.os-vcard .os-vcard__spec-value { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.os-vcard .latest-review-card__spec-icon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--vc-soft); transition: background-color .25s ease; }
.os-vcard:hover .latest-review-card__spec-icon { background: rgba(239, 68, 68, .1); }
.os-vcard .latest-review-card__spec-icon img,
.os-vcard .latest-review-card__spec-icon svg { width: 14px; height: 14px; }

/* Footer: price + arrow */
.os-vcard__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--vc-line); }
.os-vcard__price { color: var(--vc-ink); font-size: 1rem; font-weight: 800; }
.os-vcard__price small { margin-right: 2px; color: var(--vc-muted); font-size: .72rem; font-weight: 600; }
.os-vcard__price--muted { color: var(--vc-muted); font-size: .85rem; font-weight: 600; }
.os-vcard__go {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vc-soft);
	color: var(--vc-ink);
	transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.os-vcard:hover .os-vcard__go { background: var(--vc-accent); color: #fff; transform: translateX(3px) rotate(-45deg); }

@media (hover: none) {
	/* Touch: no hover state to get stuck in. */
	.os-vcard:hover, .os-vcard:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.os-vcard, .os-vcard *, .os-vcard *::after { transition: none !important; }
	.os-vcard:hover .latest-review-card__image { transform: none; }
}