/* ==========================================================================
   Case row on overview page (/cases)
   ========================================================================== */

/**
 * 1. Align the half grid-row to the right
 */
.case-layout
  display: flex
  min-height: 35vw
  text-decoration: none

  // Left column containing the info
  .case-info-container
    display: flex
    justify-content: flex-end
    align-items: flex-end
    width: 50%

    .contained-layout
      max-width: $gridMaxWidth / 2
      margin: 0

    // The actual info
    .info
      width: column(3,7)
      margin-left: column(3,7)
      margin-bottom: column(1,7)
      color: rgba(255,255,255,0.7)
      font-size: $baseFontSize
      white-space: normal
      line-height: 1.4

    // Title
    h2
      display: inline-block
      position: relative
      z-index: 2
      margin: -8px 0 10px -8px
      padding: 0 8px
      color: #fff
      font-size: 1.6rem
      font-weight: semibold()

      // Before for animation
      &:before
        content: ''
        +position(absolute, null null 0 0)
        z-index: -1
        width: 100%
        height: 50%
        opacity: 0.2
        background: #fff
        transform: scale3d(0,1,1)
        transform-origin: 100% 50%
        transition: transform 0.5s
        transition-timing-function: cubic-bezier(0.2,1,0.3,1)

    .arrow
      display: inline-block
      width: 32px
      height: 14px
      transition: transform 0.5s

      +sprite(0 0)

    .cta
      display: inline-block
      position: relative
      top: -2px
      margin-right: 10px
      font-weight: 600
      +transition(color .5s ease-out)

  // Case image holder
  .case-image
    position: relative
    overflow: hidden
    width: 50%

    // Cover image
    .image
      +position(absolute, 0 null null 0)
      width: 100%
      height: 100%
      background-size: cover
      transition: transform 0.5s
      transition-timing-function: cubic-bezier(0.2,1,0.3,1)

  // Hover state
  &:hover
    .case-info-container
      h2:before
        transform: scale3d(1,1,1)
      .tags .tag
        border-color: rgba(255,255,255,0.6)
      .arrow
        +transform(translate3D(20px, 0, 0))
      .cta
        color: #fff
    .case-image .image
      +transform(scale(1.1))

  /* Responsive case row
   ========================================================================== */

  +respond-to-width($mdGridBreakpoint)
    .case-info-container h2
      font-size: 1.2rem

  // Alternative layout
  +respond-to-width($smGridBreakpoint)
    flex-direction: column

    .case-info-container
      order: 2
      width: 100%
      height: 200px
      align-items: center

      .info
        box-sizing: border-box
        margin-left: 0
        margin-bottom: 0
        width: 100%
        padding: 0 30px

    .case-image
      order: 1
      width: 100%
      height: 71.42857143vw /* 640px / 800px */

  // Ie fix
  html.ie &
    min-height: 0

    .case-info-container,
    .case-image
      min-height: 500px