/* Real Google reviews, directly under the hero.
 *
 * Ported from the reference build in sneads-worktrees/service-page. The mirror
 * carried no review or testimonial content anywhere - the client's live site
 * never published any - so this is the first social proof on the page below the
 * trust banner in the hero.
 *
 * Loaded AFTER sections.css, and that order is required rather than tidy:
 * sections.css sets `.sos-band h2 { color:#fff }` unconditionally for the dark
 * bands, and this band is light. Loading later is what lets the heading colour
 * be restated without !important.
 */

/* ---- the band ----------------------------------------------------------
   White, not grey. The band lands between the dark hero and the breadcrumb
   bar, and the breadcrumb is already #f5f5f5 - a grey band would merge into it
   and read as one big undifferentiated strip. White also gives the #f5f5f5
   cards something to sit on. */

.sos-reviews {
  background: #fff;
  padding: 64px 0;
}

.sos-reviews .sos-rv-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.sos-reviews .sos-rv-eyebrow {
  display: block;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #898989;
  margin-bottom: 10px;
}

/* sections.css paints every .sos-band h2 white for the dark bands. Restated
   here rather than fought - this sheet loads after it, so plain source order
   settles it. */
.sos-reviews h2 {
  color: #1a1a1a;
  margin: 0;
}

.sos-reviews .sos-rv-rule {
  width: 56px;
  height: 3px;
  background: #dd5c26;
  margin: 18px auto 0;
}

.sos-reviews .sos-rv-agg {
  color: #666;
  font-size: 1rem;
  margin: 18px 0 0;
  padding: 0;
}

/* Star gold, not brand orange. Same reasoning as the trust banner in hero.css:
   a five-star row in the CTA colour reads as a button and competes with the
   actual one. */
.sos-reviews .sos-rv-agg .sos-rv-stars,
.sos-reviews .sos-rv-stars {
  color: #f5a623;
  letter-spacing: 2px;
}

/* ---- the cards ---------------------------------------------------------- */

.sos-reviews .sos-rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  align-items: start;
}

.sos-reviews .sos-rv-card {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 26px 24px;
  text-align: left;
}

.sos-reviews .sos-rv-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* display:block matters - Divi does not ship the reference's `img{display:
   block}` reset, and an inline image picks up baseline gap that knocks the name
   block out of vertical centre. */
.sos-reviews .sos-rv-card img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #e0e0e0;
}

.sos-reviews .sos-rv-name {
  display: block;
  font-weight: 700;
  line-height: 1.25;
  font-size: 0.98rem;
  color: #1a1a1a;
}

.sos-reviews .sos-rv-meta {
  display: block;
  color: #666;
  font-size: 0.8rem;
  line-height: 1.35;
}

.sos-reviews .sos-rv-card .sos-rv-stars {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* white-space:pre-line is load-bearing. One of the reviews is written as
   several paragraphs separated by blank lines, and it is stored as a single
   text node with literal newlines - without this it collapses into a wall.

   The clamp is what reviews.js measures against; drop it and every "Read more"
   button silently hides itself. */
.sos-reviews .sos-rv-text {
  font-size: 0.95rem;
  color: #3d3d3d;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sos-reviews .sos-rv-card.is-open .sos-rv-text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.sos-reviews .sos-rv-more {
  background: none;
  border: none;
  color: #dd5c26;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0 0;
  font-family: inherit;
  font-size: 0.9rem;
}

.sos-reviews .sos-rv-more:hover {
  text-decoration: underline;
}

/* ---- responsive ---------------------------------------------------------
   The reference goes 3-up straight to 1-up at 980, which leaves one absurdly
   wide card across the entire tablet range. Two-up first. */

@media all and (max-width: 980px) {
  .sos-reviews {
    padding: 48px 0;
  }
  .sos-reviews .sos-rv-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 34px;
  }
}

@media all and (max-width: 620px) {
  .sos-reviews .sos-rv-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sos-reviews .sos-rv-card {
    padding: 22px 20px;
  }
}