// ==========================================================================
// Testimonial Card Component
// Quote card with author information
// ==========================================================================

.c-testimonial-card {
  --hks-card-padding-y: 1.5rem;
  --hks-card-padding-x: 1.5rem;
  --hks-card-spacer-y: 1rem;
  --hks-card-spacer-x: 0;
  --hks-card-title-spacer-y: 0.5rem;
  --hks-card-title-color: #{$primary};
  --hks-card-subtitle-color: ;
  --hks-card-border-width: var(--hks-border-width);
  --hks-card-border-color: var(--hks-border-color-translucent);
  --hks-card-border-radius: var(--hks-border-radius);
  --hks-card-box-shadow: ;
  --hks-card-inner-border-radius: calc(
    var(--hks-border-radius) - (var(--hks-border-width))
  );
  --hks-card-cap-padding-y: 1.5rem;
  --hks-card-cap-padding-x: var(--hks-card-spacer-x);
  --hks-card-cap-bg: transparent;
  --hks-card-cap-color: ;
  --hks-card-height: ;
  --hks-card-color: ;
  --hks-card-bg: var(--hks-body-bg);
  --hks-card-img-overlay-padding: 1rem;
  --hks-card-group-margin: 0.75rem;

  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  background-color: $primary-15;
  border-radius: $border-radius;
  box-shadow: 0 2px 8px rgba($black, 0.06);
  transition: box-shadow 0.2s ease;

  @media (min-width: 450px) {
    --hks-card-padding-x: 2.5rem;
  }

  @include media-breakpoint-up(md) {
    --hks-card-padding-y: 2rem;
    --hks-card-padding-x: 10%;
  }
  @include media-breakpoint-up(xxl) {
    // --hks-card-padding-y: 2.5rem;
    --hks-card-padding-x: 2rem;
  }

  &__body {
    padding: 0;
  }

  &__quote-icon {
    color: $color-accent;
    margin-bottom: 1rem;
  }

  &__quote {
    flex: 1;
    margin: 0;
    padding: 0;
  }

  &__text {
    font-size: $font-size-base;
    font-style: italic;
    line-height: 1.6;
    font-weight: $font-weight-semibold;

    // @include media-breakpoint-up(lg) {
    //   font-size: $font-size-lg;
    // }
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
    @include media-breakpoint-up(sm) {
      gap: 2rem;
    }
    // @include media-breakpoint-up(sm) {
    //   flex-direction: row;
    // }
  }

  &__image {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    @include media-breakpoint-up(sm) {
      // width: 85px;
      // height: 85px;
    }
    &--placeholder {
      display: flex;
      align-items: center;
      justify-content: center;

      .material-symbols-outlined {
        font-size: 1.5rem;
      }
    }
  }

  &__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: center;
    // @include media-breakpoint-up(sm) {
    //   text-align: start;
    // }
  }

  &__name {
    font-size: $font-size-lg;
    font-style: normal;
    font-weight: $font-weight-bold;
    color: $primary;
    line-height: 1.3;
    margin-bottom: 0.375rem;
    @include media-breakpoint-up(lg) {
      margin-bottom: 0.375rem;
    }
  }

  &__location {
    font-size: $font-size-base;
    color: $primary;
    line-height: 1.4;
  }
}