.sf-testimonials {
  --sf-bg: #1f1f1f;
  --sf-panel: #ffffff;
  --sf-featured: #2d5a72;
  --sf-blue: #6ab8ee;
  --sf-gold: #c98400;
  --sf-text: #101010;
  --sf-muted: #ffffff;
  --sf-edge: clamp(18px, 2.5vw, 30px);
  --sf-card-width: clamp(288px, 29vw, 470px);
  --sf-gap: clamp(18px, 1.6vw, 28px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(34px, 5vw, 72px) 0 clamp(30px, 5vw, 58px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sf-bg), #060606);
  color: #fff;
  font-family: inherit;
}

.sf-testimonials *,
.sf-testimonials *::before,
.sf-testimonials *::after {
  box-sizing: border-box;
}

.sf-testimonials__intro,
.sf-testimonials__controls {
  width: min(100%, 1540px);
  margin-inline: auto;
  padding-inline: var(--sf-edge);
}

.sf-testimonials__quote {
  display: inline-block;
  margin-bottom: var(--sf-quote-bottom, 24px);
  padding: var(--sf-quote-padding-y, 0) var(--sf-quote-padding-x, 0);
  border-radius: var(--sf-quote-radius, 0);
  background: var(--sf-quote-bg, transparent);
  color: var(--sf-quote-color, #ffffff);
  font-size: clamp(24px, 6vw, var(--sf-quote-size, 78px));
  font-weight: var(--sf-quote-weight, 900);
  line-height: 0.65;
  letter-spacing: 0;
}

.sf-testimonials__eyebrow {
  margin: 0 0 8px;
  color: var(--sf-eyebrow-color, var(--sf-blue));
  font-size: var(--sf-eyebrow-size, 14px);
  font-weight: var(--sf-eyebrow-weight, 800);
  letter-spacing: var(--sf-eyebrow-letter-spacing, 0.16em);
  text-transform: uppercase;
}

.sf-testimonials h2 {
  max-width: 860px;
  margin: 0;
  color: var(--sf-heading-color, #ffffff);
  font-size: clamp(24px, 4vw, var(--sf-heading-size, 52px));
  font-weight: var(--sf-heading-weight, 800);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sf-testimonials__lead {
  max-width: var(--sf-lead-width, 760px);
  margin: var(--sf-lead-top, 24px) 0 0;
  color: var(--sf-lead-color, var(--sf-muted));
  font-size: clamp(12px, 1.25vw, var(--sf-lead-size, 20px));
  font-weight: var(--sf-lead-weight, 700);
  line-height: 1.45;
}

.sf-testimonials__viewport {
  width: 100%;
  margin-top: clamp(42px, 5vw, 70px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--sf-edge);
  -webkit-overflow-scrolling: touch;
}

.sf-testimonials__viewport::-webkit-scrollbar {
  display: none;
}

.sf-testimonials__track,
.sf-testimonials__track > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex;
  gap: var(--sf-gap);
}

.sf-testimonials__track {
  width: max-content;
  padding-inline: max(var(--sf-edge), calc((100vw - 1540px) / 2 + var(--sf-edge)));
}

.sf-testimonials__track > .block-editor-inner-blocks > .block-editor-block-list__layout {
  width: max-content;
}

.sf-testimonials__track > .block-editor-inner-blocks {
  display: block;
  width: max-content;
}

.sf-testimonial-card,
.sf-testimonials__track > .wp-block-group,
.sf-testimonials__track > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-group {
  flex: 0 0 var(--sf-card-width);
  min-height: clamp(300px, 29vw, 338px);
  padding: clamp(28px, 2.3vw, 38px);
  scroll-snap-align: start;
  border-radius: 8px;
  background: var(--sf-panel);
  color: var(--sf-text);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

.sf-testimonial-card:last-child,
.sf-testimonials__track > .wp-block-group:last-child,
.sf-testimonials__track > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-group:last-child {
  scroll-snap-align: end;
}

.sf-testimonial-card--featured {
  background: var(--sf-featured);
  color: #fff;
}

.sf-testimonial-card .sf-testimonial-card__stars,
.sf-testimonials__track > .wp-block-group .sf-testimonial-card__stars {
  margin-bottom: 18px;
  color: var(--sf-gold);
  font-size: clamp(17px, 1.4vw, 23px);
  line-height: 1;
  letter-spacing: 0;
}

.sf-testimonial-card h3,
.sf-testimonials__track > .wp-block-group h3 {
  margin: 0 0 20px;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
}

.sf-testimonial-card p,
.sf-testimonials__track > .wp-block-group p {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 700;
  line-height: 1.65;
}

.sf-testimonials__controls {
  margin-top: clamp(22px, 3vw, 36px);
}

.sf-testimonials__progress {
  width: min(100%, 1240px);
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
}

.sf-testimonials__progress span {
  display: block;
  width: calc(var(--sf-progress, 0) * 100%);
  min-width: 40px;
  max-width: 100%;
  height: 100%;
  background: var(--sf-featured);
  transform-origin: left center;
}

.sf-testimonials__buttons {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.sf-testimonials__button {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--sf-featured);
  color: #fff;
  font: 700 22px/1 inherit;
  cursor: pointer;
  transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sf-testimonials__button:hover,
.sf-testimonials__button:focus-visible {
  border-color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.sf-testimonials__button:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
}

.sf-testimonials-editor-card {
  padding: 24px;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  background: #fff;
  color: #1e1e1e;
}

.sf-testimonials-editor-card p {
  margin-bottom: 0;
}

.sf-editor-control {
  margin-bottom: 20px;
}

.sf-editor-control__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .sf-testimonials {
    --sf-card-width: clamp(292px, 68vw, 500px);
  }
}

@media (max-width: 560px) {
  .sf-testimonials {
    --sf-edge: 16px;
    --sf-card-width: calc(100vw - 32px);
    --sf-gap: 14px;
  }

  .sf-testimonials__lead {
    margin-top: 18px;
  }

  .sf-testimonial-card,
  .sf-testimonials__track > .wp-block-group,
  .sf-testimonials__track > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-group {
    min-height: 330px;
    padding: 26px 24px;
  }

  .sf-testimonials__progress {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-testimonials__viewport {
    scroll-behavior: auto;
  }

  .sf-testimonials__button {
    transition: none;
  }
}