/*
 * Design System - AELITA
 * components/car-card.css - the .a-car-card component.
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Uses only CSS variables from tokens.css. No hex values, no `transition: all`,
 * no !important. The whole card is a single link (.a-car-card__link); there is
 * no separate CTA button.
 * Hover styles are gated behind (hover: hover) and (pointer: fine).
 */

.a-car-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--bg);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	color: var(--text-primary);
	transition:
		border-color var(--dur-popover) var(--ease-out),
		box-shadow var(--dur-popover) var(--ease-out);
}

/* -------------------------------------------------------------------- */
/* Grid rhythm                                                          */
/* -------------------------------------------------------------------- */
/* The card lives in a Bootstrap column (.col-* .eheight). Columns carry
 * horizontal gutter padding (15px) but no vertical rhythm, so rows sit
 * flush. Add a bottom margin scoped to columns that actually contain a
 * design-system car card. :has() keeps the legacy moto/quadro/jetski/
 * generator cards (same .eheight column) untouched, and never matches the
 * homepage Slick slides (those wrap the card in .actionsslider_item). */
@supports selector(:has(*)) {
	.col-xs-12:has(> .a-car-card),
	.col-sm-6:has(> .a-car-card),
	.col-md-4:has(> .a-car-card) {
		margin-block-end: var(--space-5); /* 24px, ~ horizontal gutter */
	}
}

/* Whole-card clickable area (media + body). Single link per card. */
.a-car-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

/* Beat the theme/Bootstrap link hover (blue color + underline). */
.a-car-card__link:hover,
.a-car-card__link:focus {
	color: inherit;
	text-decoration: none;
}

.a-car-card__link:focus-visible {
	box-shadow: inset 0 0 0 2px var(--focus-ring);
}

/* -------------------------------------------------------------------- */
/* Media                                                                */
/* -------------------------------------------------------------------- */
.a-car-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: var(--bg-muted);
}

/* <picture> wrapper must keep the media box identical to the plain <img>. */
.a-car-card__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Explicit box + 3:2 ratio regardless of Bootstrap .img-responsive
 * (main.js adds that class globally; a bare `img` rule is not enough). */
.a-car-card .a-car-card__image {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.a-car-card__badges {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.a-car-card__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background-color: var(--bg-invert);
	color: var(--c-white);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	white-space: nowrap;
}

.a-car-card__badge svg {
	display: block;
	width: var(--space-4);  /* 16px */
	height: var(--space-4);
	flex: 0 0 auto;
}

/* Sticker palette (legacy colors). */
.a-car-card__badge--testdrive {
	background-color: var(--sticker-testdrive);
}

.a-car-card__badge--action,
.a-car-card__badge--gift {
	background-color: var(--sticker-action);
}

.a-car-card__badge--check {
	background-color: var(--sticker-check);
}

.a-car-card__badge--dwa {
	background-color: var(--c-ink-700);
}

.a-car-card__badge--sold {
	background-color: var(--bg-invert);
}

/* -------------------------------------------------------------------- */
/* Body                                                                 */
/* -------------------------------------------------------------------- */
.a-car-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1 1 auto;
	padding: var(--space-3);
}

.a-car-card__title {
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4); /* 18px base; lifted to 20-22px on wide cards */
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--text-primary);
	text-transform: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Price                                                                */
/* -------------------------------------------------------------------- */
.a-car-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
}

.a-car-card__price-old {
	color: var(--text-secondary);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	text-decoration: line-through;
}

.a-car-card__price-current {
	font-family: var(--font-display-strong);
	color: var(--text-primary);
	font-size: var(--fs-h4); /* 18px base; lifted on wide cards */
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

.a-car-card--action .a-car-card__price-current {
	color: var(--c-red-500);
}

/* -------------------------------------------------------------------- */
/* Compact specs grid                                                   */
/* -------------------------------------------------------------------- */
.a-car-card__specs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--text-primary);
}

.a-car-card__spec {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	min-width: 0;
}

.a-car-card__spec-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--text-secondary);
}

.a-car-card__spec-icon svg {
	display: block;
	width: var(--space-4);  /* 16px */
	height: var(--space-4);
}

.a-car-card__spec-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------- */
/* Footer: availability + date                                          */
/* -------------------------------------------------------------------- */
.a-car-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-block-start: auto;
	padding-block-start: var(--space-1);
}

.a-car-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--text-secondary);
}

/* Decorative dot only. The label carries the meaning, so the status is
 * readable without color. */
.a-car-card__status::before {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border-radius: 50%;
	background-color: currentColor;
	flex: 0 0 auto;
}

.a-car-card--in-stock .a-car-card__status {
	color: var(--status-success);
}

.a-car-card--on-order .a-car-card__status {
	color: var(--text-secondary);
}

.a-car-card--in-transit .a-car-card__status {
	color: var(--text-primary);
}

.a-car-card__date {
	font-size: var(--fs-small);
	color: var(--text-secondary);
}

/* -------------------------------------------------------------------- */
/* Modifiers                                                            */
/* -------------------------------------------------------------------- */
.a-car-card--sold .a-car-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--bg-invert);
	opacity: 0.6;
}

.a-car-card--sold .a-car-card__title,
.a-car-card--sold .a-car-card__price {
	opacity: 0.7;
}

/* -------------------------------------------------------------------- */
/* Wide cards: lift the display sizes towards the 20-22px target        */
/* -------------------------------------------------------------------- */
@media (min-width: 992px) {
	.a-car-card__title,
	.a-car-card__price-current {
		font-size: 20px;
	}
}

/* -------------------------------------------------------------------- */
/* Hover - only on devices that can actually hover. No movement.        */
/* -------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.a-car-card:hover {
		border-color: var(--text-secondary);
		box-shadow: var(--shadow-overlay);
	}

	.a-car-card:hover .a-car-card__title {
		color: var(--link-hover);
	}
}