/**
 * Listing card for one car.
 *
 * The photograph is left alone — nothing is written over it but the photo count
 * and, when a car is not available, its status. Identity and price share the
 * first row of the body; the specification grid follows under a hairline.
 * Colour is only ever the car's own — the surface stays near-monochrome and the
 * blue is reserved for interaction. See DESIGN.md.
 */

@layer components {
	/*
	 * The card does not clip: a spec tooltip has to be able to leave it. The
	 * photo rounds its own top corners instead, which is all the card's
	 * overflow was ever doing.
	 */
	.hauto-car-card {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
		transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);

		&:hover,
		&:focus-within {
			box-shadow: var(--wp--preset--shadow--raised);
			border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
		}
	}

	.hauto-car-card__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		color: inherit;
		text-decoration: none;

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 3px;
			border-radius: var(--hauto-radius-md);
		}
	}

	/* One grid cell holds the photo and the badges, stacked. */
	.hauto-car-card__media {
		position: relative;
		display: grid;
		aspect-ratio: var(--wp--preset--aspect-ratio--4-3);
		overflow: hidden;
		border-start-start-radius: var(--hauto-radius-md);
		border-start-end-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--surface-strong);

		& > * {
			grid-area: 1 / 1;
		}

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: scale 500ms cubic-bezier(0.16, 1, 0.3, 1);
		}
	}

	.hauto-car-card:hover .hauto-car-card__media img {
		scale: 1.04;
	}

	.hauto-car-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
	}

	.hauto-car-card__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
	}

	.hauto-car-card__identity {
		min-width: 0;
	}

	/*
	 * Two lines' worth of space whether the title needs them or not: a card
	 * grid where one "Rolls-Royce Cullinan" wraps and its neighbours do not
	 * puts every spec grid in the row at a different height.
	 */
	.hauto-car-card__title {
		min-height: 2.5em;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		line-height: 1.25;
	}

	.hauto-car-card__year {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--x-small);
	}

	.hauto-car-card__price {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		white-space: nowrap;
	}

	.hauto-car-card__count {
		z-index: 1;
		place-self: start start;
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--10);
		margin: var(--wp--preset--spacing--30);
		padding: 0.25rem 0.6rem;
		border-radius: var(--hauto-radius-pill);
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.2;
	}

	.hauto-car-card__badge {
		z-index: 1;
		place-self: start end;
		margin: var(--wp--preset--spacing--30);
		padding: 0.25rem 0.6rem;
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--warning);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--x-small);
		text-transform: uppercase;
	}

	/*
	 * Auto-fit rather than a fixed column count: a Lithuanian gearbox or body
	 * name is longer than its English equivalent, and the grid drops to two
	 * columns instead of truncating every value.
	 */
	.hauto-car-card__specs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
		gap: var(--wp--preset--spacing--10);
		margin: 0;
		padding-block-start: var(--wp--preset--spacing--30);
		border-block-start: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--muted);
		/* Eight chips two to a row: the smallest step keeps "Benzinas /
		   hibridas" and "80 km (18,0 kWh)" off the ellipsis. */
		font-size: var(--wp--preset--font-size--x-small);
	}

	.hauto-car-card__spec {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.4rem;
		min-width: 0;
	}

	/*
	 * The value ellipses so the grid holds its shape; the whole of it, with
	 * its label, is one hover away. `display: none` until then, not a
	 * transparent box: an always-present box wider than its chip is overflow
	 * the page grows a horizontal scrollbar for. That makes the fade a
	 * discrete-property transition — hence allow-discrete and @starting-style,
	 * without which the tooltip would appear with no animation at all.
	 * Centred over the chip so it has the least distance to overhang.
	 */
	.hauto-car-card__spec[data-hauto-tooltip]::after {
		content: attr(data-hauto-tooltip);
		position: absolute;
		z-index: 3;
		display: none;
		inset-block-end: calc(100% + var(--wp--preset--spacing--10));
		inset-inline-start: 50%;
		width: max-content;
		max-width: 12rem;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--contrast);
		box-shadow: var(--wp--preset--shadow--raised);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.3;
		white-space: normal;
		translate: -50% 0;
		opacity: 0;
		transition:
			opacity 120ms ease-out,
			display 120ms allow-discrete;
		pointer-events: none;
	}

	.hauto-car-card__spec:hover::after {
		display: block;
		opacity: 1;

		@starting-style {
			opacity: 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-car-card__spec[data-hauto-tooltip]::after {
			transition: none;
		}
	}

	.hauto-car-card__spec:hover {
		z-index: 2;
	}

	.hauto-car-card__spec-value {
		overflow: hidden;
		color: var(--wp--preset--color--surface-strong);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* A sold car recedes: drained photo, drained badge, struck price. */
	.hauto-car-card--sold {
		& .hauto-car-card__media img {
			filter: saturate(0.45);
			opacity: 0.7;
		}

		& .hauto-car-card__badge {
			background-color: var(--wp--preset--color--muted);
		}

		& .hauto-car-card__price {
			text-decoration: line-through;
			opacity: 0.75;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-car-card,
		.hauto-car-card__media img {
			transition: none;
		}

		.hauto-car-card:hover .hauto-car-card__media img {
			scale: 1;
		}
	}
}