/* cs-testimonials — reviews slider with stacked card design.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.6rem = 16px. */

.cs-testimonials {
  padding-block: var(--cs-space-2xl);
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
}

.cs-testimonials__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-space-lg);
}

/* Optional heading — doubled-up so it survives BB Global Styles' h2 rules. */
.cs-testimonials .cs-testimonials__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 3vw + 1rem, 4rem); /* 32px → 40px */
  font-style: normal;
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-blue-dark);
  text-align: center;
  text-wrap: balance;
}

/* ---------- Stage: backdrop + card ---------- */
.cs-testimonials__stage {
  position: relative;
  width: 100%;
  max-width: 99.2rem; /* 992px */
  padding: 4rem 0 4rem 4rem;
  isolation: isolate;
}

/* Backdrop — the soft-colored card behind the white card */
.cs-testimonials__backdrop {
  position: absolute;
  inset: 0;
  border-radius: 4.2rem;
  background: var(--cs-testimonials-backdrop, rgba(240, 183, 164, 0.3));
  z-index: 0;
}

/* Card — the white card containing the carousel */
.cs-testimonials__card {
  position: relative;
  z-index: 1;
  background: var(--cs-testimonials-card, #F2F1F0);
  border-radius: 4.9rem;
  padding: 3.6rem 4rem 2.4rem;
  min-height: 32rem;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-md);
}

/* Nudge card up + left relative to backdrop so backdrop peeks bottom-right */
.cs-testimonials__card {
  transform: translate(-2.5rem, -1.5rem);
}

/* ---------- Track (scroll-snap) ---------- */
.cs-testimonials__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}

.cs-testimonials__track::-webkit-scrollbar {
  display: none;
}

.cs-testimonials__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cs-space-md);
}

/* Stars */
.cs-testimonials__stars {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 3.6rem; /* 36px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

/* Quote — doubled-up + explicit resets so it survives theme blockquote
   styling (italic, border-left, padding). */
.cs-testimonials .cs-testimonials__quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  max-width: 82rem; /* 820px */
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1.5vw + 1rem, 2.4rem); /* 18px → 24px */
  font-style: normal;
  line-height: 1.5;
  color: var(--cs-blue-dark);
  text-wrap: balance;
}

.cs-testimonials__quote p {
  margin: 0;
}

/* Author + source logo */
.cs-testimonials__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.cs-testimonials__author {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cs-blue-dark);
}

.cs-testimonials__logo {
  display: block;
  max-height: 4.3rem;
  width: auto;
  object-fit: contain;
}

/* ---------- Controls (dots + arrows) ---------- */
/* All slides fit — controls are inert (class set by cs-carousel.js). */
[data-cs-carousel].cs-is-static .cs-testimonials__controls {
  display: none;
}

.cs-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-md);
  padding-top: var(--cs-space-sm);
  /* This row holds eight dots plus two arrows and had no way to give — it
     already spilled 4px at 320px, and grew tighter once both were sized up to
     meet the touch-target minimum. Wrapping is what lets it yield. */
  flex-wrap: wrap;
}

.cs-testimonials__dots {
  display: flex;
  align-items: center;
  /* 26px between dot centres so the 24px hit areas below don't overlap. */
  gap: 1.6rem;
  flex-wrap: wrap;
  row-gap: 1.2rem;
}

.cs-testimonials__dot {
  position: relative;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cs-blue-pale);
  cursor: pointer;
  transition: width 200ms ease, background 200ms ease;
}

/* Grows the touch target to the 24px WCAG 2.5.8 minimum, leaving the 10px dot
   itself unchanged. */
.cs-testimonials__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
}

.cs-testimonials__dot.is-active {
  width: 3rem;
  background: var(--cs-blue-soft);
}

.cs-testimonials__dot:hover,
.cs-testimonials__dot:focus-visible {
  background: var(--cs-blue);
  outline: none;
}

.cs-testimonials__arrows {
  display: flex;
  gap: 0.8rem;
  margin-left: auto;
}

.cs-testimonials__arrow {
  /* 44px touch target; the icon inside is unchanged. */
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cs-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease;
}

.cs-testimonials__arrow:hover,
.cs-testimonials__arrow:focus-visible {
  background: var(--cs-blue-pale);
  color: var(--cs-blue-dark);
  outline: none;
}

.cs-testimonials__arrow[aria-disabled="true"],
.cs-testimonials__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.cs-testimonials__arrow svg {
  width: 2.4rem;
  height: 2.4rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cs-testimonials {
    padding-block: var(--cs-space-xl);
  }
  .cs-testimonials__stage {
    padding: 3rem 0 3rem 3rem;
  }
  .cs-testimonials__card {
    padding: 2.8rem 2.4rem 2rem;
    transform: translate(-2rem, -1rem);
    border-radius: 3.6rem;
  }
  .cs-testimonials__backdrop {
    border-radius: 3.2rem;
  }
}

@media (max-width: 640px) {
  /* Stack arrows above dots rather than fighting for one row — mirrors what
     cs-team-carousel already does at this width. */
  .cs-testimonials__controls {
    flex-direction: column-reverse;
    gap: var(--cs-space-md);
  }
  .cs-testimonials__arrows {
    margin-left: 0;
  }
  .cs-testimonials__dots {
    justify-content: center;
  }
  .cs-testimonials__stage {
    padding: 2rem 0 2rem 2rem;
  }
  .cs-testimonials__card {
    transform: translate(-1.2rem, -0.8rem);
  }
  .cs-testimonials__stars {
    font-size: 2.8rem;
  }
}


/* ---------- Footer CTA (optional orange pill under the slider) ---------- */
.cs-testimonials__cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--cs-space-lg);
}

.cs-testimonials .cs-testimonials__cta,
.cs-testimonials .cs-testimonials__cta:link,
.cs-testimonials .cs-testimonials__cta:visited {
  display: inline-block;
  background: var(--cs-orange);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  min-width: min(33rem, 100%); /* 330px per Figma */
  padding: 1rem 3.2rem;
  border-radius: var(--cs-radius-pill);
  transition: background 250ms ease-in-out, color 250ms ease-in-out, box-shadow 250ms ease-in-out, filter 250ms ease-in-out, transform 250ms ease-in-out;
}

.cs-testimonials .cs-testimonials__cta.cs-testimonials__cta:hover,
.cs-testimonials .cs-testimonials__cta.cs-testimonials__cta:focus-visible {
  background: var(--cs-orange);
  color: var(--cs-white);
  filter: brightness(1.08);
  box-shadow: 0 0.8rem 2rem -0.8rem rgba(252, 127, 86, 0.6);
  transform: scale(1.02);
  text-decoration: none;
}

@media (max-width: 768px) {
  .cs-testimonials .cs-testimonials__cta {
    width: 100%;
    min-width: 0;
  }
}


/* =====================================================================
   Split layout — header column + single static testimonial card.
   ===================================================================== */
.cs-testimonials--split .cs-testimonials__inner {
  align-items: stretch;
}

.cs-testimonials__split {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 45fr);
  align-items: center;
  gap: clamp(3.2rem, 5vw, 8rem);
}

/* ---------- Left: header content ---------- */
.cs-testimonials__split-header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Eyebrow — dash + blue label on one line */
.cs-testimonials .cs-testimonials__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-blue);
}

.cs-testimonials__eyebrow-dash {
  display: inline-block;
  width: 4.9rem;  /* 49px */
  height: 2px;
  background: var(--cs-blue);
}

/* Two-tone heading — dark main + orange accent */
.cs-testimonials .cs-testimonials__split-heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 3vw + 1.6rem, 4.8rem); /* → 48px */
  font-style: normal;
  line-height: 1.15;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
  text-align: left;
  text-wrap: balance;
}

.cs-testimonials__split-heading-accent {
  color: var(--cs-orange); /* #FC7F56 */
}

/* Body copy */
.cs-testimonials .cs-testimonials__split-body {
  font-family: var(--cs-font-body);
  font-size: 1.8rem; /* 18px */
  line-height: 1.6;
  color: var(--cs-ink);
}

.cs-testimonials .cs-testimonials__split-body p {
  margin: 0 0 1.6rem;
}

.cs-testimonials .cs-testimonials__split-body p:last-child {
  margin-bottom: 0;
}

.cs-testimonials .cs-testimonials__split-body strong,
.cs-testimonials .cs-testimonials__split-body b {
  font-weight: 700;
}

.cs-testimonials .cs-testimonials__split-body ul {
  margin: 1.6rem 0 0;
  padding-left: 2.4rem;
  list-style: disc;
}

.cs-testimonials .cs-testimonials__split-body li {
  margin-bottom: 1.2rem;
}

/* Header stars — large, orange, left-aligned */
.cs-testimonials__split-stars {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 3.6rem; /* 36px */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cs-orange); /* #FC7F56 */
  text-align: left;
}

/* ---------- Right: single static card ---------- */
.cs-testimonials__split-stage {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.cs-testimonials__split-stage .cs-testimonials__backdrop {
  border-radius: 4.6rem; /* 46px */
}

.cs-testimonials__card--split {
  position: relative;
  z-index: 1;
  transform: none;
  margin: 3rem; /* inner card inset from backdrop, all around */
  padding: 4.8rem 4rem;
  min-height: 0;
  border-radius: 3rem; /* 30px */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quote — italic, centered, orange, multi-paragraph */
.cs-testimonials .cs-testimonials__quote--split {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 2rem; /* 20px */
  font-style: italic;
  line-height: 1.5;
  color: #E0734F;
  text-align: center;
}

.cs-testimonials .cs-testimonials__quote--split p {
  margin: 0;
}

/* ---------- Responsive: collapse to one column ---------- */
@media (max-width: 900px) {
  .cs-testimonials__split {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }
  .cs-testimonials__card--split {
    margin: 2.4rem;
    padding: 3.6rem 2.8rem;
  }
  .cs-testimonials__split-stage .cs-testimonials__backdrop {
    border-radius: 3.6rem;
  }
  .cs-testimonials__card--split {
    border-radius: 2.4rem;
  }
}