/* Photo gallery rows: images with Google review cards staggered between them.
   Cell counts are built to a multiple of 4, so the 4 and 2 column layouts both
   land on complete rows with nothing left dangling.

   Rows size to their tallest cell rather than a fixed height: a clamped review
   was still showing a cut-off final line at some widths. Images stretch to the
   row height and crop with object-fit, so rows stay flush either way.

   Served under a content-hashed filename (gallery.<hash>.css) because /css/ is
   cached immutable for a year; edit this file, then re-run the hash step. */

.pr-gallery {
  display: grid;
  /* minmax(0,...) so a long review word can't widen its column past its share */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  flex: 1 1 0%;
  min-width: 0;
}

/* Uniform tiles (2026-10-08, Christopher: the photo and review grid "looks off").
   Every photo is square, so every row is the same height whatever the photo's
   orientation, and a review card stretches to the row. A review longer than
   the square grows that row, and the photos beside it stretch and crop to
   match, so nothing is ever cut off. The ratio sits on the photos only: on a
   review card it would widen the card past its column when the text runs long. */
.pr-gallery > * {
  align-self: stretch;
}

.pr-gallery img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: zoom-in;
}

.pr-gallery-review {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  /* Christine 2026-10-09: "light grey background instead of dark", the line
     "thinner to match other linework on the site (homepage is a good
     reference)" and "only as tall as the text". Same treatment as the reviews
     module: light-100 fill, grey text, 1px cyan rule, no vertical padding on
     the quote so the rule stops where the text does. */
  background: var(--_swatches---light-100);
  color: var(--_swatches---text);
  font-weight: 400;
  text-decoration: none;
}

.pr-gallery-review-text {
  /* One rule spans quote and reviewer, and the name sits flush with the quote
     (Christine 2026-10-09: "move the name of the Google reviewer to the right so
     that it's flush with the quote and extend the vertical line to reach the
     reviewer's name"). */
  border-left: 1px solid var(--_swatches---brand);
  padding-left: 20px;
  min-width: 0;
}

.pr-gallery-review blockquote {
  /* the Webflow default blockquote draws a 5px grey left border; the rule now
     lives on the wrapper */
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--_swatches---text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.pr-gallery-review cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--_swatches---text);
}

@media (max-width: 1199px) {
  .pr-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .pr-gallery-review {
    padding: 16px;
  }

  .pr-gallery-review blockquote {
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .pr-gallery-review blockquote {
    font-size: 12px;
  }
}

/* Full-bleed band. Christopher 2026-08-27: "the google ad garden needs to be so
   the borders are touching the edge like the other page breaks." The grid itself
   was already gap-free and edge-to-edge; the inset came from .section's own
   horizontal padding, so it is zeroed here for this band only. Three classes so
   it beats .section.bg-light's padding-left regardless of stylesheet order. */
.section.bg-light.pr-gallery-band { padding: 0; }