/*==========================================================================
  News detail page
  ========================================================================== */

.news-detail
  @extend .page

  .content-placeholder .left-icon
    bottom: 10%

  .main
    padding: 0

    .content
      h1
        margin-bottom: 0

      h2
        font-size: 1.4rem
        margin-top: 30px
        margin-bottom: 5px

      .date
        display: inline-block
        font-size: 0.9rem
        color: $blue
        margin: 10px 0 50px

    // Decrease padding top because this doesn't come directly below the content
    .relevant-pages
      padding-top: 80px

  /* Sidebar with images and latest news
    ========================================================================== */
  .image-and-latest-news
    position: relative
    z-index: 3
    right: column(-1, 24)
    width: column(9, 24)
    vertical-align: top
    padding-top: 60px
    overflow: visible

    figure
      position: relative
      width: 100%
      padding-bottom: 75%
      margin-bottom: 60px
      background-color: $darkBlue

      // Image
      .image
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        opacity: 0
        z-index: 1
        transition: opacity 0.4s

        &.active
          opacity: 1
          z-index: 2

        // Separate span for different image size
        span
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-size: cover
          background-position: center

          &.large
            display: none

      .image-slider-nav
        position: absolute
        right: 0
        bottom: 0
        z-index: 5
        width: column(1, 6)
        +flex(space-between, center)
        background-color: $green
        min-width: 80px

        .nav-button
          +flex(center, center)
          height: 50px
          width: 50%
          background-color: transparent
          transition: background-color 0.3s
          cursor: pointer

          &:after
            content: ''
            position: relative
            top: 2px
            +arrowWhite
            display: inline-block
            opacity: 1

          &.previous
            &:after
              transform: rotate(180deg)

          &:hover
            background-color: $darkGreen

    // Latest news block
    .latest-news-side-block
      position: relative
      padding: 60px 0 0
      background-color: $pink
      p
        color: white
        font-size: 1.2rem
        font-weight: bold()
        margin: 0
        padding: 0 60px
        +respond-to-width(1000)
          padding: 0 40px

      ul
        list-style: none
        padding: 0 60px 35px
        margin: 20px 0 0

        +respond-to-width(1000)
          padding: 0 40px 20px

        li
          position: relative
          a
            +flex(flex-start, flex-start)
            text-decoration: none
            color: white
            font-size: 0.9rem
            line-height: 1.2
            padding: 8px 0

            p
              font-weight: bold()
              font-size: 0.9rem
              padding: 0
              margin: 0
              width: calc(100% - 140px)
              opacity: 1
              transition: opacity 0.2s

            span
              font-weight: regular()
              opacity: 0.5
              width: 140px

            +respond-to-width(1300)
              display: block

              p
                width: 100%

              span
                display: block
                width: 100%

          &:hover
            p
              opacity: 0.5

          &.active
            p
              opacity: 1
            &:before
              content: ''
              +arrowWhite
              position: absolute
              left: -30px
              top: 13px
              +respond-to-width(1000)
                left: -25px
            a
              span
                opacity: 1
                font-weight: bold()



      .latest-news-footer
        +flex(center, center)
        height: 60px
        text-decoration: none
        font-weight: bold()
        color: white
        background-color: $darkPink
        transition: background-color 0.3s
        &:after
          content: ''
          display: inline-block
          +arrowWhite
          margin-left: 15px
          margin-right: -22px
          +translate3d(0,0,0)
          transition: transform 0.3s

        &:hover
          background-color: darken($darkPink, 5%)
          &:after
            +translate3d(5px, 0, 0)

  // College styling
  &[class^="vso"]
    .main
      .content
        .date
          color: $turquoise

    .image-and-latest-news
      figure
        background-color: $turquoise

        .image-slider-nav
          background-color: $turquoise

          .nav-button
            &:hover
              background-color: $darkTurquoise

      .latest-news-side-block
        background-color: $yellow

        .latest-news-footer
          background-color: $darkYellow
          &:hover
            background-color: darken($darkYellow, 2%)

  /* Mobile view
    ========================================================================== */
  +respond-to-width(840)
    .image-and-latest-news
      right: 0
      width: 100%
      padding-top: 0

      figure
        margin-bottom: 0
        .image
          span
            &.medium
              display: none
            &.large
              display: block

      .latest-news-side-block
        display: none
    .main
      .main-placeholder
        padding: 50px column(1, 14)

      .relevant-pages
        padding-top: 0



  +respond-to-width(550)
    .image-and-latest-news
      figure
        .image
          span
            &.medium
              display: block
            &.large
              display: none