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

.discover {
  padding-block: var(--spacing-sm-margin-section);

  @variant md {
    padding-block: var(--spacing-md-margin-section);
  }

  @variant lg {
    padding-block: var(--spacing-lg-margin-section);
  }
}

.discover-container {
  @apply grid;

  gap: 33px;

  @variant lg {
    gap: var(--spacing-40);
  }
}

.discover-heading {
  @apply text-center;

  background: linear-gradient(
    254deg,
    var(--color-blue-400) 8.18%,
    var(--color-blue-600) 90.55%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.discover-list {
  @apply relative grid;

  gap: var(--spacing-24);

  @variant lg {
    @apply justify-center;
  }

  &::before {
    @apply mx-auto block aspect-square;

    width: 240px;
    margin-bottom: 33px;
    content: "";
    background: url("../../images/img-taiwan.svg") 0 0 / 100% no-repeat;

    @variant lg {
      @apply absolute top-1/2 left-1/2 mb-0;

      width: 386px;
      transform: translate(-50%, -50%);
    }
  }
}

.discover-item {
  @apply relative;

  padding-left: var(--spacing-80);

  @variant lg {
    @apply p-0;

    width: 386px;
  }

  &::before {
    @apply absolute top-0 left-0 block aspect-square;

    width: 64px;
    content: "";
    background: 0 0 / 100% no-repeat;

    @variant lg {
      @apply static;

      margin-bottom: var(--spacing-12);
    }
  }

  &::after {
    @variant lg {
      @apply block w-full;

      aspect-ratio: 386/42;
      margin-top: var(--spacing-12);
      content: "";
      background: url("../../images/line-discover.svg") 0 0 / 100% no-repeat;
    }
  }

  > * + * {
    margin-top: var(--spacing-8);
  }
}

.discover-item--collaborative {
  @variant lg {
    transform: translateX(-303px);
  }

  &::before {
    background-image: url("../../images/img-collaborative.svg");
  }
}

.discover-item--talent {
  @variant lg {
    @apply relative order-2;

    padding-top: 54px;
    transform: translate(-303px, -41px);
  }

  &::before {
    background-image: url("../../images/img-talent.svg");
  }

  &::after {
    @variant lg {
      @apply absolute top-0 left-0 m-0;

      transform: scaleY(-1);
    }
  }
}

.discover-item--global {
  @variant lg {
    padding-right: var(--spacing-40);
    transform: translate(399px, -41px);
  }

  &::before {
    background-image: url("../../images/img-global.svg");
  }

  &::after {
    @variant lg {
      width: calc(100% + 102px);
      background-image: url("../../images/ling-discover-bottom.svg");
      transform: translate(-102px, -40px);
    }
  }
}

.discover-action {
  @apply mx-auto w-full;

  @variant lg {
    width: 200px;
  }
}