/**
 * @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.
 */

/* csslint ignore:start */
/* The gap 15px is to match CSS grid convention such as Bootstrap, adjust it. */
:root {
  --bnColGap: 15px;
  --bnRowHeightNative: 80px;
}

.block-nativegrid,
.blazy.block-nativegrid,
.item-list > .block-nativegrid {
  clear: both;
  display: block;
  list-style: none;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.block-nativegrid > .grid,
.item-list > .block-nativegrid > .grid {
  display: block;
  margin: 0 0 var(--bnColGap) 0;
  min-height: 40px;
  padding: 0;
  width: 100%;
}

.block-nativegrid .grid__content {
  position: relative;
  overflow: visible;
  width: 100%;
}

/** 480px with 16px base font. */
@media only screen and (min-width: 30em) {
  .block-nativegrid > .grid,
  .item-list > .block-nativegrid > .grid {
    margin-bottom: 0;
  }

  .block-nativegrid {
    gap: var(--bnColGap);
    grid-template-columns: auto;
    grid-auto-rows: var(--bnRowHeightNative);
    /* align-content: start;
    justify-content: start;  */
  }

  .block-nativegrid,
  .blazy.block-nativegrid,
  .item-list > .block-nativegrid {
    display: grid;
  }

  /** Without margin. */
  .block-nativegrid.is-b-gapless {
    gap: 0; /* csslint allow: known-properties, gap */
  }

  .block-nativegrid > .grid,
  .item-list > .block-nativegrid > .grid {
    display: flex;
    align-items: start;
    justify-content: start;
  }

  /** Adjust the minimum accordingly like everything else. */
  .block-nativegrid.is-b-native > .grid {
    -ms-grid-row-span: 2;
    grid-row: span 2;
    -ms-grid-column: auto;
    grid-column: auto;
  }

  .block-nativegrid.is-b-native .grid__content {
    height: 100%;
    overflow: hidden;
  }

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

  /* Add more relevant selectors accordingly to make gapless grids.
  Remove .is-b-native to make it fit height-width for Masonry. */
  .block-nativegrid.is-b-native .grid .litebox,
  .block-nativegrid.is-b-native .grid .b-bg,
  .block-nativegrid.is-b-native .grid iframe,
  .block-nativegrid.is-b-native .grid picture,
  .block-nativegrid.is-b-native .grid video,
  .block-nativegrid.is-b-native .grid .media,
  .block-nativegrid.is-b-native .grid img.media__element,
  .block-nativegrid.is-b-native .grid .slide__media {
    height: inherit;
    /* Aspect ratio is irrelevant for gapless grid.*/
    padding: 0 !important; /* csslint allow: known-properties, important */
    position: static; /* To keep lightbox/ video icon centered. */
    object-fit: cover;
    width: 100%;
  }

  /* For some reason, unlike video, etc., iframe refuses to show when static. */
  .block-nativegrid.is-b-native .grid iframe {
    position: absolute;
  }

  /* To avoid initial confusion due to being hidden, adjust it. */
  .block-nativegrid.is-b-native .blazy__caption,
  .block-nativegrid.is-b-native .slide__caption {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    color: #fff;
    background: rgba(0,0,0,.8);
    text-align: center;
    padding: 10px 15px;
    z-index: 3;
  }

  /* The only rule make sense for small devices, adjust it accordingly. */
  .small-block-nativegrid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/** 641px with 16px base font. */
@media only screen and (min-width: 40.063em) {
  .medium-block-nativegrid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .medium-block-nativegrid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .medium-block-nativegrid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .medium-block-nativegrid-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .medium-block-nativegrid-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .medium-block-nativegrid-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .medium-block-nativegrid-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .medium-block-nativegrid-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .medium-block-nativegrid-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .medium-block-nativegrid-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .medium-block-nativegrid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

/** 1025px with 16px base font. */
@media only screen and (min-width: 64.063em) {
  /* Default for two-dimensional layout. */
  .block-nativegrid {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Configurable one-dimensional layouts. */
  .large-block-nativegrid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .large-block-nativegrid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .large-block-nativegrid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .large-block-nativegrid-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .large-block-nativegrid-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .large-block-nativegrid-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .large-block-nativegrid-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .large-block-nativegrid-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .large-block-nativegrid-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .large-block-nativegrid-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .large-block-nativegrid-12 {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Dimensions for two-dimensional layout. */
  /** grid-row == height */
  .block-nativegrid > .grid[data-b-h='1'] {
    -ms-grid-row-span: 1;
    grid-row: span 1;
  }

  .block-nativegrid > .grid[data-b-h='2'] {
    -ms-grid-row-span: 2;
    grid-row: span 2;
  }

  .block-nativegrid > .grid[data-b-h='3'] {
    -ms-grid-row-span: 3;
    grid-row: span 3;
  }

  .block-nativegrid > .grid[data-b-h='4'] {
    -ms-grid-row-span: 4;
    grid-row: span 4;
  }

  .block-nativegrid > .grid[data-b-h='5'] {
    -ms-grid-row-span: 5;
    grid-row: span 5;
  }

  .block-nativegrid > .grid[data-b-h='6'] {
    -ms-grid-row-span: 6;
    grid-row: span 6;
  }

  .block-nativegrid > .grid[data-b-h='7'] {
    -ms-grid-row-span: 7;
    grid-row: span 7;
  }

  .block-nativegrid > .grid[data-b-h='8'] {
    -ms-grid-row-span: 8;
    grid-row: span 8;
  }

  .block-nativegrid > .grid[data-b-h='9'] {
    -ms-grid-row-span: 9;
    grid-row: span 9;
  }

  .block-nativegrid > .grid[data-b-h='10'] {
    -ms-grid-row-span: 10;
    grid-row: span 10;
  }

  .block-nativegrid > .grid[data-b-h='11'] {
    -ms-grid-row-span: 11;
    grid-row: span 11;
  }

  .block-nativegrid > .grid[data-b-h='12'] {
    -ms-grid-row-span: 12;
    grid-row: span 12;
  }

  /** grid-column == width */
  .block-nativegrid > .grid[data-b-w='1'] {
    -ms-grid-column-span: 1;
    grid-column: span 1;
  }

  .block-nativegrid > .grid[data-b-w='2'] {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }

  .block-nativegrid > .grid[data-b-w='3'] {
    -ms-grid-column-span: 3;
    grid-column: span 3;
  }

  .block-nativegrid > .grid[data-b-w='4'] {
    -ms-grid-column-span: 4;
    grid-column: span 4;
  }

  .block-nativegrid > .grid[data-b-w='5'] {
    -ms-grid-column-span: 5;
    grid-column: span 5;
  }

  .block-nativegrid > .grid[data-b-w='6'] {
    -ms-grid-column-span: 6;
    grid-column: span 6;
  }

  .block-nativegrid > .grid[data-b-w='7'] {
    -ms-grid-column-span: 7;
    grid-column: span 7;
  }

  .block-nativegrid > .grid[data-b-w='8'] {
    -ms-grid-column-span: 8;
    grid-column: span 8;
  }

  .block-nativegrid > .grid[data-b-w='9'] {
    -ms-grid-column-span: 9;
    grid-column: span 9;
  }

  .block-nativegrid > .grid[data-b-w='10'] {
    -ms-grid-column-span: 10;
    grid-column: span 10;
  }

  .block-nativegrid > .grid[data-b-w='11'] {
    -ms-grid-column-span: 11;
    grid-column: span 11;
  }

  .block-nativegrid > .grid[data-b-w='12'] {
    -ms-grid-column-span: 12;
    grid-column: span 12;
  }
}
/* csslint ignore:end */