/* Landing dei modelli 3D (modelli-3d.php). La scena e i comandi vengono dallo stile delle pagine
   di prova (prova-viewer-3d/stile.css): il viewer cerca gli stessi id e le stesse classi. Colori,
   caratteri e contenitori sono quelli di style.css. */

.sezione-3d {
  --tasto: 10px;
  padding-top: 44px;
  border-top: 0;
}

/* I tre punti accanto al titolo */
.punti-3d {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  align-content: end;
}

.punti-3d li {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.punti-3d span {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Il riquadro del viewer */
.scena {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #f1f1ee 55%, #e4e3df 100%);
}
.scena:fullscreen { border-radius: 0; border: 0; }
/* Testi non selezionabili nel riquadro e nelle miniature: trascinando o col doppio clic (punto
   di fuoco) si evidenziava la nota sotto il tasto (Gianluca, 02/11). */
.scena, .macchine { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tela { position: relative; width: 100%; height: min(72vh, 720px); min-height: 380px; touch-action: pan-y; }
.scena:fullscreen .tela { height: 100vh; }
.tela canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.tela canvas:active { cursor: grabbing; }
.copertina-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.copertina-img[hidden] { display: none; }

.copertina { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; }
.copertina[hidden] { display: none; }
.copertina .nota { font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, 0.85); padding: 4px 10px; border-radius: var(--tasto); }

.tasto { appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; padding: 9px 14px; border-radius: var(--tasto); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tasto:hover { border-color: #cfcdc6; }
.tasto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tasto.primario { background: var(--text); color: #fff; border-color: var(--text); padding: 13px 22px; font-size: 16px; }
.tasto.primario:hover { background: #333; }
.tasto[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.tasto[hidden] { display: none; }
.tasto svg { width: 16px; height: 16px; flex: none; }

.barra-comandi { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.barra-comandi > * { pointer-events: auto; }
.barra-comandi .spazio { flex: 1; }
.barra-comandi[hidden] { display: none; }

.avanzamento { position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.avanzamento i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
.avanzamento.finito { display: none; }
/* Nome del modello in scena, con lo stato del caricamento accanto */
.nome-scena { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); font-size: 14px; background: rgba(255, 255, 255, 0.9); padding: 6px 12px; border-radius: var(--tasto); border: 1px solid var(--line); pointer-events: none; }
.nome-scena span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Veli degli effetti (bossa, piano cottura): grana e vignettatura sopra modello e sfondo */
.velo { position: absolute; inset: 0; pointer-events: none; }
.velo.grana { mix-blend-mode: overlay; }
.velo.vignetta { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, var(--forza, 0.25)) 115%); }

.ar-corto { display: none; }

/* I gruppi di miniature sotto la scena */
.gruppi-3d { display: grid; gap: 40px; margin-top: 40px; }
.gruppo-3d { display: grid; grid-template-columns: 0.8fr 2.2fr; gap: 30px; align-items: start; }
.gruppo-3d-testa h2 { margin: 8px 0 0; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.gruppo-3d-testa p { margin: 10px 0 0; color: var(--muted); font-size: 0.95rem; }

.macchine { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.macchina { appearance: none; text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px 6px 10px; cursor: pointer; display: grid; gap: 6px; align-content: start; }
.macchina:hover { border-color: #cfcdc6; }
.macchina:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.macchina[aria-checked="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.macchina img { display: block; width: 100%; height: auto; border-radius: 11px; background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #f1f1ee 55%, #e4e3df 100%); }
.macchina span { font-size: 13px; line-height: 1.3; padding: 0 4px; }

@media (max-width: 900px) {
  .gruppo-3d { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 560px) {
  /* Sul telefono una fila che scorre di lato, invece di sette righe di miniature */
  .macchine { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .macchina { scroll-snap-align: start; }

  .tasto .testo-lungo { display: none; }
  .tela { height: 62vh; }
  /* Comandi in una riga sola, tutti alti uguali: i quadrati a sinistra, «Vedi nel tuo spazio»
     (e lo schermo intero, dove esiste) a destra. */
  .nome-scena { top: 10px; left: 10px; }
  .barra-comandi { left: 10px; right: 10px; bottom: 10px; gap: 6px; flex-wrap: nowrap; }
  .barra-comandi .tasto { height: 40px; }
  .barra-comandi .tasto:not(#tasto-ar) { flex: none; width: 40px; padding: 0; justify-content: center; }
  .barra-comandi #tasto-ar { padding: 0 12px; }
  /* Su Android c'è anche lo schermo intero: «Vedi nel tuo spazio» non ci sta, si accorcia. */
  .barra-comandi:has(#tasto-schermo:not([hidden])) .ar-lungo { display: none; }
  .barra-comandi:has(#tasto-schermo:not([hidden])) .ar-corto { display: inline; }
}