/* ==========================================================================
   Feedback, recenzii și mențiuni
   Trei componente, cu trei roluri diferite.

   Recenziile sunt evaluările lăsate pe platformele de podcast și de cursuri.
   Nota și numărul total stau deasupra, ca sursa să fie clară înainte de
   citate.

   Mențiunile din media și social sunt capturi ale unor comentarii publicate
   din proprie inițiativă, pe contul autorului. Rolul lor e să dovedească,
   nu să convingă: fiecare arată platforma, data și drumul spre original,
   iar captura rămâne neretușată.

   Testimonialele de training sunt texte introduse în platformă, de la
   oameni care au participat la programe, cu nume, funcție și companie.
   ========================================================================== */

/* ==========================================================================
   1. Recenzii
   ========================================================================== */

.reviews {
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}
@media (min-width: 768px) {
  .reviews { padding: var(--sp-6); }
}

/* Unde se ascultă și unde se urmărește — rândul de deasupra notei */
.reviews__channels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: var(--hairline);
}
.reviews__channel-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.reviews__channel-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--profunzime);
}

/* Platformele se scriu cu text, nu cu logo: logo-urile se schimbă des și nu
   sunt ale noastre. */
.channel-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--liniste);
  border-radius: var(--r-full);
  background: var(--prezenta);
  color: var(--profunzime);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease);
}
.channel-pill i { font-size: 16px; line-height: 0; color: var(--impuls); }
.channel-pill:hover { border-color: var(--impuls); color: var(--impuls-text); }
.channel-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.reviews__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-5);
}
.reviews__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
  color: var(--profunzime);
}
.reviews__count { font-size: var(--fs-sm); color: var(--reflectie); }

/* Stelele sunt decorative: nota se citește din text. */
.stars { display: inline-flex; gap: 2px; color: var(--impuls); }
.stars i { font-size: 13px; line-height: 0; }
.stars--lg i { font-size: 18px; }

.reviews__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Fișe pe fundal neutru, în interiorul suprafeței albe. Pe acest fundal
   textul secundar coboară o treaptă, ca să rămână peste pragul de contrast. */
.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--profunzime-wash);
  --reflectie: #6E695E;
}
[data-theme="dark"] .review { --reflectie: #ABA396; }

.review__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.review__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--profunzime);
}
.review__head .stars { flex: none; margin-top: 4px; }

.review__text {
  margin: 0;
  max-width: none;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--reflectie);
}

/* Cu JavaScript, textul se taie la patru rânduri, ca fișele din rând să aibă
   aceeași înălțime, iar butonul de extindere apare doar unde textul chiar e
   tăiat. Fără JavaScript, textul rămâne întreg: nimic nu devine inaccesibil. */
.js .review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.js .review.is-expanded .review__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

.review__more {
  align-self: flex-start;
  margin-top: auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--impuls-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.review__more:focus-visible {
  outline: 2px solid var(--impuls);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   2. Mențiuni din media și social
   ========================================================================== */

/* Rezumatul surselor, deasupra capturilor: câte mențiuni, de pe câte
   platforme. Spune dintr-o privire că nu vin dintr-un singur loc. */
.proof-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--reflectie);
}
.proof-summary i { font-size: 16px; line-height: 0; color: var(--impuls); }
.proof-summary b { font-family: var(--font-display); font-weight: 600; color: var(--profunzime); }

/* Coloane care curg: capturile au înălțimi diferite, iar tăierea lor la o
   înălțime comună ar ascunde exact detaliile care le fac credibile. */
.proof-wall { column-count: 1; column-gap: var(--gutter); }
@media (min-width: 768px) { .proof-wall { column-count: 2; } }
@media (min-width: 1200px) { .proof-wall { column-count: 3; } }
.proof-wall > * { break-inside: avoid; margin: 0 0 var(--gutter); }

.proof {
  display: flex;
  flex-direction: column;
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Captura stă într-o ramă, pe alb în ambele teme: e imaginea unei alte
   interfețe, nu o suprafață a sistemului, deci nu se recolorează și nu se
   decupează. */
.proof__shot {
  margin: var(--sp-3) var(--sp-3) 0;
  border: 1px solid var(--liniste);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #FFFFFF;
}
.proof__shot img { display: block; width: 100%; height: auto; }

.proof__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
}
.proof__source {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--profunzime);
}
.proof__source i { font-size: 16px; line-height: 0; color: var(--impuls); }
.proof__date { font-size: var(--fs-xs); color: var(--reflectie); }

.proof__link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--impuls-text);
  text-decoration: none;
}
.proof__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.proof__link i { font-size: 12px; line-height: 0; }
.proof__link:focus-visible {
  outline: 2px solid var(--impuls);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Recomandare evidențiată
   O singură recomandare, scoasă în față — pe pagina unui program, lângă
   formularul de înscriere. Nu se folosește în serie.
   ========================================================================== */

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6);
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.testimonial__mark { font-size: 22px; line-height: 0; color: var(--impuls); }
.testimonial__quote { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--profunzime); }
.testimonial__quote p { margin: 0 0 var(--sp-3); max-width: none; }
.testimonial__quote p:last-child { margin-bottom: 0; }

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: var(--hairline);
}
.testimonial__author .avatar { width: 44px; height: 44px; }
.testimonial__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--profunzime);
  line-height: 1.3;
}
.testimonial__role { display: block; font-size: var(--fs-xs); color: var(--reflectie); line-height: 1.4; }
.testimonial__org { color: var(--impuls-text); font-weight: 600; }

.testimonial--featured {
  background: var(--surface-invers);
  color: var(--on-invers);
}
.testimonial--featured .testimonial__quote { color: var(--on-invers); font-size: var(--fs-lead); line-height: 1.55; }
.testimonial--featured .testimonial__mark { color: var(--implinire); }
.testimonial--featured .testimonial__name { color: var(--on-invers); }
.testimonial--featured .testimonial__role { color: rgba(255, 255, 255, .7); }
.testimonial--featured .testimonial__org { color: var(--implinire); }
.testimonial--featured .testimonial__author { border-top-color: rgba(255, 255, 255, .14); }

/* ==========================================================================
   Comentariu ca text
   Varianta de rezervă pentru o mențiune fără captură — de pildă un
   comentariu citat dintr-un articol. Bula cu colț tăiat spune că e o
   conversație, nu o referință solicitată.
   ========================================================================== */

.comment {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  background: var(--claritate);
  border: 1px solid var(--liniste);
  border-radius: var(--r-lg);
  border-top-left-radius: var(--r-sm);
}
.comment__head { display: flex; align-items: center; gap: var(--sp-3); }
.comment__head .avatar { width: 40px; height: 40px; }
.comment__who { display: flex; flex-direction: column; min-width: 0; }
.comment__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--profunzime);
  line-height: 1.3;
}
.comment__when { font-size: var(--fs-xs); color: var(--reflectie); }
.comment__source {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--reflectie);
  white-space: nowrap;
}
.comment__source i { font-size: 14px; line-height: 0; }
.comment__text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--profunzime); max-width: none; }

/* --- Rezumat de reputație ---------------------------------------------------- */
.rating { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rating__stars { display: inline-flex; gap: 2px; color: var(--implinire-text); }
.rating__stars i { font-size: 18px; line-height: 0; }
.rating__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--profunzime); }
.rating__count { font-size: var(--fs-sm); color: var(--reflectie); }
.band--profunzime .rating__value { color: var(--on-invers); }
.band--profunzime .rating__count { color: rgba(255, 255, 255, .7); }
.band--profunzime .rating__stars { color: var(--implinire); }

/* --- Zidul de testimoniale de training -------------------------------------
   Testimonialele au lungimi diferite, deci și înălțimi diferite. Coloanele
   care curg păstrează ritmul fără să taie sau să întindă niciun citat. */
.testimonial-wall {
  column-count: 1;
  column-gap: var(--gutter);
}
@media (min-width: 768px) { .testimonial-wall { column-count: 2; } }
@media (min-width: 1200px) { .testimonial-wall { column-count: 3; } }

.testimonial-wall > * {
  break-inside: avoid;
  margin-bottom: var(--gutter);
}
.testimonial-wall .testimonial { height: auto; }