/*
 * Testimonials: three cards per slide in a Bootstrap fade carousel - the
 * active testimonial in the center, the previous and the next one grayed out
 * as side peeks - autoplays every 5 seconds and ends with a slim progress
 * bar. Colors and typography are ported unchanged from the original block.
 *
 * The Belgrade theme and Bootstrap style .carousel-indicators, .progress-bar
 * and .carousel-control-* globally; those are overridden below. No
 * .carousel-control-* or .carousel-indicators markup is rendered here
 * (navigation is automatic), but a defensive reset hides any theme-injected
 * control chrome.
 *
 * Mobile-first: the unqualified blocks are the PHONE/tablet cascade (the old
 * max-width: 991px values merged over the desktop rules); min-width: 992px
 * re-declares the desktop values.
 */

.ergostil-testimonials {
  /* Phone/tablet band is less tall (old max-width: 991px block). */
  padding: 40px 0 60px;
  background-color: #fff;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.ergostil-testimonials .testimonials-slider-wrapper {
  position: relative;
  width: 100%;
  /* Full-width slider with a tighter gutter below the large breakpoint
     (old max-width: 991px block). */
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.ergostil-testimonials .testimonials-slider {
  position: relative;
  overflow: visible;
}

/* Guard: no carousel controls are used, hide any theme-global ones. */
.ergostil-testimonials .testimonials-slider .carousel-control-prev,
.ergostil-testimonials .testimonials-slider .carousel-control-next {
  display: none;
}

/* Three cards per slide: a narrow column on each side for the grayed-out
   neighbor and a double-width column in the middle for the active
   testimonial. The slots are flex containers so every card stretches to the
   height of the tallest card of the row, and the card itself is capped and
   centered inside its column.
   Below the large breakpoint the side columns would be too narrow to carry
   readable text, so only the active card is shown (old max-width: 991px
   block): the track becomes a single column and the peek slots are hidden. */
.ergostil-testimonials .testimonials-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* A single testimonial has no neighbors to peek, so it spans the band. */
.ergostil-testimonials .testimonials-track--single {
  grid-template-columns: minmax(0, 1fr);
}

.ergostil-testimonials .testimonial-slot {
  display: flex;
  min-width: 0;
}

.ergostil-testimonials .testimonials-track .testimonial-card {
  flex: 1;
}

/* The side cards only preview the neighbors: faded and desaturated so the
   centered card stays the focal point. */
.ergostil-testimonials .testimonial-slot--peek .testimonial-card {
  opacity: 0.4;
  filter: grayscale(100%);
}

/* The slide itself is full width (Bootstrap default); the card inside is
   capped and centered so one testimonial sits in the middle of the band. */
.ergostil-testimonials .testimonial-card {
  max-width: 720px;
  margin-inline: auto;
  /* Tighter card padding on small screens (old max-width: 991px block). */
  padding: 22px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}

.ergostil-testimonials .testimonial-card .stars {
  margin-bottom: 16px;
}

.ergostil-testimonials .testimonial-card .star {
  margin-right: 2px;
  font-size: 22px;
  color: #ddd;
}

.ergostil-testimonials .testimonial-card .star.filled {
  color: #1a1a2e;
}

.ergostil-testimonials .testimonial-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ergostil-testimonials .testimonial-content {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}

/* Dot indicators: not part of this design. The component no longer renders
   them (hidden-but-focusable buttons would be an accessibility trap), so this
   only guards against a theme injecting .carousel-indicators into the
   slider. The slim progress bar below is the position indicator. */
.ergostil-testimonials .testimonials-slider .carousel-indicators {
  display: none;
}

/* Slim progress bar under the slider. */
.ergostil-testimonials .testimonials-progress {
  display: flex;
  justify-content: center;
  /* Closer to the slider below the large breakpoint (old max-width: 991px
     block). */
  margin-top: 26px;
}

.ergostil-testimonials .testimonials-progress .progress-track {
  width: 120px;
  height: 3px;
  overflow: hidden;
  background: #ddd;
  border-radius: 2px;
}

.ergostil-testimonials .testimonials-progress .progress-bar {
  height: 100%;
  background: #2d2d3f;
  transition: width 0.5s ease;
}

/* B-only rule from the old max-width: 991px block, appended last so it still
   wins over .testimonial-slot { display: flex } exactly as before. */
.ergostil-testimonials .testimonial-slot--peek {
  display: none;
}

/* Desktop (old unconstrained rules): taller band, 80% slider with a wider
   gutter, the three-column track with grayed side peeks, roomier card and
   progress spacing. */
@media (min-width: 992px) {
  .ergostil-testimonials {
    padding: 60px 0 80px;
  }

  .ergostil-testimonials .testimonials-slider-wrapper {
    max-width: 80%;
    padding: 0 40px;
  }

  .ergostil-testimonials .testimonials-track {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  }

  /* No desktop counterpart for the base display:none - the peek slots fall
     back to the flex layout they share with .testimonial-slot. */
  .ergostil-testimonials .testimonial-slot--peek {
    display: flex;
  }

  .ergostil-testimonials .testimonial-card {
    padding: 30px;
  }

  .ergostil-testimonials .testimonials-progress {
    margin-top: 40px;
  }
}