/*
 * Lightbox Stylesheet for grid layout
 *    Basis: lightbox.base.light.css
 *    Basis: lightbox.grid.light.main.css
 * 
 *    This stylesheet contains the grid default settings.
 *    It is based on the overall base layout
 */


@import 'lightbox.base.light.css';


/* STATIC PART: GRID CONTAINTER */

#myPreviews {                                                 /* grid container */
  display: grid;                                              /* Grid, supported by all modern browsers */
  grid-auto-flow: dense;                                      /* might result in changed elements order to ensure grid layout stays intact */
  justify-content: center;                                    /* center grid container */
  margin-top: 25px;                                           /* little space to previous elements */
  padding-bottom: 30px;                                       /* better would be margin-bottom to separate content and next element, but this just does not work in Mac+Safari and iOS. Added this workaround though. */
  width: 100vw;                                               /* grid container width */
}

img.preview {
  height: 100%;                                               /* make sure to set to 100% to let image fit into the grid cell */
  width: 100%;                                                /* make sure to set to 100% to let image fit into the grid cell */
}

/* 
 * PREVIEW SHAPES, general definition
 * 1x1 = Default  = .square     = spanning 1
 * 2x2 = Teaser   = .bigsquare  = spanning 2 each grid-col + grid-row
 * 1x2 = Panorama = .horizontal = spanning 2 grid-col
 * 2x1 = Portrait = .vertical   = spanning 2 grid-row
 * and so on ...
 */

#myPreviews > div.horizontal {                                /* 2x1 */
  grid-column: span 2;                                        /* horizontal span multiple cess (supported by all modern browsers, not supported by IE11) */
}

#myPreviews > div.vertical,                                   /* 1x2 */ 
#myPreviews > div.bigsquare {
  grid-row: span 2;                                           /* vertical span multiple cells */
  height: 100%;                                               /* make sure the space is filled while applying 100% */
} 

#myPreviews > div.bigsquare {                                 /* 2x2 */
  grid-column: span 2;
}

#myPreviews > div.square {                                    /* 1x1 */
  /* does not need any specific declaration */
}



/* DYNAMIC PART OF THE GRID */
/* ATTENTION: When making changes starting from here, be aware of the styles for larger galleries */
/* which uses (parts of) these definitions as well */

/* Phone portrait (DEFAULT, 2-grid) */
#myPreviews {
  grid-gap: 1.5vw;                                            /* screen size dependent */
  grid-template-columns: repeat(2, 47vw);                     /* Master for approx. best grid size. Grid size = grid container width / amount columns - (amount colums - 1) * grid-gap - any preferred value for border margin */
}

#myPreviews > div {
  height: 47vw;                                               /* height keep same as grid size */
}

#myPreviews > div.vertical,                                   /* 1x2 */ 
#myPreviews > div.bigsquare {
  height: calc(2 * 47vw + 1.5vw);                             /* max-height = amount grid-row-span * width of grid cell + (amount grid-row-span - 1) * grid-gap */
                                                              /* Defining this precisely prevents large vertical images from destroying layoutand ensures smaller images */
                                                              /* will stretch to the given height. This seems is a workaround for the grid behaviour */
}

/* Phone landscape (4-grid) '*/
@media only screen and (orientation: landscape) {

  #myPreviews {
    grid-gap: .75vw;
    grid-template-columns: repeat(4, 24vw);
  }

  #myPreviews > div {
    height: 24vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 24vw + 1 * .75vw);
  }

}

/* Tablets portrait (3-grid) */
@media only screen and (orientation: portrait) and (min-width: 430px) {

  #myPreviews {
    grid-gap: 1vw;
    grid-template-columns: repeat(3, 31.5vw);
  }

  #myPreviews > div {
    height: 31.5vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 31.5vw + 1 * 1vw);
  }

}

/* Tablets portrait (4-grid) */
@media only screen and (orientation: portrait) and (min-width: 600px) {

  #myPreviews {
    grid-gap: .75vw;
    grid-template-columns: repeat(4, 24vw);
  }

  #myPreviews > div {
    height: 24vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 24vw + 1 * .75vw);
  }

}

/* Generic for all bigger screens (portrait + landscape) (5-grid) */
@media only screen and (min-width: 700px) {

  #myPreviews {
    grid-gap: .6vw;
    grid-template-columns: repeat(5, 19vw);
  }

  #myPreviews > div {
    height: 19vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 19vw + 1 * .6vw);
  }

}

/* (6-grid) */
@media only screen and (min-width: 900px) {

  #myPreviews {
    grid-gap: .5vw;
    grid-template-columns: repeat(6, 16vw);
  }

  #myPreviews > div {
    height: 16vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 16vw + 1 * .5vw);
  } 

}

/* (6-grid with max width in pixel) */
@media only screen and (min-width: 1100px) {

  #myPreviews {
    grid-gap: 5px;
    grid-template-columns: repeat(6, 176px);
    margin-left: auto;                                        /* justify content center seems not to have an effect, center with auto-margin left/right instead */
    margin-right: auto;                                       /* justify content center seems not to have an effect, center with auto-margin left/right instead */
    width: 1100px;
  }

  #myPreviews > div {
    height: 176px;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 176px + 1 * 5px);
  }

}