/**
 * @file
 * Experimental: CSS3 multi-column.
 *
 * column-count is the maximum number of columns and column-width is the minimum
 * width for those columns.
 * Gets consistent with Grid Foundation even if non-BEM classes.
 * Note: The reason for making column-width somewhat flexible is to achieve
 * scalable designs that can fit many screen sizes. To set an exact column
 * width, the column gap and the width of the multicol element (assuming
 * horizontal text) must also be specified.
 */

.b-column,
.blazy.b-column,
.item-list > .b-column {
  display: block;
  clear: both;
  width: 100%;
  margin: 0 auto;
  list-style: none;
}

ul.blazy.b-column {
  padding: 0;
}

/** https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside */
.b-column > .grid {
  display: block;
  float: none;
  overflow: hidden;
  height: auto;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Deprecated Firefox, works at 49.0.2 */
  -moz-column-break-inside: avoid; /* Current Firefox, but no joy */
  break-inside: avoid; /* IE 10+ */
  break-inside: avoid-column;
}

.b-column > .grid,
.item-list > .b-column > .grid {
  margin: 0 0 1rem;
  padding: 0;
  /* At most grids, transition is causing issues than helpful. */
  transition: none;
}

/** Fix for broken break-inside with extremely tall grid for FF. */
.b-column .grid__content,
.b-column .region__content {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}

/** 480px with 16px base font. */
@media only screen and (min-width: 30em) {
  .b-column--sm-1 {
    -webkit-columns: 30em 1;
    -moz-columns: 30em 1;
    columns: 30em 1;
  }

  .b-column--sm-2 {
    -webkit-columns: 15em 2;
    -moz-columns: 15em 2;
    columns: 15em 2;
  }
}

/** 641px with 16px base font. */
@media only screen and (min-width: 40.063em) {
  .b-column--md-1 {
    -webkit-columns: 40.063em 1;
    -moz-columns: 40.063em 1;
    columns: 40.063em 1;
  }

  .b-column--md-2 {
    -webkit-columns: 20.0315em 2;
    -moz-columns: 20.0315em 2;
    columns: 20.0315em 2;
  }

  .b-column--md-3 {
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    columns: 3 auto;
  }

  .b-column--md-4 {
    -webkit-columns: 4 auto;
    -moz-columns: 4 auto;
    columns: 4 auto;
  }

  .b-column--md-5 {
    -webkit-columns: 5 auto;
    -moz-columns: 5 auto;
    columns: 5 auto;
  }

  .b-column--md-6 {
    -webkit-columns: 6 auto;
    -moz-columns: 6 auto;
    columns: 6 auto;
  }

  .b-column--md-7 {
    -webkit-columns: 7 auto;
    -moz-columns: 7 auto;
    columns: 7 auto;
  }

  .b-column--md-8 {
    -webkit-columns: 8 auto;
    -moz-columns: 8 auto;
    columns: 8 auto;
  }

  .b-column--md-9 {
    -webkit-columns: 9 auto;
    -moz-columns: 9 auto;
    columns: 9 auto;
  }

  .b-column--md-10 {
    -webkit-columns: 10 auto;
    -moz-columns: 10 auto;
    columns: 10 auto;
  }

  .b-column--md-11 {
    -webkit-columns: 11 auto;
    -moz-columns: 11 auto;
    columns: 11 auto;
  }

  .b-column--md-12 {
    -webkit-columns: 12 auto;
    -moz-columns: 12 auto;
    columns: 12 auto;
  }
}

/** 1025px with 16px base font. */
@media only screen and (min-width: 64.063em) {
  .b-column--lg-1 {
    -webkit-columns: 64.063em 1;
    -moz-columns: 64.063em 1;
    columns: 64.063em 1;
  }

  .b-column--lg-2 {
    -webkit-columns: 2 auto;
    -moz-columns: 2 auto;
    columns: 2 auto;
  }

  .b-column--lg-3.b-count-2,
  .b-column--lg-4.b-count-2 {
    -webkit-columns: 32.0315em 2;
    -moz-columns: 32.0315em 2;
    columns: 32.0315em 2;
  }

  .b-column--lg-3,
  .b-column--lg-4.b-count-3 {
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    columns: 3 auto;
  }

  .b-column--lg-4 {
    -webkit-columns: 4 auto;
    -moz-columns: 4 auto;
    columns: 4 auto;
  }

  .b-column--lg-5 {
    -webkit-columns: 5 auto;
    -moz-columns: 5 auto;
    columns: 5 auto;
  }

  .b-column--lg-6 {
    -webkit-columns: 6 auto;
    -moz-columns: 6 auto;
    columns: 6 auto;
  }

  .b-column--lg-7 {
    -webkit-columns: 7 auto;
    -moz-columns: 7 auto;
    columns: 7 auto;
  }

  .b-column--lg-8 {
    -webkit-columns: 8 auto;
    -moz-columns: 8 auto;
    columns: 8 auto;
  }

  .b-column--lg-9 {
    -webkit-columns: 9 auto;
    -moz-columns: 9 auto;
    columns: 9 auto;
  }

  .b-column--lg-10 {
    -webkit-columns: 10 auto;
    -moz-columns: 10 auto;
    columns: 10 auto;
  }

  .b-column--lg-11 {
    -webkit-columns: 11 auto;
    -moz-columns: 11 auto;
    columns: 11 auto;
  }

  .b-column--lg-12 {
    -webkit-columns: 12 auto;
    -moz-columns: 12 auto;
    columns: 12 auto;
  }
}