/* Customer reviews — the testimonials section shared by the Clients page and the homepage
   (new/inc/client-reviews.php). The dark background is the shared .dark-section-deep and each card is the
   shared .dark-glass-card (global.css), so this file only lays them out and sets the text. */
.client-reviews-section {
  padding: calc(var(--space-section) + 16px) var(--site-pad-x);
}
.client-reviews-inner { max-width: 1120px; margin: 0 auto; }
.client-reviews-head { text-align: center; margin-bottom: 48px; }
.client-reviews-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.client-reviews-head h2 { margin: 0 0 12px; color: #fff; }
.client-reviews-head p { margin: 0; font-size: var(--text-body-lg); color: rgba(255, 255, 255, 0.82); }

/* Carousel: a snap-scrolling row of equal-height cards (every quote is about the same length), three in view (two, then one, on narrower screens);
   new/js/client-reviews.js drives the arrows and dots. */
.client-reviews-carousel { display: flex; align-items: center; gap: 12px; }
.client-reviews {
  --cr-gap: 24px;
  --cr-per-view: 3;
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--cr-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  box-sizing: border-box;
}
.client-reviews::-webkit-scrollbar { display: none; }
.client-reviews:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 12px; }
.client-review {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--cr-per-view) - 1) * var(--cr-gap)) / var(--cr-per-view));
  box-sizing: border-box;
  margin: 0;
  padding: 26px 24px 22px;
  scroll-snap-align: start;
  text-align: left;
}
.client-review-stars { font-size: 1.05rem; letter-spacing: 3px; color: var(--accent-alt); }
.client-review-text { margin: 12px 0 16px; font-size: var(--text-body-sm); line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
.client-review-text p { margin: 0; }
.client-review-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.client-review-name { font-weight: 600; color: #fff; }
.client-review-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.62); }
.client-reviews-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.client-reviews-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }
.client-reviews-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.client-reviews-nav:disabled { opacity: 0.3; cursor: default; }
.client-reviews-nav svg, .client-reviews-nav i { width: 20px; height: 20px; }
.client-reviews-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 24px; }
.client-reviews-dots button {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.client-reviews-dots button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transition: background 0.2s, width 0.2s, border-radius 0.2s;
}
.client-reviews-dots button[aria-current="true"]::before { width: 26px; border-radius: 6px; background: linear-gradient(90deg, #00f3b5, #0aa8c7, #1354db); }
.client-reviews-dots button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 999px) { .client-reviews { --cr-per-view: 2; } }
@media (max-width: 599px) {
  .client-reviews { --cr-per-view: 1; --cr-gap: 16px; }
  .client-reviews-head { margin-bottom: 32px; }
  .client-reviews-carousel { gap: 6px; }
  .client-reviews-nav { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .client-reviews { scroll-behavior: auto; } }