/*
 * .next-article -- lead into the next article
 */

.next-article
  $bg: darken(#8e44ad, 15%)
  $textcolor: saturate(mix(white, $bg, 85%), 90%)

  &
    display: block
    padding: 0
    margin-left: 40px
    margin-right: 40px
    position: relative


  &, &:hover, &:focus
    box-shadow: none

  &:after
    content: ''
    display: block
    position: absolute
    left: -20px
    right: -20px
    bottom: 0
    border-bottom: solid 1px $hairline

  // suppress its hairline
  & + .about-the-site:before
    display: none

  @media (max-width: 768px)
    margin-left: 0
    margin-right: 0

    // remove horizontal line
    & + .about-the-site:before
      display: none

  .container
    display: block
    text-align: center
    padding: 10em 20px

    @media (min-width: 769px)
      margin-top: 8em
      padding: 8em 20px

  .h3
    display: block
    margin: 0 auto auto
    padding: 0
    font-size: 2.2em
    line-height: 1.3em
    +bold-font
    color: white
    transition: all 250ms linear

    // &:hover > span
      // box-shadow: inset 0 -2px $accent
      // text-shadow: 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg

    @media (max-width: 768px)
      font-size: 1.5em

  .h3, .excerpt
    max-width: $page-width * 0.9

  .h3 + .excerpt
    margin-top: 0.5em

  .excerpt
    display: block
    margin-left: auto
    margin-right: auto
    font-size: 1em
    line-height: 1.6em

  .big-button
    margin-top: 2em

  h3 a:hover,
  h3 a:focus
    color: $accent

  .heading
    display: block
    +caps-font
    font-size: 0.7em
    margin-bottom: 1em

  .heading:before
    font-family: Ionicons
    content: '\f4a8'
    margin-right: 15px
    font-size: 16px
    display: inline-block
    vertical-align: middle
    color: $accent

  .big-button,
  a.big-button
    background: transparent

    &, &:visited
      border-color: $accent
      color: white

    &:hover, &:focus
      background: $accent
      border-color: transparent

@mixin recolor-article($bg, $bg2, $url: '', $a: 0.9, $angle: 177deg)
  $w: 1500
  $h: 10
  $textcolor: mix(white, $bg, 75%)
  $notch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$w}' height='#{$h}' version='1.1'><polyline fill='white' points='#{$w},0 0,0 0,#{$h}'/></svg>"

  &
    background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 0%), $a), rgba(adjust-color($bg2, $lightness: 0%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
  &:hover, &:focus
    background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 1%), $a), rgba(adjust-color($bg2, $lightness: 1%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
  .excerpt, .heading
    color: $textcolor

.next-article
  &
    +recolor-article(#612e76, #5867cc)
  &.-v2
    text-shadow: 0 1px 1px rgba(black, 0.5)
    +recolor-article(#027d65, #00536b, "bg/pebbles.jpg", 0.7, $angle: 35deg)
  &.-v3
    text-shadow: 0 1px 1px rgba(black, 0.5)
    +recolor-article(#1d2434, #202a3e, "bg/roughwall.jpg", 0.9, $angle: 1deg)
  &.-v4
    text-shadow: 0 1px 1px rgba(black, 0.5)
    +recolor-article(#902014, #c77e0a, "bg/woodfloor.jpg", 0.45, $angle: 1deg)
  &.-v5
    text-shadow: 0 1px 1px rgba(black, 0.5)
    +recolor-article(#17283a, #25295e, "bg/stairs.jpg", 0.85, $angle: 1deg)
  // &.next-article