/* =========================================================================
   Shiv Shakti — the reviews page (/testimonials)

   Builds on the tokens in css/common.css and the page furniture in
   css/pages.css (.pg-hero, .pg-sec, .section-head, .cta-banner, .reveal).
   Nothing here is used by another page, so it is loaded only by this view.

   Pair with:  <link rel="stylesheet" href="/css/pages.css">
               <link rel="stylesheet" href="/css/page-banner.css">
               <link rel="stylesheet" href="/css/testimonials.css">
               <script src="/js/pages.js" defer></script>
               <script src="/js/testimonials.js" defer></script>
   ========================================================================= */

/* ===================== Score panel ===================== */
.rv-summary{
  display:grid; grid-template-columns:auto minmax(220px,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3.4vw,48px); align-items:center;
  padding:clamp(22px,3vw,34px);
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:0 24px 48px -34px rgba(58,10,17,.45);
}

.rv-score{text-align:center; min-width:150px;}
.rv-score > b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2.6rem,4.6vw,3.4rem); line-height:1; color:var(--maroon-700);
}
.rv-score small{display:block; margin-top:8px; font-size:.76rem; color:var(--ink-soft); line-height:1.6;}

.rv-stars{display:inline-flex; gap:3px; color:var(--gold-500); font-size:.82rem;}
.rv-stars.big{margin-top:10px; font-size:1.04rem;}
.rv-stars .fa-regular{color:rgba(169,121,31,.35);}

/* the 5 → 1 star bars */
.rv-bars{display:grid; gap:7px;}
.rv-bar{display:grid; grid-template-columns:auto minmax(0,1fr) 34px; align-items:center; gap:10px; font-size:.78rem;}
.rv-bar .n{color:var(--ink-soft); white-space:nowrap;}
.rv-bar .n i{font-size:.66rem; color:var(--gold-500);}
.rv-bar .track{height:7px; border-radius:999px; background:rgba(169,121,31,.16); overflow:hidden;}
.rv-bar .fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));
}
.rv-bar .c{text-align:right; color:#8a7461;}

/* the Google card on the right */
.rv-google{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:14px 16px; padding:clamp(16px,2vw,22px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
}
.rv-google .g-mark{
  width:46px; height:46px; display:grid; place-items:center;
  background:#fff; border-radius:50%; box-shadow:0 8px 18px -10px rgba(58,10,17,.5);
}
.rv-google b{display:block; font-family:var(--display); font-size:1.08rem; color:var(--ink);}
.rv-google .rv-stars{margin:4px 0 2px;}
.rv-google small{display:block; font-size:.76rem; color:var(--ink-soft); line-height:1.5;}
.rv-google .btn{grid-column:1/-1; justify-content:center;}
.rv-live{
  grid-column:1/-1; margin:0; font-size:.72rem; color:#6f8a74; text-align:center;
}
.rv-live i{color:#2f6b45; margin-right:5px;}

@media (max-width:1080px){
  .rv-summary{grid-template-columns:auto minmax(0,1fr); }
  .rv-google{grid-column:1/-1; grid-template-columns:auto minmax(0,1fr) auto;}
  .rv-google .btn{grid-column:auto;}
  .rv-live{grid-column:1/-1;}
}
@media (max-width:620px){
  .rv-summary{grid-template-columns:minmax(0,1fr); text-align:center;}
  .rv-google{grid-template-columns:auto minmax(0,1fr); text-align:left;}
  .rv-google .btn{grid-column:1/-1;}
}

/* ===================== Filters ===================== */
.rv-tools{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:26px;}
.rv-chips{display:flex; flex-wrap:wrap; gap:9px; flex:1; min-width:0;}
.rv-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--cream-050); color:var(--ink-soft);
  padding:9px 16px; border-radius:999px; font-size:.82rem; font-weight:600; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .3s;
}
.rv-chip i{font-size:.78rem; color:var(--gold-600); transition:color .25s;}
.rv-chip .n{
  font-size:.7rem; font-weight:700; color:#a99b8f;
  background:var(--paper); border-radius:999px; padding:1px 7px;
}
.rv-chip:hover{border-color:var(--gold-500); color:var(--maroon-700); transform:translateY(-2px);}
.rv-chip.is-on{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--cream-100);}
.rv-chip.is-on i{color:var(--gold-300);}
.rv-chip.is-on .n{background:rgba(255,255,255,.16); color:#f3e2b4;}

.rv-search{position:relative; flex:none; width:290px; max-width:100%;}
.rv-search > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#a08a72; font-size:.82rem;}
.rv-search input{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:11px 16px 11px 40px;
  font-family:inherit; font-size:.85rem; background:var(--paper); color:var(--ink);
}
.rv-search input:focus{border-color:var(--maroon-500); background:var(--cream-050); outline:none;}

/* ===================== Review cards ===================== */
.rv-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.rv-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:clamp(20px,2.2vw,26px);
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l);
  transition:transform .35s, box-shadow .35s, border-color .25s;
}
.rv-card::before{
  content:"”"; position:absolute; top:6px; right:18px;
  font-family:var(--serif); font-size:4.2rem; line-height:1; color:rgba(169,121,31,.16);
  pointer-events:none;
}
.rv-card:hover{transform:translateY(-4px); border-color:rgba(217,176,74,.7); box-shadow:0 26px 46px -30px rgba(58,10,17,.5);}
.rv-card[hidden]{display:none;}
.rv-card.is-google{background:#fff;}

.rv-top{display:flex; align-items:center; gap:12px;}
.rv-av{
  width:46px; height:46px; flex:none; overflow:hidden;
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(140deg,var(--maroon-700),var(--maroon-900));
  color:var(--gold-300); font-family:var(--display); font-size:.92rem; letter-spacing:.04em;
}
.rv-av img{width:100%; height:100%; object-fit:cover;}
.rv-who{min-width:0;}
.rv-who b{display:block; font-size:.95rem; color:var(--ink);}
.rv-who span{display:block; font-size:.76rem; color:var(--ink-soft);}
.rv-src{margin-left:auto; flex:none; display:grid; place-items:center; width:30px; height:30px; background:#fff; border:1px solid var(--line); border-radius:50%;}

.rv-card h3{margin:0; font-family:var(--display); font-size:1.02rem; color:var(--ink); line-height:1.35;}
.rv-quote{margin:0; font-size:.9rem; line-height:1.78; color:var(--ink-soft);}

.rv-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-size:.74rem; color:#8a7461;
}
.rv-tick{color:#2f6b45; font-weight:600;}
.rv-tick i{margin-right:4px;}
.rv-prod i{color:var(--gold-600); margin-right:4px;}
.rv-foot a{display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:var(--maroon-700); font-weight:600;}
.rv-foot a:hover{text-decoration:underline;}
.rv-foot a i{font-size:.66rem;}

.rv-empty{
  display:none; margin:34px auto 0; max-width:520px; text-align:center;
  font-size:.9rem; color:var(--ink-soft); line-height:1.7;
}
.rv-empty i{display:block; font-size:1.6rem; color:var(--gold-600); margin-bottom:12px;}
.rv-empty a{color:var(--maroon-700); font-weight:600; text-decoration:underline;}
.rv-empty.is-on{display:block;}

@media (max-width:760px){
  .rv-search{width:100%;}
  .rv-grid{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){
  .rv-card, .rv-chip{transition-duration:.01ms;}
}