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

.peopleSpeakerCard:has(> *:not(a)),
.peopleSpeakerCard > *:is(a) {
  @apply block;

  background: var(--color-blue-600);

  @variant pointer-fine {
    &:hover .peopleSpeakerCard-filter > * {
      mix-blend-mode: normal;
      filter: grayscale(0);
    }
  }
}

.peopleSpeakerCard > *:is(a) {
  @apply h-full;
}

.peopleSpeakerCard-portrait {
  flex: 0 0 120px;
  aspect-ratio: 120/160;
  padding-bottom: var(--spacing-14);
  background: var(--color-blue-600);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    36.32% 100%,
    23.07% 76.28%,
    0 76.28%
  );

  @variant md {
    padding-bottom: var(--spacing-lg-2xs);
  }
}

.peopleSpeakerCard-filter {
  @apply relative z-0;

  > * {
    mix-blend-mode: luminosity;
    filter: grayscale(1);

    @variant pointer-coarse {
      mix-blend-mode: normal;
      filter: grayscale(0);
    }
  }

  &::before {
    @apply absolute top-0 left-0 h-full w-full;

    z-index: -1;
    content: "";
    background: #bec8df;
  }

  &::after {
    @apply absolute top-0 left-0 z-10 h-full w-full;

    content: "";
    background:
      radial-gradient(
        58.76% 99.93% at 100% 100%,
        rgb(0 101 182 / 60%) 0%,
        rgb(0 101 182 / 0%) 100%
      ),
      linear-gradient(175deg, #3141d1 -153.72%, rgb(49 65 209 / 0%) 40.99%);
  }
}

.peopleSpeakerCard-information {
  @apply text-white;

  padding: 0 var(--spacing-16) var(--spacing-24);
  font: var(--t4-medium);

  > * + * {
    margin-top: var(--spacing-sm-4xs);

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

.peopleSpeakerCard-name {
  font: var(--t3-bold);

  @variant md {
    font: var(--h4-serif);
    font-size: var(--text-heading-lg-sm);
  }
}

.peopleSpeakerCard-title {
  @apply opacity-60;
}