/* ==========================================================================
   South Bound River Anglers — Reviews page
   Loads on top of sbra.css, which supplies the tokens, reset, header, footer
   and the shared interior-page hero + CTA band.
   ========================================================================== */

:root {
  --quote-dark:  #1a1a1a;   /* dark testimonial cards          */
  --quote-line:  #e2e2e2;   /* light testimonial card border   */
}

/* ==========================================================================
   Testimonial rows
   Photo and card sit side by side and stretch to a shared height, so each
   row reads as one block. Which side the photo takes alternates down the
   page; a third layout puts two stacked photos between two cards.
   ========================================================================== */
.reviews {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  padding: clamp(34px, 4.5vw, 60px) 0 clamp(26px, 3.5vw, 44px);
}

.rv {
  display: grid;
  /* Cards stretch to the row height so each quote sits at the same height as
     the photo beside it, with its text vertically centred (.quote uses
     justify-content: center). The photo opts OUT of that stretch below, so it
     keeps its natural proportions and is never cropped - the row height ends
     up driven by whichever of the two is taller. */
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 20px);
}
/* Photo on the left, quote on the right. */
.rv--photo-left  { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
/* Quote on the left, photo on the right. */
.rv--photo-right { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
/* Quote / two stacked photos / quote. */
.rv--trio        { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }

/* Photos render at their natural aspect - nothing is cropped. Two earlier
   attempts failed here and both are worth remembering:
     1. height:100% + object-fit:cover stretched each photo to its row height.
        That broke in Safari, which treats a stretched grid item's height as
        indefinite, so the percentage fell back to the intrinsic height and
        the photo overflowed into neighbouring rows.
     2. Absolutely filling the photo into the frame fixed Safari but kept the
        crop - and squeezing the portrait shots (0.60-0.66 ratio) into a
        near-square box cut their tops and bottoms off.
   Sizing from the image itself avoids both: no percentage heights anywhere
   in this layout, so there is nothing for an engine to disagree about, and
   every photo is shown in full. */
.rv-frame {
  align-self: start;   /* opt out of the row stretch: keep natural height */
  overflow: hidden;
  border-radius: var(--radius-card);
  min-width: 0;
}
.rv-photo {
  display: block;
  width: 100%;
  height: auto;
}
/* Middle column of a trio row: two photos stacked, each at its own height. */
.rv-stack {
  align-self: start;   /* same: the stacked pair sizes to its own photos */
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  min-width: 0;
}

/* ==========================================================================
   Quote cards
   ========================================================================== */
.quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 2.6vw, 36px);
  border-radius: var(--radius-card);
}
.quote--dark {
  background: var(--quote-dark);
  color: rgba(255, 255, 255, .88);
}
.quote--light {
  background: var(--white);
  color: var(--body);
  border: 1px solid var(--quote-line);
}

.quote p {
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.75;
}
.quote p + p { margin-top: 12px; }

/* Attribution: white on the dark cards, brand blue on the light ones. */
.quote-by {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  line-height: 1.5;
}
.quote--dark .quote-by  { color: var(--white); }
.quote--light .quote-by { color: var(--blue); }
.quote-by span {
  display: block;
  font-weight: 500;
  opacity: .78;
}

/* Client logo inside a quote card (Windsor Aughtry). */
.quote-logo {
  width: clamp(96px, 11vw, 150px);
  height: auto;
  margin-top: 14px;
}
.quote-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.quote-foot .quote-by { margin-top: clamp(14px, 1.8vw, 22px); }
.quote-foot .quote-logo { margin-top: 0; }

/* ==========================================================================
   "More than the catch" banner
   Wordmarks are baked into the artwork, so it is never cropped.
   ========================================================================== */
.reviews-banner {
  display: block;
  margin: clamp(20px, 3vw, 40px) auto clamp(24px, 3.4vw, 44px);
  max-width: var(--wrap);
  width: calc(100% - (2 * var(--gutter)));
  border-radius: var(--radius-card);
  overflow: hidden;
}
.reviews-banner img { width: 100%; height: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  /* Trio rows lose their middle column first: two quotes side by side stay
     readable far longer than three columns of prose do. */
  .rv--trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv--trio .rv-stack {
    grid-column: 1 / -1;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  /* Everything stacks; photos already size themselves, so nothing else to do
     beyond putting the photo above its quote. */
  .rv--photo-left,
  .rv--photo-right,
  .rv--trio { grid-template-columns: minmax(0, 1fr); }
  .rv--photo-right .rv-frame { order: -1; }
  .rv--trio .rv-stack { grid-column: auto; }
}