/*
 * Mov3, schede: le card dei mezzi e degli accessori e la pagina del mezzo,
 * su sabbia. Scelta di Giammarco del 2026-10-20: le schede non blu ma beige
 * sabbia, anche nell'elenco, negli accessori e nel configuratore.
 *
 * Sulla sabbia l'arancio non è mai testo: è il fondo dei pulsanti, col testo notte.
 * Le schede sono uguali nei due temi; sul fondo chiaro prendono un filo.
 */

/* Una sezione intera su sabbia (pagina del mezzo, elenco). */
.mv-sabbia {
	background: var(--mv-sabbia);
	color: var(--mv-inchiostro);
}

.mv-sabbia a:not(.mv-pulsante) {
	color: var(--mv-marchio);
}

.mv-sabbia .mv-tele {
	color: var(--mv-terra);
}

/* --- Griglia e card -------------------------------------------------------- */

/* Le card tutte alte uguali, anche quando stanno in un contenitore per l'entrata (home). */
.mv-griglia > .mv-entra {
	display: flex;
}

.mv-griglia > .mv-entra > .mv-card {
	flex: 1;
}

.mv-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(0.875rem, 1.6vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
	padding: 14px;
	border-radius: var(--mv-raggio);
	background: var(--mv-carta);
	color: var(--mv-inchiostro);
	box-shadow: var(--mv-scheda-filo);
	transition: transform 0.25s var(--mv-curva), box-shadow 0.25s var(--mv-curva);
}

.mv-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mv-scheda-filo), var(--mv-ombra);
}

.mv-card__foto {
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--mv-raggio-piccolo);
	padding: 10px;
	background:
		radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--mv-arancio) 18%, transparent), transparent 66%),
		var(--mv-sabbia);
}

.mv-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Alcune foto del sito hanno il fondo bianco (la minipala MV-480CINGP-KU): sulla sabbia il bianco sparisce. */
	mix-blend-mode: multiply;
}

.mv-card__cat {
	font-family: var(--mv-dati);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mv-terra);
}

.mv-card__codice {
	margin: 0;
	font-family: var(--mv-titoli);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.25;
}

/* Tutta la card è cliccabile: il collegamento del codice la copre. */
.mv-card__codice a {
	color: var(--mv-inchiostro);
	text-decoration: none;
}

.mv-card__codice a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--mv-raggio);
}

.mv-card__codice a:focus-visible {
	outline: none;
}

.mv-card__codice a:focus-visible::after {
	outline: 2px solid var(--mv-marchio);
	outline-offset: 3px;
}

.mv-card__dati {
	display: grid;
	gap: 4px;
	margin: 0;
	font-family: var(--mv-dati);
	font-size: 0.7rem;
}

.mv-card__dati div {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding-top: 4px;
	border-top: 1px dashed var(--mv-filo);
}

.mv-card__dati dt {
	color: var(--mv-terra);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mv-card__dati dd {
	margin: 0;
	text-align: right;
}

/* Il pulsante sta sopra il collegamento che copre la card. */
.mv-card__azione {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	/* In fondo alla card: con due righe di dati o con tre, i pulsanti stanno in fila. */
	margin-top: auto;
	padding: 0.5rem 0.95rem;
	font-size: 0.8rem;
}

/* --- Tabella dei dati tecnici (pagina del mezzo) --------------------------- */

.mv-dati {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
	margin: 0;
	font-family: var(--mv-dati);
	font-size: 0.78rem;
}

.mv-dati div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	padding-block: 7px;
	border-top: 1px solid var(--mv-filo);
}

.mv-dati dt {
	flex: none;
	padding-top: 1px;
	color: var(--mv-terra);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mv-dati dd {
	margin: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

/* Le righe lunghe (Configurazione) prendono tutta la larghezza. */
.mv-dati .mv-dati__lunga {
	grid-column: 1 / -1;
	flex-direction: column;
	gap: 4px;
}

.mv-dati .mv-dati__lunga dd {
	text-align: left;
	font-family: var(--mv-testo);
	font-size: var(--wp--preset--font-size--piccolo);
}

@media (max-width: 640px) {
	.mv-dati {
		grid-template-columns: 1fr;
	}
}