/*
 * Componente: scheda tecnica auto.
 */

.sh-car-specs {
	display: grid;
	gap: var(--sh-space-xl);
}

@media (min-width: 1024px) {
	.sh-car-specs:has(.sh-car-specs__highlights) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.sh-car-specs__title {
	margin-block: 0 var(--sh-space-md);
}

.sh-car-specs__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--sh-space-xl);
	margin: 0;
}

@media (min-width: 768px) {
	.sh-car-specs--cols-2 .sh-car-specs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sh-car-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sh-space-sm);
	padding-block: var(--sh-space-2xs);
	border-block-end: 1px solid var(--sh-line);
}

/*
 * Nessuna larghezza imposta: etichetta e valore si dividono la riga e il
 * valore lungo («450 CV (331 kW) a 6.500 giri/min») va a capo invece di
 * spingere fuori schermo la colonna a 360px.
 */
.sh-car-specs__label {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: var(--sh-space-3xs);
	min-width: 0;
	margin: 0;
	color: var(--sh-muted);
	font-size: 0.875rem;
}

.sh-car-specs__label svg {
	flex: none;
	color: var(--sh-red);
	align-self: center;
}

.sh-car-specs__value {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 500;
	text-align: end;
	overflow-wrap: anywhere;
}

/* ==== Highlights ==== */

.sh-icon-list {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Sei punti di forza: su tablet la colonna è a tutta larghezza e un elenco
 * singolo sarebbe lunghissimo, quindi vanno su due colonne (3 righe × 2).
 * Da desktop tornano in colonna accanto alla scheda, come nel mockup.
 */
@media (min-width: 640px) and (max-width: 1023px) {
	.sh-car-specs__highlight-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sh-icon-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sh-space-2xs);
}

.sh-icon-list__icon {
	flex: none;
	margin-block-start: 2px;
	color: var(--sh-red);
}

.sh-icon-list__text {
	min-width: 0;
}

/* I blocchi di pagina della scheda vettura (titolo, noleggio, garanzie) sono in layout.css, sezione 11. */