/* ─── FeaturedTestimonialCarousel module ───
   Slides stack in the same CSS Grid cell (grid-column:1; grid-row:1) instead
   of relying on the shared .toggle[aria-expanded] rule in src/input.css
   (display:flex/none). Under display:none a hidden slide takes up no space,
   so the carousel's height tracked whichever slide happened to be active and
   jumped on every rotation if testimonials had different amounts of text.
   With every slide - including the hidden ones - still laid out (just
   visually hidden), the grid row sizes itself to the tallest testimonial and
   stays that height no matter which one is showing. .ftc-slide intentionally
   does not carry the .toggle class for this reason. */
.ftc-slides {
  display: grid;
}

.ftc-slide {
  grid-column: 1;
  grid-row: 1;
}

.ftc-slide[aria-expanded='false'] {
  visibility: hidden;
  pointer-events: none;
}

.ftc-slide[aria-expanded='true'] {
  visibility: visible;
}

/* Plain colored circle instead of the fa-solid fa-circle icon previously used
   here - that icon wasn't rendering (the site's FontAwesome setup is a
   self-hosted JS kit, fonts/FontAwesome/*.min.js, that replaces <i> tags with
   <svg> at runtime; something in that pipeline wasn't picking this one up),
   so the nav dots were invisible. Same fix already applied in
   CustomerSpotlightCarousel.module. Colors reuse the active/inactive values
   the (now-unused-here, svg-targeting) global .page-nav[aria-expanded] rule
   in src/input.css already established.

   Sized to fit the testimonial number (module.html) rather than a bare
   12px dot - with up to 22 testimonials the color change alone was easy to
   miss while paging through the trimmed 5-dot window, so each dot now shows
   its position instead of just an active/inactive state. */
.ftc-page-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #162850;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.page-nav[aria-expanded='true'] .ftc-page-dot {
  background-color: #fe5f00;
  color: #ffffff;
}

/* Only DOT_WINDOW (module.js) of the 22 rendered dots are meant to be
   visible at once, sliding with the active testimonial. module.js toggles
   this via the native `hidden` attribute; !important guards that against
   any future utility class landing on the same button and winning on
   specificity instead. */
.ftc-page-nav[hidden] {
  display: none !important;
}

.ftc-nav-arrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 0;
}

.ftc-nav-arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

.ftc-nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}