/**
 * @file
 * Provides CSS3 nativegrid based on Grid Layout.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * Below is the less-robust version of GridStack layouts.
 * Specific for Masonry, add a min-height to the .block-nativegrid to avoid
 * reflow due to using JS.
 *
 * Classes:
 *  - .is-b-native, as the original two-dimensional, the real Native Grid.
 *  - .is-b-masonry, as the tweaked one-dimensional, the Masonry.
 *
 * Warning! The percentage values are affected by :root--bnColGap. Adjust.
 * Percentage is used specific for Masonry due to numeric values 1~12 is broken
 * when being used on AJAX loaded contents like VIS, or IO infinite pager.
 *
 * @todo https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
 */

/* csslint ignore:start */
/* The gap 15px is to match CSS grid convention such as Bootstrap, adjust it.
To have gapless, simply add `is-b-gapless` class via template_preprocess. */
:root {
  --bnRowHeightMasonry: 15px;
}

/** 480px with 16px base font. */
@media only screen and (min-width: 30em) {
  .block-nativegrid.is-b-masonry {
    grid-auto-rows: var(--bnRowHeightMasonry);
  }

  /* Enable to make it gapless for Masonry. */
  .block-nativegrid.is-b-masonry .is-b-grid .grid__content {
    height: 100%;
    overflow: hidden;
  }

  /* To make even bottom gaps when using CSS background Blazy formmater.
  See Troubleshooting for more details on this.
  Only if using images, add more inner divs to fill in the gaps here. */
  .block-nativegrid.is-b-masonry .grid .litebox,
  .block-nativegrid.is-b-masonry .grid .media {
    height: 100%;
  }

  /* The only rule make sense for small devices, adjust it accordingly. */
  .small-block-nativegrid-2.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(49.3333%, 1fr));
  }

  /* Gapless. */
  .small-block-nativegrid-2.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
}

/** 641px with 16px base font. */
@media only screen and (min-width: 40.063em) {
  /* Makes nice with AJAX unload due to unpredictable content heights. */
  .is-b-unload .grid:not(.is-b-grid) {
    opacity: 0;
    transition: opacity .3s;
  }

  .is-b-unload .grid.is-b-layout {
    opacity: 1;
  }

  /* Configurable one-dimensional layouts. */
  .medium-block-nativegrid-2.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(49.3333%, 1fr));
  }

  .medium-block-nativegrid-3.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(32.4444%, 1fr));
  }

  .medium-block-nativegrid-4.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
  }

  .medium-block-nativegrid-5.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(19%, 1fr));
  }

  .medium-block-nativegrid-6.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(15.3333%, 1fr));
  }

  .medium-block-nativegrid-7.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
  }

  .medium-block-nativegrid-8.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(12.4444%, 1fr));
  }

  .medium-block-nativegrid-9.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
  }

  .medium-block-nativegrid-10.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
  }

  .medium-block-nativegrid-11.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
  }

  .medium-block-nativegrid-12.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(7.2222%, 1fr));
  }

  /* Gapless. */
  .medium-block-nativegrid-2.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }

  .medium-block-nativegrid-3.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(33.3333%, 1fr));
  }

  .medium-block-nativegrid-4.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  }

  .medium-block-nativegrid-5.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  }

  .medium-block-nativegrid-6.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(16.6666%, 1fr));
  }

  .medium-block-nativegrid-7.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(14.2857%, 1fr));
  }

  .medium-block-nativegrid-8.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(12.5%, 1fr));
  }

  .medium-block-nativegrid-9.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(11.11111%, 1fr));
  }

  .medium-block-nativegrid-10.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
  }

  .medium-block-nativegrid-11.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(9.0909%, 1fr));
  }

  .medium-block-nativegrid-12.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(8.3333%, 1fr));
  }
}

/** 1025px with 16px base font. */
@media only screen and (min-width: 64.063em) {
  /* Configurable one-dimensional layouts. */
  .large-block-nativegrid-2.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(49.3333%, 1fr));
  }

  .large-block-nativegrid-3.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(32.4444%, 1fr));
  }

  .large-block-nativegrid-4.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
  }

  .large-block-nativegrid-5.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(19%, 1fr));
  }

  .large-block-nativegrid-6.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(15.3333%, 1fr));
  }

  .large-block-nativegrid-7.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
  }

  .large-block-nativegrid-8.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(12.4444%, 1fr));
  }

  .large-block-nativegrid-9.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
  }

  .large-block-nativegrid-10.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
  }

  .large-block-nativegrid-11.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
  }

  .large-block-nativegrid-12.is-b-masonry {
    grid-template-columns: repeat(auto-fill, minmax(7.2222%, 1fr));
  }

  /* Gapless. */
  .large-block-nativegrid-2.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }

  .large-block-nativegrid-3.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(33.3333%, 1fr));
  }

  .large-block-nativegrid-4.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  }

  .large-block-nativegrid-5.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  }

  .large-block-nativegrid-6.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(16.6666%, 1fr));
  }

  .large-block-nativegrid-7.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(14.2857%, 1fr));
  }

  .large-block-nativegrid-8.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(12.5%, 1fr));
  }

  .large-block-nativegrid-9.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(11.11111%, 1fr));
  }

  .large-block-nativegrid-10.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
  }

  .large-block-nativegrid-11.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(9.0909%, 1fr));
  }

  .large-block-nativegrid-12.is-b-masonry.is-b-gapless {
    grid-template-columns: repeat(auto-fill, minmax(8.3333%, 1fr));
  }

}
/* csslint ignore:end */
