@import "../../../sass/webpack_deps";

.article-body {
  max-width: span(6 static);
  padding-bottom: 4.4rem;
  position: relative;

  @media (min-width: $min-720) {
    padding-bottom: 5.8rem;
  }

  &.is-narrow {
    @include container;
    @include container-static(6);
  }

  // Warning:
  // The following contains legacy classnames from Rizzo/Waldorf as content
  // stored in the database has markup attached. Placeholders are used to
  // indicate the preferred classname when applicable. Disgusting nesting may
  // be necessary.
  //
  // Use this modifier when the article body contains content that was formatted
  // within the CMS
  &.has-legacy-code .article-body__content {
    .copy--feature {
      @include lede;
      margin-bottom: 4.2rem;

      @media (min-width: $min-600) {
        margin-bottom: 4.2rem;
      }

      em {
        font-style: normal;
      }
    }

    > address {
      color: $light-text-color;
      font-size: 1.4rem;
      font-style: normal;
      line-height: (24 / 14);
      margin-bottom: 3.2rem;

      @media (min-width: $min-600) {
        font-size: 1.8rem;
        line-height: (34 / 18);
        margin-bottom: 6.6rem;
      }
    }

    p:not(.copy--feature),
    .copy--body__list {
      color: $darkgray;
      font-family: $miller-daily;
      font-size: 1.6rem;
      line-height: (26 / 16);

      @media (min-width: $min-720) {
        font-size: 2rem;
        line-height: (36 / 20);
      }

      + p,
      + .copy--body__list {
        margin-top: 1rem;

        @media (min-width: $min-600) {
          margin-top: 1.7em;
        }
      }
    }

    .ad {
      margin-bottom: #{(50 / 18)}em;
      margin-top: #{(42 / 18)}em;

      @media (min-width: $min-600) {
        margin-bottom: #{(90 / 18)}em;
        margin-top: #{(38 / 18)}em;
      }
    }

    .copy--body__list {
      padding-left: 2rem;
    }

    .copy--h3,
    .copy--h4 {
      color: $darkgray;
      font-weight: 600;
      letter-spacing: -.02rem;
      margin-bottom: 1rem;
      margin-top: 2.5rem;
    }

    .copy--h3 {
      font-size: 1.6rem;
      line-height: (26 / 16);

      @media (min-width: $min-720) {
        font-size: 2rem;
        line-height: (28 / 20);
      }
    }

    .copy--h4 {
      font-size: 1.4rem;
      line-height: (24 / 14);

      @media (min-width: $min-720) {
        font-size: 1.6rem;
        line-height: (24 / 16);
      }
    }

    li a:not([data-callout-slug]),
    p:not(.stack__article__image-container) a:not([data-callout-slug]),
    p:not(.copy--caption) > a:not([data-callout-slug]),
    .client-body a {
      @include underlined-link(
        $link-color: $darkgray,
        $link-color-active: $lpblue
      );
    }

    .stack__article__image-container {
      @include copy-caption;
      margin-bottom: 3.2rem !important;
      margin-top: 3.2rem !important;
      opacity: 0;
      transition: opacity 200ms ease;
      visibility: hidden;

      @media (min-width: $min-600) {
        font-size: 1.4rem !important;
        margin-bottom: 6.6rem !important;
        margin-top: 6.6rem !important;
      }

      .no-js &,
      &.is-visible {
        opacity: 1;
        visibility: visible;
      }

      &.is-wide {
        @media (min-width: $min-840) {
          margin-left: -10%;
          width: 120%;
        }

        @media (min-width: $min-1024) {
          margin-left: -20%;
          width: 140%;
        }

        @media (min-width: $min-1290) {
          margin-left: -40%;
          width: 180%;
        }

        @media (min-width: $min-1410) {
          @include with-layout(static) {
            margin-left: -#{span(2) + gutter()};
            width: span(10);
          }
        }
      }

      // This selects the image
      > .copy--body__link:first-of-type {
        background-image: none; // Reset underlined-link mixin
        display: block;
        margin-bottom: 1rem;
        position: relative;

        @media (min-width: $min-600) {
          margin-bottom: 1.6rem;
        }

        &::after {
          @include pop-out;
          bottom: 1.5rem;
          content: "";
          position: absolute;
          right: 1.5rem;
          z-index: z("default") + 1;
        }
      }

      .stack__article__image {
        // Break the image out of the container; .article needs overflow: hidden
        margin-left: percentage(-15px / 290px);
        margin-right: percentage(-15px / 290px);
        max-width: none;
        width: percentage(320px / 290px);

        @media(min-width: $min-480) {
          margin-left: percentage(-30px / 420px);
          margin-right: percentage(-30px / 420px);
          width: percentage(480px / 420px);
        }

        @media(min-width: $min-720) {
          margin-left: percentage(-45px / 630px);
          margin-right: percentage(-45px / 630px);
          width: percentage(720px / 630px);
        }

        @media(min-width: $min-840) {
          margin-left: 0;
          margin-right: 0;
          max-width: 100%;
          width: 100%;
        }
      }
    }

    .stack__article__image-container + p.copy--caption,
    .stack__article__image-container + p > span.caption {
      margin-bottom: 3.2rem;
      margin-top: -3.2rem;
      padding-top: 1rem;

      @media (min-width: $min-600) {
        margin-bottom: 6.6rem;
        margin-top: -6.6rem;
        padding-top: 1.6rem;
      }
    }

    // [data-op-video-id] is the only possible way of identifying
    // our target if our article data has come through op-articles.
    [data-op-video-id] {
      // Break the video out of the container; Intended to
      // appear identical to how .stack__article__image displays images.
      margin: 3.2rem percentage(-15px / 290px);
      opacity: 0;
      transition: opacity 200ms ease;
      visibility: hidden;
      width: percentage(320px / 290px);

      &.is-visible {
        opacity: 1;
        visibility: visible;
      }

      >div {
        padding-top: 56.25%; // maintain 16:9 aspect ratio
      }

      @media(min-width: $min-480) {
        margin-left: percentage(-30px / 420px);
        margin-right: percentage(-30px / 420px);
        width: percentage(480px / 420px);
      }

      @media(min-width: $min-600) {
        margin-bottom: 6.6rem;
        margin-left: percentage(-45px / 630px);
        margin-right: percentage(-45px / 630px);
        margin-top: 6.6rem;
        width: percentage(720px / 630px);
      }

      @media (min-width: $min-840) {
        margin-left: -10%;
        width: 120%;
      }

      @media (min-width: $min-1024) {
        margin-left: -20%;
        width: 140%;
      }

      @media (min-width: $min-1290) {
        margin-left: -40%;
        width: 180%;
      }

      @media (min-width: $min-1410) {
        @include with-layout(static) {
          margin-left: -#{span(2) + gutter()};
          width: span(10);
        }
      }
    }

    .copy--caption,
    p > span.caption {
      @include copy-caption;

      a {
        @include underlined-link(
          $link-color: $color-text,
          $link-color-active: $lpblue,
          $underline-offset: 1px
        );
      }
    }

    span.copy--caption,
    p > span.caption {
      display: block;
    }

    p.copy--caption {
      margin-bottom: 0;
      margin-top: 1.6rem;
    }
  }

  a[data-callout-slug] {
    @media(max-width: $max-1200) {
      @include underlined-link(
        $link-color: $darkgray,
        $link-color-active: $lpblue
      );
    }

    @media(min-width: $min-1200) {
      backface-visibility: hidden;
      border-bottom: .1rem dashed $footer-copyright-color;
      color: $darkgray;
      position: relative;
      text-decoration: none;
      transform: translateZ(0);
      transition: color 300ms, border-bottom 200ms ease;

      &::before {
        background: darken($color-white, 6);
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transform: scaleY(0);
        transform-origin: 50% 100%;
        transition: transform 100ms ease, border-bottom 100ms ease;
        z-index: z("below");
      }

      &:hover,
      &:focus,
      &.is-active {
        border-bottom: .1rem solid darken($color-white, 6);

        &::before {
          transform: scaleY(1);
        }
      }
    }
  }

  .client-strap {
    @include container;
    border-bottom: .1rem solid $color-gray;
    border-top: .1rem solid $color-gray;
    margin-bottom: 3.2rem;
    margin-top: 3.2rem;
    padding-bottom: 3.2rem;
    padding-top: 3.2rem;

    @media(max-width: $max-560) {
      display: flex;
      flex-direction: column-reverse;
    }
  }

  .client-body {
    font-size: 1.4rem;
    line-height: (22 / 14);
    vertical-align: middle;

    @media(max-width: $max-560) {
      width: 100%;
    }

    @media (min-width: $min-560) {
      display: inline-block;
      float: right;
      padding-left: percentage(gutter(static) / span(6 static));
      padding-right: percentage((gutter(static) / 2) / span(6 static));
      width: percentage(48rem / span(6 static));
    }
  }

  .client-logo {
    max-width: 15rem;

    @media(max-width: $max-560) {
      margin-bottom: .5rem;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }

    @media (min-width: $min-560) {
      display: inline-block;
      float: left;
      width: percentage(15rem / span(6 static));
    }

    .no-flexbox & {
      @media(max-width: $max-560) {
        margin-bottom: 0;
      }
    }

    img {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .client-sponsor {
    display: none;
  }
}