/* ============================================================
   PAGE — REVIEWS
   ============================================================ */

/* ---------------- Rating summary ---------------- */
.rate{
  display:grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem,5vw,4.5rem);
  align-items:center;
  padding: clamp(1.6rem,4vw,3rem);
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-elev); box-shadow: var(--shadow-sm);
  position:relative; overflow:hidden;
}
@media (max-width:760px){ .rate{ grid-template-columns:1fr; text-align:center; justify-items:center; } }

.rate__score{ display:grid; justify-items:center; gap:.5rem; }
.rate__num{
  font-family:var(--f-display); font-weight:300;
  font-size: clamp(3.4rem,9vw,6rem); line-height:.9; color:var(--text);
}
.rate__num .out{ font-size:.34em; color:var(--text-mut); }
.rate__src{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-mut); }
.rate .stars svg{ width:19px; height:19px; }

.rate__bars{ display:grid; gap:.6rem; width:100%; }
.rate__bar{ display:grid; grid-template-columns: 46px 1fr 42px; gap:.9rem; align-items:center; }
.rate__bar .lbl,.rate__bar .val{
  font-size:var(--t-xs); color:var(--text-mut); letter-spacing:.1em;
}
.rate__bar .val{ text-align:right; }
.rate__bar .rail{ height:5px; border-radius:var(--r-pill); background:var(--surface-hi); overflow:hidden; }
.rate__bar .rail i{
  display:block; height:100%; border-radius:inherit;
  background: linear-gradient(90deg, var(--accent), var(--brand-marigold));
  width:0; transition: width 1.3s var(--e-out);
  transition-delay: calc(var(--i,0) * 110ms);
}
.rate.is-in .rate__bar .rail i{ width: var(--w, 0%); }

/* ---------------- Review cards ---------------- */
.rev-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: clamp(1rem,2vw,1.8rem);
  align-items:start;
}
@media (max-width:1000px){ .rev-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .rev-grid{ grid-template-columns:1fr; } }

.rev-card{
  padding: clamp(1.4rem,2.4vw,2rem);
  border:1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--bg-elev);
  display:grid; gap:.95rem; align-content:start; height:100%;
  grid-template-rows: auto 1fr auto auto;
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s;
}
.rev-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.rev-card__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.rev-card__q{
  font-family: var(--f-body); font-weight:350;
  font-size: var(--t-sm); line-height:1.72; color:var(--text-soft);
  max-width: 44ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8;
  overflow:hidden;
}
.rev-card.is-open .rev-card__q{ -webkit-line-clamp:unset; display:block; }

.rev-card__more{
  justify-self:start; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--f-body); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4rem;
  transition: gap .3s var(--e-out);
}
.rev-card__more:hover{ gap:.65rem; }
.rev-card__more[hidden]{ display:none; }
.rev-card__more i{
  font-style:normal; display:inline-block; transition: transform .35s var(--e-out);
}
.rev-card.is-open .rev-card__more i{ transform: rotate(180deg); }
.rev-card__who{
  display:flex; align-items:center; gap:.85rem;
  padding-top:1rem; border-top:1px solid var(--line-soft);
}
.rev-card__ava{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background: var(--accent-wash); border:1px solid var(--accent-soft);
  font-family:var(--f-display); font-size:var(--t-sm); color:var(--accent);
}
.rev-card__meta{ display:grid; gap:.15rem; }
.rev-card__meta .n{ font-size:var(--t-sm); font-weight:450; }
.rev-card__meta .d{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mut); }
.rev-card__src{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-mut); margin-left:auto;
}

/* ---------------- Leave a review CTA ---------------- */
.rev-cta{
  display:grid; gap:1.2rem; justify-items:center; text-align:center;
  padding: clamp(2rem,4vw,3.4rem);
  border:1px dashed var(--line-strong); border-radius: var(--r-lg);
}