/*==========================================================================
  Category detail page
  ========================================================================== */
.category-header
  padding: 115px 0 0 0

  .left
    min-height: 240px
    width: column(11.5, 12)
    margin-left: column(0.5,12)
    border-left: solid 15px $douvYellow
    padding-left: 15px

    span
      margin: -5px column(0.5,12)

    h1
      margin: 0
      display: inline-block

  .right
    min-height: 240px
    width: column(9.7, 12)
    font-size: 16px
    line-height: 26px
    letter-spacing: 0.08px
    margin-left: column(1.3,12)
    column-count: 2
    column-gap: 60px
    position: relative
    top: -130px

    h4
      margin-bottom: 0

      &:first-child
        margin-top: 0

    p
      margin-top: 0

.category-contents
  +flex(space-between, center)
  flex-wrap: wrap
  padding: 0 column(0.5)
  z-index: 1
  position: relative

  &:after
    content: " "
    background: $douvBlue url('/img/bg_repeat.png') repeat
    background-image: url('/img/bg_repeat.png'), linear-gradient(90deg, $douvBlue, $douvDarkBlueGrad)
    position: absolute
    left: -200%
    width: 500%
    height: 285px
    z-index: 0
    bottom: 0

  .catItem
    display: block
    width: column(3, 11)
    height: column(3, 11)
    z-index: 1

    a
      text-decoration: none
      color: $douvBlue

      &:hover
        .imgHolder
          &:after
            opacity: 0.15

          .yellow-block-overlay
            &:after
              width: 72px
              height: 72px

      .imgHolder
        +flex(center, center)
        width: 100%
        padding-top: 97%
        margin-bottom: 115px
        background-size: cover
        background-position: center center
        position: relative
        border-radius: 5px

        &:after
          content: ''
          position: absolute
          width: 100%
          height: 100%
          left: 0
          top: 0
          background-color: $douvDarkBlue
          opacity: 0
          transition: opacity 0.3s

        .yellow-block-overlay
          position: absolute
          +flex(center, center)
          width: 100%
          height: 100%
          top: 0
          left: 0

          &:after
            content: ''
            width: 64px
            height: 64px
            border-radius: 3px
            background: $douvDemiDarkYellow url('/img/svg/arrow_right.svg') no-repeat 50% 50%
            background-size: 35%
            transition: width 0.2s, height 0.2s

//+respond-to-width(1040)
//  .category-header
//    .left
//      width: column(6, 12)
//
//    .right
//      width: column(5.5, 12)

+respond-to-width(840)
  body.categories
    header
      height: 50px
    .category-header, .category-contents
      width: 100%
      padding-left: column(1, 12)
      padding-right: column(1, 12)

      .grid-col
        width: 100%

    .category-header
      padding-top: 30px
      padding-bottom: 30px

      .left
        min-height: auto
        margin-left: 0
        padding-left: 0
        border-left: none

        span
          margin-left: 0

        h1
          line-height: 100px
          margin: 30px 0
          font-size: 60px

      .right
        min-height: auto
        top: 0
        column-count: 1
        margin-left: 0

    .category-contents
      .catItem
        .imgHolder
          margin-bottom: 30px

+respond-to-width(400)
  body.categories
    .category-header
      .left
        span
          margin: -10px column(0.5,12) -10px 0
        h1
          font-size: 42px