ihk24/gfi-ihk-2024/stories/sections/teasers/teasers.scss

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

.teasers {
  position: relative;
  display: block;

  @media(min-width: 1000px) {
    margin-bottom: -10px;
  }

  .ad-box {
    position: relative;

    img {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
    }
  }


  .magazine-indicator {
    //position: relative;
    display: inline-block;
    align-self: flex-start;
    font-family: "Korb", sans-serif;
    background: linear-gradient(90deg, var(--theme-color-gradient-01) 20%, var(--theme-color-gradient-02) 70%, var(--theme-color-gradient-03) 100%);
    color: white;
    padding: 6px 12px;
    //margin: 6px 0 0;

    position: absolute;
    top: 100%;
    right:9px;
    margin: 0;

    min-width: 160px;

    img {
      position: relative;
      display: block;
      width: auto;
      height: 40px;
    }

    @media(max-width: 767px) {
      margin-bottom: 12px;
    }
  }

  &[data-type="hero"]{
    .image-box ~ .text-box, .image-box ~ .text-box .title {
      .magazine-indicator{
        top: -16px;
      }
    }
  }

  .image-box ~ .text-box {
    h4, .like-h4 {
      position: relative;
      .magazine-indicator{
        top: -40px;
        left: 0;
        right: auto;
        transform: translateY(-100%);
      }
    }
  }

  //@media(min-width: 768px), (max-width: 567px) {
  //  .image-box ~ .magazine-indicator {
  //    position: absolute;
  //    top: -20px;
  //    margin-top: 66.666%;
  //    transform: translate(0, -100%);
  //    z-index: 1;
  //
  //
  //    top: -50px;
  //    left: 0;
  //    margin: 0;
  //    display: inline-block;
  //    transform: translateY(-100%);
  //    min-width: 160px;
  //
  //  }
  //  &[data-type="hero"]{
  //    .image-box ~ .magazine-indicator {
  //      top: -60px;
  //    }
  //  }
  //
  //  .kicker ~ .image-box ~ .magazine-indicator {
  //    top: 12px;
  //  }
  //}

  .button-wrapper {
    text-align: center;
    padding: calc(20px + 1%) 0 0;
  }

  &[data-type="masonry"] {
    .container {
      padding-bottom: calc(10px + 1vw);
    }
    .row {
      flex-wrap: nowrap;

      > .col {
        display: none;
      }
    }
    .column {
      flex: 1 1 100%;
    }
    .social-box {
      position: relative;
      display: block;
      min-height: 478px;
      font-size: 0;
      line-height: 0;

      > *:first-child {
        display: block;
        min-height: 450px;
        height: 450px !important;
      }
    }
    img.lazy {
      opacity: 0;
      transition: 0.3s ease;

      &.loaded {
        opacity: 1;
      }
    }
  }

  &[data-background="lightgrey"] {
    background-color: var(--theme-grey-light);
    padding: calc(2vw + 20px) 0;
    margin: calc(2.5vw + 20px) 0 calc(2vw + 20px);

    + .teasers[data-background="lightgrey"] {
      margin-top: calc(-2vw - 20px);
      padding-top: 20px;
    }

    &:first-child {
      margin-top: 0;
    }

    h2, .like-h2 {
      margin-top: 0 !important;
    }

    &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box h4,
      &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box .like-h4 {
      background-color: var(--theme-grey-light);
    }
  }

  @media(min-width: 568px) {
    &[data-items="2"] .col {
      max-width: 50%;
    }
  }
  @media(min-width: 768px) {
    &[data-items="3"] .col {
      max-width: 33.3333333%;
    }
    &[data-items="4"] .col {
      max-width: 50%;
    }
  }
  @media(min-width: 1200px) {
    &[data-items="2"] .row {
      margin: 0 -40px;
    }
    &[data-items="2"] .col {
      padding: 20px 40px;
    }
    &[data-items="4"] .col {
      max-width: 25%;
    }
  }

  @media(min-width: 568px) and (max-width: 767px) {
    &[data-items="3"], &[data-items="4"] {
      .teaser {
        position: relative;
        display: block;
        padding-left: 40%;
        min-height: 30vw;
      }

      .col.txt-teaser {
        .teaser {
          padding-left: 8px;
          min-height: 0;
        }

        .text-box {
          padding-top: 12px;
        }
      }

      .image-box {
        position: absolute;
        top: 4px;
        left: 0;
        right: 60%;
        margin-right: 10px;
      }

      .kicker {
        margin: 0 0 4px 10px;
      }

      .text-box {
        margin-left: 10px;
      }

      h4, .like-h4 {
        margin-top: 0;
      }

      &[data-type="hero"] .image-box + .text-box {
        h3, .like-h3, h4, .like-h4 {
          position: relative;
          font-size: 20px;
          margin-top: 0;
          padding: 0;
        }
      }
    }
  }

  @media(min-width: 568px) {
    &[data-items="1"] {
      .kicker:first-child {
        min-width: 100%;
      }

      .teaser {
        &:not(.fullwidth) {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          flex-wrap: wrap;
        }
        &.fullwidth {
          .kicker:first-child {
            max-width: calc(50% - var(--col-padding));
            min-width: calc(50% - var(--col-padding));
          }

          //.image-box {
          //  margin-top: -29px;
          //}
        }
      }

      .text-box {
        min-width: 100%;
      }

      .image-box {
        max-width: calc(50% - 20px);
        min-width: calc(50% - 20px);
        flex: 1 1 100%;
        margin-right: 40px;

        ~ .kicker {
          position: absolute;
          left: 50%;
          margin-left: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: calc(50% - 20px);

          ~ .text-box {
            padding-top: 10px;
            min-width: calc(50% - 20px);
            max-width: calc(50% - 20px);
          }
        }
      }
    }
  }

  @media(min-width: 1000px) {
    &[data-items="1"] {
      .teaser:has(.image-box) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: start;
        gap: 0 40px;
        .kicker {
          grid-column: 2;
          grid-row: 1;
        }
        .title {
          margin-top: 0 !important;
        }
        .image-box {
          grid-column: 1;
          grid-row: 1 / span 999;
          width: 100% !important;
          max-width: none;
          margin-top: 0 !important;
          //max-width: calc(50% - 20px);
          //min-width: calc(50% - 20px);

          ~ .kicker {
            //max-width: calc(50% - 20px);
            //margin-left: 20px;
          }

          ~ .text-box {
            grid-column: 2;
            grid-row: 2;
            //max-width: calc(50% - 20px);
            //min-width: calc(50% - 20px);
          }
          ~ .reading-time {
            grid-column: 2;
            grid-row: 3;
          }
        }
      }
    }
  }

  div.teaser {
    height: 100%;
    display: flex;
    flex-direction: column;

    @media(max-width: 999px) {
      height: calc(100% - 20px);
    }
  }

  .col.extern, .col.download, .col.intranet, .col.extranet {
    &:before {
      display: none;
    }
    .title:after {
      @include icon-small-stern;
      font-family: "Icons";
      position: relative;
      font-size: 20px;
      top: 7px;
      line-height: 1;
      text-decoration: none;
      display: inline-block;
      margin-left: 3px;
    }
    //h4.title {
    //  top: 6px;
    //}
  }

  .col.extern .title:after {
    @include icon-small-link-external;
  }

  .col.download .title:after {
    @include icon-small-download;
  }

  .col.intranet .title:after {
    @include icon-small-schloss;
  }

  .teaser {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: 0.25s $easeOutQuad;
    margin: -7px -8px -5px;
    padding: 7px 8px 5px;
    color: var(--theme-color-text);
    border-radius: 8px;
    width: auto;
    @include focus-visible;
  }

  a.teaser {
    h3, .like-h3, h4, .like-h4 {
      text-decoration: underline;
      text-underline-offset: 0.09em;
      text-decoration-thickness: 0.08em;
    }
  }

  h3, .like-h3, h4, .like-h4 {
    margin: 16px 0 14px;
    color: var(--theme-color-link);
    transition: 0.3s ease;
    font-weight: 400;
  }

  p {
    font-size: 16px;

    @media(min-width: 768px) {
      font-size: 18px;
    }
  }

  .kicker {
    margin-bottom: 8px;
    margin-left: 1px;
    order: -1;

    &.stand-out {
      @media(min-height: 768px) {
        position: absolute;
        bottom: 100%;
        margin-bottom: 0;
      }
    }
  }

  .text-box {
    margin-top: 8px;
    border-top: 8px solid var(--theme-color-secondary);
  }

  .social-box {
    border: 4px solid var(--theme-color-primary-dimmed-03);
    margin-left: -2px;
    margin-right: -2px;
    padding: 10px;
    flex: 1 1 100%;
    background-color: white;

    @media(max-width: 767px) {
      margin-bottom: 20px;
    }

    .twitter-timeline {
      height: 100% !important;
      min-height: 420px !important;
    }
  }

  .image-box {
    position: relative;
    display: block;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 4px;

    &.chart {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%);
    }

    &:before {
      content: "";
      position: relative;
      display: block;
      padding-top: 66.6667%;
      margin-bottom: 7px;
    }

    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      height: 8px;
      background-color: var(--theme-color-secondary);
      transition: 0.3s ease;
      z-index: 1;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    img {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    ~ .text-box {
      border-top: 0;
      margin-top: 0;
    }

    .gallery {
      position: absolute;
      top: 0;
      margin: 0;
      width: 100%;

      .gallery-wrapper {
        margin: 0;
        padding: 0;
      }
      .image {
        margin: 0;
        padding: 0;

        &:before {
          padding-top: 66.6666%;
        }
      }
    }
  }

  .linklist {
    margin: 0 0 12px;

    > li {
      margin-bottom: 2px;
      padding-left: 26px;
      font-size: 18px;

      > a {
        margin-left: -26px;
        padding-left: 26px;

        &:before {
          top: 3px;
          left: -5px;
          font-size: 24px;
        }
      }
    }
  }

  .chart-title {
    //@extend .like-h3;
    display: block;
    font-weight: 700 !important;
    padding: 30px;
    color: var(--theme-color-background) !important;
    text-decoration-color: transparent !important;
    margin-bottom: 16px;
    text-align: center;

    @media(max-width: 999px) {
      font-size: 28px;
      margin-bottom: 0;
      padding: 20px;
    }
  }

  .copyright {
    @include copyright;
    bottom: 8px;
  }

  img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 7px);
    transition: 0.3s ease;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    object-fit: cover;
    filter: saturate(100%);
  }

  &[data-type="hero"] .teaser:not(.video-teaser-wrapper){
    .text-box {
      position: relative;
    }

    .image-box ~ .text-box {
      padding-top: 16px;

      h4, .like-h4 {
        position: absolute;
        bottom: 100%;
        z-index: 1;
        background-color: white;
        margin-right: 40px;
        padding-top: 12px;
        padding-right: 24px;
        margin-bottom: 0;
      }
    }

    .chart-title {
      margin-bottom: 20px;

      @media(max-width: 567px) {
        margin-bottom: 16px;
      }
    }
  }
  .video-teaser-wrapper{
    .text-box{
      .text {
        font-size: 16px;

        @media(min-width: 768px) {
          font-size: 18px;
        }
      }
    }
  }

  .teaser-gallery{
    .btn{
      position: absolute;
      top: 0;
      right: 0;
      margin: 20px;
    }
    &:hover{
      .btn{
        box-shadow: 0 0 0 5px rgba(var(--theme-color-primary-rgb), 0.3);
      }
    }
  }
}

.desktop a.teaser:hover,
.desktop .teaser:has(.teaser--link):hover,
.mobile a.teaser:active,
.mobile .teaser:has(.teaser--link):active {
  color: var(--theme-color-link-hover);

  .image-box:after {
    height: 14px;
  }

  h3, .like-h3, h4, .like-h4 {
    color: var(--theme-color-link-hover);
  }
}

[data-type="masonry"] .count {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  color: white;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 1;
  font-size: 14px;
  margin: 10px;
}

.magazine-article .teasers, .magazine-start .teasers, .teasers.magazine-style {
  h2, .like-h2 {
    text-transform: uppercase;
    font-size: var(--font-size-h4);
    margin-bottom: 1.2em;
    line-height: 1.2;
    margin-top: 0;

    &::before {
      content: "";
      position: relative;
      display: block;
      background: linear-gradient(90deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
      height: calc(var(--border-width) / 2);
      margin: 0 0.05em 0.5em;
    }
  }
}

.no-container {
  position: relative;
  left: 50%;
  width: calc(100vw - var(--scrollbar-width));
  margin: 0 calc(-50vw + 7px);
}