/* 
  Author: espimyte (https://espy.world)
  https://espy.world/gallery-grid

  --- Lightbox ---

  #lb - container for entire lightbox (image viewer)
  #lb_wrapper - wrapper for all lightbox contents, including navigation
  #lb_container - container for all lightbox contents

  #lb_exitButton - the button used to exit the lightbox, usually the entire background
  #lb_smallExitButton - the button used to exit the lightbox on small screens, usually an 'x' in the corner of the lightbox

  #lb_imageWrapper - wrapper for image and loading graphic/text
  #lb_image - the image viewed in the lightbox
  .lb-noframe - class for images where the 'noframe' attribute is active

  #lb_info - container for all info on the image
  #lb_desc - lightbox image description
  #lb_title - lightbox image title
  #lb_tags - lightbox image tags
  
  .lb-nav - lightbox navigation button
  #lb_prev - lightbox previous navigation button
  #lb_next - lightbox next navigation button

  #lb_loading - lightbox image loading element

  --- Gallery Grid ---

  .g-grid - element containing a gallery grid
  .g-fixedGrid - element containing a fixed gallery grid
  .g-justifiedGrid - element containing a justified gallery grid
  .g-justifiedGridRow - element for a row in a justified gallery grid
  
  .g-gridCell - a cell in the gallery grid
  .g-gridCellImage - the image in a grid cell
  .g-gridCellButton - the button in the grid cell that opens the lightbox (takes up the entire cell)
  .g-gridCellEffect - a helper element in the grid cell used for effects (ex. hover effects)
  .g-gridCellCaption - image caption in grid cell (only visible when 'captions' are enabled)
  .g-gridCellLoading - loading element in grid cell (does not appear for justified grids)

  .g-loading - text that appears while a grid is loading (justified grids only)
  .g-noframe - class for grid cells where the 'noframe' attribute is active
  .g-disabled - class for when accessing the lightbox is disabled in the grid
  .g-smallScreen - class for elements that are only visible on small screens
  .g-smallScreenHide - class for elements that are not visible on small screens
  .g-smallFillWidth - class that tells grid cell to fill the width of the screen on small screens when enabled

  .g-pageNav - container for page navigation
  .g-pageNavButton - navigation button for pages
  .g-pageNavNum - current page and total page count text
  .g-pageNavPrev - previous navigation button for pages
  .g-pageNavNext - next navigation button for pages

  .g-sifterWrapper - container for both filters and sorts
  .g-sifter - container for either filters/sorts
  .g-sifterName - name of sifter (either 'Filters' or 'Sort)

  .g-inputs - inputs for sifter
  .g-inputWrapper - wrapper for sifter input

  .g-filters - container for filter related elements
  .g-filterInput - input for filter (checkbox input)
  .g-filterInputOther - input for filter option for untagged images

  .g-sort - container for sort related elements
  .g-sortInput - input for sort (radio input)
  .g-sortInputAscending - ascending sort input
  .g-sortInputDescending - descending sort input
  .g-sortAlphabetical - class for when alphabetical sort is selected

*/

:root {
  --nav-width: 40px;
}
:root:has(.lb-open) {
  overflow: hidden;
}

body {
  overflow-anchor: none;
}

@keyframes loading {
  0% {
    content: ".";
  }
    33% {
      content: "..";
    }
  66% {
    content: "...";
  }
    100% {
    content: ".";
  }
}

/* ----- LIGHTBOX ----- */

#lb {
  display: none;
  position: fixed;
  overflow: hidden;

  top: 0;
  left: 0;
  z-index: 9999;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    180deg,
    rgba(64, 64, 77, 0.3) 0%,
    rgba(20, 19, 24, 0.3) 100%
  );
  backdrop-filter: blur(5px);

  font-size: 1rem;

  animation: fadeIn ease .3s;
  -webkit-animation: fadeIn ease .3s;
  -moz-animation: fadeIn ease .3s;
  -o-animation: fadeIn ease .3s;
  -ms-animation: fadeIn ease .3s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#lb a {
  color: var(--full-white);
}
#lb a:hover {
  color: var(--grey-dark);
}
#lb_wrapper {
  position: fixed;
  display: flex;
  overflow: hidden;

  width: 100%;
  height: 100dvh;
}
#lb_container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  
  margin: auto;
  padding: 20px;
  height: calc(100dvh - 40px);
}

/* ----- LIGHTBOX EXIT BUTTONS ----- */

#lb_exitButton {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 0;

  cursor: auto !important;

  border-style: none;
  border-radius: 0%;
  background-color: transparent;

  padding: 0;
  height: 100dvh;
  width: 100%;
}
#lb_smallExitButton {
  display: none;
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 1000;

  height: 50px;
  width: 50px;

  color: var(--full-white);
  
  font-size: 20px;
  background: linear-gradient(
    180deg,
    rgba(64, 64, 77, 0.3) 0%,
    rgba(20, 19, 24, 0.3) 100%
  );
  margin: 5px;
  border: 1px solid var(--full-white);
  border-radius: 10px;
}
#lb_smallExitButton:before {
  content: "X";
}

/* ----- LIGHTBOX IMAGE ----- */

#lb_imageWrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
  display: flex;
}
#lb_image {
  --border-width: 1px;
  --padding: 5px;

  position: relative;
  z-index: 1;

  object-fit: contain;
  image-rendering: auto;

  max-width: calc(100% - (var(--border-width) * 2 + var(--padding) * 2));
  max-height: calc(100% - (var(--border-width) * 2 + var(--padding) * 2));
  margin: auto;

  box-sizing: content-box;
  border-radius: var(--round-edge);
}
#lb_image.lb-noframe {
  border-color: transparent;
}

/* ----- LIGHTBOX INFO BOX ----- */

#lb_info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1;

  color: var(--full-white);
  background: linear-gradient(
    180deg,
    rgba(64, 64, 77, 0.3) 0%,
    rgba(28, 27, 34, 0.3) 80%,
    rgba(20, 19, 24, 0.3) 100%
  );
  margin: 0 auto;
  padding: 1em 1em;

  box-sizing: border-box;

  border: 2px solid var(--full-white);
  border-radius: 10px;
}
#lb_desc {
  padding: 0;
  margin: 0;
  line-height: 1.3rem;
  color: var(--full-white);
}
#lb_desc code {
  font-size: 0.9em;
  padding: 0px 2px;
  background-color: var(--tp-black);
  color: var(--full-white);
}
#lb_title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--full-white);
}
#lb_tags {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
}
#lb_tags span {
  font-size: 0.85em;
  padding: 2px 5px;
  border-width: 1px;
  border-style: solid;
  color: var(--full-white);
  border-color: var(--full-white);
  background: linear-gradient(
    180deg,
    rgba(64, 64, 77, 0.3) 0%,
    rgba(20, 19, 24, 0.3) 100%
  );
}
#lb_desc a {
  color: var(--full-white);
  background:
    linear-gradient(
      to bottom,
      var(--full-white) 0%,
      var(--full-white) 100%
    );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 0px;
  text-decoration-line: underline;
  text-decoration-color: var(--full-white);
  text-decoration-thickness: calc(1em / 8);
  white-space: nowrap;
  transition: all 0.2s;
}
#lb_desc a:hover {
  color: var(--full-white);
  color: var(--grey-dark);
  text-decoration-color: var(--full-white);
  background-size: 2px 50px;
}

@media screen and (max-width: 600px) {
  #lb_container {
    padding: 0;
    margin: 0;
    height: calc(100dvh);
  }
  #lb_image {
    margin: 0 auto;
    padding: 0px;
  }
  #lb_smallExitButton {
    display: block;
  }
  .g-gridCell {
    width: calc(45% - 1px) !important;
    height: unset !important;
  }
}

/* ----- LIGHTBOX NAVIGATION ----- */

.lb-nav {
  display: none;
  z-index: 1;
  cursor: pointer;

  color: var(--grey-light);
  background: linear-gradient(
    180deg,
    rgba(64, 64, 77, 0.3) 0%,
    rgba(28, 27, 34, 0.3) 80%,
    rgba(20, 19, 24, 0.3) 100%
  );
  backdrop-filter: brightness(60%);
  border: 2px solid var(--grey-light);
  border-radius: 10px;

  min-width: var(--nav-width);
  max-width: var(--nav-width);
  max-height: calc(100% - 10px);

  margin: auto 10px;
  height: 200px;
  font-size: 20px;
}
.lb-nav:hover, .lb-nav.lb-pressed {
  backdrop-filter: brightness(50%);
  transition: 0.1s;
  color: var(--full-white);
  border-color: var(--full-white);
  background: linear-gradient(
    180deg,
    rgba(86, 86, 102, 0.3) 0%,
    rgba(41, 40, 49, 0.3) 80%,
    rgba(37, 35, 44, 0.3) 100%
  );
}
.lb-nav:disabled {
  cursor: default;
  backdrop-filter: brightness(60%);
  color: rgb(122, 122, 122);
  border-color: rgb(100, 100, 100);
  background: linear-gradient(
    180deg,
    rgba(73, 73, 73, 0.6) 0%,
    rgba(68, 68, 68, 0.6) 80%,
    rgba(59, 59, 59, 0.6) 100%
  );
}

#lb_next::before {
  content: "▶";
}
#lb_prev::before {
  content: "◀";
}

@media screen and (max-width: 600px) {
  .lb-nav {
    position: absolute;
    border: none;
    backdrop-filter: none;

    height: 100%;
    margin: 0;
    border-radius: 0px !important;
    max-height: unset;
    box-shadow: none;
  }
  #lb_next {
    top: 0%;
    right: 0%;
    background: linear-gradient(
      90deg,
      rgba(64, 64, 77, 0.3) 0%,
      rgba(20, 19, 24, 0.3) 100%
    );
  }
  #lb_prev {
    top: 0%;
    left: 0%;
    background: linear-gradient(
      270deg,
      rgba(64, 64, 77, 0.3) 0%,
      rgba(20, 19, 24, 0.3) 100%
    );
  }
}

/* ----- GALLERY GRID ----- */

.g-grid:empty {
  border: 1px dashed var(--grey-light);
  height: 50px;
  border: 1px solid var(--full-white);
  color: var(--full-white);
}
.g-grid:empty:before {
  content: "Nothing here!";
  margin: auto;
  padding: 5px;
}
.g-grid a {
  color: var(--full-white);
}
.g-grid a:hover {
  color: var(--grey-dark);
}

/* ----- GALLERY GRID CELL ----- */

.g-gridCell {
  position: relative;
  margin: 8px;
  transition: all 0.5s !important;
  display: flex;
}
.g-gridCellImage {
  order: 1;
  border-radius: 6px;
}
.g-gridCellButton {
  order: 2;
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.g-gridCellButton:hover {
  cursor: pointer;
}
.g-gridCellEffect {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  order: 3;
  border-radius: 15px;
}
.g-gridCellEffect, .g-image {
  transition: 0.5s ease !important;
}
.g-gridCell:hover {
  transform: translateY(-5px);
  transition: all 0s !important;
}
.g-gridCell:hover .g-gridCellEffect {
  transition: 0s ease !important;
}
.g-disabled img {
  opacity: 1 !important;
}
.g-disabled button {
  display: none;
}
.g-gridCellCaption {
  display: block;
  position: absolute;
  bottom: 0%;
  right: 0%;

  margin: 5px 5px;
  padding: 5px 8px;

  font-size: 0.9rem;

  border-radius: 10px;
  border: 2px solid var(--full-white);
  background: linear-gradient(
    180deg,
    rgba(0, 52, 73, 0.9) 0%,
    rgba(1, 32, 30, 0.9) 100%
  );

  overflow: hidden;
  text-overflow: ellipsis;

  max-height: 100%;
  max-width: 100%;
}
.g-noframe .g-gridCellCaption {
  margin: 0;
}
.g-gridCellCaption a {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.g-gridCellCaption.g-smallScreen {
  display: none;
}

.g-gridCell.g-noframe .g-gridCellImage, .g-gridCell .g-gridCellEffect {
  border-color: transparent;
  box-shadow: none;
  border-radius: 6px;
}

@media screen and (max-width: 600px) {
  .g-gridCellCaption.g-smallScreen {
    display: block;
  }
  .g-fixedGrid .g-gridCell.g-smallFillWidth {
    width: 100% !important;
    height: unset !important;
  }
  .g-justifiedGridRow.g-smallFillWidth {
    flex-direction: column;
    max-height: unset !important;
    max-width: unset !important;
    height: unset !important;
  }
  .g-justifiedGridRow.g-smallFillWidth .g-gridCellImage {
    width: 100%;
  }
  .g-justifiedGridRow.g-smallFillWidth .g-gridCell {
    box-sizing: border-box;
    width: calc(100% - 16px);
  }
}

/* ----- GALLERY JUSTIFIED GRID ----- */

.g-justifiedGrid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: safe center;
}
.g-justifiedGridRow {
  display: flex;
}
.g-justifiedGrid .g-gridCell {
  position: relative;
  max-height: 100%;
}
.g-justifiedGrid .g-gridCellButton {
  background: transparent;
  border-style: none;
  z-index: 1;
  top: 0%;
  left: 0%;
}
.g-justifiedGrid .g-gridCellImage {
  max-height: 100%;
}
.g-justifiedGrid .g-gridCellLoading {
  display: none;
}
.g-justifiedGrid.g-gridLoading:before {
  content: "Loading...";
}

/* ----- GALLERY FIXED GRID ----- */

.g-fixedGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0em;
}
.g-fixedGrid .g-gridCell {
  display: inline;
}
.g-fixedGrid .g-gridCellImage {
  background: transparent;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  vertical-align: middle;
}
.g-fixedGrid .g-gridCellButton {
  display: inline;
  background: transparent;
  box-sizing: content-box;
  border-style: none;
  border-width: 0px;
}

/* ----- GALLERY PAGINATION ----- */

.g-pageNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 10px;
  color: rgb(240, 241, 246);
}
.g-pageNavButton {
  margin: 1em;
  cursor: pointer;
  border-radius: 6px;
  width: 45px;
  height: 45px;
  border: 2px solid rgb(240, 241, 246);
  color: rgb(240, 241, 246);
  background: rgb(15, 14, 18);
  transition: all 0.2s;
}
.g-pageNavButton:disabled {
  color: rgb(151, 151, 151);
  border-color: gray;
  background: linear-gradient(
    180deg,
    rgba(167, 167, 167, 0.767) 0%,
    rgba(36, 36, 36, 0.7) 100%
  );
}
.g-pageNavButton:hover:not(:disabled) {
  color: rgb(20, 19, 24);
  background: rgb(240, 241, 246);
}
.g-pageNavPrev:before {
  font-size: 1.1rem;
  content: "<";
}
.g-pageNavNext:before {
  font-size: 1.1rem;
  content: ">";
}

@media screen and (max-width: 600px) {
  .g-smallScreenHide {
    display: none;
  }
}

/* ----- GALLERY SIFTER ----- */

.g-sifterWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px;
  font-size: 1.1em;
}
.g-sifter {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: cyan;
  accent-color: rgb(33, 216, 161);
}
.g-sifter span:not(.g-sifterName) {
  margin: 0px 5px;
}
.g-sifterName {
  display: inline-block;
  text-transform: uppercase;
  margin-right: 5px;
  color: rgb(0, 202, 209);
}
.g-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* ----- FILTERS ----- */

.g-filterInputOther:before {
  content: "N/A"
}

/* ----- SORTS ----- */

.g-sort span:not(.g-sifterName) {
  text-transform: capitalize;
}
.g-sortInputAscending:before {
  content: "ascending";
}
.g-sortInputDescending:before {
  content: "descending";
}
.g-sortAlphabetical .g-sortInputAscending:before {
  content: "A-Z";
}
.g-sortAlphabetical .g-sortInputDescending:before {
  content: "Z-A";
}