// ==========================================================================
// Testimonials Block
// Grid of testimonial cards with optional blue background
//
// OVERRIDE PATTERN:
// This block customizes child components via descendant selectors.
// Never create component modifiers for block-specific styling.
//
// ✓  .b-testimonials .c-card { ... }
// ✗  .c-card--testimonial { ... }
// ==========================================================================

.b-testimonials {
}

// ==========================================================================
// Theme Variants
// ==========================================================================

.b-testimonials {
}

// ==========================================================================
// Slideshow Variant
// Uses Splide.js single-slider with testimonial cards
// Navigation reuses .b-slideshow nav style tokens
// ==========================================================================

.b-testimonials--slideshow {
  .b-testimonials__inner {
    display: grid;
    // row-gap: 1.5rem;
    grid-template-areas:
      "header"
      "slider"
      "nav";

    @include media-breakpoint-up(lg) {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "header nav"
        "slider slider";
      align-items: flex-start;
      column-gap: 2rem;
      // row-gap: 2rem;
    }
  }
  .b-testimonials {
    &__arrows {
      gap: 0.5rem;
    }
  }

  .b-testimonials__header {
    grid-area: header;
    // margin-bottom: 0;
  }

  .b-testimonials__slider {
    grid-area: slider;
    min-width: 0; // prevent grid item from overflowing container

    .splide__slide {
      display: flex;

      .c-testimonial-card {
        width: 100%;
      }
    }
  }

  // Navigation visuals and layout are shared with other slideshow blocks
  // in content-blocks/_slideshow.scss.
}