/* ==========================================================================
   Section: Review grid — Figma 192:3998
   The Reviews slider card (reviews.css) on a light ground, three across,
   35px apart, with an accent "show more" button 60px below.
   ========================================================================== */

.trustav-review-grid {
  padding-block: 90px 130px;
}

.trustav-review-grid .trustav-review-grid__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma 192:3816 — light card colours. Scoped to the section because
   reviews.css (the dark card) loads after this file. */
.trustav-review-grid .trustav-review--light {
  min-width: 0;
  background-color: var(--c-neutral-4);
  border-color: var(--c-neutral-3);
}

/* The card's display: flex would otherwise beat the hidden attribute. */
.trustav-review-grid .trustav-review--light[hidden] {
  display: none;
}

/* Figma 192:3820 — the light badge is 121×28 with its own outline. */
.trustav-review-grid .trustav-review--light .trustav-review__grade svg {
  width: 121px;
  height: 28px;
}

.trustav-review-grid .trustav-review--light .trustav-review__body {
  color: var(--c-neutral-1);
}

.trustav-review-grid .trustav-review--light .trustav-review__bottom {
  border-top-color: var(--c-neutral-3);
}

.trustav-review-grid .trustav-review--light .trustav-review__author {
  color: var(--c-black);
}

.trustav-review-grid .trustav-review--light .trustav-review__date,
.trustav-review-grid .trustav-review--light .trustav-review__note {
  color: var(--c-neutral-2);
}

.trustav-review-grid__more {
  display: flex;
  justify-content: center;
  margin-block-start: 60px;
}

/* Figma 192:3996 — Button M Primary in accent. */
.trustav-review-grid__button {
  min-width: 251px;
  border: 0;
  background-color: var(--c-accent);
  color: var(--c-white);
  cursor: pointer;
}

.trustav-review-grid__button:hover,
.trustav-review-grid__button:focus-visible {
  background-color: var(--c-primary);
  color: var(--c-white);
}

@media (max-width: 1024px) {
  .trustav-review-grid .trustav-review-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .trustav-review-grid {
    padding-block: var(--space-3xl);
  }

  .trustav-review-grid .trustav-review-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: nothing to line up with, so short reviews need not keep
     the desktop card height (reviews.css min-height: 410px). */
  .trustav-review-grid .trustav-review--light {
    min-height: 0;
  }

  .trustav-review-grid__more {
    margin-block-start: var(--space-xl);
  }
}