/* FOTO-3D (prova del 19/10/2026, non pubblicata)
   Le foto e i video della home come lastre: entrano inclinate in prospettiva, si raddrizzano al centro
   dello schermo e si inclinano dall'altra parte uscendo. Mentre la foto si raddrizza, un filo d'oro
   disegna dentro di lei una cornice sottile, come un passe-partout o il bordo di un'etichetta: si
   disegna una volta e resta. Sul computer la lastra sotto il mouse si gira appena verso di lui.
   Gli angoli li scrive foto-3d.js nelle proprietà `rotate` e `translate` (non `transform`, che resta
   alle animazioni che il sito ha già); la cornice legge --g3d-draw (da 0 a 1).
   Con «riduci movimento» foto-3d.js non parte e qui non succede niente.
   (Il riflesso di luce della prima versione è stato tolto il 19/10 su richiesta del proprietario.) */

/* la prospettiva sta sul contenitore: le lastre ai lati si vedono un po' di sbieco, come nella realtà */
.g3d-stage {
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

/* telefono: prospettiva più vicina, così l'inclinazione si vede anche su una scheda stretta */
@media (max-width: 899px) {
  .g3d-stage {
    perspective: 760px;
  }
}

.g3d {
  backface-visibility: hidden;
}

/* la cornice d'oro: quattro fili che partono dagli angoli e girano in senso orario */
.g3d-frame::after {
  --g3d-gold: rgba(214, 186, 132, 0.95);
  --g3d-len: calc(var(--g3d-draw, 0) * 100%);
  content: '';
  position: absolute;
  inset: clamp(9px, 2.2%, 14px);
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--g3d-gold), var(--g3d-gold)) left top / var(--g3d-len) 1px no-repeat,
    linear-gradient(var(--g3d-gold), var(--g3d-gold)) right top / 1px var(--g3d-len) no-repeat,
    linear-gradient(var(--g3d-gold), var(--g3d-gold)) right bottom / var(--g3d-len) 1px no-repeat,
    linear-gradient(var(--g3d-gold), var(--g3d-gold)) left bottom / 1px var(--g3d-len) no-repeat;
  /* un'ombra appena percettibile: il filo si legge anche sul cielo chiaro */
  filter: drop-shadow(0 0 1px rgba(39, 11, 23, 0.45));
}

/* le bottiglie dei pacchetti girano nella loro scheda, con una prospettiva vicina come in Prodotti */
.wine-card.g3d-stage {
  perspective: 750px;
  /* la foto è bianca come la scheda: girando, il suo bordo non deve uscire sopra la scheda */
  overflow: hidden;
}

/* RACCOLTA DELLE OLIVE (21/10/2026, proprietario: «il video lo renderei più importante, anche più
   grande»): il film del programma prende più spazio, gli orari si stringono accanto; l'ombra è più
   profonda, così il film si stacca dalla pagina. (Il movimento è in foto-3d.js.) */
@media (min-width: 901px) {
  .day-section .day-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
    gap: 3.5rem;
  }
}

.day-section .day-clip {
  box-shadow: 0 40px 80px -24px rgba(39, 11, 23, 0.4);
}

/* telefono: il film esce un poco dai margini della pagina (la cornice d'oro dietro resta dentro) */
@media (max-width: 900px) {
  .day-section .day-media {
    width: calc(100% + 1.25rem);
    max-width: 640px;
    margin: 0 auto 1.25rem;
    transform: translateX(-0.625rem);
  }
}

/* il badge «Novità d'autunno» resta sopra la cornice */
.g3d-frame .exp-card-badge {
  z-index: 3;
}

/* LEGGIBILITÀ DELLE HOME SUL TELEFONO (20/10/2026, controllo chiesto dal proprietario: «scritte troppo
   piccole non leggibili da telefono»). style.css vuole già «niente sotto i 13px», ma una regola più
   avanti riporta queste a 12px: qui (file caricato solo dalle home, dopo style.css) restano leggibili. */
@media (max-width: 899px) {
  body .exp-card-badge,
  body .grape-type {
    font-size: 13px;
  }

  body .guest-photo figcaption {
    font-size: 14px;
  }

  body .footer-info p,
  body .footer-info > p:not([class]) {
    font-size: 13px;
  }
}