/**
  * Quote
 */

:root {
  --quote-font-size: var(--font-size-24);
  --quote-font-family: "droid-serif", serif;
}

.block-quote {
  position: relative;
  background: url('../../images/repeating-pattern.svg') center center;
  color: var(--body-font-color);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5) calc(var(--spacing) * 4.625);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: var(--box-shadow);

  @media (min-width: 480px) {
    padding: calc(var(--spacing) * 4.625) calc(var(--spacing) * 3.75);
  }

  /* Background gradient */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(252, 239, 243, 0.00) -50.41%, #FCEFF3 100%);
  }

  /* Background corner graphic */
  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 434px;
    height: 350px;
    background: url('../../images/component-corner-graphic.svg') no-repeat;
  }

  .quote-wrapper {
    position: relative;
    z-index: 1;

    @media (min-width: 768px) {
      padding: 0 calc(var(--spacing) * 3.75);
    }

    &::before,
    &::after {
      content: none;
    }

    > p {
      font-size: var(--quote-font-size);
      font-style: italic;
      margin-bottom: calc(var(--spacing)*2);
      line-height: 1.6;
      font-family: var(--quote-font-family);

      &::before {
        content: "“";
      }

      &::after {
        content: "”";
      }
    }

    .quote-footer {
      display: flex;
      align-items: center;
    }

    figure {
      width: 72px;
      height: 72px;
      box-shadow: var(--box-shadow-lg);
      border-radius: 50%;
      margin-right: var(--spacing);
      margin-bottom: 0;
      overflow: hidden;

      &:not(:has(img)) {
        background: var(--secondary-color);
      }

      img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
      }
    }

    span {
      display: block;
    }

    .author {
      font-family: var(--bs-heading-font-family);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-20);
    }

    .function {
      font-size: var(--font-size-18);
    }
  }
}