/* ===== FEEDBACK — sezione fissa, decor SVG, PNG stilizzate, mobile-first ===== */





.feedback-section{


  position: relative;


  padding: clamp(60px, 9vh, 120px) 5vw;


  overflow: hidden;


}





.feedback-overlay{


  position: absolute;


  inset: 0;


  background: #35392a;     /* oliva */


  opacity: 0.96;


  z-index: 0;


  pointer-events: none;


}





.feedback-container{


  position: relative;


  z-index: 2;


  max-width: 1100px;


  margin: 0 auto;


  text-align: center;


}





/* Titolo coerente con il sito */


.feedback-title{


  font-family: "Playfair Display", serif;


  font-weight: 700;


  font-size: clamp(1.8rem, 4vw, 2.6rem);


  line-height: 1.15;


  color: #fffdf7;


  margin: 0 0 2rem 0;





  opacity: 0;


  transform: translateY(12px);


  transition: opacity .6s ease-out, transform .6s ease-out;


}


.feedback-title.is-inview{ opacity:1; transform:none; }





/* ===== Decorazioni SVG (background fisso, leggero) ===== */


.feedback-decor{


  position: absolute;


  inset: 0;


  z-index: 1;                 /* sopra overlay, sotto i contenuti */


  pointer-events: none;


}


.feedback-decor svg{


  position: absolute;


  stroke: #fffdf71f;          /* avorio molto tenue */


  stroke-width: 2;


  fill: none;


  opacity: 0;


  transform: translateY(8px);


  transition: opacity .8s ease-out, transform .8s ease-out;


}


.decor-swoosh { top: 8%; left: -5%; width: 60%; }


.decor-dots   { bottom: 6%; right: -2%; width: 40%; }


.decor-swoosh path { stroke-linecap: round; }


.decor-dots circle { fill: #fffdf71f; stroke: none; }


.feedback-decor.is-inview svg{ opacity: 1; transform: none; }





/* ===== Slider con altezza STABILE (niente salti) ===== */


.feedback-slider{


  position: relative;


  margin: 0 auto 1.5rem;


  min-height: 240px;                /* fallback safe per mobile */


  height: var(--slider-h, auto);    /* impostata via JS */


  visibility: hidden;               /* evita flash prima del calcolo */


}


.feedback-slider.is-ready{ visibility: visible; }





/* Ogni citazione è un layer assoluto -> cross-fade */


.feedback-quote{


  position: absolute;


  inset: 0;


  display: block;


  padding: 0;


  color: #fffdf7;


  font-size: clamp(1rem, 2.2vw, 1.15rem);


  line-height: 1.7;


  text-wrap: pretty;





  opacity: 0;


  transform: translateY(8px);


  transition: opacity .45s ease-out, transform .45s ease-out;


  pointer-events: none;


}


.feedback-quote.active{


  opacity: 1;


  transform: none;


  pointer-events: auto;


}


.feedback-quote p{ margin: 0 0 12px; }


.feedback-quote .author{


  display: inline-block;


  margin-top: 8px;


  font-weight: 600;


  color: #ffffffcc;


}





/* ===== PNG stilizzate per recensione ===== */


.review-illustration{


  width: clamp(120px, 20vw, 200px);         /* dimensione responsive */


  aspect-ratio: var(--review-ratio, 1);     /* 1 quadrata | 4/5 | 3/4 ecc. */


  border-radius: var(--review-radius, 50%);


  margin: 0 auto 14px;





  /* immagine + glow leggero */


  background:


    radial-gradient(ellipse at 65% 35%, rgba(255,253,247,.12) 0%, rgba(255,253,247,.06) 55%, transparent 72%),


    var(--review-img, none);


  background-size: cover;


  background-position: center;


  background-repeat: no-repeat;





  /* bordo morbido & vignetta per integrare PNG */


  box-shadow: 0 6px 28px rgba(0,0,0,.20), 0 0 0 1px rgba(255,253,247,.18) inset;


  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);


  mask-image: radial-gradient(circle at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);





  opacity: 0;


  transform: translateY(8px);


  transition: opacity .45s ease-out, transform .45s ease-out;


}


.feedback-quote.active .review-illustration{


  opacity: 1;


  transform: none;


}





/* Navigazione */


.feedback-nav{


  display: flex; gap: 14px; justify-content: center; margin-top: 12px;


}


.feedback-nav .prev, .feedback-nav .next{


  appearance:none; border:1px solid #fffdf7; background:transparent; color:#fffdf7;


  padding:8px 12px; border-radius:999px; font-size:1rem; cursor:pointer;


  transition: background .2s ease, color .2s ease, transform .1s ease;


}


.feedback-nav .prev:hover, .feedback-nav .next:hover{ background:#fffdf7; color:#35392a; }


.feedback-nav .prev:active, .feedback-nav .next:active{ transform: translateY(1px); }





/* Mobile */


@media (max-width: 768px){


  .feedback-section{ padding: 72px 5vw; }


  .feedback-slider{ max-width: 100%; }


}





/* Accessibilità */


@media (prefers-reduced-motion: reduce){


  .feedback-title, .feedback-quote, .feedback-decor svg{ transition:none; transform:none; }


}





/* ===== FEEDBACK — MOBILE STABILIZER (≤768px) ===== */


@media (max-width: 768px){





  /* Contenitore sezione: niente bleed, contenuti sopra, decorazioni sotto */


  .feedback-section{


    isolation: isolate;


    padding: clamp(36px, 7.5vh, 64px) 5vw;


    overflow-x: clip; /* elimina scroll laterale senza tagliare in verticale */


  }


  .feedback-section .feedback-overlay,


  .feedback-section .feedback-decor{


    position: absolute; inset: 0; z-index: 0; pointer-events: none;


  }


  .feedback-section > *:not(.feedback-overlay):not(.feedback-decor){


    position: relative; z-index: 1;


  }





  /* Griglia universale: forza UNA colonna, righe auto */


  .feedback-grid,


  .feedback-list,


  .feedback-cards,


  .feedback-wrapper{


    display: grid !important;


    grid-template-columns: 1fr !important;


    grid-auto-rows: auto !important;


    align-items: start !important;


    gap: clamp(12px, 3.5vw, 18px);


    width: 100%;


    max-width: 780px;


    margin-inline: auto;


  }





  /* Card sbloccate: niente height/min/max, niente clipping */


  .feedback-card{


    height: auto !important;


    min-height: 0 !important;


    max-height: none !important;


    overflow: visible !important;


    transform: none !important; /* evita "spazio fantasma" */


    will-change: auto !important;





    padding: clamp(12px, 4vw, 18px);


    border-radius: 14px;


    background: var(--glass, rgba(255,255,255,0.06)); /* se esiste */


    backdrop-filter: none; /* non cambia estetica desktop */


  }





  /* Tipografia leggibile, senza toccare il font-family del progetto */


  .feedback-card h3,


  .feedback-title{


    font-size: clamp(18px, 5vw, 22px);


    line-height: 1.25;


    margin: 0 0 6px;


  }


  .feedback-meta{


    font-size: clamp(12px, 3.6vw, 14px);


    opacity: .85;


    margin-bottom: 6px;


  }





  /* Testi: rimuove clamp/box che accorciano le recensioni */


  .feedback-text,


  .feedback-quote,


  .feedback-card p{


    display: block !important;


    white-space: normal !important;


    overflow: visible !important;


    text-overflow: clip !important;


    -webkit-line-clamp: initial !important;


    line-clamp: initial !important;


    -webkit-box-orient: initial !important;


  }





  /* Media/avatar */


  .feedback-card img{


    width: 64px; height: 64px;


    max-width: 20vw; max-height: 20vw;


    object-fit: cover; border-radius: 50%;


  }





  /* Decorazioni SVG contenute, non invadenti */


  .feedback-decor svg,


  .feedback-decor .decor-swoosh,


  .feedback-decor .decor-dots{


    position: absolute;


    left: 50%; transform: translateX(-50%);


    width: min(120%, 760px);


    height: auto;


    opacity: .15; /* non copre i testi */


  }





  /* Hardening: impedisce rotture di layout */


  .feedback-section *{


    max-width: 100%;


    box-sizing: border-box;


    overflow-wrap: anywhere;


  }





  /* Rimuove eventuali translate inline che creano spazio vuoto */


  .feedback-section [style*="translate"],


  .feedback-section [style*="transform: translate"]{


    transform: none !important;


  }


}