/*
 * Reviews sectie - Google bar + grid van review cards
 */

.reviews {
  padding:    96px 0;
  background: var(--color-bg-section);
}

.reviews__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

/* ----------------------------------------
 * Google bar (boven de reviews)
 * ---------------------------------------- */

.google-bar {
  background:     var(--color-bg-white);
  border:         1px solid var(--color-border);
  border-radius:  18px;
  padding:        24px 32px;
  display:        flex;
  align-items:    center;
  gap:            36px;
  margin-bottom:  32px;
  flex-wrap:      wrap;
}

.google-logo {
  font-family:     var(--font-heading);
  font-size:       22px;
  font-weight:     600;
  letter-spacing:  -0.5px;
}

.google-logo__b { color: #4285F4; }
.google-logo__r { color: #EA4335; }
.google-logo__y { color: #FBBC05; }
.google-logo__g { color: #34A853; }

.google-bar__main {
  display:     flex;
  align-items: baseline;
  gap:         12px;
}

.google-bar__score {
  font-family:     var(--font-heading);
  font-size:       40px;
  font-weight:     var(--font-extrabold);
  line-height:     1;
  color:           var(--color-text-heading);
  letter-spacing:  -1.5px;
}

.google-bar__stars {
  display: flex;
  gap:     2px;
  margin:  6px 0;
  color:   #FBBC05;
}

.google-bar__stars svg {
  width:  16px;
  height: 16px;
}

.google-bar__meta {
  font-size:   13px;
  color:       var(--color-text-meta);
  font-weight: 500;
}

.google-bar__cta {
  margin-left:     auto;
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  background:      var(--color-accent);
  color:           #ffffff;
  padding:         16px 40px;
  border-radius:   999px;
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  line-height:     1;
  white-space:     nowrap;
  transition:      background-color var(--transition-fast);
}

.google-bar__cta:hover {
  background: var(--color-accent-dark);
  color:      #ffffff;
}

.google-bar__cta svg {
  width:  14px;
  height: 14px;
}

/* ----------------------------------------
 * Review cards grid
 * ---------------------------------------- */

.reviews__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}

.review {
  background:    var(--color-bg-white);
  border:        1px solid var(--color-border);
  border-radius: 16px;
  padding:       26px 28px;
}

.review__head {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   14px;
}

.review__stars {
  color:   #FBBC05;
  display: flex;
  gap:     2px;
}

.review__stars svg {
  width:  14px;
  height: 14px;
}

.review__g {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      #f1f3f4;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     700;
  color:           #4285F4;
}

.review__text {
  font-size:   14.5px;
  color:       var(--color-text-heading);
  line-height: 1.6;
  margin:      0 0 20px;
  font-weight: 500;
}

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

.review__avatar {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--color-bg-accent-soft);
  color:           var(--color-accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
}

.review__name {
  font-size:   14px;
  font-weight: var(--font-bold);
  color:       var(--color-text-heading);
}

.review__meta {
  font-size: 12px;
  color:     #5a6469;
}

@media (max-width: 1024px) {
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .reviews {
    padding: 64px 0;
  }
  .google-bar {
    padding: 20px 24px;
    gap:     24px;
  }
  .google-bar__cta {
    margin-left: 0;
    width:       100%;
    justify-content: center;
  }
}

@media (max-width: 540px) {
  .reviews__grid {
    grid-template-columns: 1fr;
  }
}