@use 'sass:list';
@use '../../base/token';
@use '../../abstract';

.case-study-card-section {
  overflow: hidden;

  .swiper-slide {
    width: auto;
  }

  .swiper {
    overflow: visible;
  }

  .cds-section-wrap {
    padding-top: 0;
    padding-bottom: 0;
    background: none;

    .cds-carousel-layout__arrows {
      padding: 0;
      gap: 16px;
      justify-content: flex-start;
    }
  }

  @include abstract.media-bp-up('md') {
    .cds-section-wrap {
      background: none;

      .cds-carousel-layout__arrows {
        gap: 32px;
      }
    }
  }
}

// case study card
// ========================
.case-study-card {
  $this: &;

  padding: 24px;
  width: 304px;
  height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--gray-100);
  border-radius: 16px;

  &__logo {
    display: block;
    height: 40px;
    margin-bottom: 40px;

    img {
      height: 100%;
    }
  } // logo

  &__writer {
    display: block;
    margin-bottom: 16px;
    font-style: normal;
    color: var(--gray-700);
    font-weight: 700;
    line-height: 24px;
  } // writer

  &__content {
    @include abstract.relative();

    flex: 1;
    overflow: hidden;
    padding: 24px 16px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    font-size: token.$font-size-2;
    border-radius: 12px;
    background-color: var(--base-white);

    &::before {
      @include abstract.absolute($top: 0, $left: 0);

      width: 100%;
      height: 100%;
      background-color: rgba(255 255 255 / 0.3);
      content: '';
    }

    & > * {
      @include abstract.relative();
    }

    blockquote {
      height: 168px;
      margin-bottom: 32px;
      color: var(--gray-500);
      font-weight: 400;
      line-height: 24px;
      word-break: break-all !important;
      white-space: pre-wrap;
    }
  } // content

  @include abstract.media-bp-up('md') {
    width: 384px;
    height: 504px;

    &__logo {
      height: 48px;
      margin-bottom: 72px;
    } // logo

    &__writer {
      margin-bottom: 20px;
      line-height: 28px;
    }

    &__content {
      padding: 32px 24px;
      font-size: token.$font-size-3;

      blockquote {
        white-space: pre-wrap;
        line-height: 28px;
      }
    }
  } //md
}

.case-study-card__arrows {
  margin-top: 32px;

  .cds-carousel-arrow {
    width: 48px;
    height: 48px;

    &:last-child {
      margin-left: 16px;
    }
  }

  @include abstract.media-bp-up('md') {
    .cds-carousel-arrow {
      width: 56px;
      height: 56px;

      &:last-child {
        margin-left: 32px;
      }
    }
  }
}