/* === Carosello testimonianze === */

.testim{
  padding: 120px 48px;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}

.testim-inner{
  max-width: 1300px;
  margin: 0 auto;
}

.testim-track-wrap{
  position: relative;
  margin-top: 60px;
  /* In stato "non-scrollable" l'overflow resta visibile: il track è un
     semplice flex con justify-content: center e le card stanno li' tutte,
     nessuno scroll. In stato scrollable (classe is-scrollable aggiunta dal
     JS) diventa il contenitore di scroll orizzontale con scroll-snap. */
}
.testim-track-wrap.is-scrollable{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  cursor: grab;
  /* Spazio inferiore per non clippare la box-shadow delle card (che si
     estende ~30-40px verso il basso). L'overflow-y deve restare hidden
     perché overflow-x:auto lo forzerebbe comunque a non essere "visible". */
  padding-bottom: 50px;
  margin-bottom: -20px;
  /* Nasconde la scrollbar: Firefox */
  scrollbar-width: none;
  /* Momentum scroll su iOS */
  -webkit-overflow-scrolling: touch;
  /* Permette lo swipe orizzontale (per il carosello) e quello verticale
     (per lo scroll della pagina), oltre a pinch-zoom per accessibilità.
     Senza pan-x esplicito, il browser blocca lo swipe orizzontale e il
     carosello non risponde al dito. */
  touch-action: pan-x pan-y pinch-zoom;
}
/* Nasconde la scrollbar: WebKit/Blink */
.testim-track-wrap.is-scrollable::-webkit-scrollbar{ display: none; }
.testim-track-wrap.is-scrollable.is-dragging{ cursor: grabbing; }

/* Sospensione temporanea dello scroll-snap: usata dal JS durante gli scroll
   programmatic (next/prev/autoplay) e durante il salto silenzioso clone→
   originale. Senza sospensione, lo snap mandatory interferisce con lo
   smooth-scroll programmatic (lo ferma a metà strada) e con l'assegnazione
   diretta di scrollLeft (la ri-snappa indietro). Lo snap viene riabilitato
   al settle, così resta attivo per i gesti utente (swipe touch, drag mouse). */
.testim-track-wrap.is-snap-suspended{
  scroll-snap-type: none;
}

.testim-track{
  display: flex;
  gap: 32px;
  justify-content: center;
  user-select: none;
}
/* In modalità carosello il track si estende oltre la larghezza del wrap:
   le card partono da sinistra (niente centraggio) e il contenuto totale
   è più largo del wrap, quindi scrolla. Il JS aggiunge spaziatori (div
   data-spacer) all'inizio e alla fine del track per permettere al primo
   e all'ultimo slide di essere centrati nel viewport (il padding sul flex
   container non funzionerebbe: alcuni browser non lo includono nel
   scrollWidth). */
.testim-track-wrap.is-scrollable .testim-track{
  justify-content: flex-start;
}

.testim-slide{
  flex: 0 0 420px;
  max-width: 90vw;
  box-sizing: border-box;
  /* Snap al centro: ogni slide può essere centrato nel viewport. Su 'start'
     gli ultimi slide non sarebbero raggiungibili (scrollLeft massimo =
     scrollWidth - clientWidth, che non basta a portarli al bordo sinistro).
     Con 'center' qualsiasi slide può sempre raggiungere il centro, quindi
     lo snap funziona uniformemente per tutti. */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.testim-card{
  background: var(--bg);
  padding: 48px 40px;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(26, 29, 43, 0.08);
  border-top: 3px solid var(--gold);
  position: relative;
  height: 100%;
  box-sizing: border-box;
}
.testim-card::before{
  content: '\201C';
  position: absolute;
  top: -8px; left: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 100px;
  color: var(--gold);
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
}

.testim-text{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 1.8vw, 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 32px;
  padding-top: 28px;
  position: relative;
  z-index: 1;
}

/* --- Isolamento emoji in contesti corsivi --- */
/* Usato dal wrapper generato da h_no_italic_emoji() in content.php: le
   emoji dentro .testim-text (e qualunque futuro contenitore italic) non
   devono essere inclinate né dall'italic ereditato né dall'oblique sintetico. */
.no-italic{
  font-style: normal;
  display: inline-block;
}

.testim-meta{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.testim-meta-dot{
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.testim-meta-text{
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}
.testim-meta-text strong{
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.testim-meta-year{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold);
  margin-left: 6px;
}

/* --- Controlli carosello --- */
.testim-controls{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
}

.testim-arrows{
  display: flex;
  gap: 12px;
}
.testim-arrow{
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.testim-arrow:hover{
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.testim-arrow svg{ width: 18px; height: 18px; }

/* --- Stato vuoto --- */
.testim-empty{
  max-width: 600px;
  margin: 40px auto 0;
  padding: 40px;
  text-align: center;
  background: var(--bg);
  border-radius: 8px;
  border: 1px dashed var(--line);
}
.testim-empty p{
  color: var(--ink-soft);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
}

@media (max-width: 900px){
  .testim{ padding: 80px 16px; }
  .testim-card{ padding: 32px 24px; }
  .testim-card::before{ top: -6px; left: 12px; font-size: 70px; }
  .testim-text{
    font-size: 18px;
    padding-top: 18px;
    margin-bottom: 24px;
  }
  /* Slide più stretto del viewport: lascia intravedere la card successiva
     a destra, rendendo visivamente evidente che il blocco scorre. */
  .testim-slide{ flex: 0 0 78vw; max-width: 340px; }
  .testim-track{ gap: 16px; }
  .testim-track-wrap{ margin-top: 44px; }
  .testim-controls{ margin-top: 24px; }
  .testim-arrow{ width: 42px; height: 42px; }
}