@import "tailwindcss/theme";
@import "../variables/theme.css";

.voice {
  @apply flex flex-col;

  gap: var(--spacing-sm-2xs);

  @variant md {
    gap: var(--spacing-md-2xs);
  }

  @variant lg {
    @apply relative z-0 block;

    gap: 0;
  }
}

.voice-visual {
  @variant lg {
    flex: 1 1 50%;
  }
}

.voice-content {
  @variant lg {
    flex: 1 1 50%;
  }
}

.voice-quote {
  @apply flex flex-col font-bold italic;

  gap: var(--spacing-8);

  @variant lg {
    @apply absolute z-10 text-white;

    left: var(--spacing-24);
    width: 56.82%;
    min-width: 566px;
    padding: var(--spacing-16);
    font-size: var(--spacing-18);
    line-height: var(--leading-body-lg-lg);
    background: --alpha(#222/60%);
    transform: translateY(calc(-100% - var(--spacing-40)));
  }

  &::before {
    width: 32px;
    height: 23px;
    content: "";
    background: url("../../images/img-quote.png") 0 0 / 100% no-repeat;

    @variant lg {
      filter: invert(100%);
    }
  }

  &::after {
    align-self: flex-end;
    width: 32px;
    height: 23px;
    content: "";
    background: url("../../images/img-quote.png") 0 0 / 100% no-repeat;
    transform: scale(-1);

    @variant lg {
      filter: invert(100%);
    }
  }
}

.voice-quote--right {
  @variant lg {
    @apply absolute z-10 text-white;

    right: var(--spacing-24);
    left: auto;
    transform: translateY(calc(-100% - var(--spacing-40)));
  }
}

.voice-author {
  padding-left: var(--spacing-24);
  margin-top: var(--spacing-16);

  @variant lg {
    padding-block: var(--spacing-16);
    padding-inline: var(--spacing-24);
  }
}

.voice-authorName {
  @apply text-blue-600;

  font: var(--h4-bold);
  font-size: var(--text-heading-sm-sm);
  line-height: var(--leading-heading-sm-sm);

  @variant md {
    font-size: var(--text-heading-md-sm);
    line-height: var(--leading-heading-md-sm);
  }

  @variant lg {
    font-size: var(--text-heading-lg-sm);
    line-height: var(--leading-heading-lg-sm);
  }
}

.voice-authorInformation {
  @apply flex justify-between;

  gap: var(--spacing-16);
  margin-top: var(--spacing-sm-3xs);

  @variant md {
    margin-top: var(--spacing-md-3xs);
  }

  @variant lg {
    margin-top: var(--spacing-md-3xs);
  }
}

.voice-authorTitle {
  @apply flex-auto content-center;

  font: var(--t3-bold);
}

.voice-authorCompany {
  @apply object-scale-down object-top;

  width: 117px;
  height: auto;
  aspect-ratio: 117/60;
}