/*==========================================================================
  CTA
  ========================================================================== */

/**
  * CTA block
  *
  * 1. Centers the CTA sentence and button vertically and horizontally
  * 2. Add illustrations on left side of subscribe block
  * 2. Add illustrations on right side of subscribe block
  */

.cta-block-default
  position: relative

  &:before /* 2 */
    content: url('/img/structure/cta/illustration_03.png')
    +transform(scale(0.3))
    +transform-origin(top left)
    +respond-to-width($mdGridBreakpoint)
      +transform(scale(0.24))
      top: -25px
    +respond-to-width(1200)
      left: 10px
    +respond-to-width(900)
      left: -20px
    +respond-to-width(650)
      left: -50px
    position: absolute
    left: 40px
    top: -60px
    z-index: 10

  &:after /* 3 */
    content: url('/img/structure/cta/illustration_04.png')
    +transform(scale(0.3))
    +transform-origin(top right)
    +respond-to-width($mdGridBreakpoint)
      +transform(scale(0.24))
    position: absolute
    right: 60px
    +respond-to-width($mdGridBreakpoint)
      right: 20px
      top: 150px
    +respond-to-width(900)
      right: 20px
      top: 205px
    +respond-to-width(650)
      right: -50px
      top: 170px
    top: 100px
    z-index: 10

/**
  * Call to action block
  *
  * 1. Centers the cta sentence and button vertically and horizontally
  */

.cta-content-wrapper
  +flex(center, center) /* 1 */
  +flex-direction(column)
  padding: 75px column(2)

  background:
    color: $yellow
  color: $darkBlueGreen

  /**
    * CTA sentence
    *
    */
  .cta-sentence
    text-align: center
    font-size: 1.5rem
    font-family: 'Coda Caption', sans-serif
    margin-bottom: 35px
    line-height: 2.5rem

    +respond-to-width($smGridBreakpoint)
      line-height: 2rem
      font-size: 1.3rem

  /**
    * CTA button
    *
    */
  .cta-button
    @extend .button-default
    color: $darkBlueGreen
    border-color: $darkBlueGreen

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

  /**
    * Custom CTA block on homepage
    *
    */
  &.cta-home
    background:
      color: $blue
    color: $white

    .cta-button
      @extend .button-default
      color: $white
      border-color: $white

      &:hover
        background:
          color: $white
        color: $blue


/**
  * Default call to action block on custom pages
  *
  */
.cta-default

  /**
    * Default CTA sentence
    * Overrides and inherits the settings of elements above
    *
    */
  .cta-sentence
    font-size: 1.5rem
    font-family: "Coda Caption", sans-serif
    color: $darkBlueGreen