/* ==========================================================================
   Specific CSS for the cases page
   ========================================================================== */

/* Case themes
 ========================================================================== */

// Contains +theme mixin
@import "../mixins/theme"
// Contains themes list
@import "../caseThemes/config"
// Add styles to css
@each $theme in $themes
  +theme($theme)

/* Other case styles
 ========================================================================== */

.case

  @import '../partials/cases/caseHeader'

  // Intro with small description of our work
  .intro-section

    .intro
      padding: column(1) 0 column(2)
      color: #fff

    p
      margin: 0
      font-size: 2rem
      font-weight: medium()
      line-height: 1.33333

    // 1. correction for perfect alignment
    // 2. for equal space above and below the breadcrumb
    .breadcrumb
      display: block
      margin-top: -0.5em /* 1. */
      margin-bottom: columnVw(.65) /* 1 */

      color: rgba(255,255,255,.5)
      font-size: .8rem
      font-weight: bold()
      letter-spacing: .15em
      text-transform: uppercase
      white-space: nowrap

    +respond-to-width($lgGridBreakpoint)
      .intro p
        font-size: 1.8rem

    +respond-to-width($mdGridBreakpoint)
      .intro
        width: column(12)
        p
          font-size: 1.6rem

    +respond-to-width($smGridBreakpoint)
      .intro p
          font-size: 1.3rem


  /* Dynamic content section
   ========================================================================== */

  .dynamic
    position: relative
    display: flex

    /* Progress bar
     ========================================================================== */

    aside.progress-container
      +position(absolute, 0 null null 0)
      max-width: $gridMaxWidth / 14
      height: 100%
      z-index: 10

      .fixable
        +position(absolute, 0 null null 0)
        height: 100vh
        width: 100%

        &.fixed
          position: fixed
          width: column(1,14)
          max-width: $gridMaxWidth / 14
        &.sunk
          top: auto
          bottom: 0

      .progress
        +position(absolute, 33vh null null column(.5,1))
        height: 60vh
        width: column(.5,1)

      .label
        cursor: pointer

      // Progress line background
      .line
        +position(absolute, null 0 0 null)
        overflow: hidden
        width: 100%
        height: 1px
        background: rgba(255,255,255,.25)

        // Progress line, use scale to show progress
        span
          +position(absolute, 0 null null 0)
          display: block
          width: 100%
          height: 100%
          background: #fff
          transform-origin: 100% 0
          +transform(scaleX(0))

      // Rotated list with sections
      ul
        +position(absolute,null null 0 0)

        display: flex
        justify-content: flex-end

        width: 60vh
        padding: 0
        margin: 0
        transform-origin: 0 100%
        +transform(rotate(-90deg))

        list-style: none

      // Section label
      li
        position: relative
        color: #fff
        flex-grow: 1
        font-size: 1.5vh
        text-align: right

      +respond-to-width($mdGridBreakpoint)
        display: none

    /* Content section
     ========================================================================== */

    .dynamic-content
      width: 100%
      font-size: 0

      // Containers
      .title-container,
      .content-container
        position: relative
        vertical-align: top
        display: inline-block
        padding: column(1) 0
        font-size: $baseFontSize
        white-space: normal

      .title-container
        width: column(7)
        padding-left: column(2)

      .content-container
        font-size: $baseFontSize
        width: column(5)

        // 1. Correction for alignment
        p:first-child
          margin-top: -.45em

        .button
          margin-top: 1rem

      .image-container
        position: relative
        overflow: hidden

      .spacer
        width: 100%
        height: 0
        margin-bottom: column(1)

      +respond-to-width($xlGridBreakpoint)
        .spacer:not(.keep)
          margin-bottom: 0

      +respond-to-width($mdGridBreakpoint)
        .title-container
          padding-left: column(1)
        .content-container
          width: column(6)

      +respond-to-width($smGridBreakpoint)
        .title-container
          width: column(12)
          margin-left: column(1)
          padding-left: 0
          padding-bottom: 0
        .content-container
          margin-left: column(1)
          padding-top: 0
          width: column(12)
        .image-grid
          grid-template-columns: 1fr

      +respond-to-width($xsGridBreakpoint)
        .col-10
          width: 100%
        .keep.spacer
          display: none

  /* Case closing image
   ========================================================================== */

  .closing-image
    img
      width: 100%


  /* Case testimonial
   ========================================================================== */

  // Testimonial
  .testimonial
    min-height: 800px
    padding: columnVw(1) 0
    margin-bottom: columnVw(1)

    background-repeat: no-repeat
    background-size: contain
    background-position-y: bottom
    background-position-x: 20%
    color: #fff

    .story-container
      width: column(5)
      margin-left: column(7)
      white-space: normal

    .description
      font-size: $baseFontSize

    // Long testimonials
    &.story
      font-size: .9rem

      h2
        color: rgba(255,255,255,.7)
        font-size: 3.2rem
        font-weight: light()
        line-height: 1.15625

        .name
          display: block
          color: #fff
          font-weight: book()

    +respond-to-width($mdGridBreakpoint)
      .story-container
        width: column(6)

        h2
          font-size: 2rem

    +respond-to-width($smGridBreakpoint)
      background-size: auto 400px
      background-position: center bottom
      padding-bottom: 400px
      min-height: 0

      .story-container
        width: column(12)
        margin-left: column(1)

  /* Case pagination
   ========================================================================== */

  .cases-pagination
    .flex-col
      overflow: hidden

  /* Other cases
   ========================================================================== */

  .other-cases
    margin-bottom: column(1)

  .featured-cases
    .featured-case:first-child
      .arrow
        +transform(rotate(180deg) translateX(-10px))