/* Reviews widget — a self-hosted replacement for the Elfsight All-in-One Reviews widget.
   Layout: tabs → rating panel → masonry of review cards → "Load more". Everything is driven by reviews.json.
   Two looks, picked with data-look on .rw:
     "elfsight" — the look the Elfsight widget had on the site (gray panels, blue accent, 12px corners)
     "site"     — the site's own tokens (ivory, ink, Compass type, 12px rounded cards, square buttons) — the default
   The page's own heading ("Client experiences / What clients say") stays outside the widget, in the section. */

.rw {
  /* ---- tokens: Elfsight look (default) ---- */
  --rw-font: 'Montserrat', 'Compass Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --rw-panel: #f3f3f4;           /* tabs bar + rating panel + cards */
  --rw-card: #f3f3f4;
  --rw-card-border: transparent;
  --rw-ink: #141414;             /* names, numbers, tab text */
  --rw-text: #1f1f1f;            /* review text */
  --rw-muted: #6f7378;           /* dates, counts, inactive tabs */
  --rw-accent: #006dff;          /* button, links, "Read more" */
  --rw-accent-ink: #ffffff;
  --rw-verified: #2f80ed;
  --rw-star: #f5b500;
  --rw-summary: #4b61ff;         /* summary card title */
  --rw-radius: 12px;
  --rw-button-radius: 999px;
  --rw-tab-line: #141414;
  --rw-gap: 20px;
  --rw-card-pad: 28px;

  font-family: var(--rw-font);
  color: var(--rw-text);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.rw[data-look="site"] {
  --rw-font: 'Compass Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --rw-panel: #f6f3ee;           /* --ivory */
  --rw-card: #f6f3ee;
  --rw-card-border: transparent;
  --rw-ink: #141413;             /* --ink */
  --rw-text: #3d3935;            /* --body */
  --rw-muted: #6b6560;           /* --muted */
  --rw-accent: #141413;
  --rw-accent-ink: #ffffff;
  --rw-verified: #141413;
  --rw-star: #f2b705;            /* --star */
  --rw-summary: #141413;
  --rw-radius: 12px;             /* rounded cards and panels (Matt, Oct 26: "I really liked the rounded cards") */
  --rw-button-radius: 0px;       /* the site's buttons stay square */
  --rw-tab-line: #141413;
  --rw-gap: 24px;
  --rw-card-pad: 28px;
  font-weight: 300;
}

/* On an ivory section (About) the ivory panels would vanish into the ground, so there they go white; on a white section (Home) they stay ivory. */
.section:not(.section--white) .rw[data-look="site"] { --rw-panel: #ffffff; --rw-card: #ffffff; }

.rw *, .rw *::before, .rw *::after { box-sizing: border-box; }
.rw :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }   /* :where() keeps the reset below every component rule */
.rw :where(a) { color: inherit; }
.rw [hidden] { display: none !important; }
.rw :focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 3px; }

/* ---- tabs ---- */
.rw__tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  background: var(--rw-panel);
  border-radius: var(--rw-radius) var(--rw-radius) 0 0;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.rw__tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 22px 16px 18px;
  font-size: 17px; font-weight: 500; color: var(--rw-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.rw__tab[aria-selected="true"] { color: var(--rw-ink); border-bottom-color: var(--rw-tab-line); }
.rw__tab b { font-weight: 700; color: var(--rw-ink); }
.rw__tab[aria-selected="false"] b { color: var(--rw-ink); }
.rw[data-look="site"] .rw__tab { font-size: 15px; letter-spacing: 0.02em; }

/* ---- rating panel ---- */
.rw__head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--rw-panel);
  border-radius: 0 0 var(--rw-radius) var(--rw-radius);
  padding: 30px 36px 32px;
}
.rw__headline { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; color: var(--rw-ink); line-height: 1.2; }
.rw__score { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.rw__score-num { font-size: 32px; font-weight: 700; color: var(--rw-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.rw__score-count { color: var(--rw-muted); font-size: 16px; }
.rw[data-look="site"] .rw__headline { font-family: 'Compass Serif', Georgia, serif; font-weight: 400; font-size: 30px; }
.rw[data-look="site"] .rw__score-num { font-family: 'Compass Serif', Georgia, serif; font-weight: 400; font-size: 36px; font-variant-numeric: normal; letter-spacing: -0.02em; }

.rw__write {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 30px;
  background: var(--rw-accent); color: var(--rw-accent-ink);
  border-radius: var(--rw-button-radius);
  font-size: 17px; font-weight: 600; letter-spacing: 0;
  transition: filter 160ms ease, background-color 160ms ease, color 160ms ease;
}
.rw__write:hover { filter: brightness(1.08); }
.rw[data-look="site"] .rw__write {
  height: 52px; padding: 0 32px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--rw-ink);
}
.rw[data-look="site"] .rw__write:hover { background: transparent; color: var(--rw-ink); filter: none; }

/* ---- stars ---- */
.rw__stars { display: inline-flex; gap: 3px; line-height: 0; }
.rw__stars svg { width: 24px; height: 24px; }
.rw__stars--sm svg { width: 22px; height: 22px; }
.rw__stars .is-empty { fill: rgba(0, 0, 0, 0.12); }
.rw__stars .is-fill { fill: var(--rw-star); }

/* ---- platform marks (sources[].icon — the platform's own icon file; a lettered disc only when a source has no file) ---- */
.rw__src { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; line-height: 1; }
.rw__src img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rw__src--square img { border-radius: 22%; }                          /* a filled square icon gets soft corners */
.rw__src--head { width: 28px; height: 28px; }
.rw__src--choice { width: 28px; height: 28px; }
.rw__src--avatar {                                                     /* the small disc over the reviewer photo */
  position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px;
  background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 0 0 2px var(--rw-card);
}
.rw__src--avatar.rw__src--square { padding: 0; overflow: hidden; }
.rw__src--avatar.rw__src--square img { border-radius: 50%; }
.rw__src--letter { border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: var(--rw-src-color, #555); }
.rw__src--letter[data-src="google"] { --rw-src-color: #4285f4; }
.rw__src--letter[data-src="zillow"] { --rw-src-color: #1277e1; }
.rw__src--letter[data-src="realtor"] { --rw-src-color: #d92228; }
.rw__src--avatar.rw__src--letter { padding: 0; font-size: 12px; }

/* ---- grid (JS fills the columns) ---- */
.rw__grid { display: grid; grid-template-columns: repeat(var(--rw-cols, 4), minmax(0, 1fr)); gap: var(--rw-gap); margin-top: 32px; align-items: start; }
.rw__col { display: flex; flex-direction: column; gap: var(--rw-gap); min-width: 0; }

/* ---- card ---- */
.rw__card {
  background: var(--rw-card); border: 1px solid var(--rw-card-border); border-radius: var(--rw-radius);
  padding: var(--rw-card-pad); min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.rw__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rw__avatar { position: relative; flex: none; width: 52px; height: 52px; }
.rw__avatar-img, .rw__avatar-initial {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 500; color: #fff; background: var(--rw-avatar-bg, #4e7d7b); object-fit: cover;
}
.rw__avatar-img { display: block; }
.rw__name { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; color: var(--rw-ink); line-height: 1.2; min-width: 0; }
.rw__name a { text-decoration: none; }
.rw__name a:hover { text-decoration: underline; }
.rw__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw__verified { flex: none; width: 17px; height: 17px; fill: var(--rw-verified); }
.rw__date { font-size: 14px; color: var(--rw-muted); margin-top: 3px; }
.rw[data-look="site"] .rw__name { font-weight: 500; font-size: 17px; }
.rw[data-look="site"] .rw__date { font-family: 'GT Pressura Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; }

.rw__title { font-weight: 700; color: var(--rw-ink); line-height: 1.4; }
.rw[data-look="site"] .rw__title { font-weight: 500; }
.rw__text { margin: 0; overflow-wrap: anywhere; }
.rw__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--rw-lines, 5); overflow: hidden; }
.rw__more-link { align-self: flex-start; color: var(--rw-accent); font-size: 17px; font-weight: 400; margin-top: -4px; }
.rw__more-link:hover { text-decoration: underline; }
.rw[data-look="site"] .rw__more-link { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid currentColor; margin-top: 0; }
.rw[data-look="site"] .rw__more-link:hover { text-decoration: none; opacity: 0.7; }

.rw__subs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--rw-muted); }
.rw__subs b { color: var(--rw-ink); font-weight: 600; }
.rw__reply { border-left: 2px solid rgba(0, 0, 0, 0.12); padding: 2px 0 2px 14px; font-size: 15px; color: var(--rw-muted); }
.rw__reply b { display: block; color: var(--rw-ink); font-weight: 600; margin-bottom: 4px; font-size: 14px; }

/* ---- summary card ---- */
.rw__summary .rw__who { align-items: center; }
.rw__spark {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, #8f5cff, #4b61ff 60%, #37c8ff);
  display: flex; align-items: center; justify-content: center;
}
.rw__spark svg { width: 28px; height: 28px; fill: #fff; }
.rw[data-look="site"] .rw__spark { background: var(--rw-ink); border-radius: 0; }
.rw__summary-title { font-size: 18px; font-weight: 700; color: var(--rw-summary); line-height: 1.2; }
.rw[data-look="site"] .rw__summary-title { font-family: 'Compass Serif', Georgia, serif; font-weight: 400; font-size: 20px; }
.rw__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rw__facts li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.rw__facts svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: var(--rw-ink); }

/* ---- load more ---- */
.rw__more { display: flex; justify-content: center; margin-top: 32px; }
.rw__more-btn {
  height: 52px; padding: 0 30px; border-radius: var(--rw-button-radius);
  background: var(--rw-panel); color: var(--rw-ink); font-size: 16px; font-weight: 600;
  transition: filter 160ms ease;
}
.rw__more-btn:hover { filter: brightness(0.96); }
.rw[data-look="site"] .rw__more-btn { background: transparent; border: 1px solid var(--rw-ink); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.rw[data-look="site"] .rw__more-btn:hover { background: var(--rw-ink); color: #fff; filter: none; }
.rw__empty { text-align: center; color: var(--rw-muted); padding: 40px 0; }

/* ---- write-a-review dialog ---- */
.rw__dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 440px); width: 100%; }
.rw__dialog::backdrop { background: rgba(10, 10, 10, 0.55); }
.rw__dialog-box { background: #fff; color: var(--rw-ink); border-radius: calc(var(--rw-radius) + 4px); padding: 32px 32px 28px; font-family: var(--rw-font); position: relative; }
.rw__dialog h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--rw-ink); }
.rw[data-look="site"] .rw__dialog h3 { font-family: 'Compass Serif', Georgia, serif; font-weight: 400; font-size: 28px; }
.rw__dialog p { margin: 0 0 20px; color: var(--rw-muted); font-size: 15px; }
.rw__choices { display: flex; flex-direction: column; gap: 10px; }
.rw__choice {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none;
  background: var(--rw-panel); border-radius: var(--rw-radius); color: var(--rw-ink); font-weight: 600; font-size: 16px;
  transition: filter 160ms ease;
}
.rw__choice:hover { filter: brightness(0.96); }
.rw__choice small { margin-left: auto; color: var(--rw-muted); font-weight: 400; font-size: 13px; }
.rw__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rw-muted); font-size: 22px; line-height: 1; }
.rw__close:hover { background: var(--rw-panel); color: var(--rw-ink); }

/* ---- responsive ---- */
@media (max-width: 1100px) { .rw { --rw-cols: 3; } }
@media (max-width: 820px) {
  .rw { --rw-cols: 2; --rw-card-pad: 22px; }
  .rw__head { padding: 24px 22px 26px; }
  .rw__headline { font-size: 24px; }
}
@media (max-width: 560px) {
  .rw { --rw-cols: 1; }
  .rw__tabs { padding: 0 4px; }
  .rw__tab { padding: 16px 10px 14px; font-size: 15px; gap: 8px; }
  .rw__head { padding: 22px 20px 24px; }
  .rw__write { width: 100%; }
  .rw__score-num { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .rw * { transition: none !important; } }