/* ------------------------------------------------------------------
   Live reviews widget — subtle enhancements
   Layered on top of existing .reviews / .review / .reviews__google
   styling in style.css. Uses the site's design tokens.
   ------------------------------------------------------------------ */

/* "Live" pulse next to the trust badge, only when JS has hydrated */
.reviews[data-live="1"] .reviews__google::before,
#reviews-page[data-live="1"] .reviews__google::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-secondary, #2f7d80);
  box-shadow: 0 0 0 0 rgba(47, 125, 128, 0.55);
  animation: isf-review-pulse 2.4s ease-out infinite;
}

.reviews[data-live="1"] .reviews__google,
#reviews-page[data-live="1"] .reviews__google {
  position: relative;
}

@keyframes isf-review-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 125, 128, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(47, 125, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 125, 128, 0); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reviews[data-live="1"] .reviews__google::before,
  #reviews-page[data-live="1"] .reviews__google::before {
    animation: none;
  }
}

/* Smooth swap: when the widget replaces cards, avoid flash */
.review { transition: opacity var(--transition-interactive, 220ms) ease; }

/* On very small screens, wrap the reveal animation slightly cleaner */
@media (max-width: 640px) {
  .review { break-inside: avoid; }
}

/* ---------------------------------------------------------- clickable cards */

/* Whole review card becomes a link — the anchor wraps the card contents */
.review__link {
  display: flex;
  flex-direction: column;
  gap: inherit;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--transition-interactive, 220ms) ease,
    box-shadow var(--transition-interactive, 220ms) ease;
  border-radius: inherit;
}

.review:has(.review__link) {
  /* Turn the card itself into a positioned parent for the focus outline */
  position: relative;
  cursor: pointer;
}

.review:has(.review__link:hover) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -18px rgba(20, 24, 40, 0.28);
}

.review__link:focus-visible {
  outline: 2px solid var(--color-accent, #2f7d80);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Move the "Read on Google ↗" hint into the caption's second row on hover */
.review figcaption span,
.review__source-link {
  color: var(--color-muted, #666);
  font-size: 0.85em;
  text-decoration: none;
  transition: color var(--transition-interactive, 220ms) ease;
}

.review__link:hover figcaption span,
.review__source-link:hover {
  color: var(--color-accent, #2f7d80);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inline "Read on Google ↗" link inside the featured quote & mini quotes */
.review__source-link {
  font-weight: 500;
}