/*

#############################################
### TEMPLATE: overview benefits ###
#############################################

### INFO:

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

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

@import '../molecules/benefit';
@import '../molecules/copy';
@import '../molecules/headline-icon.scss';
@import '../molecules/quote';

@import '../organisms/benefits-overview.scss';
@import '../organisms/case-band.scss';
@import '../organisms/case-grid.scss';
@import '../organisms/component-visual.scss';

@import '../templates/_default.scss';

.#{template('what-is-amp')} {

  .#{utility('container')} {
    @include container;
  }

  .#{utility('container-fluid')} {
    @include container-fluid;
  }


  .#{utility('content')} {
    @include default-section-padding;
    margin-bottom: 7em;

    @media (min-width: 768px) {
      margin-bottom: 8vw;
    }

    .#{utility('container')} {
      padding: 0;
    }

    .#{molecule('copy')} {
      &:last-child,
      p:last-child {
        margin-bottom: 0;
      }
    }
  }

  .#{utility('component-visual')} {
    overflow: visible;

    &-container {
      display: flex;
      justify-content: space-between;
      grid-column: 6 / 15;
    }

    .#{organism('component-visual')} {

      &-link {
        margin-right: 15px;
      }

      &-copy {
        @include default-section-padding;
      }
    }
  }

  .#{utility('case-band')} {
    .#{organism('case-band')} {
      grid-template-columns: 14fr 5.5fr 3fr 9fr 7fr 12.5fr 3fr 5fr 4fr 4fr 12.5fr 6fr 10.5fr;
      grid-template-rows: 5fr 6fr 12.5fr 12.5fr 25fr 5fr 5fr 5fr 5fr 5fr;
      padding: 0;

      &-image {
        margin: auto;

        &:nth-child(1) {
          grid-column: 2 / 5;
          grid-row: 3 / 9;

          &:before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: -1px;
            left: 0;
            background: linear-gradient(270deg, transparent 30%, #000);
            z-index: 1;
          }

          &:after {
            content: '';
            width: 100%;
            height: 45%;
            position: absolute;
            bottom: 45%;
            right: 0;
            transform: translateY(50%);
            transform-origin: center;
            background: linear-gradient(90deg, transparent 30%, #000);
            z-index: 1;
            filter: blur(15px);
          }
        }

        &:nth-child(2) {
          grid-column: 1 / 3;
          grid-row: 2 / 10;
        }

        &:nth-child(3) {
          grid-column: 8 / 13;
          grid-row: 3 / 7;

          &:before {
            content: '';
            width: 100%;
            height: 45%;
            position: absolute;
            bottom: 0;
            right: 0;
            opacity: 0.3;
            background: linear-gradient(90deg, transparent 20%, #000);
            z-index: 1;
            filter: blur(15px);
          }

          &:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0.5;
            background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 1) 100%);
            z-index: 1;
          }
        }

        &:nth-child(4) {
          grid-column: 6 / 9;
          grid-row: 2 / 10;

          &:before {
            content: '';
            width: 100%;
            height: 60%;
            position: absolute;
            bottom: 42%;
            left: 0;
            opacity: 0.3;
            transform: translateY(50%);
            transform-origin: center;
            background: linear-gradient(270deg, transparent -60%, #000);
            z-index: 1;
            filter: blur(40px);
          }
        }

        &:nth-child(5) {
          grid-column: 4 / 7;
          grid-row: 4 / 8;

          &:before {
            content: '';
            width: 100%;
            height: calc(100% + 2px);
            position: absolute;
            bottom: -1px;
            left: 0;
            opacity: 0.2;
            background: linear-gradient(270deg, transparent 50%, #303030);
            z-index: 1;
          }
        }

        &:nth-child(6) {
          grid-column: 10 / 13;
          grid-row: 5 / 9;
          z-index: 1;
        }

        &:nth-child(7) {
          grid-column: 12 / 14;
          grid-row: 3 / 8;

          &:before {
            content: '';
            width: 100%;
            height: 42%;
            position: absolute;
            bottom: 0;
            right: 0;
            opacity: 0.4;
            background: linear-gradient(200deg, transparent -20%, #000);
            z-index: 1;
            filter: blur(0px);
          }
        }
      }
    }

    .#{molecule('copy')} {
      @include default-section-padding;
    }
  }

  .#{utility('stage')} {
    .#{organism('stage')} {

      &-content-button {
        margin-right: 0.5em;
      }

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

        &-content {
          margin-top: 20em;
          margin-bottom: 4em;
        }
      }
    }

    & + .#{utility('content')} {
      @media (min-width: 768px) {
        margin-top: -15%;
      }

      h1 {
        @include hl-xxlrg;
      }
    }
  }

  /* raise specificity to override some tools widget styles */
  .ap--tools-widget div.#{organism('teaser-grid')} {
    grid-column: 4 / 25;
  }

  .#{organism('teaser-grid')} {
    grid-column: 4 / 22;
    width: 100%;
    margin-bottom: 7em;

    @media (min-width: 768px) {
      margin-bottom: calc(12.5em + 7em);
    }

    @media (min-width: 1024px) {
      margin-bottom: calc(12.5em + 8vw);
    }

    &-list {
      display: flex;
      padding-top: 40px;
      overflow: scroll;

      @media (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 60px 30px;
        overflow: visible;
        padding-top: 0;
        align-items: flex-start;
      }

      .#{molecule('teaser')}{
        margin: 0 20px;

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

  .#{utility('made-of-headline')} {
    grid-column: 3 / 19;
    margin-top: 0;
    @include hl-xlrg;
  }

  .#{molecule('biggy')} {
    align-items: end;

    &-headline {
      margin-bottom: -.688rem;
    }
  }
}
