/* Testimonials. Each card looks like where it came from: an Instagram comment, an Instagram DM,
   or a client email (built by js/review-cards.js). Black and white only, like Instagram's dark mode. */
.reviews-explainer { margin-top: 14px; color: var(--muted); font-size: 0.98rem; max-width: 60ch; }

.review-grid { margin-top: 32px; columns: 1; column-gap: 14px; }
.review-grid > li { break-inside: avoid; margin-bottom: 14px; }

.rv {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.rv .icon { display: inline-flex; flex: none; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-source { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; }
.rv-date { color: var(--muted); font-size: 0.8rem; }

.rv-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #262626;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

/* Instagram comment: avatar, bold username then the words, date and Reply under it, heart on the right. */
.rv-comment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.rv-comment-line { font-size: 0.97rem; line-height: 1.45; overflow-wrap: anywhere; }
.rv-user { font-weight: 600; margin-right: 2px; }
.rv-meta { display: flex; gap: 14px; margin-top: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.rv-heart { color: var(--muted); padding-top: 4px; }

/* Instagram DM: who sent it, then the message in a gray bubble like the Instagram inbox. */
.rv-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-names { display: grid; min-width: 0; line-height: 1.3; }
.rv-names b { font-weight: 600; font-size: 0.97rem; }
.rv-names span { color: var(--muted); font-size: 0.82rem; }
.rv-bubble {
  justify-self: start;
  max-width: 100%;
  padding: 11px 15px;
  border-radius: 20px 20px 20px 6px;
  background: #262626;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.rv-meta-dm { margin-top: -8px; padding-left: 4px; }

/* Client email: sender and title, then the email text. */
.rv-email { background: #0f0f0f; }
.rv-email-text {
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  color: var(--soft);
  font-size: 0.98rem;
  line-height: 1.55;
}

.review-placeholder { margin-top: 32px; padding: 28px 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
.review-placeholder b { color: var(--text); }
.review-placeholder code { color: var(--soft); font-size: 0.9em; }

/* Older entries without a kind still draw as a plain quote or an image card. */
.review { display: grid; gap: 14px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.review blockquote { margin: 0; font-size: 1.04rem; line-height: 1.5; color: var(--text); }
.review footer { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.88rem; }
.review footer b { color: var(--text); font-weight: 600; }
.review-card { padding: 0; overflow: hidden; background: #fff; }
.review-card img { width: 100%; height: auto; }
.review-card figcaption { padding: 12px 16px; background: var(--panel); color: var(--muted); font-size: 0.86rem; }

@media (min-width: 640px) { .review-grid { columns: 2; } }
@media (min-width: 1080px) { .review-grid { columns: 3; } }