/* ==========================================================================
   Testimonials

   The exported section positioned every part of every review card absolutely
   — an empty box div, five separate star images, the quote, the avatar circle
   and the name were all siblings with hard-coded top/left values per
   breakpoint. Eleven elements per review, times three reviews.

   Adding five more reviews that way would have meant hand-computing ~55 more
   coordinates at every breakpoint, and it would break at any width not tuned
   by hand. This replaces that block with a normal responsive grid that
   reproduces the same card design, so a ninth review is now one <li>.

   Card design is taken from the original, not invented:
     white · 1px solid #f1f1f1 · 5px radius · 319x368 · Montserrat 17px/1.3
     centred quote · 38px Google mark · 27px stars · 42px avatar circle
   ========================================================================== */

/* The section and its wrappers had fixed pixel heights, sized to exactly
   three cards. With the cards back in normal flow they must size to content. */
#it2ahet,
#im7w759,
#osQxFqnRGiCGzOdoZrdBHmUpzN3HuXHg,
#iv2k6n,
#icqtsh {
  height: auto !important;
}

/* Desktop shows twelve — three columns, four even rows. Anything past that
   stays in the HTML but is not rendered. */
.drc-review:nth-child(n + 13) {
  display: none;
}

.drc-reviews {
  /* The two headings above are still absolutely positioned, so the grid has
     to start below them rather than at the top of the container. */
  padding: 134px 55px 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 66px;
  align-items: stretch;          /* every card in a row matches the tallest */
}

.drc-review {
  /* the exported list styles put a 24px left margin on every li, which would
     shrink each card inside its grid column */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 368px;             /* the original card height, as a floor */
  padding: 22px 24px 26px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  font-family: Montserrat, Arial, sans-serif;
  text-align: center;
}

.drc-review__google {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.drc-review__stars {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 10px;
}

.drc-review__stars img {
  width: 27px;
  height: 27px;
  display: block;
}

/* Not every review is five stars. The unearned ones are greyed rather than
   dropped, so a four-star review still reads as "four out of five" instead of
   looking like a shorter row of gold. */
.drc-review__stars img.is-dim {
  filter: grayscale(1);
  opacity: .3;
}

.drc-review__quote {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 400;
  color: #000000;
  /* pushes the author block to the bottom so avatars line up across a row */
  flex: 1 1 auto;
}

.drc-review__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 18px;
}

.drc-review__avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.drc-review__avatar img {
  width: 42px;
  height: 42px;
  display: block;
}

.drc-review__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.drc-review__name {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: #000000;
}

/* Only the city landing pages print these two — the reviewer's town under
   their name, which is what makes a local page locally credible. The main
   lander leaves it out and keeps the name-only card. */
.drc-review__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.drc-review__city {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(0, 0, 0, .55);
}

/* Two across between the phone layout and full desktop.

   Only the first eight are shown below desktop: twelve in two columns is six
   rows of scrolling on a tablet, and twelve in one column is roughly 4,000px
   on a phone. Eight fills four even rows in two columns with no orphan.
   The other four stay in the HTML — they are hidden, not removed, so they are
   still in the page for anything that reads it. */
@media (max-width: 1199px) {
  .drc-reviews {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 34px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .drc-review:nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 763px) {
  .drc-reviews {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 124px 0 0;          /* clears the headings at this breakpoint */
  }

  .drc-review {
    min-height: 0;               /* let short reviews be short on a phone */
  }
}