@import "_functions";
@import "_mixins";
@import "_variables";

.block-lb-cards {
  .section-description {
    color: var(--ylb-color-dark-grey-1, #2F2F2F);
    margin-bottom: 50px;

    h2 {
      font-size: 48px;
      line-height: normal;
      text-align: var(--wsTextAlignment, center);
    }

    p {
      font-size: 18px;
      line-height: 28px;
      text-align: var(--wsTextAlignment, center);
    }
  }

  .row-cards {
    .card {
      margin: 0 auto;
      max-width: 360px;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
      border: none;
      color: var(--ylb-color-dark-grey-1, #2F2F2F);
      height: 100%;
      position: relative;

      h3 {
        font-size: 32px;
        line-height: 32px;
      }


      .card-img-wrapper {
        border-top-left-radius: var(--wsBorderRadius, unset);
        border-top-right-radius: var(--wsBorderRadius, unset);
        overflow: hidden;
        min-height: 270px;

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .card-content {
        padding: 20px;
        align-items: flex-start;
        text-align: left;

        > div {
          margin-bottom: 20px;
        }

        .card-header {
          border: none;
          padding: 0;
          background-color: transparent;
          margin-bottom: 15px;

          .category-tag {
            font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
            font-size: 14px;
            line-height: 20px;
            text-transform: uppercase;
            min-height: 17px;
            padding: 2px 4px;
            color: var(--ylb-color-dark-grey-1, #2F2F2F);
            width: fit-content;
          }
        }

        .card-body {
          align-items: var(--wsFlexAlignment, unset);

          .card-heading {
            margin-bottom: 25px;
          }
        }

        .card-footer {
          .btn {
            font-size: 18px;
            line-height: 24px;
            font-weight: 600;
            padding: 8px 13px;
            border-radius: 10px;

            &:before {
              content: '';
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              position: absolute;
            }
          }
        }

        .card-text {
          font-size: 18px;
          line-height: 28px;
        }
      }

      &:has(a):hover {
        cursor: pointer;

        .card-heading {
          text-decoration: underline;
        }
      }
    }

    &.row-cols-lg-1 {
      @include media-breakpoint-up('lg') {
        .card {
          flex-direction: row;
          min-height: 360px;
          max-width: unset;

          .card-body {
            flex: unset;
          }
        }

        .card-img-wrapper {
          height: unset;
          width: 49%;
          border-bottom-left-radius: var(--wsBorderRadius, unset);
          border-top-right-radius: unset;

          img {
            width: 100%;
          }
        }
      }
      @include media-breakpoint-up('xl') {
        .card {
          .card-content {
            padding: 40px 35px 40px 40px;
          }
        }
      }
    }
  }
}

