/* Review card clamping + full-review modal.
   Linked automatically by scripts/apply-reviews.mjs on pages that have cards.

   The full review text stays in the HTML and is only clamped visually, so search
   engines still index every word. Clamping is applied in CSS rather than by JS so
   cards never render tall and then snap shorter (layout shift). */

.review blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

/* No <dialog> support: un-clamp, otherwise the rest of the review is unreachable. */
.rv-no-dialog .review blockquote {
  display: block;
  overflow: visible;
}

.review--clamped {
  cursor: pointer;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.review--clamped:hover {
  box-shadow: var(--shadow);
  border-color: var(--blue-100);
  transform: translateY(-2px);
}

.review__more {
  align-self: flex-start;
  margin-top: -4px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--blue-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.review__more:hover { color: var(--blue-700); text-decoration: underline; }
.review__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.review__more svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.review--clamped:hover .review__more svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- modal */

.rv-modal {
  border: 0;
  padding: 0;
  /* The site reset is `* { margin: 0 }`, which beats the UA stylesheet's
     `dialog { margin: auto }` and pins the modal to the top-left corner. */
  margin: auto;
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: #fff;
  color: var(--ink);
  overflow: visible;
}
.rv-modal::backdrop {
  background: rgba(10, 34, 64, .55);
  backdrop-filter: blur(3px);
}
.rv-modal[open] { animation: rv-in .22s var(--ease); }
.rv-modal[open]::backdrop { animation: rv-fade .22s var(--ease); }
@keyframes rv-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes rv-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rv-modal[open], .rv-modal[open]::backdrop { animation: none; }
  .review--clamped { transition: none; }
  .review--clamped:hover { transform: none; }
}

.rv-modal__inner {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 48px);
}

.rv-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rv-modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.rv-modal__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.rv-modal__stars { display: flex; gap: 3px; color: var(--gold); font-size: 20px; padding-right: 44px; }
.rv-modal__stars svg { width: 1em; height: 1em; }

.rv-modal__text {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rv-modal__text:before { content: "\201C"; }
.rv-modal__text:after  { content: "\201D"; }

.rv-modal__who { display: flex; align-items: center; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.rv-modal__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  margin-top: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-700));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.rv-modal__who > span:last-child { margin-top: 12px; }
.rv-modal__who strong { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.rv-modal__who small { color: var(--muted); font-size: .84rem; }

.rv-modal__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-top: 12px;
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
}

/* On a narrow screen this wraps onto two lines and crowds the service label.
   It's a nicety, so drop it rather than let it squeeze the name. */
@media (max-width: 430px) {
  .rv-modal__source { display: none; }
}