/**
 *  @package michael-travels-theme
 *
 *  A gallery of photographs: three across, every tile the same shape, and each
 *  one opening into a lightbox.
 *
 *  The uniform 3:2 is the point. Photographs come out of a camera in whatever
 *  proportion they were taken, and a grid of mixed shapes reads as a pile
 *  rather than a sequence.
 */

.travels-gallery-heading {
  margin-bottom: var(--mt-space-6);
}

.travels-gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mt-space-4);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.travels-photograph figure {
  margin: 0;
}

.travels-photograph-link {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--mt-ground-alt);
  border-radius: var(--mt-radius) var(--mt-radius) 0 0;
  cursor: zoom-in;
}

.travels-photograph figure.is-uncaptioned .travels-photograph-link {
  border-radius: var(--mt-radius);
}

/*  Cropped to the tile, so every one is the same shape whatever it was.  */
.travels-photograph-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.travels-photograph-link:hover img,
.travels-photograph-link:focus-visible img {
  transform: scale(1.03);
}

.travels-photograph-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: var(--mt-dark);
  color: var(--mt-on-dark);
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/**
 *  Where the photograph came from — the place, the day, the trip. Set as a
 *  meta line so it reads as a label rather than competing with the caption
 *  somebody actually wrote.
 */
.travels-photograph-where {
  color: var(--mt-on-dark-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.travels-photograph-text {
  font-weight: 600;
}

.travels-photograph-credit {
  color: var(--mt-on-dark-muted);
  font-weight: 400;
}

/**
 *  On a dark section the caption's own dark band disappears into the ground
 *  behind it, and the tiles lose their edges. Lifted a step instead, so the
 *  caption still reads as attached to its photograph.
 */
.background-dark .travels-photograph-caption {
  background: var(--mt-dark-alt);
}

.background-dark .travels-photograph-link {
  background: var(--mt-dark-alt);
}

@media screen and (min-width: 576px) {

  .travels-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media screen and (min-width: 992px) {

  .travels-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}




/*  ============================================================================
    The lightbox

    Built by the script and appended to the body, so it sits above everything
    regardless of what section the gallery happens to be in.
    ============================================================================  */

.travels-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mt-space-5);
  background: rgba(var(--mt-dark-rgb), 0.94);
  visibility: hidden;
  opacity: 0;

  /*  Delayed rather than transitioned, so a hidden element never has to take
      focus — see the search panel, which had exactly that bug.  */
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.travels-lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

body.has-lightbox-open {
  overflow: hidden;
}

.travels-lightbox-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.travels-lightbox-figure {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
  max-width: min(1300px, 100%);
  max-height: 100%;
  margin: 0;
}

.travels-lightbox-image {
  width: auto;
  max-width: 100%;

  /*  Room for the caption underneath, whatever the picture's shape.  */
  max-height: calc(100vh - 200px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--mt-radius);
}

.travels-lightbox-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: var(--mt-measure);
  margin: 0 auto;
  color: var(--mt-on-dark);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
}

.travels-lightbox-where {
  color: var(--mt-on-dark-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.travels-lightbox-text {
  font-weight: 600;
}

.travels-lightbox-credit {
  color: var(--mt-on-dark-muted);
}




/*  ----------  Its controls  ----------  */

.travels-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(var(--mt-ground-rgb), 0.1);
  color: var(--mt-on-dark);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.travels-lightbox button:hover,
.travels-lightbox button:focus-visible {
  background: rgba(var(--mt-ground-rgb), 0.24);
}

.travels-lightbox-close {
  top: var(--mt-space-4);
  right: var(--mt-space-4);
}

.travels-lightbox-previous {
  top: 50%;
  left: var(--mt-space-4);
  transform: translateY(-50%);
}

.travels-lightbox-next {
  top: 50%;
  right: var(--mt-space-4);
  transform: translateY(-50%);
}

/*  Drawn in CSS: three glyphs is not worth three SVG files.  */
.travels-lightbox-close::before,
.travels-lightbox-close::after,
.travels-lightbox-previous::before,
.travels-lightbox-next::before {
  content: "";
  position: absolute;
  background: currentColor;
}

.travels-lightbox-close::before,
.travels-lightbox-close::after {
  width: 18px;
  height: 1.5px;
}

.travels-lightbox-close::before {
  transform: rotate(45deg);
}

.travels-lightbox-close::after {
  transform: rotate(-45deg);
}

.travels-lightbox-previous::before,
.travels-lightbox-next::before {
  width: 12px;
  height: 12px;
  background: transparent;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.travels-lightbox-previous::before {
  transform: rotate(45deg) translate(2px, -2px);
}

.travels-lightbox-next::before {
  transform: rotate(-135deg) translate(2px, -2px);
}

.travels-lightbox-counter {
  position: absolute;
  bottom: var(--mt-space-4);
  left: 50%;
  margin: 0;
  color: var(--mt-on-dark-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
}

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

  .travels-lightbox-previous {
    top: auto;
    bottom: var(--mt-space-4);
    left: calc(50% - 76px);
    transform: none;
  }

  .travels-lightbox-next {
    top: auto;
    bottom: var(--mt-space-4);
    right: calc(50% - 76px);
    transform: none;
  }

  .travels-lightbox-counter {
    bottom: calc(var(--mt-space-4) + 62px);
  }

}