/* =========================================================
   SN GOOGLE STYLE REVIEWS
   ========================================================= */

.sn-reviews{
  background: linear-gradient(180deg, rgba(14,143,58,.05), rgba(255,255,255,0));
}

/* Header */
.sn-revHead{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:20px;
  align-items:center;
  margin-bottom:20px;
}

/* Rating Card */
.sn-ratingCard{
  border:1px solid var(--sn-border);
  background:#fff;
  border-radius: var(--sn-r20);
  padding:16px;
  box-shadow: var(--sn-shadow);
  text-align:center;
}
.sn-ratingTop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:10px;
}
.sn-ratingScore{
  font-size:42px;
  font-weight:900;
  color:var(--sn-blue);
}
.sn-stars{
  color:#f7b104;
  font-size:18px;
}
.sn-stars.sm{ font-size:14px; }
.sn-ratingSub{
  font-size:13px;
  color:rgba(12,16,23,.65);
}

/* Slider */
.sn-reviewSlider{
  overflow:hidden;
}
.sn-reviewTrack{
  display:flex;
  gap:14px;
  animation: sn-slide 25s linear infinite;
}
@keyframes sn-slide{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Review Card */
.sn-reviewCard{
  min-width:320px;
  border:1px solid var(--sn-border);
  background:#fff;
  border-radius: var(--sn-r20);
  padding:16px;
  box-shadow: 0 12px 30px rgba(12,16,23,.08);
  transition: .3s ease;
}
.sn-reviewCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(12,16,23,.12);
}

/* Top Row */
.sn-reviewTop{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.sn-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(90deg,var(--sn-blue),var(--sn-orange));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
}
.sn-name{
  font-weight:900;
  font-size:14px;
}
.sn-verified{
  margin-left:auto;
  font-size:12px;
  color:var(--sn-green);
  font-weight:800;
}

/* Text */
.sn-reviewCard p{
  font-size:13.5px;
  color:rgba(12,16,23,.78);
  line-height:1.6;
  margin-bottom:8px;
}
.sn-reviewMeta{
  font-size:12px;
  color:rgba(12,16,23,.6);
}

/* Responsive */
@media(max-width:992px){
  .sn-revHead{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   SANNIDHI – REVIEWS SECTION (RESPONSIVE)
   Section: #reviews.sn-reviews
   Paste AFTER your existing sn-* CSS so it overrides.
   Covers: header grid + rating card + horizontal review slider
   ========================================================= */

/* ---------- Desktop-first layout ---------- */
.sn-reviews{
  padding: clamp(26px, 4vw, 58px) 0;
}

.sn-reviews .container{
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

/* Head: left text + right rating card */
.sn-revHead{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(12px, 2vw, 18px);
  align-items: start;
}

.sn-revHead > div{ min-width: 0; }

/* Title/lead scale */
.sn-reviews .sn-h2{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  margin: 10px 0 10px;
}

.sn-reviews .sn-lead{
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  margin: 0;
}

/* Rating card sizing */
.sn-ratingCard{
  min-width: 0;
}

.sn-ratingTop{
  display: flex;
  gap: 12px;
  align-items: center;
}

.sn-ratingScore{
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1;
}

/* Slider wrapper */
.sn-reviewSlider{
  margin-top: clamp(14px, 2.2vw, 20px);
  overflow: hidden; /* desktop: hidden; mobile turns into scroll */
}

/* Track: horizontal row */
.sn-reviewTrack{
  display: flex;
  gap: clamp(12px, 2vw, 18px);
  align-items: stretch;
  will-change: transform;
}

/* Card width: 3 on desktop (approx) */
.sn-reviewCard{
  flex: 0 0 calc(33.333% - 12px);
  min-width: 0;
}

/* Review top row */
.sn-reviewTop{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
}

.sn-avatar{
  flex: 0 0 auto;
}

.sn-name{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sn-verified{
  white-space: nowrap;
  align-self: start;
}

/* Card text */
.sn-reviewCard p{
  margin: 12px 0 0;
  line-height: 1.6;
}

/* Meta line */
.sn-reviewMeta{
  margin-top: 12px;
  opacity: .85;
  line-height: 1.35;
}

/* ---------- <= 1100px (2 cards) ---------- */
@media (max-width: 1100px){
  .sn-reviewCard{
    flex-basis: calc(50% - 9px);
  }
}

/* ---------- <= 860px (tablet: stack header + touch-scroll slider) ---------- */
@media (max-width: 860px){
  .sn-revHead{
    grid-template-columns: 1fr; /* rating card below */
  }

  /* slider becomes native horizontal scroll */
  .sn-reviewSlider{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  .sn-reviewTrack{
    width: max-content;
    padding-right: 4px;
  }

  .sn-reviewCard{
    flex: 0 0 min(78vw, 520px);
    scroll-snap-align: start;
  }
}

/* ---------- <= 520px (mobile: tighten, better tap targets) ---------- */
@media (max-width: 520px){
  .sn-reviews .container{
    width: min(1180px, calc(100% - 22px));
  }

  .sn-eyebrow{
    font-size: 12px;
    line-height: 1.35;
  }
  .sn-sep{ display: none; }

  .sn-reviews .sn-h2{
    font-size: 22px;
    line-height: 1.18;
  }

  .sn-reviews .sn-lead{
    font-size: 14px;
  }

  /* rating card internals wrap nicely */
  .sn-ratingTop{
    align-items: flex-start;
  }

  .sn-stars{
    line-height: 1.1;
  }

  /* review top: allow verified to wrap under on very small screens */
  .sn-reviewTop{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar meta"
      "verified verified";
    gap: 10px;
  }

  .sn-reviewTop .sn-avatar{ grid-area: avatar; }
  .sn-reviewTop > div{ grid-area: meta; }
  .sn-reviewTop .sn-verified{
    grid-area: verified;
    justify-self: start;
  }
}

/* ---------- Optional: reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sn-reviews *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}