openaustralia/publicwhip

// section-header

.section-header {
  margin-bottom: 36px;
  padding-bottom: 36px;
  background-color: $color-lemon-light;

  @media (min-width: $screen-md-min) {
    margin-bottom: 48px;
    padding-bottom: 48px;
  }

  .page-header {
    margin-bottom: 0;
    border: 0;
    padding-bottom: 0;

    .lead {
      margin-bottom: 0;
      @media (min-width: $screen-md-min) {
        max-width: 65%; // 8/12 columns
      }
    }
  }

  // special exception for very long title of /people
  .members & h1 {
    @media (max-width: $screen-xs-max) {
      font-size: 36px;
    }
  }
}

// page header
.page-header {
  margin-top: 24px;
  @include clearfix;

  // Apply to row to make columns the same length
  .row.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;

    .equal-col {
      display: flex;
      flex-direction: column;

      .btn {
        margin-top: auto;
      }
    }
  }

  @media (min-width: $screen-sm-min) {
    margin-top: 48px;
  }

  .media, .member-block {
    margin-bottom: 28px; // matches .lead
  }

  .header-secondary .social-share,
  + .social-share {
    width: 100%;
    font-size: 0.88em;

    @media (min-width: $screen-md-min) {
      float: right !important;
      margin-left: 0;
      font-size: inherit;
    }
  }

  .header-secondary {
    .header-secondary-primary-block {
      display: inline;

      @media (min-width: 35em) {
        display: inline-block;
        float: left;
      }

      .btn:before {
        margin-right: 5px;
        text-decoration: none;
      }
    }

    .social-share {
      margin-top: 1em;

      @media (min-width: 35em) {
        margin-top: 0;
        display: inline-block;
        text-align: left;
        float: right;
        width: auto;
      }

      .share-link {
        padding-top: 3px;
      }
    }
  }

  + .social-share {
    padding-right: 0;
    padding-left: 0;

    @media (min-width: $screen-sm-min) {
      padding-right: inherit;
      padding-left: inherit;
      display: inline-block;
      text-align: left;
      float: right;
      width: auto;
    }

    @media (min-width: $screen-md-min) {
      width: 33.3333%;
    }
  }
}

.header-actions {
  text-align: right;
  z-index: 99;

  @media (min-width: $screen-sm-min) {
    float: right;
    clear: right;
  }

  .btn {
    margin-bottom: 10px;

    @media (min-width: $screen-sm-min) {
      margin-top: 5px;
    }
  }
}