/* Self-hosted reviews section.
   Reuses the design tokens already defined in /css/rml-blog.css
   (--rml-red, --rml-black, --rml-text, --rml-muted, --rml-border,
   --rml-card, --rml-shadow, --rml-radius) and the same literal
   shadow/border-tint values already used on .rml-cta-card /
   .rml-hub-card elsewhere in that file. No new colours or spacing
   introduced. No Google logo or Google brand colours used anywhere. */

.rml-reviews { padding: 64px 0; background: #fff; }

/* Used on pages where the reviews block sits inline inside an existing
   .rml-container flow (service pages built as one continuous article)
   rather than as its own full-bleed section — same content, no extra
   outer padding/background/container nesting. */
.rml-reviews.rml-reviews--inline { padding: 0; background: transparent; margin: 44px 0; }

.rml-reviews-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.rml-reviews-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--rml-red, #e41d37);
  margin: 0 0 8px;
}
.rml-reviews-title {
  font-size: clamp(24px, 3vw, 38px); font-weight: 800;
  color: var(--rml-black, #111827); letter-spacing: -.02em;
  margin: 0 0 14px;
}
.rml-reviews-summary {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.rml-stars-glyphs { color: #fbbf24; font-size: 18px; letter-spacing: 2px; }
.rml-reviews-rating { font-size: 15px; font-weight: 800; color: var(--rml-black, #111827); }
.rml-reviews-count { font-size: 14px; color: var(--rml-muted, #6b7280); }
.rml-reviews-link {
  display: inline-block; font-size: 14px; font-weight: 700;
  color: var(--rml-red, #e41d37); text-decoration: none;
}
.rml-reviews-link:hover { text-decoration: underline; }

/* ─── Card row + slider (all breakpoints) ────────────────
   Exactly 3 cards visible per "row" on desktop; the rest slide in
   via the next/prev controls (or touch swipe) rather than dumping
   every review into the page as a tall wrapped grid. ─────────── */
.rml-reviews-viewport { position: relative; }
.rml-reviews-track {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; margin: 0 -4px; scrollbar-width: none;
}
.rml-reviews-track::-webkit-scrollbar { display: none; }

.rml-review-card {
  display: flex; flex-direction: column;
  flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start;
  background: var(--rml-card, #fff);
  border: 1px solid var(--rml-border, #e8edf3);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .055);
  min-width: 0;
}

.rml-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rml-review-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rml-red, #e41d37); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
}
.rml-review-avatar--alt { background: var(--rml-black, #111827); }
.rml-review-name { font-size: 14.5px; font-weight: 800; color: var(--rml-black, #111827); line-height: 1.3; }
.rml-review-date { font-size: 12px; color: var(--rml-muted, #6b7280); margin-top: 2px; }

.rml-stars { display: inline-flex; align-items: center; margin-bottom: 10px; }

.rml-review-text {
  font-size: 14.5px; line-height: 1.65; color: var(--rml-text, #4b5563);
  margin: 0 0 8px; min-height: 96px;
}
.rml-review-text.is-collapsed {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  line-clamp: 4; overflow: hidden;
}
.rml-review-more {
  align-self: flex-start; background: none; border: 0; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--rml-red, #e41d37);
  cursor: pointer; margin-bottom: 10px;
}
.rml-review-more:hover { text-decoration: underline; }

.rml-review-tag {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; padding: 6px 12px; border-radius: 999px;
  background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 800;
}

/* sr-only utility */
.rml-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── Carousel controls — visible at every breakpoint ────── */
.rml-reviews-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 22px;
}
.rml-reviews-nav {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(228, 29, 55, .18);
  color: var(--rml-red, #e41d37); font-size: 20px; line-height: 1;
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.rml-reviews-nav:hover { background: var(--rml-red, #e41d37); color: #fff; }
.rml-reviews-nav:focus-visible { outline: 2px solid var(--rml-red, #e41d37); outline-offset: 2px; }

/* ─── Tablet: 2 cards per row ─────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  .rml-review-card { flex-basis: calc((100% - 24px) / 2); }
}

/* ─── Mobile: 1 card per row, swipeable ───────────────────── */
@media (max-width: 767px) {
  .rml-reviews { padding: 40px 0; }
  .rml-reviews-head { margin-bottom: 24px; }

  .rml-reviews-track { gap: 14px; }
  .rml-review-card { flex: 0 0 84%; padding: 18px 16px; }
  .rml-review-text { min-height: 88px; }

  .rml-reviews-controls { margin-top: 18px; }
}

@media (max-width: 420px) {
  .rml-review-card { flex-basis: 90%; }
}