/* Quote carousel — side nav + Swiper. Contrast via Salient `.span_12.light`. */

.quote-carousel {
  /* Light row bg (dark text): the darkened green, see tokens.css. Figma's own
     brand-2 comes back on the dark row below, where it has the contrast for
     it and matches the quote name. */
  --swiper-pagination-color: var(--color-brand-green-dark);
  --swiper-pagination-bullet-inactive-color: currentColor;
  --swiper-pagination-bullet-inactive-opacity: 0.35;
  --swiper-pagination-bullet-horizontal-gap: 0.25rem;
  --swiper-pagination-bullet-size: 0.5rem;
  display: flex;
  align-items: center;
  gap: var(--gap-l);
}

.quote-carousel-main {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-m);
}

.quote-carousel-swiper {
  inline-size: 100%;
  overflow: hidden;
}

/* Swiper stamps only its modifier classes on a pagination element it did not
   create (-bullets, -horizontal, -clickable), never the base .swiper-pagination.
   So there is no absolute positioning to undo here, and nothing to reset: the
   element is a block in the column flex of .quote-carousel-main, and centering
   its bullets is one flex row. Matching on .swiper-pagination would match
   nothing at all. */
.quote-carousel-pagination {
  display: flex;
  justify-content: center;
}

.quote-carousel-pagination .swiper-pagination-bullet {
  position: relative;
}

.quote-carousel-pagination .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -0.5rem; /* 24px hit target */
}

.quote-carousel-pagination .swiper-pagination-bullet:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

.quote-carousel-slide {
  display: flex;
  justify-content: center;
}

.quote-carousel button.quote-carousel-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem; /* 40px */
  block-size: 2.5rem;
  padding: 0.75rem; /* 12px — Figma */
  border: 0;
  border-radius: 50% !important; /* beat Salient slightly_rounded `button` rule */
  cursor: pointer;
  /* Light row bg (dark text): inverted from Figma */
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.span_12.light .quote-carousel {
  --swiper-pagination-color: var(--color-brand-green); /* Figma brand-2, as the quote name */
}

.span_12.light .quote-carousel button.quote-carousel-nav {
  /* Dark row bg (light text): Figma — white button, dark arrow */
  background: var(--color-on-primary);
  color: var(--color-primary);
}

.quote-carousel button.quote-carousel-nav:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

.quote-carousel-arrow {
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  mask: var(--quote-carousel-arrow) center / contain no-repeat;
  -webkit-mask: var(--quote-carousel-arrow) center / contain no-repeat;
}

.quote-carousel-arrow-prev {
  transform: rotate(-90deg);
}

.quote-carousel-arrow-next {
  transform: rotate(90deg);
}

@media (max-width: 691px) {
  .quote-carousel {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-m);
  }

  .quote-carousel-main {
    flex: 1 1 100%;
    order: -1;
  }
}