/*
  MARRETTI – RESTYLING DELLA HOME (versione del 2 novembre 2026)

  Stili dell'apertura a tutto schermo e del quadro delle collezioni.
  Funziona insieme a marretti-restyling.js, che crea gli elementi e misura menu
  e pagina (variabili --proposta-menu, --proposta-menu-fisso, --proposta-pagina).
  Le regole valgono solo nella home o per gli elementi creati dallo script
  (classi "proposta-…", il prefisso usato nel prototipo): il resto del sito non
  cambia. Alcune regole usano !important per superare gli stili che Avada scrive
  direttamente negli elementi e la sua "tipografia responsiva", che ricalcola la
  dimensione dei titoli sotto i 1000 px.
*/

/* ===================================================================
   HOME - immagini a tutto schermo, stesso effetto su ogni dispositivo
   =================================================================== */

/* Niente scorrimento orizzontale quando le immagini escono dai margini */
body.home { overflow-x: clip; }

/* Apertura: al posto del carosello originale, le 5 categorie di scale
   (costruito dallo script JS, che misura anche il menu su ogni dispositivo).
   Occupa lo schermo meno lo spazio del menu; svh = altezza realmente
   visibile sui telefoni. Il riquadro del vecchio carosello resta come
   contenitore, così lo spazio è già riservato quando la pagina compare. */
.home .fusion-slider-container,
.home .fusion-slider-container.fusion-no-small-visibility {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  height: calc(100vh - var(--proposta-menu, 0px)) !important;
  height: calc(100svh - var(--proposta-menu, 0px)) !important;
  overflow: hidden;
}
.home .fusion-slider-container > :not(.proposta-hero) { display: none !important; }

.proposta-hero {
  --margine: clamp(20px, 5vw, 72px);
  position: absolute;
  inset: 0;
  z-index: 0;              /* resta sotto il menu e i suoi sottomenu */
  isolation: isolate;
  overflow: hidden;
  background: #121212;
  color: #fff;
  touch-action: pan-y;     /* scorrimento verticale alla pagina, orizzontale al carosello */
  font-family: var(--awb-typography1-font-family, "Work Sans", Arial, sans-serif);
}

/* Dissolvenza incrociata: la nuova immagine compare sopra la precedente */
.proposta-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
}
.proposta-hero__slide.is-uscente { z-index: 1; opacity: 1; visibility: visible; }
.proposta-hero__slide.is-attiva {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dissolvenza) ease;
}

/* Ogni categoria ha due immagini: la foto e, dietro, la sua copia sfocata */
.proposta-hero .proposta-hero__foto,
.proposta-hero .proposta-hero__sfondo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0;
}
.proposta-hero .proposta-hero__foto {
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
}
.proposta-hero .proposta-hero__sfondo {
  display: none;
  object-fit: cover;
  filter: blur(32px) brightness(.6) saturate(1.15);
  transform: scale(1.2);
}
/* Schermo orizzontale (desktop) e telefono: foto intera al centro, sfondo
   sfocato intorno. Sul telefono lo schermo è molto più stretto delle foto e
   riempiendolo se ne vedrebbe poco più di metà. */
@media (min-aspect-ratio: 1/1), (max-width: 600px) {
  .proposta-hero[data-riempimento="auto"] .proposta-hero__foto {
    object-fit: contain;
    object-position: 50% 50%;
  }
  .proposta-hero[data-riempimento="auto"] .proposta-hero__sfondo { display: block; }
}

/* Leggero avvicinamento della foto mentre resta sullo schermo */
.proposta-hero__slide.is-attiva .proposta-hero__foto,
.proposta-hero__slide.is-uscente .proposta-hero__foto {
  animation: proposta-zoom calc(var(--durata) + 2 * var(--dissolvenza)) ease-out both;
}
@keyframes proposta-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }

/* Velatura in basso, per leggere testo e comandi su qualsiasi foto */
.proposta-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .26) 30%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}

.proposta-hero__testo {
  position: absolute;
  z-index: 2;
  left: var(--margine);
  right: var(--margine);
  bottom: calc(var(--margine) + 52px);
  max-width: 36rem;
}
.proposta-hero__slide.is-attiva .proposta-hero__testo {
  animation: proposta-testo 1s cubic-bezier(.2, .7, .2, 1) calc(var(--dissolvenza) * .3) both;
}
@keyframes proposta-testo { from { opacity: 0; transform: translateY(18px); } }
.proposta-hero .proposta-hero__numero {
  margin: 0 0 .9rem;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .32em;
  color: rgba(255, 255, 255, .78);
}
.proposta-hero .proposta-hero__titolo {
  margin: 0 0 1.4rem;
  font-family: inherit;
  /* !important: lo script "responsive typography" di Avada ricalcola i titoli
     sotto i 1000px e qui li porterebbe a 16px */
  font-size: clamp(34px, 5.2vw, 76px) !important;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.proposta-hero .proposta-hero__link {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding-bottom: .4em;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  color: #fff !important;  /* il tema colora i link (e la freccia) con il suo grigio scuro */
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap .3s ease, border-color .3s ease;
}
.proposta-hero .proposta-hero__link::after { content: "\2192"; letter-spacing: 0; color: inherit !important; }
.proposta-hero .proposta-hero__link:hover,
.proposta-hero .proposta-hero__link:focus-visible { gap: 1.2em; border-color: #fff; }

/* Comandi: frecce, barre di avanzamento (una per categoria), pausa */
.proposta-hero__comandi {
  position: absolute;
  z-index: 3;
  left: var(--margine);
  bottom: var(--margine);
  display: flex;
  align-items: center;
  gap: 4px;
}
.proposta-hero .proposta-hero__comandi button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  opacity: .85;
  cursor: pointer;
  box-shadow: none;
}
.proposta-hero .proposta-hero__comandi button:hover { opacity: 1; }
.proposta-hero .proposta-hero__comandi button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.proposta-hero__comandi svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.proposta-hero__pausa .icona-play { fill: currentColor; stroke: none; display: none; }
.proposta-hero__pausa.is-ferma .icona-play { display: block; }
.proposta-hero__pausa.is-ferma .icona-pausa { display: none; }
.proposta-hero__punti { display: flex; }
.proposta-hero .proposta-hero__comandi .proposta-hero__punto {
  position: relative;
  width: 40px;
  border-radius: 0;
}
.proposta-hero__punto::before,
.proposta-hero__punto::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}
.proposta-hero__punto::before { background: rgba(255, 255, 255, .35); }
.proposta-hero__punto::after {
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
/* La tacca dell'immagine visibile è bianca piena, subito */
.proposta-hero__punto[aria-current="true"]::after { transform: scaleX(1); }
.proposta-hero.is-in-pausa .proposta-hero__foto { animation-play-state: paused; }

/* Sul telefono si scorre col dito: le frecce non servono */
@media (max-width: 600px) {
  .proposta-hero .proposta-hero__comandi .proposta-hero__freccia { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .proposta-hero__slide.is-attiva { transition-duration: 1ms; }
  .proposta-hero .proposta-hero__foto,
  .proposta-hero .proposta-hero__testo { animation: none !important; }
}

/* Quadro delle collezioni (costruito dallo script JS al posto dei 5 link alle
   categorie): Sculptural Staircases al centro e più grande, le altre quattro
   agli angoli. Da bordo a bordo, alto quanto lo schermo meno il menu fisso. */
.home .proposta-quadro-ospite { display: none !important; }

.proposta-quadro {
  --spazio: clamp(4px, .6vw, 10px);
  --rientro: clamp(14px, 2vw, 30px);
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "alto-sx  centro alto-dx"
    "basso-sx centro basso-dx";
  gap: var(--spazio);
  box-sizing: border-box;
  width: var(--proposta-pagina, 100vw);
  height: calc(100vh - var(--proposta-menu-fisso, 0px));
  height: calc(100svh - var(--proposta-menu-fisso, 0px));
  margin: 25px 0 0 calc(50% - var(--proposta-pagina, 100vw) / 2);
  padding: var(--spazio);
  background: #fff;
  font-family: var(--awb-typography1-font-family, "Work Sans", Arial, sans-serif);
}
/* Schermi verticali (telefono, tablet): due colonne, Sculptural a tutta
   larghezza nella fascia centrale, gli altri quattro sopra e sotto */
@media (max-aspect-ratio: 1/1) {
  .proposta-quadro {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1.3fr 1fr;
    grid-template-areas:
      "alto-sx  alto-dx"
      "centro   centro"
      "basso-sx basso-dx";
  }
}
.proposta-quadro__riquadro[data-posizione="centro"]   { grid-area: centro; }
.proposta-quadro__riquadro[data-posizione="alto-sx"]  { grid-area: alto-sx; }
.proposta-quadro__riquadro[data-posizione="alto-dx"]  { grid-area: alto-dx; }
.proposta-quadro__riquadro[data-posizione="basso-sx"] { grid-area: basso-sx; }
.proposta-quadro__riquadro[data-posizione="basso-dx"] { grid-area: basso-dx; }

.proposta-quadro .proposta-quadro__riquadro {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #1a1a1a;
  color: #fff !important;  /* il tema colora i link con il suo grigio scuro */
  text-decoration: none;
}
.proposta-quadro .proposta-quadro__riquadro:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* Le foto di ogni riquadro, una sopra l'altra: si vede quella "is-visibile" */
.proposta-quadro .proposta-quadro__foto {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.proposta-quadro .proposta-quadro__foto.is-visibile { opacity: 1; }
.proposta-quadro__riquadro:hover .proposta-quadro__foto { transform: scale(1.04); }

/* Velatura in basso, per leggere il nome su qualsiasi foto */
.proposta-quadro__riquadro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .32) 36%, rgba(0, 0, 0, 0) 64%);
  pointer-events: none;
  transition: background-color .4s ease;
}
.proposta-quadro__riquadro:hover::after { background-color: rgba(0, 0, 0, .12); }

.proposta-quadro__testo {
  position: absolute;
  z-index: 2;
  left: var(--rientro);
  right: var(--rientro);
  bottom: var(--rientro);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
}
.proposta-quadro__nome {
  font-size: clamp(17px, 1.7vw, 26px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}
.proposta-quadro .proposta-quadro__invito {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding-bottom: .4em;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: gap .3s ease, border-color .3s ease, opacity .3s ease;
}
.proposta-quadro .proposta-quadro__invito::after { content: "\2192"; color: inherit !important; letter-spacing: 0; }
.proposta-quadro__riquadro:hover .proposta-quadro__invito,
.proposta-quadro__riquadro:focus-visible .proposta-quadro__invito { gap: 1.2em; border-color: #fff; }
/* Con il mouse, negli angoli l'invito compare al passaggio; sugli schermi
   touch resta sempre visibile */
@media (hover: hover) {
  .proposta-quadro__riquadro:not([data-posizione="centro"]) .proposta-quadro__invito { opacity: 0; }
  .proposta-quadro__riquadro:hover .proposta-quadro__invito,
  .proposta-quadro__riquadro:focus-visible .proposta-quadro__invito { opacity: 1; }
}

/* Il riquadro centrale è in risalto: nome grande come nell'apertura */
.proposta-quadro__riquadro[data-posizione="centro"] { --rientro: clamp(20px, 3vw, 48px); }
.proposta-quadro__riquadro[data-posizione="centro"] .proposta-quadro__nome {
  font-size: clamp(30px, 3.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.proposta-quadro__riquadro[data-posizione="centro"] .proposta-quadro__invito { font-size: 13px; }

/* Sul telefono i riquadri sono piccoli: nomi e invito più compatti */
@media (max-width: 600px) {
  .proposta-quadro { --rientro: 12px; }
  .proposta-quadro__testo { gap: .6rem; }
  .proposta-quadro .proposta-quadro__invito { font-size: 10px; letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .proposta-quadro .proposta-quadro__foto { transition-duration: 1ms; }
  .proposta-quadro__riquadro:hover .proposta-quadro__foto { transform: none; }
}