/* ============================================================================
   LA CARD DI UN PRODOTTO IN GRIGLIA
   ----------------------------------------------------------------------------
   Una sola, per tutto il sito: la vetrina della home, il negozio, le pagine
   di categoria, i correlati in fondo alla scheda. Il markup lo scrive
   rt_card_prodotto() in inc/prodotto.php, e li' c'e' scritto perche'.

   NON SA IN CHE GRIGLIA SI TROVA, e non deve saperlo: le colonne e le
   distanze le decide chi la mette in pagina — .rt-vetrina__griglia in home,
   ul.products nel negozio — perche' sono due pagine diverse con due ritmi
   diversi. Qui c'e' solo il riquadro.

   SI MISURA DA SE'. La card si centra quando e' STRETTA, non quando lo e' la
   finestra: la stessa card a 390px sta in due colonne da 160, e su un
   monitor da 3200 con i filtri aperti ne sta in una da 258. Una @media
   sulla finestra avrebbe dato la risposta giusta in home e quella sbagliata
   nel negozio, perche' la finestra non e' il contenitore.
   ========================================================================= */

/* Il contenitore della misura e' il <li>, non la card: mettere il
   container-type sulla card vorrebbe dire contenerne la dimensione, e una
   card che non puo' leggere la propria larghezza non e' quello che serve. */
.rt-vcard-posto { container: rt-card / inline-size; }

.rt-vcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
  color: inherit;
  text-decoration: none;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms ease,
              border-color 300ms ease;
}
.rt-vcard:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--rt-ombra-3);
}
.rt-vcard:focus-visible {
  outline: 2px solid var(--rt-blu);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rt-vcard { transition: none; }
  .rt-vcard:hover { transform: none; }
}

/* Quadrata come lo scatto, senza rientro: gli scatti di questi rotoli
   hanno gia' il loro bianco intorno, e aggiungerne altro fa diventare il
   prodotto una miniatura dentro un francobollo. */
.rt-vcard__img {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--rt-superficie);
}
.rt-vcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Il bianco dello scatto sparisce nel bianco della card. */
  mix-blend-mode: multiply;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-vcard:hover .rt-vcard__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .rt-vcard__img img,
  .rt-vcard:hover .rt-vcard__img img { transition: none; transform: none; }
}

.rt-vcard__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s5) var(--rt-s5);
}

/* ── LE MISURE DEL TESTO ──────────────────────────────────────────────────
   Tutte scese di un gradino insieme: il nome da 15 a 14, la misura, il
   prezzo e il voto da 13 a 12. In una griglia a due colonne da 171 pixel
   il riquadro era diventato tutto testo, e il testo di una card non si
   legge, si riconosce. Scese INSIEME perche' il rapporto fra loro e' il
   disegno: abbassarne una sola avrebbe cambiato chi comanda nella card. */

/* SULLA FOTOGRAFIA, in basso a destra. Il markup la mette dentro
   .rt-vcard__img: vedi rt_card_prodotto() per il perche'.

   Fondo bianco pieno e non blu tenue: sta sopra uno scatto, e una
   pastiglia semitrasparente sopra un prodotto chiaro non si legge.
   Il filetto la stacca anche quando sotto c'e' del bianco. */
.rt-vcard__misura {
  position: absolute;
  inset-block-end: var(--rt-s2);
  inset-inline-end: var(--rt-s2);
  z-index: 1;
  padding: 3px 0.6rem;
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  color: var(--rt-ink);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xxs);
  font-weight: var(--rt-peso-forte);
  /* La fotografia si ingrandisce al passaggio del mouse: la pastiglia no,
     se no scivola fuori dall'angolo. */
  transform: none;
}

.rt-vcard__nome {
  font-size: var(--rt-t-card);
  font-weight: var(--rt-peso-forte);
  line-height: 1.3;
  color: var(--rt-ink);
}

/* Il voto e' quello di components.css: qui scende con gli altri. */
.rt-vcard .rt-voto { font-size: var(--rt-t-xxs); }

/* Il prezzo si ancora in basso, e con lui la pastiglia che lo segue: i
   titoli di questi prodotti stanno su una, due o tre righe, e senza
   l'ancora la pastiglia cadeva a un'altezza diversa in ogni card. */
.rt-vcard__prezzo {
  margin-block-start: auto;
  padding-block-start: var(--rt-s2);
  font-size: var(--rt-t-xxs);
  line-height: 1.35;
  color: var(--rt-ink-3);
}
/* IL PREZZO E' IL NUMERO, non la frase. Prima stavano tutti e due a
   dodici pixel e la card non aveva un prezzo: aveva una riga di testo che
   conteneva anche un prezzo. Il numero sale a venti, il resto della frase
   resta dov'era, e il rapporto fra i due fa il lavoro. */
.rt-vcard__prezzo b {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--rt-ink);
}

/* La pastiglia del miglior prezzo e' quella di components.css: qui si
   rimpicciolisce soltanto, perche' dentro una card accanto a un prezzo
   gia' piccolo una pastiglia a misura piena lo scavalca. */
.rt-vcard .rt-migliore {
  padding: 1px var(--rt-s2);
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* ── LA CARD STRETTA ──────────────────────────────────────────────────────
   Sotto i 300px di card il testo si centra. Non e' un vezzo: a quella
   larghezza il nome va a capo quasi sempre, e un testo a bandiera con due
   righe su tre che finiscono a meta' lascia un bordo destro a zigzag. Al
   centro le righe si equilibrano, e la pastiglia della misura e quella del
   prezzo cadono sullo stesso asse della fotografia.

   Dove le container query non ci sono, resta allineato a sinistra: e' la
   card di prima, non una card rotta.                                     */
/* IL TESTO RESTA A SINISTRA, anche nella card stretta.

   Qui prima si centrava tutto. Lo scopo era buono — in una colonna da 171
   pixel il testo centrato sembra piu' ordinato — ma in una GRIGLIA costa
   caro: con quattro card affiancate i nomi partono da quattro verticali
   diverse, e l'occhio che scorre una fila deve ricominciare a ogni
   riquadro. Allineati a sinistra si leggono in colonna.

   LO SCOPO DELL'ALTEZZA UGUALE RESTA, e lo fa il min-height sul prezzo:
   era quello il motivo vero per cui la pastiglia era stirata, non
   l'estetica. Quindi la pastiglia torna della sua misura e le altezze
   restano allineate lo stesso. */
@container rt-card (max-width: 300px) {
  .rt-vcard__corpo {
    gap: var(--rt-s1);
    padding: var(--rt-s3) var(--rt-s3) var(--rt-s4);
  }
  /* Due righe sempre: in due colonne strette il prezzo va a capo in certe
     card e non in altre, e senza un minimo le pastiglie finivano a due
     altezze diverse nella stessa fila. */
  .rt-vcard__prezzo { min-height: 2.7em; }
  .rt-vcard .rt-migliore {
    align-self: flex-start;
    padding-inline: 7px;
    font-size: 9px;
    letter-spacing: 0;
  }
}