/*
 * Componente: griglia auto.
 */

/*
 * Flex e non grid, come la griglia del team: tre auto in una griglia da
 * quattro restavano appoggiate a sinistra con una colonna vuota a destra.
 * Così le righe incomplete si centrano.
 */
.sh-car-grid {
	--car-cols: 1;
	--car-gap: var(--sh-space-md);
}

@media (min-width: 640px) {
	.sh-car-grid { --car-cols: 2; }
}

@media (min-width: 1024px) {
	.sh-car-grid--cols-3 { --car-cols: 3; }
	.sh-car-grid--cols-4 { --car-cols: 4; }
}

.sh-car-grid__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--car-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-car-card__wrap {
	flex: 0 0 calc((100% - (var(--car-cols) - 1) * var(--car-gap)) / var(--car-cols));
	min-width: 0;
}

/* Le pill sono una primitiva condivisa definita in base.css. */

.sh-car-grid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2xs);
	margin-block-end: var(--sh-space-lg);
	justify-content: center;
}

/* ==== Card ==== */

.sh-car-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--sh-card);
	border: 1px solid var(--sh-line);
}

.sh-car-card__media {
	position: relative;
}

.sh-car-card__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 6px;
	background-color: var(--sh-c-black);
}

.sh-car-card__badge img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sh-car-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sh-space-2xs);
	padding: var(--sh-space-sm);
}

.sh-car-card__title {
	margin-block: 0;
}

.sh-car-card__link {
	color: inherit;
	text-decoration: none;
}

/* Un solo elemento focalizzabile per card: il link copre tutta la superficie. */
.sh-car-card__link::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	content: "";
}

.sh-car-card:has(.sh-car-card__link:focus-visible) {
	outline: 2px solid var(--sh-focus);
	outline-offset: 3px;
}

.sh-car-card__link:focus-visible {
	outline: none;
}

.sh-car-card__brand {
	color: var(--sh-ink);
}

/*
 * In vendita il modello è rosso, a noleggio resta neutro come nei mockup.
 * Legato alla card, non alla griglia: in «Altre vetture» le due si mescolano.
 */
.sh-car-card--vendita .sh-car-card__model {
	color: var(--sh-red-text);
}

.sh-car-card__category {
	margin-block: 0;
	color: var(--sh-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sh-car-card__meta {
	margin-block: 0;
	color: var(--sh-muted);
	font-size: 0.8125rem;
}

/* Una sola riga: le card vicine restano alte uguali. Il valore intero è nel title. */
.sh-car-card__specs {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	gap: var(--sh-space-2xs) var(--sh-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sh-muted);
	font-size: 0.8125rem;
}

.sh-car-card__spec {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.sh-car-card__spec svg {
	flex: none;
	color: var(--sh-red);
}

.sh-car-card__spec-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sh-car-card__price {
	margin-block: auto 0;
	padding-block-start: var(--sh-space-2xs);
	font-family: var(--sh-font-display);
	font-weight: 700;
}

.sh-car-card__price-value {
	color: var(--sh-red-text);
	font-size: 1.375rem;
}

.sh-car-card__price-prefix,
.sh-car-card__price-suffix {
	color: var(--sh-ink);
	font-size: 0.875rem;
	text-transform: uppercase;
}

.sh-car-card__cta {
	justify-content: center;
	width: 100%;
	margin-block-start: var(--sh-space-2xs);
}

.sh-car-grid__cta {
	display: flex;
	justify-content: center;
	margin-block-start: var(--sh-space-lg);
}

.sh-car-grid__empty {
	margin-block-start: var(--sh-space-lg);
	color: var(--sh-muted);
	text-align: center;
}

/* ==== Titolo facoltativo della griglia ==== */

.sh-car-grid__heading {
	margin-block-end: var(--sh-space-xl);
}

/*
 * «La nostra» e «flotta» stanno sulla stessa riga, come nel mockup: le righe
 * del titolo di sezione sono blocchi, qui tornano in linea. Lo spazio fra le
 * due parti lo mette il ::before, perché il markup le accosta senza spazi.
 */
.sh-car-grid__heading .sh-section-title__title .sh-title__line {
	display: inline;
}

.sh-car-grid__heading .sh-section-title__title .sh-title__line + .sh-title__line::before {
	content: " ";
}

/* ==== Card utilitaria ==== */

/*
 * Sul fondo grigio del mockup la card non ha cornice: foto scontornata,
 * nome, tre righe, prezzo. La superficie compare al passaggio del mouse e
 * al focus, e dice che l'intera card è un link.
 */
.sh-car-card--utilitaria {
	background-color: transparent;
	border-color: transparent;
	transition:
		background-color var(--sh-motion-base) var(--sh-motion-ease),
		border-color var(--sh-motion-base) var(--sh-motion-ease),
		box-shadow var(--sh-motion-base) var(--sh-motion-ease),
		transform var(--sh-motion-base) var(--sh-motion-ease);
}

/*
 * Blocco e non flex: da elemento flex l'immagine prendeva come larghezza
 * minima i suoi 768px intrinseci e su mobile sfondava la card.
 */
.sh-car-card__media--cutout {
	aspect-ratio: 16 / 10;
	padding: var(--sh-space-sm) var(--sh-space-sm) 0;
}

/* contain, mai cover: la vettura si vede intera, dal paraurti allo specchietto. */
.sh-car-card__media--cutout img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0.75rem 0.625rem color-mix(in srgb, var(--sh-c-black) 22%, transparent));
	transition: transform var(--sh-motion-slow) var(--sh-motion-ease);
}

/* Senza foto: la sagoma resta centrata e la card mantiene l'altezza delle vicine. */
.sh-car-card__placeholder {
	display: block;
	width: 4rem;
	height: 100%;
	margin-inline: auto;
	color: var(--sh-line);
}

.sh-car-card--utilitaria .sh-car-card__body {
	gap: var(--sh-space-xs);
	padding: var(--sh-space-sm);
}

.sh-car-card--utilitaria .sh-car-card__title::after {
	display: block;
	inline-size: 2rem;
	block-size: 3px;
	margin-block-start: var(--sh-space-2xs);
	background-color: var(--sh-red);
	content: "";
	transition: inline-size var(--sh-motion-base) var(--sh-motion-ease);
}

.sh-car-card__rows {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sh-ink);
}

.sh-car-card__row {
	display: flex;
	align-items: center;
	gap: var(--sh-space-2xs);
	min-width: 0;
}

.sh-car-card__row svg {
	flex: none;
	color: var(--sh-ink);
}

/* Una riga per voce: un valore lungo si tronca invece di sfalsare le card vicine. */
.sh-car-card__row-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Il prezzo va sempre in fondo: le card di una riga lo allineano anche con
 * righe mancanti. Testo in linea e non flex: «/giorno» resta attaccato
 * all'importo come nel mockup, gli spazi li decide la stringa traducibile.
 */
.sh-car-card--utilitaria .sh-car-card__price {
	margin-block: auto 0;
	padding-block-start: var(--sh-space-2xs);
	color: var(--sh-ink);
	font-size: 1rem;
	line-height: 1.1;
}

.sh-car-card__amount {
	color: var(--sh-red);
}

.sh-car-card__price-label {
	color: var(--sh-muted);
}

@media (hover: hover) {
	.sh-car-card--utilitaria:hover {
		background-color: var(--sh-card);
		border-color: var(--sh-line);
		box-shadow: 0 1.5rem 2.5rem -1.75rem color-mix(in srgb, var(--sh-c-black) 45%, transparent);
		transform: translateY(-4px);
	}

	.sh-car-card--utilitaria:hover .sh-car-card__media--cutout img {
		transform: scale(1.04);
	}

	.sh-car-card--utilitaria:hover .sh-car-card__title::after {
		inline-size: 3.5rem;
	}
}

/* Da tastiera la card si accende come al passaggio del mouse; l'anello resta quello comune. */
.sh-car-card--utilitaria:focus-within {
	background-color: var(--sh-card);
	border-color: var(--sh-line);
}

@media (prefers-reduced-motion: reduce) {
	.sh-car-card--utilitaria,
	.sh-car-card__media--cutout img,
	.sh-car-card--utilitaria .sh-car-card__title::after {
		transition: none;
	}

	.sh-car-card--utilitaria:hover,
	.sh-car-card--utilitaria:hover .sh-car-card__media--cutout img {
		transform: none;
	}
}