/*==========================================================================
  Custom cta block
  ========================================================================== */

/**
  * Kidspage cta block
  *
  * 1. Give the element an inline state
  */
.kidspage-cta
  position: relative
  +flex(center, center)
  +flex-direction(column)
  >*
    flex: none /* 1 */

  background:
    image: url('/img/structure/cta/home_cta_01.png')
    size: cover
    position: center
  height: 500px
  color: $white

  h2
    text-align: center
    font-size: 2.5rem
    font-family: "olivierregular", serif

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

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

  /**
    * No adults illustration
    *
    */
  &:after
    content: ""
    position: absolute

    background:
      repeat: no-repeat
      image: url('/img/structure/cta/home_cta_illustration_01.png')
      size: 100%

    left: 50px
    top: -100px
    width: 240px
    height: 221px

    +respond-to-width($mdGridBreakpoint)
      width: 180px
      top: -75px

    +respond-to-width($smGridBreakpoint)
      width: 125px
      top: -25px
      left: 20px

/**
  * Reads out the last newsItem in a mask
  *
  * 1. Give the element an inline state
  */
.lastNewsItem
  +flex(flex-start, center)
  +flex-direction(column)
  >*
    flex: none /* 1 */

  background:
    repeat: no-repeat
    size: cover
    position: top

  height: 500px
  color: $white

  .placeholder
    position: absolute
    left: 50%
    transform: translateX(-50%)
    z-index: 500
    text-align: center
    bottom: 75px

  h2
    color: $yellow
    text-align: center
    font-size: 1.5rem
    font-family: "Coda Caption", sans-serif
    margin-bottom: 25px

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

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

  &:before
    content: ''
    position: relative
    background-image: url('/img/structure/mask_verrekijker_02.svg')
    background-repeat: no-repeat
    background-size: cover
    background-position: center

    top: 0
    left: 0
    width: 100%
    height: 500px
    z-index: 1



/**
  * Light out a products
  *
  * 1. Give the element an inline state
  */
.product-cta
  +flex(center, center)
  +flex-direction(column)
  >*
    flex: none /* 1 */

  background:
    color: $white

  min-height: 500px
  padding: 50px
  max-width: 100%
  color: $darkBlueGreen

  figure
    width: 100%

  h4
    text-align: center

  h2
    color: $blue
    text-align: center
    font-size: 1.4rem
    font-family: "Coda Caption", sans-serif
    margin-bottom: 10px

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

  .cta-home-button
    @extend .button-default
    color: $darkBlueGreen
    border-color: $darkBlueGreen

    &:hover
      background:
        color: $darkBlueGreen
      color: $yellow

/**
  * Light out a workshop
  *
  * 1. Give the element an inline state
  */
.workshop-cta
  +flex(center, center)
  +flex-direction(column)
  >*
    flex: none /* 1 */

  background:
    image: url('/img/structure/cta/home_cta_03.png')
    size: cover
    position: center

  padding: 50px
  max-width: 100%
  color: $white

  figure
    width: 100%

  h2
    color: $white
    text-align: center
    font-size: 1.5rem
    font-family: "Coda Caption", sans-serif
    margin-bottom: 10px

  .cta-home-button
    @extend .button-default
    color: $white
    border-color: $white
    &:hover
      background:
        color: $white
      color: $blue