/* ============================================================
   fp-reviews-v2.css — Fallbrook Podiatry Review Carousel v2
   Drop-in override. Load AFTER index.CAZ6xOla.css.
   Zero JS, zero new network requests. Pure CSS enhancement.
   ============================================================ */

/* ── STAR SHIMMER ──
   1s shimmer ripple across 5 stars, then 3s rest = 4s total cycle.
   Each star delays .12s for a left-to-right wave effect.
   Uses opacity + brightness on GPU-composited layer. */

@keyframes star-shimmer {
  0%        { opacity: 1; filter: brightness(1); }
  6.25%     { opacity: 1; filter: brightness(1.4); }
  12.5%     { opacity: 1; filter: brightness(1); }
  100%      { opacity: 1; filter: brightness(1); }
}

.review-stars svg {
  animation: star-shimmer 4s ease-in-out infinite;
}
.review-stars svg:nth-child(1) { animation-delay: 0s; }
.review-stars svg:nth-child(2) { animation-delay: .12s; }
.review-stars svg:nth-child(3) { animation-delay: .24s; }
.review-stars svg:nth-child(4) { animation-delay: .36s; }
.review-stars svg:nth-child(5) { animation-delay: .48s; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .review-stars svg { animation: none; opacity: 1; filter: none; }
}

/* ── BIGGER, BRIGHTER STARS ── */

.review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: .25rem;
}

.review-stars svg {
  width: 15px;
  height: 15px;
  fill: #f59e0b;
}

/* ── REVIEW CARD — TIGHTER, 3-LINE CLAMP ── */

.review-card {
  flex: 0 0 270px;
  padding: .6rem .8rem .5rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.review-card blockquote {
  margin: 0 0 .25rem;
  padding: 0;
  font-style: italic;
  font-size: .8rem;
  line-height: 1.4;
  color: #0b1220cc;
  /* 3-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── CITE LINE — THINNER, NARROWER, SINGLE LINE ──
   Format: Platform · Full Name · Date  */

.review-card cite {
  font-style: normal;
  font-family: var(--fp-sans, system-ui, sans-serif);
  font-size: .65rem;
  font-weight: 500;
  color: #0b122066;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── REVIEWS STRIP (ticker bar) ── */

.reviews-strip {
  padding: .45rem 0;
}

/* ── HERO REVIEWS (inside hero section) ── */

.hero-reviews .review-card,
.service-page-reviews .review-card {
  flex: 0 0 250px;
}

/* ── REVIEWS PAGE — FULL REVIEW GRID ── */

.reviews-full-grid {
  display: grid;
  gap: .75rem;
  margin: var(--space-md, 1.25rem) 0 var(--space-xl, 3rem);
}

.reviews-full-grid .review-card {
  flex: none;
  max-width: 100%;
}

.reviews-full-grid .review-card blockquote {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  font-size: .92rem;
  line-height: 1.55;
}

.reviews-full-grid .review-card cite {
  font-size: .72rem;
  margin-top: .35rem;
}

.reviews-full-grid .review-stars svg {
  width: 16px;
  height: 16px;
}

/* Stars-only card (no blockquote text) */
.reviews-full-grid .review-card--stars-only {
  padding: .5rem .8rem;
  background: #fafcfb;
  border: 1px dashed rgba(0,0,0,.08);
}

.reviews-full-grid .review-card--stars-only cite {
  margin-top: .15rem;
}

/* Platform section headers */
.reviews-platform-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: var(--space-lg, 2rem) 0 var(--space-sm, .75rem);
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(0,0,0,.06);
}

.reviews-platform-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.reviews-platform-header h2::after {
  display: none; /* remove the green underline on these */
}

.reviews-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  background: #f0f8f5;
  border-radius: 12px;
  font-family: var(--fp-sans, system-ui);
  font-size: .72rem;
  font-weight: 700;
  color: var(--fp-accent, #00796b);
  letter-spacing: .3px;
}

/* ── TABLET ── */

@media (min-width: 641px) and (max-width: 900px) {
  .review-stars svg {
    width: 14px;
    height: 14px;
  }
  .review-card {
    flex: 0 0 240px;
    padding: .5rem .7rem .45rem;
  }
  .review-card blockquote { font-size: .78rem; }
  .review-card cite { font-size: .62rem; }
}

/* ── MOBILE ── */

@media (max-width: 640px) {
  .review-stars svg {
    width: 11px;
    height: 11px;
  }
  .review-stars {
    gap: 1px;
    margin-bottom: .1rem;
  }
  .review-card {
    flex: 0 0 200px;
    padding: .3rem .5rem .25rem;
    max-height: none;
  }
  .review-card blockquote {
    font-size: .68rem;
    line-height: 1.3;
    margin-bottom: .15rem;
    /* Keep 3-line clamp on mobile too */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    text-overflow: unset;
    max-height: none;
  }
  .review-card cite {
    font-size: .56rem;
    line-height: 1;
  }

  /* Strip height — slightly taller than before to fit 3 lines */
  .reviews-strip { padding: .15rem 0; }
  .reviews-strip-inner { max-height: 72px; overflow: hidden; }

  /* Full reviews page — stack nicely */
  .reviews-full-grid .review-card blockquote {
    font-size: .88rem;
    line-height: 1.5;
    -webkit-line-clamp: unset;
    display: block;
  }
  .reviews-full-grid .review-card cite {
    font-size: .68rem;
  }
  .reviews-full-grid .review-stars svg {
    width: 14px;
    height: 14px;
  }
}

/* ── TINY MOBILE ── */

@media (max-width: 380px) {
  .review-stars svg {
    width: 9px;
    height: 9px;
  }
  .review-card {
    flex: 0 0 170px;
    padding: .2rem .4rem .2rem;
  }
  .review-card blockquote {
    font-size: .6rem;
    -webkit-line-clamp: 2;
  }
  .review-card cite { font-size: .5rem; }
  .reviews-strip-inner { max-height: 58px; }
}