/* ──────────────────────────────────────────────────────────────
   Beoordelingen
   ────────────────────────────────────────────────────────────── */

/* ── Score-overzicht (overlapt licht met de hero) ── */
.rating-wrap { position: relative; z-index: 2; padding-bottom: var(--sp-2); }
.reviews-section { padding-top: var(--sp-6); }
.rating-panel {
  margin-top: calc(-1 * var(--sp-7));
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-6) var(--sp-7);
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: var(--sp-7); align-items: center;
}

.rating-score { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-right: var(--sp-6); border-right: 1px solid var(--line); }
.rating-score__num { font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; color: var(--ink-900); line-height: 1; }
.rating-score__label { color: var(--brand-600); font-weight: 700; font-family: var(--font-head); }
.rating-score__count { color: var(--ink-400); font-size: var(--fs-sm); }

/* Sterren (gevuld) */
.rating-stars { display: inline-flex; gap: 3px; color: var(--brand); }
.rating-stars span { display: inline-flex; }
.rating-stars svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.rating-stars span:not(.is-on) svg { fill: var(--line); }
.rating-stars--lg svg { width: 26px; height: 26px; }

/* Verdeelbalken */
.rating-bars { display: grid; gap: var(--sp-2); }
.rating-bar { display: grid; grid-template-columns: 46px 1fr 26px; align-items: center; gap: var(--sp-3); }
.rating-bar__star { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; }
.rating-bar__star svg { width: 13px; height: 13px; fill: var(--brand); stroke: none; }
.rating-bar__track { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.rating-bar__fill { display: block; height: 100%; width: var(--pct); background: linear-gradient(90deg, var(--brand), var(--brand-600)); border-radius: 99px; animation: barGrow 1.1s var(--ease) both .25s; }
.rating-bar__num { text-align: right; color: var(--ink-400); font-size: var(--fs-sm); }
@keyframes barGrow { from { width: 0; } to { width: var(--pct); } }

/* ── Reviewkaarten (masonry via kolommen) ── */
.reviews-masonry { columns: 3 320px; column-gap: var(--sp-5); }
.review-card {
  position: relative; break-inside: avoid; width: 100%; margin-bottom: var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.review-card--featured { column-span: all; border-color: var(--brand-100); background: linear-gradient(180deg, var(--brand-50), #fff 60%); }

.review-card__quote { position: absolute; top: 2px; right: 20px; font-family: var(--font-head); font-size: 4.5rem; color: var(--brand-100); line-height: 1; pointer-events: none; }
.review-card__stars { display: inline-flex; gap: 2px; color: var(--brand); margin-bottom: var(--sp-3); }
.review-card__stars span:not(.is-on) svg { fill: var(--line); }
.review-card__stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.review-card blockquote { margin: 0 0 var(--sp-5); color: var(--ink-700); line-height: 1.6; }
.review-card--featured blockquote { font-size: var(--fs-lg); color: var(--ink-900); max-width: 60ch; }

.review-card__foot { display: flex; align-items: center; gap: var(--sp-3); }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-600)); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.review-card__person { display: flex; flex-direction: column; line-height: 1.3; }
.review-card__person strong { color: var(--ink-900); font-family: var(--font-head); }
.review-card__person > span { color: var(--ink-400); font-size: var(--fs-sm); }
.review-card__src { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--success); background: #E9F7EF;
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.review-card__src svg { width: 14px; height: 14px; }
.review-card__src.is-google { color: #4285F4; background: #EAF1FE; }

/* ── Vertrouwensbalk ── */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.trust-item { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; }
.trust-item svg { width: 30px; height: 30px; color: var(--brand); flex: none; }
.trust-item span { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink-500); font-size: var(--fs-sm); }
.trust-item strong { font-family: var(--font-head); color: var(--ink-900); font-size: var(--fs-lg); }

@media (max-width: 820px) {
  .rating-panel { grid-template-columns: 1fr; gap: var(--sp-5); }
  .rating-score { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 var(--sp-5); }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
}

/* Mobiel: kolommen-masonry → één volledige-breedte kolom (geen multicol-resten) */
@media (max-width: 680px) {
  .reviews-masonry {
    columns: auto; column-count: initial; column-width: initial; column-gap: 0;
    display: flex; flex-direction: column; gap: var(--sp-5); width: 100%;
  }
  .review-card,
  .review-card--featured {
    width: 100%; max-width: 100%; margin: 0; column-span: none;
  }
  /* Lange woorden nooit buiten de kaart laten lopen */
  .review-card blockquote { overflow-wrap: anywhere; }
  /* Voet mag afbreken zodat de "Geverifieerd"-badge nooit wordt afgekapt */
  .review-card__foot { flex-wrap: wrap; row-gap: var(--sp-2); }
  .review-card__person { min-width: 0; }
}

@media (max-width: 520px) {
  .trust-strip { grid-template-columns: 1fr; justify-items: center; }
  .trust-item span { align-items: center; text-align: center; }
}