/*
 * NYBSJ Reviews Widget
 * Design: "Clinical Confidence" — cool-slate structure, gold accent trust signal,
 * Source Serif 4 body type for testimonial authority.
 */

/* ---------- Google Fonts — must come before all rules ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Source+Serif+4:ital,wght@0,300;0,400;1,300&display=swap');

/* ---------- Custom Properties ---------- */
.nybsj-rv-wrap {
  --rv-bg:      #FFFFFF;
  --rv-surface: #F7F8FA;
  --rv-ink:     #1A2332;
  --rv-muted:   #6B7B8D;
  --rv-accent:  #C4A24A;
  --rv-border:  #E2E6EB;
  --rv-nav-bg:  #1A2332;
  --rv-nav-fg:  #FFFFFF;
  --rv-radius:  2px;
  --rv-shadow:  0 1px 4px rgba(26, 35, 50, 0.08), 0 0 0 1px var(--rv-border);
  --rv-gap:     1.25rem;
  --rv-pad:     1.75rem 1.5rem 1.5rem;

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--rv-ink);
  background: var(--rv-surface);
  padding: 3rem 0;
  box-sizing: border-box;
}

/* ---------- Layout Container ---------- */
.nybsj-rv {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3.5rem; /* space for nav buttons */
}

/* ---------- Overflow Clipping Track ---------- */
.nybsj-rv-viewport {
  overflow: hidden;
}

/* ---------- Sliding Track ---------- */
.nybsj-rv-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  align-items: stretch;
  gap: 0; /* gap handled by card padding so clipping works cleanly */
}

@media (prefers-reduced-motion: reduce) {
  .nybsj-rv-track {
    transition: none;
  }
}

/* ---------- Review Card ---------- */
.nybsj-rv-card {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: var(--rv-gap);
}

@media (min-width: 720px) {
  .nybsj-rv-card { flex-basis: 50%; }
}

@media (min-width: 1040px) {
  .nybsj-rv-card { flex-basis: 25%; }
}

.nybsj-rv-card-inner {
  background: var(--rv-bg);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
  padding: var(--rv-pad);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Signature: left rule whose color encodes the star rating */
  border-left: 3px solid var(--rv-rule-color, var(--rv-border));
}

/* ---------- Star Row ---------- */
.nybsj-rv-stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.nybsj-rv-star {
  font-size: 1.125rem;
  color: var(--rv-border);
  /* Slightly muted unfilled stars — deliberate, not invisible */
}

.nybsj-rv-star.on {
  color: var(--rv-accent);
}

/* ---------- Review Text ---------- */
.nybsj-rv-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--rv-ink);
  margin: 0 0 1.25rem;
  flex: 1;
  /* Cap the quote so one long review can't stretch every card in the row;
     the full text stays reachable via the "View on Google" link. The
     max-height is the non-WebKit fallback (6 lines x line-height); the
     line-clamp pair adds the ellipsis where supported. */
  max-height: calc(6 * 1.75em);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
}

.nybsj-rv-text--expanded {
  max-height: none;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

/* "Read more" toggle under clamped quotes — styled like the Google link */
.nybsj-rv-readmore {
  background: none;
  border: 0;
  padding: 0;
  margin: -0.75rem 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rv-accent);
  cursor: pointer;
  align-self: flex-start;
}
.nybsj-rv-readmore:hover,
.nybsj-rv-readmore:focus-visible {
  text-decoration: underline;
}
.nybsj-rv-readmore:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 2px;
}

.nybsj-rv-text::before {
  content: '\201C';
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.5rem;
  line-height: 0;
  vertical-align: -0.55em;
  color: var(--rv-accent);
  margin-right: 0.15em;
  opacity: 0.6;
}

/* ---------- Meta (author / location) ---------- */
.nybsj-rv-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

.nybsj-rv-author {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rv-ink);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nybsj-rv-location {
  font-size: 0.75rem;
  color: var(--rv-muted);
  letter-spacing: 0.01em;
}

/* ---------- "View on Google" Link ---------- */
.nybsj-rv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rv-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.18s ease;
  margin-top: auto;
}

.nybsj-rv-link::after {
  content: '\2197'; /* ↗ arrow */
  font-size: 0.85em;
  transition: transform 0.18s ease;
}

.nybsj-rv-link:hover,
.nybsj-rv-link:focus-visible {
  color: var(--rv-ink);
}

.nybsj-rv-link:hover::after,
.nybsj-rv-link:focus-visible::after {
  transform: translate(1px, -1px);
}

.nybsj-rv-link:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ---------- Nav Buttons ---------- */
.nybsj-rv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--rv-nav-bg);
  color: var(--rv-nav-fg);
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.18s ease, opacity 0.18s ease;
  padding: 0;
}

.nybsj-rv-nav:hover {
  background: var(--rv-accent);
}

.nybsj-rv-nav:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 3px;
}

.nybsj-rv-nav.prev {
  left: 0;
}

.nybsj-rv-nav.next {
  right: 0;
}

.nybsj-rv-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 480px) {
  .nybsj-rv {
    padding: 0 2.5rem;
  }

  .nybsj-rv-nav {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
}

/* ---------- Progress Indicator (auto-advance timeline) ---------- */
.nybsj-rv-progress {
  height: 2px;
  background: var(--rv-border);
  max-width: 1100px;
  margin: 1.25rem auto 0;
  position: relative;
  overflow: hidden;
}

.nybsj-rv-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--rv-accent);
  transition: none;
}

.nybsj-rv-progress-fill.animating {
  width: 100%;
  transition: width 6s linear;
}

@media (prefers-reduced-motion: reduce) {
  .nybsj-rv-progress,
  .nybsj-rv-progress-fill {
    display: none;
  }
}

/* ---------- Focus ring for region ---------- */
/* Mouse focus: no ring (nav handled via button children). Keyboard focus:
   keep a visible ring so keyboard users can tell the region has focus before
   using arrow-key navigation. */
.nybsj-rv:focus {
  outline: none;
}
.nybsj-rv:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 4px;
}

/* ---------- Section Heading ---------- */
.nybsj-rv-heading {
  text-align: center;
  margin-bottom: 2rem;
}

.nybsj-rv-heading .eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rv-accent);
  margin-bottom: 0.5rem;
}

.nybsj-rv-heading h2 {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--rv-ink);
  letter-spacing: -0.01em;
}