/* ==========================================================================
   Black centered call to action block
   ========================================================================== */

/**
 * Main block styling
 *
 * 1. Reset default block quote margins
 *    except the left for which this is already set
 */

.call-to-action-block
  padding: column(1)
  margin-top: 0 /* 1 */
  margin-right: 0
  margin-bottom: column(1)

  background: $black
  color: #fff
  font-size: 1.1rem
  font-weight: medium()
  line-height: 1.2727272727

  .flex-row
    align-items: center

  /**
   * The block is divided in two flex columns
   *
   * 1. Reset inherit from .call-to-action-block
   */

  .flex-col
    white-space: normal /* 1 */

    // Add one grid-column spacing between columns
    &:first-child
      margin-right: column(2,8)

    &:nth-child(2)
      display: flex
      flex-direction: column
      flex-shrink: 1
      justify-content: flex-start

      /*
       * Add margin-top 'auto' to align .button-holder
       * to the bottom of the parent flex box
       */
      .button-holder
        margin-top: auto

  /**
   * Large heavy letters on the left side
   */

  h2
    margin: 0

    color: #fff
    font-size: 4rem
    font-weight: black()
    line-height: 0.875
    text-transform: uppercase

  h3
    margin-top: 0

  a
    color: $brightBlue
    text-decoration: none

  /**
   * Small Comment
   */

  .comment
    display: block
    margin: 10px 0

    font-size: 0.8rem
    line-height: 1.375

  // Block grows larger on medium screens, so we adjust the gutter
  +respond-to-width($lgGridBreakpoint)
    .flex-col:first-child
      margin-right: column(2,12)

  // Remove gutter and lower top / bottom padding
  +respond-to-width(960)
    h2
      font-size: 3rem
    .flex-col:first-child
        margin-right: 0

  // Add this point we remove the columns and put everything below each other
  +respond-to-width($smGridBreakpoint)
    .flexable-layout
      display: block
    h2
      font-size: 1.5rem
      margin-bottom: .5rem
      // Remove hard returns in title
      // Make sure you have spaces in the string
      br
        display: none
    // Add some button margin
    .button
      margin-top: 1.5rem

    .flex-col:nth-child(2)
      max-width: 400px


  +respond-to-width($xsGridBreakpoint)
    margin-bottom: 0

// Handle parent div
#call-to-action-block
  +respond-to-width($xsGridBreakpoint)
    width: 100%