/* ==========================================================================
   Call to action bar with account manager
   ========================================================================== */

.call-to-action-bar
  position: relative
  display: block
  background: $blue
  color: #fff

  /**
   * Left side with the call-to-action and contact details
   *
   * 1. center the content vertically
   * 2. make sure the contact-details go over the account manager
   */
  .call-to-action
    position: relative
    display: flex
    align-items: center /* 1 */
    flex-grow: 0
    flex-basis: auto
    width: column(6,12)
    z-index: 10 /* 2 */

  // This is used to align the call to action vertically centered
  .container
    display: flex
    flex-direction: column
    justify-content: center
    padding-left: column(1,6)
    max-height: 600px

  // The call-to-action streamer
  .streamer
    display: block
    margin-bottom: 2rem
    line-height: 1
    font-size: 2rem
    font-weight: semibold()

  // Name and function
  .name
    display: block
    font-size: 1.4rem
    line-height: 1

  .function
    display: block
    margin-bottom: 1.8rem
    color: rgba(255,255,255,.7)

  // Phone and e-mail
  .contact-details
    font-size: 1.4rem
    font-weight: medium()
    white-space: nowrap
  .phone, .email
    display: inline-block
    position: relative
    text-decoration: none
  .phone
    color: #fff
  .separator
    display: inline-block
    margin: 0 10px
  .email
    color: $brightBlue

  // Hover
  .phone,.email
    padding: 0 5px
    // 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: 0 50%
      transition: transform 0.5s
      transition-timing-function: cubic-bezier(0.2,1,0.3,1)
    &:hover:before
      transform: scale3d(1,1,1)

  /**
   * Right side with the photo of the account manager
   */
  .account-manager
    display: flex
    justify-content: center
    align-items: flex-end
    width: column(6,12)

    img
      max-width: 100%

  /**
   * Responsive rules
   */

  // Medium breakpoint
  +respond-to-width($mdGridBreakpoint)
    // Adjust some font sizes
    .streamer
      font-size: 1.8rem
    .contact-details
      font-size: 1.2rem

  /*
   * Small breakpoint:
   * Set account manager to background and set contact details over full width
   */
  +respond-to-width($smGridBreakpoint)
    // Give bar a default height by enlarging the flex call-to-action
    // 1. 16:9 ratio
    .call-to-action
      justify-content: center
      width: 100%
      height: 56.25vw /* 1 */
    .container
      padding-left: 0
    // Adjust some font sizes
    .streamer
      font-size: 1.4rem
      margin-bottom: 1rem
    // Align detail below each other without the separator
    .contact-details
      font-size: 1rem
      line-height: 1.2
      white-space: normal
      a
        display: block
    .separator
      display: none
    // Set account manager to the background
    .account-manager
      +position(absolute, 0 null null 0)
      width: 100%
      height: 100%
      justify-content: flex-start

      img
        height: 100%

  /*
   * Small breakpoint:
   * Put the text at the bottom for more readability
   */
  +respond-to-width($xsGridBreakpoint)
    .call-to-action
      align-items: flex-end
      height: 440px
      .streamer,
      .function
        margin-bottom: 10px
    .container
      padding-bottom: $mobileBottomSpace