@import "../../theme.scss";

.contentCard-outerWrapper {
  position: relative;
  border-radius: 0;
  cursor: pointer;

  .contentCard-outerWrapper--overlay {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 999;
    background-color: #505050cc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .contentCard-InfoBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 9999;

    svg {
      width: 20px;
      height: auto;
    }
  }
}

.contentCard-innerWrapper {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 0;
  aspect-ratio: 3/4;

  .contentCard-imageContainer {
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 8.1%,
      rgba(0, 0, 0, 0.001) 15.5%,
      rgba(0, 0, 0, 0.003) 22.5%,
      rgba(0, 0, 0, 0.005) 29%,
      rgba(0, 0, 0, 0.008) 35.3%,
      rgba(0, 0, 0, 0.011) 41.2%,
      rgba(0, 0, 0, 0.014) 47.1%,
      rgba(0, 0, 0, 0.016) 52.9%,
      rgba(0, 0, 0, 0.019) 58.8%,
      rgba(0, 0, 0, 0.022) 64.7%,
      rgba(0, 0, 0, 0.025) 71%,
      rgba(0, 0, 0, 0.027) 77.5%,
      rgba(0, 0, 0, 0.029) 84.5%,
      rgba(0, 0, 0, 0.03) 91.9%,
      rgba(0, 0, 0, 0.03) 100%
    );
    position: relative;

    .contentCard-imageOverlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
    }

    .contentCard-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .contentCard-content {
    position: absolute;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fefefee6;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 6px;
    border-radius: 6px;
    transform: translateY(calc(100% + 6px));
    transition: transform 0.3s cubic-bezier(0.3, 0.85, 0.4, 0.95);

    &.contentCard-content--expanded {
      transform: translateY(0px);
    }

    p,
    h3 {
      margin: 0;
    }

    .contentCard-title {
      font-weight: 500;
      color: $secondary;
      font-size: 0.8rem;
    }

    .contentCard-description {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: inherit;
      font-size: 0.8rem;
    }

    .contentCard-meta {
      font-size: 0.775rem;
      color: $text-secondary;
    }
  }

  .contentCard-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;

    .button-root svg {
      width: 12px;
      height: 12px;
    }
  }
}