/* Foto (prove demo, 30.09.2026): le foto vere del caso sono le protagoniste.
   Solo classi .d-foto-…; colori, spazi e durate dai token di css/token.css. Si anima solo opacity e transform.
   30.09.2026 · «F · Pulita»: le foto sono stampe arrotondate sul tavolo, senza cornice né ombra; i cartellini come in
   storie.css (raggio 8): carta per «Col telefono», inchiostro per «Da catalogo». Niente arancio: le foto bastano. */

/* ---------- la foto: arrotondata, l'immagine riempie ---------- */
.d-foto-foto { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--r-pannello); background: var(--superficie-3); }
.d-foto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-foto-eti { position: absolute; top: var(--s-3); left: var(--s-3); padding: 3px 10px; border-radius: var(--r-piccolo); font-size: var(--t-micro); font-weight: 650; line-height: 1.3; background: var(--carta); color: var(--inchiostro); }
.d-foto-eti--dopo { background: var(--inchiostro); color: var(--su-inchiostro); }

/* cartellini sulla foto da catalogo: dicono cosa è cambiato e cosa no (carta, senza filetto) */
.d-foto-cartello { position: absolute; padding: 4px 10px; border-radius: var(--r-piccolo); font-size: var(--t-mini); font-weight: 650; line-height: 1.3; white-space: nowrap; background: var(--carta); color: var(--inchiostro); }
.d-foto-cartello--sfondo { top: 14%; right: 5%; }
.d-foto-cartello--pezzo { top: 84%; left: 50%; translate: -50% 0; }
.d-foto-cartello--pezzo::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; border-radius: var(--r-cella); background: var(--carta); }

/* la vista riempie lo spazio che resta sotto la frase: le foto si dimensionano sull'altezza */
.d-foto-vista { min-height: 0; height: 100%; }

/* ---------- A · computer ---------- */
.d-foto-fila { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-5); min-height: 0; height: 100%; }
.d-foto-fila > .d-foto-foto { flex: 0 1 auto; height: 100%; aspect-ratio: 3 / 4; }
.d-foto-inizio .d-foto-fila > .d-foto-foto:nth-child(3) { aspect-ratio: 9 / 16; }
.d-foto-coppia { gap: var(--s-4); }
.d-foto-coppia > .d-foto-foto--dopo { aspect-ratio: 3 / 2; }
.d-foto-coppia .pv-freccia { flex: none; }

/* prima di premere ▶ la fila lascia libero il fondo, dove sta il pulsante */
.pa.pv-attivo:not(.pv-iniziato) .d-foto-inizio .d-foto-vista { height: calc(100% - 56px); }

/* Oggi: i pezzi aspettano, la sessione si riempie lenta e grigia */
.d-foto-oggi { height: 100%; align-items: center; }
.d-foto-attesa { position: relative; }
.d-foto-fila--piccola { height: auto; gap: var(--s-2); }
.d-foto-fila--piccola img { flex: 1 1 0; min-width: 0; height: clamp(140px, 28svh, 240px); object-fit: cover; opacity: .55; border-radius: var(--r-piccolo); }
.d-foto-attesa__segno { position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: 6px 16px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-medio); font-weight: 650; white-space: nowrap; }
.d-foto-passi .pv-voce { grid-template-columns: 8.4em 1fr; }
.d-foto-passi .pv-voce__da { font-size: var(--t-mini); }

/* Il risultato: la stessa fila della prima scena, ora coerenti e pronte da pubblicare; sotto, cosa resta a te */
.d-foto-fine { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-5); }
/* tre foto 3:2 che si dividono la riga: nessuna esce dal palco, a ogni larghezza */
.d-foto-fine .d-foto-fila > .d-foto-foto { flex: 1 1 0; height: auto; max-height: 100%; aspect-ratio: 3 / 2; }
.d-foto-spunte { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.pa .d-foto-spunte .pv-spunta { font-size: var(--t-medio); }

@media (min-width: 701px) and (max-height: 820px) {
  .d-foto-fila { gap: var(--s-4); }
  .d-foto-fine { gap: var(--s-3); }
  .d-foto-fila--piccola img { height: clamp(120px, 24svh, 200px); }
}

/* ---------- B · telefono ---------- */
.pb .d-foto-vista { flex: 1 1 0; height: auto; }

/* il mosaico: un pezzo grande, due piccoli; riempie la scheda senza sbordare */
.d-foto-mosaico { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: var(--s-2); }
.d-foto-mosaico > .d-foto-foto:first-child { grid-row: 1 / 3; }
.d-foto-mosaico--dopo { grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 2fr; }
.d-foto-mosaico--dopo > .d-foto-foto:first-child { grid-row: auto; grid-column: 1 / 3; }
.pb.pv-attivo:not(.pv-iniziato) .d-foto-inizio .d-foto-vista { margin-bottom: 76px; }

/* Con me: la foto col telefono si fa piccola nell'angolo, arriva quella da catalogo */
.pv-scena .d-foto-scambio[data-t] { opacity: 1; transform: none; }
.d-foto-scambio { position: relative; }
.d-foto-scambio__prima, .d-foto-scambio__dopo { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-pannello); background: var(--superficie-3); }
.d-foto-scambio img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* rimpicciolita resta una stampa con il margine carta: si stacca dalla foto nuova che ha sotto */
.d-foto-scambio__prima { inset: 0; z-index: 2; transform-origin: 0 0; box-shadow: 0 0 0 6px var(--carta); transition: transform var(--d-scena) var(--curva-tendina); }
.d-foto-scambio.on .d-foto-scambio__prima { transform: translate(var(--s-1), var(--s-1)) scale(.34); }
.d-foto-scambio__prima .d-foto-eti { transition: opacity var(--d-media) var(--curva); }
.d-foto-scambio.on .d-foto-scambio__prima .d-foto-eti { opacity: 0; }
.d-foto-scambio__dopo { left: 0; right: 0; bottom: 0; aspect-ratio: 3 / 2; max-height: 100%; opacity: 0; transition: opacity var(--d-lenta) var(--curva) var(--d-media); }
.d-foto-scambio.on .d-foto-scambio__dopo { opacity: 1; }
.d-foto-scambio__dopo .d-foto-eti { left: auto; right: var(--s-2); }

/* Il risultato, cosa resta a te: la foto pronta e due spunte */
.d-foto-pronta { flex: 1 1 0; min-height: 110px; max-height: 240px; }
/* il timbro sta sulla parete, non copre il pezzo */
.d-foto-pronta .pv-timbro { top: 28%; }
.pb .d-foto-pronta + .pv-spunte { margin-top: var(--s-2); }

@media (max-width: 700px) {
  .pb .d-foto-foto, .pb .d-foto-scambio__prima, .pb .d-foto-scambio__dopo { border-radius: var(--r-controllo); }
  .solo-telefono .pb .d-foto-eti { font-size: var(--t-etichetta); padding: 2px 7px; }
  .solo-telefono .pb .d-foto-cartello { font-size: var(--t-micro); padding: 3px 8px; }
  .solo-telefono .pb .d-foto-passi .pv-voce { grid-template-columns: 7.6em 1fr; }
}
/* telefoni bassi: il ▶ sta a metà scheda (come in prove.css), non serve lasciare libero il fondo */
@media (max-width: 700px) and (max-height: 760px) {
  .solo-telefono .pb .pv-avvio { bottom: auto; top: 58%; }
  .pb.pv-attivo:not(.pv-iniziato) .d-foto-inizio .d-foto-vista { margin-bottom: 0; }
}
@media (max-width: 380px) {
  .solo-telefono .pb .d-foto-passi .pv-riga--corta { display: block; }
}