/*
 * Cover
 *
 *     .cover-section
 *       .cover-front
 *         .cover-front-title
 *       .cover-content
 */

@media (min-width: 769px) {
  .cover-section {
    position: relative;
    background: white;
    overflow: hidden;

    display: flex;
    align-items: stretch;

    > .cover-front,
    > .cover-content {
      min-height: calc(100vh - 32px);
    }

    > .cover-front {
      flex: 0 0 45%;
    }

    > .cover-content {
      flex: 0 0 55%;
    }
  }

  // Line
  .cover-section::after {
    content: '';
    display: block;
    top: 24px;
    left: 64px;
    bottom: 24px;
    width: 1px;
    background: rgba(white, .2);
    position: absolute;
  }
}

/*
 * The content
 */

.cover-content {
  display: flex;
  flex-direction: column;

  padding: 16px;

  @media (min-width: 769px) {
    padding: 32px;
    padding-left: 64px;

    > .space {
      flex: 1 1 50%;
      min-height: 32px;
    }
  }
}

/*
 * Front cover
 */

.cover-front {
  background: #89a;
  display: flex;
  flex-direction: column;

  // "Introduction to"
  > .chapter-prelude {
    strong { color: $black; }
    a { color: white; }
  }

  @media (min-width: 769px) {
    padding: 32px;
    padding-top: 24px;
    padding-left: 64px + 32px;

    > .space {
      flex: 1 1 50%;
    }

    > .chapter-prelude {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    > .space {
      height: 16px;
    }

    > .chapter-prelude {
      display: none;
    }
  }
}

.cover-front-title {
  > .prelude {
    margin: 0;
    padding: 0;
    font-family: $serif;
    @include ms-respond(font-size, 3);
    line-height: 1.5;
    margin-bottom: .5em;
    font-style: italic;
  }

  > .title {
    margin: 0;
    padding: 0;
    @include ms-respond(font-size, 8);
    line-height: 1.1;
    color: white;
  }

  > .title::after {
    display: none;
  }

  @media (max-width: 768px) {
    & {
      text-align: center;
    }

    > .prelude {
      font-size: 1em;
    }
  }
}

