.card {
  @apply bg-white shadow rounded overflow-hidden;
  .card-header {
    aspect-ratio: 16/9;
    @apply overflow-hidden;
    img {
      @apply object-center object-cover w-full h-full;
    }
    &.has-category {
      @apply relative;
      .card-category {
        @apply absolute z-1 top-4 right-4 bg-primary-700 rounded-xl px-6 py-1 text-white text-sm;
      }
    }
  }
  .card-content {
    .top-header {
      @apply flex flex-wrap gap-4 justify-between mb-4;
      .multi-items {
        @apply flex flex-wrap gap-2;
        > * {
          @apply text-gray-400 font-light leading-none inline-block content-[""];
        }
        > *:nth-child(n+2) {
          @apply before:align-middle before:mr-2 before:inline-block before:w-1 before:h-1 before:rounded-full before:bg-gray-300;
        }
      }
      .info {
        @apply text-gray-400;
      }
      .price {
        @apply font-bold;
      }
    }
    @apply p-6;
    .card-title {
      @apply text-2xl text-primary-700 font-semibold mb-2;
    }
    p {
      @apply break-words;
      &:not(:last-child) { @apply mb-5; }
    }
  }
  .card-footer {
    @apply flex flex-wrap items-center justify-between border-t border-gray-200/50 p-6;
  }

  &.card-image {
    @apply relative bg-cover bg-center bg-no-repeat h-48;
    .card-content {
      @apply absolute left-0 bottom-0 w-full text-white p-4 bg-black/50;
      .card-title { @apply text-white text-lg; }
      p { @apply mb-0 text-sm leading-none; }
    }
    .card-category {
      @apply absolute right-2 top-2 text-white px-4 py-1 bg-primary-700 rounded-3xl text-sm;
    }
  }
  &.card-user {
    @apply p-4;
    .card-head {
      @apply flex flex-wrap;
      h5 {
        @apply font-semibold text-primary-900;
      }
      p {
        @apply text-sm text-gray-500;
      }
      .user-profile {
        @apply w-10 h-10 overflow-hidden rounded-full shadow mr-2;
      }
    }
    .card-content {
      @apply py-4 px-0;
    }
    .card-footer {
      @apply pt-4 pb-0 px-0;
    }
  }
  &.card-profile {
    @apply relative;
    .card-head {
      @apply px-5 pt-5 pb-2;
      .card-name {
        @apply text-2xl font-bold;
        small {
          @apply text-base font-normal block text-gray-600;
        }
      }
    }
    .card-content {
      @apply px-5 pt-1 pb-5 z-5 relative;
      p {
        @apply text-gray-500 mb-2;
      }
    }
    &::after {
      @apply content-[""] absolute -top-14 -right-14 z-1 block w-56 h-56 rounded-bl-full bg-gradient-to-tr from-secondary-200 to-secondary-700;
    }
  }
  &.card-team {
    @apply relative;
    .card-header {
      @apply aspect-auto h-auto px-6 pt-6;
      .card-image {
        @apply text-center relative z-1;
        .card-inner-image {
          @apply mx-auto mb-4 w-40 h-40 rounded-full overflow-hidden;
        }
        figcaption {
          @apply text-xl font-bold;
        }
      }
      &::before {
        @apply content-[""] block absolute top-0 left-0 right-0 h-[7.25rem] bg-gradient-to-t from-primary-500 to-primary-800;
      }
    }
    .card-content {
      @apply text-gray-600;
      p {
        @apply mb-2;
      }
    }
  }
  &.b-space {
    @apply p-5;
    .card-header {
      @apply rounded-lg mb-4;
    }
    .card-content {
      @apply p-0;
    }
    &:not(:has(.card-even)) {
      .card-header {
        @apply mb-4;
      }
    }
  }
  &.card-even {
    @apply flex flex-wrap gap-5;
    &:is(.b-space) {
      .card-header {
        @apply mb-0;
      }
    }
    .card-header {
      @apply w-full sm:w-5/12 md:w-4/12 overflow-hidden rounded-lg;
      img {
        @apply object-cover object-center;
      }
    }
    .card-content {
      @apply md:flex-1;
    }
  }
  &.card-hover {
    @apply relative;
    .card-image {
      @apply h-60 overflow-hidden;
      img {
        @apply h-4/6 absolute inset-0 w-full object-cover object-center transition-all duration-300 ease-in-out;
      }
    }
    .card-content {
      @apply z-1 relative transition-all duration-300 ease-in-out;
    }
    &:hover {
      img {
        @apply h-full;
      }
      .card-content {
        @apply  bg-white/50 backdrop-blur-sm;
      }
    }
  }
  &.card-image-hover {
    @apply relative h-[35rem];
    .card-image {
      @apply transition-all duration-400 ease-in-out;
    }
    .card-content {
      @apply absolute left-0 -bottom-32 bg-black/20 text-white backdrop-blur transition-all duration-400 ease-in-out;
      .card-title {
        @apply mb-5 text-white;
      }
      p, a {
        @apply opacity-0 transition-all duration-400 ease-in-out;
      }
    }
    &:hover {
      .card-image {
        @apply scale-150 rotate-12;
      }
      .card-content {
        @apply bottom-0;
        p, a { @apply opacity-100; }
      }
    }
  }
  &.card-animated-hover {
    @apply p-4 h-[22rem] md:h-80 overflow-visible transition-all duration-300 ease-in-out;
    * {
      @apply transition-all duration-300 ease-in-out;
    }
    .card-image {
      @apply relative z-1 w-full h-48 overflow-hidden rounded;
    }
    .card-content {
      @apply px-0 py-5;
      & *:not(.card-title) {
        @apply opacity-0;
      }
    }
    &:hover {
      .card-image {
        @apply -mt-20;
      }
      & *:not(.card-title) {
        @apply opacity-100;
      }
    }
  }
  &.card-product {
    @apply relative;
    .card-image {
      @apply relative h-72 md:h-96 overflow-hidden;
      img {
        @apply w-full h-full object-cover object-center;
      }
      .price {
        @apply absolute right-0 bottom-0 z-1 px-4 py-2 bg-primary-500 text-white rounded-tl;
      }
      .like {
        @apply absolute right-2 top-2 z-1 p-1 bg-black/30 hover:bg-black/50 w-12 h-12 backdrop-blur text-white grid place-content-center text-xl rounded-full cursor-pointer transition-all duration-300 ease-in-out;
      }
    }
    .price {
      @apply font-bold text-xl text-primary-600;
    }
    .hover-buttons {
      @apply absolute z-10 flex flex-col -right-full top-0 bg-black/20 backdrop-blur-sm py-4 px-2 rounded-bl space-y-2 transition-all duration-300 ease-in-out;
      a {
        @apply text-white p-2 rounded transition-all duration-300 ease-in-out leading-none;
      }
      .add-to-bag {
        @apply hover:bg-primary-500;
      }
      .see-details {
        @apply hover:bg-secondary-500;
      }
      .like {
        @apply hover:bg-red-500;
      }
      svg,
      i {
        @apply text-xl leading-none
      }
    }
    &.clean-card {
      @apply shadow-none bg-transparent;
      .card-header {
        @apply rounded-lg mb-4;
      }
      .card-content {
        @apply p-0;
        .card-title {
          @apply text-3xl text-gray-700;
          &:has(a) {
            @apply hover:text-primary-600 transition-all;
          }
        }
        p {
          @apply text-gray-400 mb-8;
        }
      }
      .card-footer {
        @apply border-0 p-0;
      }
    }
    &:has(.hover-buttons) {
      &:hover {
        .hover-buttons {
          @apply right-0;
        }
      }
    }
  }
}