/*==========================================================================
  Workshop
  ========================================================================== */

/**
  * Workshop block
  *
  */

.workshop
  background:
    color: $white
  padding: 20px column(1) 30px column(1)


/**
  * Workshop seperator
  * A thin blue line above all the workshop items
  *
  */
.workshop-seperator
  width: 100%
  height: 4px
  background:
    color: $blue

.workshop-wrapper
  +flex(flex-start, flex-start)
  +flex-direction(row)
  +respond-to-width($smGridBreakpoint)
    +flex-direction(column-reverse)
  padding-top: 50px
  padding-bottom: 50px
  +respond-to-width($smGridBreakpoint)
    padding-bottom: 20px

  /**
    * Wrapper around left box of the workshop (information part)
    *
    * 1. Unassign "flex: 1" which will allow the element to NOT grow.
    */
  .workshop-information-wrapper
    flex: none /* 1 */
    padding-right: 50px
    display: inline-block
    width: column(8)
    +respond-to-width($smGridBreakpoint)
      width: 100%
      margin-top: 25px
      padding: 0

    h3
      color: $darkBlueGreen
      font-size: 1.6rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 1.4rem
      font-family: "Coda Caption", sans-serif
      margin-bottom: 15px
      +respond-to-width($smGridBreakpoint)
        font-size: 1.2rem
        line-height: 1.45rem

    h4
      color: $blue
      font-size: 1rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 0.8rem
      font-weight: black()
      text-transform: uppercase
      margin-bottom: 10px

    .workshop-details
      color: $blue
      font-size: 1rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 0.9rem
      font-weight: black()

    /**
      * Styling of the two buttons on the bottom of a workshop item
      *
      * 1. Unassign "flex: 1" which will allow the element to NOT grow.
      */
    .workshop-btns
      +flex(flex-start, flex-start)
      +flex-direction(row)
      +respond-to-width($smGridBreakpoint)
        +flex-direction(column)

      a
        flex: none /* 1 */
        display: inline-block
        text-decoration: none
        +respond-to-width($smGridBreakpoint)
          width: 100%
          margin-top: 10px

      .workshop-btn
        +flex(center, center)
        background:
          color: transparent

        +respond-to-width($smGridBreakpoint)
          width: 100%

        color: $darkBlueGreen
        transition: color, background-color 0.4s ease
        cursor: pointer
        font-size: 0.9rem
        font-weight: 900
        text-transform: uppercase
        height: 50px
        padding: 0 25px
        border: 4px solid $darkBlueGreen
        +border-top-radius(2px)
        +border-bottom-radius(2px)

        &:first-of-type
          margin-right: 10px

        &:hover
          background:
            color: $darkBlueGreen
          color: $white


      /**
        * Icons for buttons in workshop section
        *
        */
      .telephone-btn .phone-icon
        width: 20px
        height: 20px
        background:
          repeat: no-repeat
          image: url('/img/structure/icons/phone.png')
          size: contain
        margin-right: 10px

      .email-btn .email-icon
        width: 20px
        height: 20px
        background:
          repeat: no-repeat
          image: url('/img/structure/icons/mail.png')
          size: contain
          position: center left
        margin-right: 10px