/* ==========================================================================
   Client Reviews page (page-client-reviews.php) — matches live 1:1.
   A tall photo banner, then testimonials over pure black with a project photo
   on alternating sides, then a dark "leave a Google review" call to action.
   Tokens: --primary-color #f00004, --font-head / --font-body.
   ========================================================================== */

/* Live: the testimonials run on pure black; the Google-review CTA below sits
   on the site's charcoal "darkAccent" (#313130), not black. */
.sp-reviews     { background: #000; }
.sp-reviews-cta { background: #313130; }

/* ---- Alternating review rows ------------------------------------------- */
.sp-reviews { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.sp-review-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: clamp(2rem, 4vw, 4rem);
   padding-block: clamp(2rem, 4vw, 3.25rem);
}
.sp-review-row + .sp-review-row { border-top: 1px solid rgba(255, 255, 255, .16); }

/* Even rows: photo on the left, text on the right. */
.sp-review-row--reverse .sp-review-row__text  { order: 2; }
.sp-review-row--reverse .sp-review-row__media { order: 1; }

/* Live: .sqsrte-large = 23.9px, italic (inside <em>), full white, line-height 1.2. */
.sp-review-row__quote {
   margin: 0;
   font-family: var(--font-body);
   font-style: italic;
   font-size: clamp(1.15rem, 1rem + .6vw, 1.495rem);
   line-height: 1.3;
   color: #fff;
}
.sp-review-row__quote::before { content: "\201C"; }
.sp-review-row__quote::after  { content: "\201D"; }

/* Live: whole attribution is bold 17px white. */
.sp-review-row__cite {
   margin: 1.5rem 0 0;
   text-align: right;
   font-family: var(--font-body);
   font-size: 1.0625rem;
   font-weight: 700;
   color: #fff;
}
.sp-review-row__name { font-weight: 700; }

.sp-review-row__media {
   align-self: stretch;
   overflow: hidden;
}
.sp-review-row__media img {
   width: 100%;
   height: 100%;
   min-height: 280px;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
}

/* ---- Closing Google-review call to action ------------------------------ */
.sp-reviews-cta {
   padding-block: clamp(3rem, 6vw, 6rem);
   border-top: 1px solid rgba(255, 255, 255, .16);
}
.sp-reviews-cta .sp-h2 { margin: 0 0 1.1rem; color: #fff; }
.sp-reviews-cta__text {
   max-width: 46rem;
   margin: 0 auto 2rem;
   font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
   line-height: 1.7;
   color: rgba(255, 255, 255, .78);
}

/* ---- Mobile: stack text over photo ------------------------------------- */
@media (max-width: 767.98px) {
   .sp-review-row { grid-template-columns: 1fr; gap: 1.5rem; }
   /* Keep a consistent text-then-photo order regardless of the desktop side. */
   .sp-review-row--reverse .sp-review-row__text  { order: 1; }
   .sp-review-row--reverse .sp-review-row__media { order: 2; }
   .sp-review-row__cite { text-align: left; }
   .sp-review-row__media img { min-height: 0; aspect-ratio: 16 / 10; }
}