// Flow Layout
//
// Flow layouts are intended for use with the Drupal Paragraphs module
//
// .flow-thirds - add to parent element, use three columns
// .flow_middle - center column (default)
// .flow_left - float to left column
// .flow_right - float to right column
// .flow_full - full-width column
//
// Styleguide: Layout.Flow

.flow {
  clear: both;
  @include tablet {
    margin-left: calc(16.3% - #{$column-gap / 2});
    margin-right: calc(16.3% - #{$column-gap / 2});
    margin-top: -$column-gap;
    //
    &:last-child {
      margin-bottom: -$column-gap;
    }
    &:not(:last-child) {
      margin-bottom: calc(1.5rem - #{$column-gap});
    }
  }
  @include desktop {
    .flow_breakout {
      box-sizing: border-box;
      padding: 3em;
      background: pink;
      margin-left: calc(50% - 50vw + 0.5em);
      margin-right: calc(50% - 50vw + 0.5em);
    }
  }
  [class^=flow] {
    box-sizing: border-box;
    margin-top: 1rem; // Top and bottom will collapse to 1em if two paragraphs
    margin-bottom: 1rem; // in a row, matching the p bottom margin.
    @include tablet {
      margin-left: $column-gap;
      margin-right: $column-gap;
    }
    + [class^=flow] {
      h2:first-child {
        margin-top: 1.1428em;
      }
      .columns h2:first-child {
        margin-top: inherit;
      }
    }
  }
  .flow_full {
    @include tablet {
      margin-left: -25%;
      margin-right: -25%;
    }
  }
  .flow_middle {
    @include tablet {}
  }
  .flow_left {
    @include tablet {
      float: left;
      margin-left: -25%;
      width: 25%;
    }
  }
  .flow_right {
    @include tablet {
      float: right;
      margin-right: -25%;
      width: 25%;
    }
  }
}

.flow-thirds {
  @include tablet {
    margin-left: calc(25% - #{$column-gap / 2});
    margin-right: calc(25% - #{$column-gap / 2});
  }
  //
  .flow_full {
    @include tablet {
      margin-left: -50%;
      margin-right: -50%;
    }
  }
  .flow_middle {
    @include tablet {}
  }
  .flow_left {
    @include tablet {
      float: left;
      margin-left: -50%;
      width: 50%;
    }
  }
  .flow_right {
    @include tablet {
      float: right;
      margin-right: -50%;
      width: 50%;
    }
  }
}

// Center-align standalone image paragraphs.
.flow_middle > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Adding this so the comment box at the bottom isn't unnaturally small.
// Applying more generally breaks node content layout.

.media-comment > .flow.content {
  width: 100%;
}
