/*

#######################
### ORGANISM: tools ###
#######################

### INFO:

The tools cards on the tools page and in widget form.

*/
@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_color';
@import '../atoms/_headline';
@import '../atoms/_text';

section.#{utility('tools')} {
  .#{organism('teaser-grid')} {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 2em;

    &-list {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 50px;
      margin: 0;
      align-items: stretch;

      @media (min-width: 575px) {
        grid-template-columns: repeat(12, 1fr);
        margin: 0;
      }

      @media (min-width: 768px) {
        grid-gap: 30px;
      }

      .#{molecule('teaser-card')}{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px color('athens-gray'), 0 30px 75px -13px rgba(0,0,0,.25);

        &:hover {
          box-shadow: inset 0 0 0 1px color('athens-gray'), 0 40px 100px -13px rgba(0,0,0,0.15);
        }

        & > div:last-child {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }

      .#{molecule('teaser-content')} {
        position: relative;
        padding-left: 15px;
        padding-right: 15px;
      }

      .#{molecule('teaser-tag')}{
        right: 13px;
        top: auto;
        bottom: 10px;
        padding: 5px 20px;
        line-height: 1.6rem;
        font-size: 12px;
        font-family: 'Noto Sans', system;
        font-weight: bold;
        border-radius: 20px;
        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        cursor: pointer;

        &:hover {
          & + a {
            transform: translateY(-2px);

            & > .#{molecule('teaser-card')} {
              box-shadow: inset 0 0 0 1px color('athens-gray'), 0 25px 60px 0px rgba(0,0,0,0.1);
            }
          }
        }

        &-icon {
          display: inline-flex;
          margin: 0 2px 2px 0;
          vertical-align: middle;
          font-size: 19px;
        }

        &-websites {
          @include fill-websites;
        }

        &-stories {
          @include fill-stories;
        }

        &-ads {
          @include fill-ads;
        }

        &-email {
          @include fill-e-mails;
        }
      }

      .#{molecule('teaser')}:hover {
        .#{molecule('teaser-tag')} {
          transform: translateY(-2px);
        }
      }

      .#{molecule('teaser-logo')}{
        position: absolute;
        left: 30px;
        bottom: 100%;
        margin: 0 0 3px;
        width: 20px;
        height: 20px;
        fill: color('blue-ribbon');

        svg {
          z-index: 2;
        }

        &::before {
          content: '';
          position: absolute;
          left: 10px;
          bottom: -4px;
          transform: translateX(-50%);
          width: 70px;
          height: 28px;
          z-index: 1;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 28'%3E%3Cpath d='M35 0.4v0c-20.5 0-11.8 26.6-35 26.6v1h70v-1c-23.2 0-14.5-26.6-35-26.6z' fill='%23fff'/%3E%3C/svg%3E");
        }
      }

      .#{molecule('teaser-image')}{
        &.contain {
          amp-img {
            margin: 0 10px;

            @media (min-width: 768px) {
              margin: 15px 30px;
            }
          }

          &:before {
            opacity: 0.5;
          }
        }
      }

      .#{molecule('teaser-card-essential')}{
        .#{molecule('teaser-card')}{
          background-color: color('charade');

          .#{molecule('teaser-content')} > * {
            color: #fff;
          }

          .#{molecule('teaser-logo')} {
            fill: #fff;
            background-color: color('charade');

            &::before {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 28'%3E%3Cpath d='M35 0.4v0c-20.5 0-11.8 26.6-35 26.6v1h70v-1c-23.2 0-14.5-26.6-35-26.6z' fill='%23333D47'/%3E%3C/svg%3E");
            }
          }
        }
      }

      .#{molecule('teaser-type')}{
        display: flex;
        align-items: center;
        height: 55px;
        padding: 0 120px 0 15px;
        @include txt-3;
        color: color('river-bed');
        border-top: 2px solid color('iron');

        &-essential {
          color: #fff;
        }
      }

      .#{molecule('teaser')}{
        grid-column: 1;
        margin: 0;
        display: flex;

        @media (min-width: 575px) {
          grid-column: span 6;
        }

        @media (min-width: 768px) {
          grid-column: span 4;
        }

        @media (min-width: 1120px) {
          grid-column: span 3;
        }

        amp-img img {
          object-fit: cover;
        }

        amp-img.contain img {
          object-fit: contain;
        }

        & > a {
          display: flex;
          width: 100%;
        }

        p {
          color: #20202A;
          font-weight: normal;
          font-size: 0.8em;
          margin-bottom: 0;
        }
      }
    }
  }
}
