/*
 * Lightbox Stylesheet for float layout
 *    Basis: lightbox.base.light.css
 *    Basis: lightbox.float.light.main.css
 * 
 *    This stylesheet contains the float default settings.
 *    It is based on the overall base layout
 *
 *
 *    BREAK POINTS   |        PORTRAIT |       LANDSCAPE
 *    --------------- ----------------- ----------------
 *    PHONE          |  *   0 ...  430 |      0 ...  900
 *    TABLET         |    430 ... 1050 |    900 ... 1400
 *    MONITOR        |   1050 ... OPEN |   1400 ... OPEN
 *    --------------- ---------------- -----------------
 *    * DEFAULT BREAK POINT FOR MOBILE FIRST DEVELOPMENT
 *
 */


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


/* SECTION: IMAGE PREVIEWS */

/* Preview sizes depending on screen sizes and orientation. The following is the defaults for galleries with
   few images. Sizes reflect the best mix based on typical devices, there is no perfect solution fitting all.
   ANNOTATION: When changing something here, keep potential delta styles for larger galleries in mind. */

/* Mobile first */
.row {
  margin: 25px auto 0 auto ;           /* center previews horizontally and give some upper distance */
  padding-bottom: 30px;

  /* this section centers the previews horizontally */
  /* https://stackoverflow.com/questions/5523632/aligning-a-floatleft-div-to-center */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* this part might be overwritten for lager screens later on */
  max-width: 950px;                    /* max width of all preview images */
}

.row > .column {
  /* ATTENTION: when changing the margin here, also consider it is uses within the previews inside calc() */
  margin: 3px;
}

/* Desktop monitors + bigger screens */
@media only screen and (min-width: 1200px) {

  .row {
    max-width: 1300px;                 /* max width of all preview images */
  }

}

.row:after {
  clear: both;
  content: '';
  display: table;
}

.column {
  float: left;
}


/* Images  */

/* Phone portrait (DEFAULT) */
div.square > img {                     /* previews square shape */
  width: 46vw;                         /* width dependent on screen size, fitting 2 images (leaving space for image margin) */
  height: 46vw;                        /* height follows width for square */
  max-width: 170px;                    /* phones are not huge, limit to an overall size */
  max-height: 170px;                   /* max-height follows width for square */
}

div.horizontal > img {                 /* previews rectangle shape, 2:1 format */
  height: 46vw;                        /* height follows width of .square to be able to mix them together in one gallery */
  width: calc(2 * (46vw + 3px));       /* width follows height in this case (2x height, + 2x margin) */
  max-height: 170px;                   /* max-height follows max-height of .square to be able to mix them together in one gallery */
  max-width: calc(2 * (170px + 3px));  /* max-width follows height in this case (2x height, + 2x margin) */
}

div.horizontal-traditional > img {     /* previews rectangle shape, 3:2 traditional format, useeful for instance portrait pictures */
  width: 95vw;                         /* with dependent on device size */
  height: calc(2 / 3 * 95vw);          /* height follows width and a traditional 3:2 image ratio */
  max-width: 340px;                    /* max-width set to a size which also identifies the preview as a preview on larger phones */
  max-height: calc(2 / 3 * 340px);     /* max-height follows max-width, keeping traditional 3:2 ratio */
}

div.vertical > img {                   /* previews rectangle shape */
  height: 168px;                       /* size for mobile phones, for best view on Phones like Galaxy S9 (w:360px) */
  width: 112px;                        /* size for mobile phones, height around 3:2 ratio */
}

/* Phone landscape (no media width defined since it is derived from DEFAULT portrait */
@media only screen and (orientation: landscape) {

  div.square > img {
    height: 18vw;                      /* will fit-in 5 squares */
    width: 18vw;
  }

  div.horizontal > img {
    height: 18vw;                      /* take square height */
    width: calc(2 * (18vw + 3px));     /* take twice the height and add twice margin */
  }

  div.horizontal-traditional > img {
    width: 45vw;
    height: calc(2 / 3 * 45vw);
    max-width: 280px;
    max-height: calc(2 / 3 * 280px);
  }

  div.vertical > img {
    height: 201px;
    width: 134px;
  }

}

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

  div.square > img {
    height: 147px;
    width: 147px;
  }

  div.horizontal > img {
    height: 147px;
    width: calc(2 * (147px + 3px));    /* take 2x the height + add 2x margin */
  }

  div.vertical > img {
    height: 207px;
    width: 138px;
  }

  .row {
    max-width: 700px;
  }

}

/* Tablets landscape */
@media only screen and (orientation: landscape) and (min-width: 900px) {
  
  div.square > img {
    height: 147px;
    width: 147px;
  }

  div.horizontal > img {
    height: 147px;
    width: calc(2 * (147px + 3px));    /* take 2x the height + add 2x margin */
  }

  div.vertical > img {
    height: 207px;
    width: 138px;
  }

  .row {
    max-width: 950px;
  }

}

/* Desktop portrait */
@media only screen and (orientation: portrait) and (min-width: 1050px) {
  
  div.square > img {
    height: 157px;
    width: 157px;
  }

  div.horizontal > img {
    height: 157px;
    width: calc(2 * (157px + 3px));    /* take 2x the height + add 2x margin */
  }

  div.vertical > img {
    height: 255px;
    width: 170px;
  }

  .row {
    max-width: 1050px;
  }
  
}

/* Desktop landscape */
@media only screen and (orientation: landscape) and (min-width: 1400px) {

  div.square > img {
    height: 157px;
    width: 157px;
  }

  div.horizontal > img {
    height: 157px;
    width: calc(2 * (157px + 3px));    /* take 2x the height + add 2x margin */
  }

  div.vertical > img {
    height: 255px;
    width: 170px;
  }

  .row {
    max-width: 1050px;
  }

}



-- --

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: > 0.5%
*/