ihk24/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.event-teaser-large {
  background-color: var(--color-background);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  transition: 0.3s ease;
  width: 100%;
  text-decoration: none;
  min-height:400px;
  flex-wrap: wrap;
  position: relative;
  &:not(.widemode){
    flex-wrap: wrap;
    align-content: baseline;
    flex-flow: column;
    justify-content: flex-start;
    .blue-box {
      height:250px;
    }
    .text-box{
      height: calc(100% - 250px);
    }
  }
  @include focus-visible;

  &:hover {
    color: var(--color-text-accent);

    .blue-box {
      background-color: var(--color-text-accent);
    }
  }


  .blue-box {
    display: flex;
    //flex-direction: column;
    justify-content: flex-end;
    color: var(--color-text);
    font-family: "Korb", sans-serif;
    font-size: 14px;
    line-height: 1;
    padding: 70px 15px 15px 15px;
    min-width: 80px;
    transition: 0.2s ease;
    position:relative;
    flex-flow: column;
    align-items: baseline;
    width:100%;
    margin-right: 0;
    min-height:250px;
    position: relative;
    &:not(.background-image){
      //background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
      background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
    }
    .img-con{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background-color:rgba(#003366,0.54);
      background-size: cover;
      background-position: 50% 50%;
      z-index:0;
    }
    &.background-image{
      .img-con:before{
        content:"";
        background: linear-gradient(0deg, rgba(0, 51, 102, 0.33) 0%, rgba(0, 51, 102, 0.33) 100%), linear-gradient(180deg, rgba(0, 32, 65, 0) 0%, rgba(0, 32.45, 64.90, 0.60) 100%);
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:1;
      }
    }
    .icon-box {
      font-family: 'Pictograms', sans-serif;
      font-size: 48px;
      line-height: 1;
      color: var(--color-text);
      position:absolute;
      top:15px;
      left:15px;
    }
    .ev-title{
      font-weight: 400;
      text-decoration: underline;
      line-height: normal;
      font-size: 28px;
      position:relative;
    }
    .ev-cat{
      color: var(--color-button-tertiary-text);
      font-size: 16px;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 400;
      line-height: 16px;
      letter-spacing: 0.32px;
      background-color: var(--color-button-tertiary-background);
      border-radius:8px;
      display:inline-block;
      padding:5px 7px;
      position:relative;
    }
    span {
      white-space: nowrap;
    }

    span:nth-child(2) {
      font-size: 36px;
      margin-left: -2px;
    }

    &.no-date {
      align-items: flex-start;

      &:before {
        @include icon-sanduhr;
        font-family: 'Icons', sans-serif;
        font-size: var(--icon-size);
        line-height: 1;
        margin-bottom: 4px;
        margin-top: 5px;
      }

      * {
        display: none;
      }
    }
  }

  .text-box {
    //align-self: center;
    padding: 15px;
    //line-height: 1.2;
    //background-color: var(--color-background);
    width:100%;
    display:flex;
    justify-content:space-between;
    flex-flow: column;
    @media(max-width: 767px) {
      font-size: var(--font-size-small);
    }
    .ev-desc{
      line-height: 27px;
      letter-spacing: 0.18px;
      font-size:18px;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  p {
    margin: 0;
    &:not(:last-child) {
      margin: 2px 0 0.3em;
    }
  }

  .detail-box {
    padding-top: 15px;
    border-top: 1px #CCD7E6 solid;
    .btn{
      float: right;
      margin-top:15px;
      display:none;
    }
    > div {
      display: block;
      font-size: var(--font-size-small);
      line-height: 1.2em;
      margin-right: 15px;
      margin-bottom: 5px;
      color: var(--color-text);

      &::before {
        position: relative;
        display: inline-block;
        font-family: 'Icons', sans-serif;
        font-size: 18px;
        line-height: 20px;
        margin-right: 5px;
        vertical-align: top;
        color: var(--color-text);
      }

      @media(max-width: 567px) {
        display: block;
        padding-left: 24px;
        position: relative;

        &:before {
          position: absolute;
          left: 0;
        }
      }

      &.date::before {
        @include icon-xsmall-kalender;
      }
      &.time::before {
        @include icon-xsmall-uhr;
      }
      &.location::before {
        @include icon-xsmall-pin;
      }
      &.interested-parties::before {
        @include icon-xsmall-liste;
      }
      &.price::before {
        @include icon-xsmall-euro;
      }
      &.status {
        &::before {
          @include icon-xsmall-offen;
          color: var(--color-text-accent);
        }

        &.interested-parties, &.waiting-list {
          &::before {
            @include icon-xsmall-liste;
            color: var(--color-text);
          }
        }

        &.reserved::before {
          @include icon-xsmall-geschlossen;
          color: var(--theme-color-error);
        }
      }
    }
  }
  &.widemode{

    @media screen and (min-width:992px){
      //border-radius: 4px;
      .blue-box{
        width:50%;
        padding: 100px 15px 20px 15px;
        .icon-box {
          font-size: 70px;
          top:20px;
        }
        .ev-title{
          font-size: 36px;
          line-height: 43.20px;
        }
      }
      .text-box{
        width:50%;
        padding: 20px;
        .detail-box {
          .btn{
            display:inline-block;
          }
        }
        .ev-desc{
          font-size:18px;
        }
      }
    }
  }

  .teaser--link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
}