@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";

.card {
  .size(@w: 348px, @h: 264px);
  padding: 12px;
  .innerWrapper {
    width: 100%;
    height: 100%;
    background-color: @COLOR_LIGHT_SKYBLUE;
    overflow: hidden;
    border-radius: 12px;
    .imageBox {
      .size(@w: 324px, @h: 182px);
      background-color: @COLOR_GRAY06;
      background-size: cover;
      position: relative;
      text-align: center;

      .liveBadge {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
      }

      > img {
        border-radius: 12px 12px 0px 0px;
        display: block;
        max-width: 100%;
        max-height: 100%;

        display: block;
        margin: auto;
      }
    }

    .title {
      width: 100%;
      height: 24px;
      // height: 58px;
      color: @COLOR_GRAY06;
      .font(@fontFamily: @arialFont, @fontSize: 20px);
      .elip(@clamp:1);
      // line-height: 58px;
      letter-spacing: -0.5px;
      padding: 0 15px;
      line-height: 1.2;
      margin-top: 17px;
    }
  }

  &:focus {
    .title {
      height: 58px;
      // line-height: 1.2;
      margin-top: 0;
      .elip(@clamp:2);
      display: flex;
      align-items: center;
      display: -webkit-box;
      line-height: 29px;
    }
    .innerWrapper {
      background-color: @COLOR_WHITE;
    }
    .elip(@clamp:2);
    &::after {
      .focused(@boxShadow: 22px, @borderRadius:12px);
    }
  }
}
