/*

This style is to produce 3 kinds of gallery layout:

1. masonry_vertical (pinterest style) --> FIXED WIDTH, vertical, filling 1st column then 2nd col then 3 col. 
2. flex_fixed_height -> FIXED HEIGHT -> 1st col, 2nd col, 3rd col, 1st col, 2nd col, etc.
3. (unused) grid_normal --> FIXED WIDTH and FIXED HEIGHT -> cropped using object-fit: conver;
4. grid_dense --> grid and densed


Image ratios

Name, width ratio, height ratio, row span, col span
Square, 1, 1, 1, 1
Portrait, 2, 3, 2, 1
Tall, 1, 2, 3, 1
Landscape, 4, 3, 1, 2
Panorama, 2, 1, 1, 3


RULES:
1. Do not set item gap on container, set it on each item

*/


#gallery-container {
  display: flex;
  align-items: flex-start;
  /*gap: 0; /* do not declare gap, let item decide */
  margin: 0 1px; /* no margin for small screen to save space */
}

figure {
  display: flex;
  align-items: center; /* center all items including img */
  
  position: relative; /* for absolute positioned figcaption */
  overflow: hidden; /* img has scale, hide the overflow */

  margin: 0.5rem;

  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
}
figure[data-index]::before {
  /* content: attr(data-index); */
  position: absolute;
  top: 6px;
  left: 6px;

  z-index: 100;
  color: black;
  text-shadow: -2px -2px 2px white
    , 2px -2px 2px white
    , -2px 2px 2px white
    , 2px 2px 2px white;
}
figure > img {
  /* aspect-ratio: 3 / 4;
  object-fit: cover; */

  /* display: flex;
  justify-content: center;
  align-items: center; */
  width: 100%;
  height: auto;
  transition: scale 1s ease-in-out;
}
figure > img:hover {
  scale: 1.2;
}
figure > figcaption {
  /* bottom left */
  position: absolute;
  left: 1.0rem;
  bottom: 1.0rem;

  color: black;
  text-shadow: -2px -2px 2px white
    , 2px -2px 2px white
    , -2px 2px 2px white
    , 2px 2px 2px white;
}

.masonry_vertical {
  /*columns: 3; /* fixed column */
  
  column-width: 200px; /* dynamic column */
  /* neither flex nor grid */
  /*column-gap: 1.0rem; /* do not set */
  
}
.masonry_vertical > figure {
  margin-bottom: 1.0rem;
  /* max-width: 200px !important; */
}
.masonry_vertical>figure>img {
  /*margin-bottom: 1.0rem; /* gap for bottom of column */
  aspect-ratio: unset !important;
  object-fit: unset !important;
}
.masonry_vertical > .masonry-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 0; 
  /*gap: 1.0rem; /* do not set gap here, set gap on items */
}



.masonry_grid > * {
  margin: 0 0.5rem; /* gap between columns */
}
.masonry_grid > * > * {
  margin: 0.5rem 0; /* gap between rows */
}

.flex_fixed_height {
  display: flex;
  flex-wrap: wrap;
  /*gap: 0.5rem; /* set gap on items */
  justify-content: space-around;
  /* single item will be centered */
}
.flex_fixed_height>figure>img {
  display: block;
  height: 350px !important;
  /* fixed height to accomodate 2 (portrait + landscape) or 3 (portraits) images */
  width: auto;

  aspect-ratio: unset !important;
  object-fit: unset !important;
}

.grid_normal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.0rem;
}
.grid_normal>figure>img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.grid_dense {
  display: grid !important; /* override master */

  /* various column span and row span, tested for 9 columns, odd columns is good to display un-even-ly ! */
  /*grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); */
  grid-template-columns:repeat(auto-fit, 100px);
  grid-auto-rows: 100px;
  justify-content: center;
  /*gap: 0.5rem !important; /* set gap on items */

  /* reduce "hole" */
  /* only works if some items col-span 2 or more or row-span 2 or more */
  grid-auto-flow: row dense;

  align-items: unset !important; /* override master */
}
.grid_dense>figure {
  margin: 0.5rem;
  /* width: fit-content;
  height: fit-content; */
}

.grid_dense>figure>img {
  aspect-ratio: unset !important;
  object-fit: unset !important;
}
.grid_dense>figure.landscape {
  grid-column: span 2;
}
.grid_dense>figure.square {
  /* Ratio 1:1, special large 2*2 */
  grid-column: span 2;
  grid-row: span 2;
}
.grid_dense>figure.portrait{
  /* standard: direct DSLR 2:3 */
  grid-column:span 1;
  grid-row:span 2;
}
.grid_dense>figure.tall{
  /* taller than portrait 1:2 or more 1:>2.0 */
  grid-column:span 1;
  grid-row:span 3;
}
.grid_dense>figure.landscape{
  /* landscape 3:2 or 16:9 or 4:3 */
  grid-column:span 2;
  grid-row:span 1;
}
.grid_dense>figure.panorama{
  /* wider than landscape 2:1 or 3:1 or more */
  grid-column:span 3;
  grid-row:span 1;
}
.grid_dense>figure.wide1{
  /* 1.5:1 == 3:2 */
  grid-column: span 3;
  grid-row: span 2;
}
.grid_dense>figure.wide2{
  /* 2:1 */
  grid-column: span 4;
  grid-row: span 2;
}
.grid_dense>figure.wide3{
  /* 5:2 */
  grid-column: span 5;
  grid-row: span 2;
}
.grid_dense>figure.tall1{
  /* 1:1.5 == 2:3 */
  grid-column: span 2;
  grid-row: span 3;
}
.grid_dense>figure.tall2{
  /* 1:2 == 2:4 */
  grid-column: span 2;
  grid-row: span 4;
}
.grid_dense>figure.tall3{
  /* 2:5 */
  grid-column: span 2;
  grid-row: span 5;
}



.layout-toggle {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.layout-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.layout-btn:hover {
  border-color: var(--text-primary);
}

.layout-btn.active {
  background-color: var(--accent-gold);
  color: var(--bg-primary);
  border-color: var(--accent-gold);
}

@media only screen and (max-width: 640px) {

  /* 1 column for small screen */
  /* .masonry_vertical {
    columns: 1;
  } */

  .grid_normal {
    grid-template-columns: 1fr;
  }

  /* .grid_dense {
    grid-template-columns: 1fr;
  } */

  #change_layout_buttons_container {
    display: none;
  }
}

@media (max-width: 450px) {
  .masonry_vertical{
    column-width: 158px;
  }

  .flex_fixed_height>figure>img {
    height: unset !important; /* reset fixed height */
    width: 100%;
  }

  .grid_dense {
    grid-template-columns: 1fr;
    grid-auto-rows: unset !important;
  }
  .grid_dense > figure {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}