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

.peopleExecutiveCard {
  @apply flex flex-col gap-24;

  @variant md {
    @apply flex-row items-start;
  }
}

.peopleExecutiveCard--person {
  &:has(.peopleExecutiveCard-quote) {
    @variant lg {
      gap: var(--spacing-40);
    }
  }

  &:has(.peopleExecutiveCard-quote) .peopleExecutiveCard-portrait {
    @variant lg {
      flex-basis: 285px;
    }
  }
}

.peopleExecutiveCard-portrait {
  flex: 1 0 183px;
  background: linear-gradient(
    238deg,
    var(--color-blue-300) 17.12%,
    var(--color-blue-600) 77.59%
  );

  /* @variant md {
    flex-basis: 250px;
  }

  @variant lg {
    flex-basis: 183px;
  } */
}

.peopleExecutiveCard-mask {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 95.6%,
    28.96% 95.6%,
    18.9% 78.99%,
    0 78.99%
  );
}

.peopleExecutiveCard-information {
  @apply grid h-full;

  flex: 1 1 auto;
  grid-template-rows: min-content min-content 1fr auto;
  grid-template-columns: 100%;
}

.peopleExecutiveCard-information--person {
  padding-bottom: var(--spacing-24);

  @variant md {
    flex: 1 1 30%;
    padding-inline: var(--spacing-16);
  }

  @variant lg {
    flex: 1 1 50%;
  }
}

.peopleExecutiveCard-name {
  font: var(--h4-serif);
  color: transparent;
  background: linear-gradient(
    254deg,
    var(--color-blue-400) 8.18%,
    var(--color-blue-600) 90.55%
  );
  background-clip: text;
}

.peopleExecutiveCard-title {
  margin-top: var(--spacing-4);
  font: var(--h5-bold);
}

.peopleExecutiveCard-position {
  margin-top: var(--spacing-16);
  font: var(--t3-bold);
  color: var(--color-neutral-300);
}

.peopleExecutiveCard-positionList {
  padding-left: 1.4em;
  margin-top: var(--spacing-8);
  font: var(--t5-medium);
  color: var(--color-neutral-800);
  list-style: disc;
}

.peopleExecutiveCard-readMore {
  margin-top: var(--spacing-16);
}

.peopleExecutiveCard-quote {
  @apply grid;

  padding-inline: var(--spacing-36);
  margin-top: var(--spacing-16);
  font: var(--t3-bold);
  font-size: var(--text-body-sm-lg);
  font-style: italic;
  line-height: var(--leading-body-sm-lg);

  @variant md {
    padding-inline: var(--spacing-16);
    font-size: var(--text-body-md-lg);
    line-height: var(--leading-body-md-lg);
  }

  @variant lg {
    padding-inline: var(--spacing-36);
    font-size: var(--text-body-lg-lg);
    line-height: var(--leading-body-lg-lg);
  }

  &::before {
    width: 32px;
    height: auto;
    aspect-ratio: 32 / 22;
    content: "";
    background: url("../../images/img-quote.png") 0 0 / 100% no-repeat;
    transform: translateX(-32px);

    @variant md {
      width: 16px;
      transform: translateX(-16px);
    }

    @variant lg {
      width: 32px;
      transform: translateX(-32px);
    }
  }

  &::after {
    @apply justify-self-end;

    width: 32px;
    height: auto;
    aspect-ratio: 32 / 22;
    content: "";
    background: url("../../images/img-quote.png") 0 0 / 100% no-repeat;
    transform: scale(-1) translateX(-32px);
    transform:;

    @variant md {
      width: 16px;
      transform: scale(-1) translateX(-16px);
    }

    @variant lg {
      width: 32px;
      transform: scale(-1) translateX(-32px);
    }
  }
}