/* =======================
   Testimonials Component 
   * Versione: 3.2
   ====================== */

.testimonials {
  padding: var(--space-xl) 0;
  background-color: var(--color-white);
}

.testimonials__header,
.testimonials .section-intro {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.testimonials__subtitle {
  color: var(--color-gray-500);
  margin-top: .25rem;
}

/* ==== Slider (fallback scroll-snap) ==== */
.testimonials-slider{
  --slides: 1;                       /* mobile default (JS usa gli stessi breakpoint) */
  --gap: var(--space-md);
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

  /* Fallback senza JS: scroll orizzontale nativo */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonials-slider::-webkit-scrollbar { display: none; }

.testimonials-track{
  display: flex;
  gap: var(--gap);
}

.testimonial-slide{
  flex: 0 0 auto;
  min-width: calc((100% - (var(--gap) * (var(--slides) - 1))) / var(--slides));
  scroll-snap-align: start;
  padding-block: .25rem;
}

/* JS attivo: trasformiamo in slider con transform, niente scroll nativo */
.testimonials-slider.is-enhanced{
  overflow: hidden;
  scroll-snap-type: none;
}
.testimonials-slider.is-enhanced .testimonials-track{
  will-change: transform;
  transition: transform 400ms ease;
}

/* === Card ==== */
.testimonial-card{
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

.testimonial-content{
  font-style: italic;
  color: var(--color-gray-600);
  flex-grow: 1;
  margin: 0;
}

.testimonial-author {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.testimonial-author-link .fa-linkedin {
    font-size: 1.8em; /* Aumentiamo la dimensione */
    color: #0A66C2; /* Colore ufficiale di LinkedIn */
    margin-right: 0.75rem;
    transition: transform 0.2s ease;
}

.testimonial-author-link:hover .fa-linkedin {
    transform: scale(1.1); /* Leggero ingrandimento all'hover */
}

/* ==== Autore  ==== */
.author-linkedin-icon { /* Icona LinkedIn tonda accanto ai dati autore (se presente nel markup) */
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--color-gray-100); 
  margin-right: var(--space-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.author-linkedin-icon .fa-linkedin {
    font-size: 22px;
    color: var(--color-linkedin);
}

.testimonial-author-link:hover .author-linkedin-icon {
    transform: scale(1.1);
    background-color: var(--color-gray-200);
}

/* Wrapper testo autore */
.author-info h4{
  margin: 0;
  color: var(--color-primary);
}
.author-info p{
  margin: 0;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Link/stato autore (quando cliccabile) */
.testimonial-author-link{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-md);
  text-decoration: none;
}
.testimonial-author-link:hover .author-name{ text-decoration: underline; }
.testimonial-author-static{ display:flex; align-items:center; gap:.5rem; }

.author-name{ font-weight: 700; color: var(--color-text); }
.author-role{ color: var(--color-gray-500); font-size: .95rem; }

/* ==== Controls (exact legacy selectors) === */
.slider-controls{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Frecce: supporta sia .slider-prev/.slider-next sia .slider-arrow(.prev/.next) */
.slider-prev, .slider-next,
.slider-arrow{
  background: none;
  border: 1px solid var(--color-gray-300);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  color: var(--color-primary);
}
.slider-prev:hover, .slider-next:hover,
.slider-arrow:hover{
  background-color: var(--color-gray-300);
  color: #0b1220;
}
.slider-prev:disabled, .slider-next:disabled,
.slider-arrow:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.slider-prev:focus-visible, .slider-next:focus-visible,
.slider-arrow:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Dots */
.slider-dots{
  display: flex;
  gap: var(--space-sm);
}
.slider-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-gray-300);
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.slider-dot.active,
.slider-dot[aria-current="true"]{
  background-color: var(--color-primary);
}
.slider-dot:focus-visible{ outline:none; box-shadow: var(--focus-ring); }

/* === Responsive: #slide per viewport === */
@media (min-width: 768px){  .testimonials-slider{ --slides: 2; } }
@media (min-width: 1024px){ .testimonials-slider{ --slides: 3; } }

/* ==== Dark mode ==== */
@media (prefers-color-scheme: dark){
  .testimonials{ background: var(--color-gray-100); }
  .testimonial-card{ background: var(--color-gray-200); box-shadow: 0 1px 3px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.25); }
  .testimonial-content{ color: var(--color-gray-600); }
  .author-linkedin-icon{ background-color: var(--color-gray-300); color: var(--color-text); }
  .slider-prev, .slider-next, .slider-arrow{ border-color: var(--color-gray-400); color: var(--color-gray-100); }
  .slider-prev:hover, .slider-next:hover, .slider-arrow:hover{ background-color: var(--color-gray-300); color: var(--color-gray-900); }
  .slider-dot{ background-color: var(--color-gray-400); }
}

/* ==== Reduced motion ==== */
@media (prefers-reduced-motion: reduce){
  .testimonials-slider.is-enhanced .testimonials-track{ transition: none; }
}

/* Reveal usato in homepage: visibili by default, animiamo solo quando serve */
.will-animate { opacity: 0; }
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px){
  .will-animate { opacity: 1 !important; }
  .animate-fade-in { animation: none !important; }
}

/* iOS/WebKit fallback: torna allo scroll-snap se transform crea glitch */
@supports (-webkit-touch-callout: none) {
  .testimonials-slider.is-enhanced {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .testimonials-slider.is-enhanced .testimonials-track {
    transform: none !important;
    transition: none !important;
  }
}