/* =====================================================================
   reviews.css — Ressenyes de Google (secció testimonial)
   Dades: taula de Trustindex · Render: nostre (inc/reviews.php)
   Tot amb els tokens de marca: canviar-ne un canvia tot el lloc.
   ===================================================================== */

/* ---- Secció sencera ---- */
.passa-testimonial {
  width: 100%;
  background: var(--passa-bg-soft);
  padding: 0;
  margin: 0 !important;
}
.passa-testimonial > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 80px 30px;
}
.passa-testimonial .eyebrow { margin-bottom: 10px !important; }
.passa-testimonial .section-title { margin-bottom: 30px !important; }

.passa-reviews { width: 100%; }

/* ---- Resum: puntuació + total ---- */
.passa-reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 26px;
}
.passa-reviews__score {
  font-family: var(--passa-font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--passa-ink);
}
.passa-reviews__stars { color: var(--passa-accent); font-size: 18px; letter-spacing: 2px; }
.passa-reviews__total { font-size: 14px; color: var(--passa-text-2); }

/* ---- Pista del carrusel (mateix patró que els cursos) ---- */
.passa-reviews-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 0 10px;
  scrollbar-width: none;
}
.passa-reviews-track::-webkit-scrollbar { display: none; }

/* ---- Targeta de ressenya ---- */
.review {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--passa-bg-card);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  padding: 24px;
}
.review > * { margin: 0 !important; }

.review__stars {
  color: var(--passa-accent);
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 12px !important;
}
.review__text {
  font-family: var(--passa-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--passa-text);
  /* Es retallen a 6 línies perquè totes les targetes mesurin igual: les
     ressenyes van de 68 a 725 caràcters i sense això el carrusel ballaria. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* L'autor sempre a baix, alineat entre targetes. */
.review__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto !important;
  padding-top: 18px;
}
.review__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.review__name { font-size: 14px; font-weight: 600; color: var(--passa-ink); }
.review__date { font-size: 12px; color: var(--passa-text-2); margin-left: auto; }

.passa-reviews-empty {
  padding: 16px 18px;
  background: var(--passa-purple-bg);
  border-radius: var(--passa-radius);
  font-size: 14px;
}

/* ====================================================================== */
@media (max-width: 1023px) {
  .review { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 1023px) {
  .passa-testimonial > .wp-block-group__inner-container { padding: 64px 30px; }
}
@media (max-width: 768px) {
  .passa-testimonial > .wp-block-group__inner-container { padding: 52px 20px; }
  .passa-reviews-track { gap: 16px; }
  .review { flex-basis: 86%; padding: 20px; }
  .passa-reviews__score { font-size: 26px; }
}
@media (max-width: 480px) {
  /* A la targeta estreta, el nom i la data es partien tots dos en dues línies.
     La data baixa a la seva pròpia línia, alineada sota el nom: el nom de qui
     escriu importa més que la data, i així cap sencer. */
  .review__author { flex-wrap: wrap; }
  .review__name { flex: 1 1 auto; min-width: 0; }
  .review__date {
    width: 100%;
    margin-left: 46px;   /* amplada de l'avatar + la separació */
    margin-top: 2px;
  }
}