/*
 * TDA Portfolio Gallery v0.9
 */

.tda-pg {
  --tda-cols: 2;
  --tda-tablet-cols: 2;
  --tda-mobile-cols: 2;
  --tda-gap: 14px;
  width: 100%;
}

.tda-pg *,
.tda-pg *::before,
.tda-pg *::after {
  box-sizing: border-box;
}

.tda-pg figure,
.tda-pg .tda-pg-item {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}

.tda-pg .tda-pg-item {
  position: relative;
}

.tda-pg .tda-pg-item img {
  display: block;
  border: 0;
  max-width: none;
}

.tda-pg:not(.tda-pg-layout-masonry):not(.tda-pg-layout-natural) .tda-pg-item img,
.tda-pg:not(.tda-pg-layout-masonry):not(.tda-pg-layout-natural) .tda-pg-item a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tda-pg:not(.tda-pg-layout-masonry):not(.tda-pg-layout-natural) .tda-pg-item img {
  object-fit: cover;
  object-position: center center;
}

/* Crop focus */
.tda-pg .tda-focus-center img { object-position: center center !important; }
.tda-pg .tda-focus-top img { object-position: center top !important; }
.tda-pg .tda-focus-bottom img { object-position: center bottom !important; }
.tda-pg .tda-focus-left img { object-position: left center !important; }
.tda-pg .tda-focus-right img { object-position: right center !important; }
.tda-pg .tda-focus-top-left img { object-position: left top !important; }
.tda-pg .tda-focus-top-right img { object-position: right top !important; }
.tda-pg .tda-focus-bottom-left img { object-position: left bottom !important; }
.tda-pg .tda-focus-bottom-right img { object-position: right bottom !important; }

.tda-pg a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Standard layouts */
.tda-pg-layout-balanced,
.tda-pg-layout-editorial,
.tda-pg-layout-mosaic,
.tda-pg-layout-magazine {
  display: grid;
  grid-template-columns: repeat(var(--tda-cols), minmax(0, 1fr));
  gap: var(--tda-gap);
  grid-auto-flow: dense;
}

.tda-pg-layout-balanced .tda-pg-item-landscape { aspect-ratio: 3 / 2; }
.tda-pg-layout-balanced .tda-pg-item-portrait { aspect-ratio: 4 / 5; }
.tda-pg-layout-balanced .tda-pg-item-square,
.tda-pg-layout-balanced .tda-pg-item-unknown { aspect-ratio: 1 / 1; }

.tda-pg-layout-editorial .tda-pg-item-landscape,
.tda-pg-layout-mosaic .tda-pg-item-landscape,
.tda-pg-layout-magazine .tda-pg-item-landscape { aspect-ratio: 4 / 3; }

.tda-pg-layout-editorial .tda-pg-item-portrait,
.tda-pg-layout-mosaic .tda-pg-item-portrait,
.tda-pg-layout-magazine .tda-pg-item-portrait { aspect-ratio: 3 / 4; }

.tda-pg-layout-editorial .tda-pg-item-square,
.tda-pg-layout-editorial .tda-pg-item-unknown,
.tda-pg-layout-mosaic .tda-pg-item-square,
.tda-pg-layout-mosaic .tda-pg-item-unknown,
.tda-pg-layout-magazine .tda-pg-item-square,
.tda-pg-layout-magazine .tda-pg-item-unknown { aspect-ratio: 1 / 1; }

/* Paired Editorial
   The inner pair must stay 50/50. This avoids horizontals becoming too wide and too short.
   Desktop cols 2 or 3 = one pair per row.
   Desktop cols 4 or 5 = two pairs per row. */
.tda-pg-layout-paired {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tda-gap);
}

@media (min-width: 901px) {
  .tda-pg-layout-paired[style*="--tda-cols:4"],
  .tda-pg-layout-paired[style*="--tda-cols:5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tda-pg-layout-paired .tda-pg-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tda-gap);
  align-items: stretch;
}

.tda-pg-layout-paired .tda-pair-right-vertical .tda-pg-pair-vertical {
  order: 2;
}

.tda-pg-layout-paired .tda-pair-right-vertical .tda-pg-pair-stack {
  order: 1;
}

.tda-pg-layout-paired .tda-pg-pair-vertical,
.tda-pg-layout-paired .tda-pg-pair-stack {
  min-width: 0;
}

.tda-pg-layout-paired .tda-pg-pair-vertical .tda-pg-item {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: 100%;
}

.tda-pg-layout-paired .tda-pg-pair-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--tda-gap);
}

.tda-pg-layout-paired .tda-pg-pair-stack .tda-pg-item {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.tda-pg-layout-paired .tda-pg-leftovers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tda-gap);
}

.tda-pg-layout-paired .tda-pg-leftovers .tda-pg-item-landscape { aspect-ratio: 4 / 3; }
.tda-pg-layout-paired .tda-pg-leftovers .tda-pg-item-portrait { aspect-ratio: 3 / 4; }
.tda-pg-layout-paired .tda-pg-leftovers .tda-pg-item-square,
.tda-pg-layout-paired .tda-pg-leftovers .tda-pg-item-unknown { aspect-ratio: 1 / 1; }


/* Triptych Editorial
   True 3-column desktop geometry:
   [vertical] [2 horizontals] [vertical]
   or:
   [2 horizontals] [vertical] [2 horizontals]
   This keeps each column the same width, so horizontal photos do not become too wide and too short. */
.tda-pg-layout-triptych {
  display: flex;
  flex-direction: column;
  gap: var(--tda-gap);
}

.tda-pg-layout-triptych .tda-pg-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tda-gap);
  align-items: stretch;
}

.tda-pg-layout-triptych .tda-pg-triptych-col {
  min-width: 0;
}

.tda-pg-layout-triptych .tda-pg-triptych-vertical .tda-pg-item {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: 100%;
}

.tda-pg-layout-triptych .tda-pg-triptych-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--tda-gap);
}

.tda-pg-layout-triptych .tda-pg-triptych-stack .tda-pg-item {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.tda-pg-layout-triptych .tda-pg-leftovers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tda-gap);
}

.tda-pg-layout-triptych .tda-pg-leftovers .tda-pg-item-landscape { aspect-ratio: 4 / 3; }
.tda-pg-layout-triptych .tda-pg-leftovers .tda-pg-item-portrait { aspect-ratio: 3 / 4; }
.tda-pg-layout-triptych .tda-pg-leftovers .tda-pg-item-square,
.tda-pg-layout-triptych .tda-pg-leftovers .tda-pg-item-unknown { aspect-ratio: 1 / 1; }

@media (max-width: 900px) {
  .tda-pg-layout-triptych .tda-pg-triptych,
  .tda-pg-layout-triptych .tda-pg-leftovers {
    grid-template-columns: repeat(var(--tda-tablet-cols), minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .tda-pg-layout-triptych,
  .tda-pg-layout-triptych .tda-pg-triptych,
  .tda-pg-layout-triptych .tda-pg-triptych-stack,
  .tda-pg-layout-triptych .tda-pg-leftovers {
    gap: calc(var(--tda-gap) * 0.75);
  }

  .tda-pg-layout-triptych .tda-pg-triptych,
  .tda-pg-layout-triptych .tda-pg-leftovers {
    grid-template-columns: repeat(var(--tda-mobile-cols), minmax(0, 1fr));
  }
}


/* Masonry */
.tda-pg-layout-masonry {
  position: relative;
  display: block;
  width: 100%;
}

.tda-pg-layout-masonry:not(.tda-pg-masonry-ready) {
  column-count: var(--tda-cols);
  column-gap: var(--tda-gap);
}

.tda-pg-layout-masonry:not(.tda-pg-masonry-ready) .tda-pg-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--tda-gap) 0;
  break-inside: avoid;
}

.tda-pg-layout-masonry.tda-pg-masonry-ready .tda-pg-item {
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.tda-pg-layout-masonry .tda-pg-item img {
  position: static;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.tda-pg-layout-masonry .tda-pg-item a {
  position: static;
  width: 100%;
  height: auto;
}

/* Natural */
.tda-pg-layout-natural {
  display: grid;
  grid-template-columns: repeat(var(--tda-cols), minmax(0, 1fr));
  gap: var(--tda-gap);
  align-items: start;
}

.tda-pg-layout-natural .tda-pg-item {
  position: static;
  overflow: visible;
}

.tda-pg-layout-natural .tda-pg-item img {
  position: static;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 900px) {
  .tda-pg-layout-balanced,
  .tda-pg-layout-editorial,
  .tda-pg-layout-mosaic,
  .tda-pg-layout-magazine,
  .tda-pg-layout-natural {
    grid-template-columns: repeat(var(--tda-tablet-cols), minmax(0, 1fr));
  }

  .tda-pg-layout-masonry:not(.tda-pg-masonry-ready) {
    column-count: var(--tda-tablet-cols);
  }
}

@media (max-width: 600px) {
  .tda-pg-layout-balanced,
  .tda-pg-layout-editorial,
  .tda-pg-layout-mosaic,
  .tda-pg-layout-magazine,
  .tda-pg-layout-natural {
    grid-template-columns: repeat(var(--tda-mobile-cols), minmax(0, 1fr));
    gap: calc(var(--tda-gap) * 0.75);
  }

  .tda-pg-layout-paired,
  .tda-pg-layout-paired .tda-pg-pair,
  .tda-pg-layout-paired .tda-pg-pair-stack,
  .tda-pg-layout-paired .tda-pg-leftovers {
    gap: calc(var(--tda-gap) * 0.75);
  }

  .tda-pg-layout-masonry:not(.tda-pg-masonry-ready) {
    column-count: var(--tda-mobile-cols);
    column-gap: calc(var(--tda-gap) * 0.75);
  }

  .tda-pg-layout-masonry:not(.tda-pg-masonry-ready) .tda-pg-item {
    margin-bottom: calc(var(--tda-gap) * 0.75);
  }
}

/* Editor */
.tda-pg-editor-placeholder {
  border: 1px dashed #c7c7c7;
  padding: 24px;
  background: #fafafa;
}

.tda-pg-editor-preview {
  pointer-events: none;
}


/* Lightbox v1.0 */
html.tda-pg-lightbox-open,
body.tda-pg-lightbox-open {
  overflow: hidden;
}

.tda-pg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: #000;
}

.tda-pg-lightbox.is-visible {
  display: flex;
}

.tda-pg-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
}

.tda-pg-lightbox-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tda-pg-lightbox-image {
  display: block;
  max-width: min(100%, 1500px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: none;
}

.tda-pg-lightbox.is-loading .tda-pg-lightbox-image {
  opacity: 0.55;
}

.tda-pg-lightbox-arrow,
.tda-pg-lightbox-close {
  position: absolute;
  z-index: 3;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  opacity: 0.78;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: opacity 0.18s ease;
}

.tda-pg-lightbox-arrow:hover,
.tda-pg-lightbox-close:hover {
  background: transparent !important;
  opacity: 1;
}

.tda-pg-lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 70px;
  font-size: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tda-pg-lightbox-prev {
  left: 22px;
}

.tda-pg-lightbox-next {
  right: 22px;
}

.tda-pg-lightbox-close {
  top: 18px;
  right: 22px;
  width: 48px;
  height: 48px;
  font-size: 42px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .tda-pg-lightbox {
    padding: 12px;
  }

  .tda-pg-lightbox-image {
    max-height: 86vh;
  }

  .tda-pg-lightbox-arrow {
    width: 42px;
    height: 64px;
    font-size: 34px;
  }

  .tda-pg-lightbox-prev {
    left: 6px;
  }

  .tda-pg-lightbox-next {
    right: 6px;
  }

  .tda-pg-lightbox-close {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    font-size: 36px;
  }
}