/* Pellegrini Theme — card prodotto (01-DESIGN.md, "La card è l'immagine").
   Nessuna scatola: la card è la sola immagine, 4:5. In sovrimpressione, in
   basso su una velatura che sfuma verso il carbone: nome, colore e prezzo a
   pelle sempre visibili; sotto, .card__rivela (prezzo al piede, dati tecnici,
   riga finale).

   Base: tutto visibile, niente si muove. È ciò che vedono touch, schermi
   sotto i 768px, chi chiede movimento ridotto e chi non ha JavaScript.
   Solo con puntatore fine e hover reale .card__rivela parte chiusa e si apre
   al passaggio del mouse o col focus: grid-template-rows 0fr → 1fr anima
   fino all'altezza vera del contenuto, quindi i 320ms sono 320ms percepiti. */

/* ---- Griglia di card: 4 colonne su desktop, 2 su tablet, 1 su mobile ----
   Colonne uguali per ora: l'impaginato sfalsato e la ricomposizione animata
   arrivano con la Fase 5. */

.griglia-card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(var(--passo) * 3);
}

.griglia-card--tre {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.griglia-card,
	.griglia-card--tre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(var(--passo) * 2);
	}
}

@media (max-width: 767px) {
	.griglia-card,
	.griglia-card--tre {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* La card è un campione appoggiato sul piano della cabina: ombra a contatto
   sempre, ombra portata ferma con la luce in alto a sinistra. Con luce.js
   l'ombra portata diventa .ombra e segue la lampada; al passaggio la card si
   solleva e l'ombra si allunga. Il ritaglio sta sul link, non sulla card,
   altrimenti taglierebbe l'ombra. */
.card {
	--card-saturazione: 1;
	--card-velatura: 0.85;
	position: relative;
	aspect-ratio: 4 / 5;
	background: none;
	color: var(--calce);
	box-shadow: var(--ombra-appoggio), var(--ombra-portata);
}

.luce-js .card,
.card--correlato {
	box-shadow: var(--ombra-appoggio);
}

.card__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

/* overflow: hidden sulla card taglierebbe l'anello esterno: anello interno. */
.card__link:focus-visible {
	outline: 0;
	box-shadow: inset 0 0 0 3px var(--accento);
}

/* ---- Immagine: riempie la card ---- */

.campione {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--colore-pelle, var(--cabina));
	filter: saturate(var(--card-saturazione));
	transition: filter var(--durata-stato) var(--curva);
}

/* Il multiply del ripiego si compone col colore del campione, non con la pagina. */
.campione--generato {
	isolation: isolate;
}

/* Doppia classe: nelle pagine WooCommerce ".woocommerce-page img { height: auto }"
   vincerebbe su una classe sola, e la foto quadrata non riempirebbe la card 4:5. */
.campione .campione__texture,
.campione .campione__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.campione__texture {
	mix-blend-mode: multiply;
}

/* Grana finissima sopra l'immagine: unifica scatti fatti in condizioni diverse.
   SVG feTurbulence in data URI, nessun file da caricare. */
.campione::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	opacity: 0.05;
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* ---- Testo in sovrimpressione, in basso, sulla velatura ----
   La velatura è il fondo del blocco: quando .card__rivela si apre, il blocco
   cresce e la velatura si estende con lui, senza animarla a parte. */

.card__testo {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	padding: calc(var(--passo) * 8) calc(var(--passo) * 2) calc(var(--passo) * 2);
	background: linear-gradient(
		to top,
		rgba(34, 33, 31, var(--card-velatura)) 0%,
		rgba(34, 33, 31, calc(var(--card-velatura) * 0.6)) 55%,
		rgba(34, 33, 31, 0) 100%
	);
}

/* Il titolo è un h3 ma non un titolo di sezione: si annullano peso e larghezza
   del display. Solo il nome dell'articolo è in Bodoni; il colore resta in Archivo. */
.card__nome {
	margin: 0;
	font-family: var(--famiglia-base);
	font-size: var(--misura-14);
	font-weight: var(--peso-dati);
	font-stretch: var(--larghezza-corpo);
	font-variation-settings: "wght" 500, "wdth" 100;
	letter-spacing: 0;
	line-height: 1.15;
}

.card__articolo {
	font-family: var(--famiglia-articolo);
	font-size: var(--misura-26);
	font-weight: var(--peso-corpo);
	font-variation-settings: "wght" 400;
	line-height: 1.05;
}

.card__colore {
	margin-left: 0.35em;
	white-space: nowrap;
}

.card__prezzo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4em;
	margin: var(--passo) 0 0;
	line-height: 1.2;
}

.card__prezzo-pelle {
	font-size: var(--misura-20);
}

.card__prezzo-unita {
	font-size: var(--misura-14);
}

/* ---- Ciò che si rivela ---- */

.card__rivela {
	display: grid;
	grid-template-rows: 1fr;
}

/* min-height: 0 lascia scendere la riga a 0fr; overflow nasconde il resto.
   Il contenuto resta nell'albero di accessibilità anche da chiuso. */
.card__rivela-interno {
	min-height: 0;
	overflow: hidden;
}

.card__rivela-interno > :first-child {
	margin-top: calc(var(--passo) / 2);
}

.card__prezzo-piede {
	margin: 0;
	font-size: var(--misura-12);
	line-height: 1.4;
}

.card__dati {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.6em;
	margin: var(--passo) 0 0;
	font-size: var(--misura-14);
	line-height: 1.4;
}

.card__dato {
	display: inline;
}

.card__dato + .card__dato::before {
	content: "·";
	margin-right: 0.6em;
}

.card__dato dt,
.card__dato dd {
	display: inline;
	margin: 0;
}

.card__etichetta:not(.visivamente-nascosto)::after {
	content: ":\00a0";
}

.card__scorta,
.card__ordine {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.6em;
	margin: var(--passo) 0 0;
	font-size: var(--misura-14);
}

.card__scorta > * + *::before,
.card__ordine > * + *::before {
	content: "·";
	margin-right: 0.6em;
}

/* Scorta in esaurimento: lo dice l'etichetta ("Ultime 3 pelli"), nessun colore. */

/* ---- Stati ---- */

.card--corrispondente {
	--card-saturazione: 1;
	--card-velatura: 0.7;
}

.card--corrispondente .card__articolo {
	font-size: var(--misura-34);
}

.card--corrispondente .card__prezzo-pelle {
	font-size: var(--misura-26);
}

/* Correlato: desaturato, velatura densa, solo articolo e colore, nessun hover. */
.card--correlato {
	--card-saturazione: 0.25;
	--card-velatura: 0.92;
}

.card--correlato :is(.card__prezzo, .card__rivela) {
	display: none;
}

/* ---- Rivelazione: solo con hover vero, schermo largo, movimento consentito ----
   Tutto il resto del CSS vale ovunque; queste regole si aggiungono solo qui. */

@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.card__rivela {
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--durata-stato) var(--curva);
	}

	/* Il contenuto entra da sotto: pochi pixel e opacità, solo transform e opacity. */
	.card__rivela-interno {
		opacity: 0;
		transform: translateY(var(--passo));
		transition:
			opacity var(--durata-stato) var(--curva),
			transform var(--durata-stato) var(--curva);
	}

	.card:is(:hover, :focus-within) .card__rivela {
		grid-template-rows: 1fr;
	}

	.card:is(:hover, :focus-within) .card__rivela-interno {
		opacity: 1;
		transform: none;
	}

	/* L'immagine sale dentro il suo contenitore (il link ha overflow: hidden).
	   La tela della lampada, se c'è, sale con lei. */
	.campione__texture,
	.campione__foto,
	.campione .luce-tela {
		transition: transform var(--durata-stato) var(--curva);
	}

	.card:not(.card--correlato):is(:hover, :focus-within) :is(.campione__foto, .campione__texture, .luce-tela) {
		transform: scale(1.04);
	}

	/* La card si stacca dal piano: sale di poco, l'ombra (luce.js) si allunga. */
	.card[data-ombra] {
		transition: transform var(--durata-stato) var(--curva);
	}

	.card[data-ombra]:is(:hover, :focus-within) {
		transform: translateY(-6px);
	}
}