/* ==========================================================================
   Home page
   ========================================================================== */

.events
  width: column(8, 12)
  margin-right: column(1, 12)
  margin-left: 0
  position: relative

  +respond-to-width(950)
    margin-right: column(0.5, 12)

  +respond-to-width(850)
    padding-left: column(0.5, 8)
    width: calc(100% - 6.25%)
    
  .info-message
    display: block
    position: absolute
    width: 100%
    background-color: $blue
    border-radius: 0 0 5px 5px
    padding: 10px
    color: white
    font-weight: bold
    transform: translate(0, -40px)
    +animation(showAndHide 5s)
    animation-fill-mode: forwards

  .events-header
    padding-top: 52px
    +flex(space-between, flex-start)

    .general-notice
      display: block
      border: solid 1px #5E9DFF
      color: #313173
      border-radius: 5px
      background-color: rgba(#5E9DFF, 0.2)
      padding: 20px
      max-width: 70%


  .events-list
    +inline-flex(space-between, flex-start)
    flex-wrap: wrap
    width: 100%

    .event
      border: 1px solid #CECECE
      border-radius: 15px
      width: 48%
      min-width: 350px
      background-color: white
      margin-bottom: 30px
      box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1)
      position: relative
      height: 100%
      +flex(flex-start, stretch)
      flex-direction: column

      +respond-to-width(1280)
        margin: 0 auto 30px auto

      +respond-to-width(425)
        min-width: auto
        margin: 0 auto 30px auto

      &:last-child
        margin-right: 0

        +respond-to-width(1280)
          margin: 0 auto 30px auto


      &:after
        content: ''
        display: block
        position: absolute
        bottom: 0
        height: 46px
        width: 100%
        background-color: #F7F8FA
        border-top: solid 1px rgba(#D9DAE2, 0.5)
        border-radius: 0 0 15px 15px
        z-index: 0

      .event_header
        border-bottom: solid 1px rgba(#D9DAE2, 0.5)
        position: relative
        z-index: 1
        h5
          margin: 0
          padding: 7px 0
          text-transform: uppercase
          background-color: #32c56e
          width: 100%
          color: white
          border-radius: 5px 5px 0 0
          text-align: center
        h4
          color: $semiBlack
          line-height: 1.5rem
          padding: 12px column(1, 12) 10px column(1, 12)
          margin: 0 0 20px 0
          border-radius: 15px 15px 0 0
          background-color: #F7F8FA
          border-bottom: solid 1px rgba(#D9DAE2, 0.5)

        .event_properties
          padding: 0 column(1, 12)
          +flex(space-between, flex-start)
          flex-wrap: wrap
          +respond-to-width(425)
            +flex(center, flex-start)
            flex-direction: column

          p
            margin: 0
            font-weight: 600
            +flex(center, center)
            & + p
              +respond-to-width(425)
                margin-top: 30px

            svg
              margin-right: 5px
              > g
                > g, use
                  fill: rgba($semiBlack, 0.5)

            &.hour
              +flex(flex-start, flex-start)
              flex-wrap: wrap

              span
                padding-top: 3px


        p.users
          +flex(flex-start, center)
          margin-bottom: 26px
          margin-top: 15px
          font-weight: 600
          width: 100%

          svg
            margin-right: 5px
            > g
              > g, use
                fill: rgba($semiBlack, 0.5)
                  
        a
          display: block
          padding: 10px 15px
          margin: 30px 0
          color: white
          font-size: 0.8rem
          font-weight: bold
          line-height: 1.1
          text-transform: uppercase
          border-radius: 3px
          background-color: $grey
          width: auto
          text-align: center
          text-decoration: none
          transition: background-color 0.3s

          &:hover
            background-color: darken($grey, 5%)

      .event_content
        position: relative
        z-index: 1
        +flex(space-between, stretch)
        flex-direction: column
        margin-bottom: 30px

        h5
          color: #517292
          font-size: 0.7rem
          font-weight: 600
          line-height: 0.95rem
          display: block
          width: 100%
          padding: 15px column(1, 12)
          margin-bottom: 0
          margin-top: 0
          border-bottom: solid 1px rgba(#D9DAE2, 0.5)
          background-color: #F7F8FA

        ul
          margin: 0
          padding: 0
          list-style: none
          margin-bottom: auto

          li
            padding: 0 30px
            border-bottom: solid 1px rgba(#D9DAE2, 0.5)
            color: #517292
            font-size: 0.7rem
            line-height: 1.5rem
            +flex(flex-start, baseline)

            &:before
              display: block
              content: ''
              width: 10px
              height: 10px
              flex-shrink: 0
              border-radius: 999px
              margin-right: 10px
              background-color: $lightGray

            &.unknown:before,
            &.missing:before
              background-color: $semiBlack

            &.expired:before
              background-color: #FE3333

            &.almost_expired:before
              background-color: #FFAC34

            &.valid:before
              background-color: #04D682

            &.active
              background-color: #F7F8FA
              border-left: solid 6px #5E9DFF
              padding-left: 24px


            label
              display: block
              width: 100%



      form
        margin: auto auto 30px auto
        position: relative
        z-index: 10
        padding: 0 column(1, 12)
        input[type=submit]
          margin: 0 auto
          min-width: auto
          width: auto
          text-align: center
          background-color: $semiBlack
          border: none
          text-transform: none
          transition: background-color 0.3s

          &:hover
            background-color: darken($blue, 5%)

          &.full
            pointer-events: none
            background-color: $lightGray
            text-decoration: line-through

            &:hover
              background-color: $lightGray

          &.subscribed
            background-color: $blue

            &:hover
              background-color: lighten($semiBlack, 5%)

        .almost_full
          display: block
          width: 100%
          text-align: center
          font-size: 0.7rem
          line-height: 2
          color: $placeholderGray


// Shake animation
+keyframes(showAndHide)
  0%
    transform: translate3d(0, -40px, 0)
  10%
    transform: translate3d(0,0, 0)
  90%
    transform: translate3d(0,0, 0)
  100%
    transform: translate3d(0, -40px, 0)


@supports (display: grid)
  .events
    .events-list
      display: grid
      //grid-template-columns: column(2.2, 9.5) column(2.2, 9.5) column(2.2, 9.5) column(2.2, 9.5)
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
      grid-column-gap: 30px
      grid-row-gap: 45px

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

      .event
        width: 100%
        max-width: 450px
        margin: 0 auto

        +respond-to-width(425)
          min-width: auto
          margin: 0 auto 30px auto

        &:last-child
          margin-right: auto