/*----------------------------------------*/
/*  Verified Google reviews
/*  Copy on the left, a right-to-left marquee of review cards on the right.
/*  Scoped to .grev; uses the site's existing tokens only.
/*----------------------------------------*/

.grev {
  overflow: hidden;
}

.grev__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 48px;
  align-items: center;
}

/* ---------- left ---------- */
.grev__intro .title {
  margin-bottom: 0;
}

.grev__lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 27px;
}

.grev__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 30px;
}

.grev__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
  font-size: 13px;
  line-height: 1;
}

.grev__stars .is-off {
  opacity: 0.28;
}

.grev__verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 14px;
  color: #ffffff;
  background: var(--theme-blue-color, #212877);
  border: 1px solid var(--theme-blue-color, #212877);
  box-shadow: 0 12px 26px rgba(20, 26, 52, 0.2);
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.grev__verify-g {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: #ffffff;
}

.grev__verify svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  transition: transform 0.35s ease;
}

.grev__verify:hover,
.grev__verify:focus-visible {
  color: #ffffff;
  background: #2a3390;
  box-shadow: 0 18px 34px rgba(20, 26, 52, 0.28);
  transform: translateY(-2px);
}

.grev__verify:hover svg,
.grev__verify:focus-visible svg {
  transform: translate(2px, -2px);
}

.grev__verify:focus-visible {
  outline: 2px solid var(--primary-red, #ed1b24);
  outline-offset: 3px;
}

/* ---------- marquee ----------
   The track carries the review list twice. It travels exactly half its own
   width, which is one full copy, so the second copy lands where the first
   began and the seam is invisible. */
.grev__marquee {
  position: relative;
  overflow: hidden;
  /* fades the cards out at both ends instead of cutting them off square */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  /* the cards carry a shadow, so the track needs room not to clip it */
  padding: 14px 0;
}

.grev__track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: grev-marquee 48s linear infinite;
}

.grev__marquee:hover .grev__track,
.grev__track:focus-within {
  animation-play-state: paused;
}

@keyframes grev-marquee {
  to {
    transform: translateX(calc(-50% - 11px));
  }
}

.grev__card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 330px;
  margin: 0;
  padding: 26px 26px 28px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(33, 40, 119, 0.1);
  box-shadow: 0 12px 30px rgba(20, 26, 52, 0.06);
}

.grev__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grev__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.grev__avatar--initial {
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #2a3390, #0f55dc);
}

.grev__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.grev__name {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--theme-blue-color, #212877);
}

.grev__desig {
  font-size: 12.5px;
  line-height: 1.3;
  color: #8a91a4;
}

.grev__badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: auto;
}

.grev__stars--card {
  font-size: 14px;
}

.grev__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 24px;
  color: var(--color-default, #494d57);
  /* keeps every card the same height whatever the review length */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1199px) {
  /* even halves: the 0.86fr left column leaves too little for the badge and
     the button to share a row at this width */
  .grev__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }

  .grev__card {
    width: 300px;
  }
}

@media (max-width: 991px) {
  .grev__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  /* full-bleed so the cards run to both edges once stacked */
  .grev__marquee {
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  }
}

@media (max-width: 575px) {
  .grev__card {
    width: 268px;
    padding: 22px 22px 24px;
  }

  /* full width on a phone, where a content-width button looks lost */
  .grev__verify {
    flex: 1 1 100%;
  }
}

/* Reduced motion: stop the travel and let the row be scrolled by hand instead
   of taking the reviews away entirely. */
@media (prefers-reduced-motion: reduce) {
  .grev__track {
    animation: none;
  }

  .grev__marquee {
    overflow-x: auto;
  }

  .grev__verify {
    transition: none;
  }

  .grev__verify:hover,
  .grev__verify:focus-visible {
    transform: none;
  }
}

/* ---------- no reviews yet ----------
   One centred column instead of a two-column layout with an empty half. The
   rating and the link to the profile still make sense on their own. */
.grev--solo .grev__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.grev--solo .grev__intro {
  max-width: 720px;
}

.grev--solo .grev__lead {
  margin-inline: auto;
}

.grev--solo .grev__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}