/* Match the 1180px width used by the PHP site header. */
.php-content-page main:has(.photo-album) {
  width: min(1180px, calc(100% - 40px));
}
.php-content-page > main > article.photo-album {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}
.photo-album__header { margin-bottom: clamp(2rem, 5vw, 4rem); text-align: center; }
.photo-album__date { margin: 0 0 .75rem; color: #686868; font-size: .875rem; }
.photo-album__title { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }

/* Gutenberg Gallery, classic [gallery], and a custom .photo-album-masonry group. */
.photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) { display: block !important; column-count: 3; column-gap: 1rem; margin: 0; }
.photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) > :where(figure, .gallery-item, img, a) { display: inline-block !important; width: 100% !important; max-width: none !important; margin: 0 0 1rem !important; break-inside: avoid; vertical-align: top; }
.photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) img { display: block; width: 100%; height: auto !important; border-radius: .75rem; object-fit: cover; }
.photo-album__content figcaption, .photo-album__content .gallery-caption { padding: .55rem .25rem 0; color: #686868; font-size: .8125rem; line-height: 1.45; text-align: left; }

@media (max-width: 780px) {
  .photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) { column-count: 2; column-gap: .75rem; }
  .photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) > :where(figure, .gallery-item, img, a) { margin-bottom: .75rem !important; }
}
@media (max-width: 480px) {
  .photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) { column-count: 1; }
}
.photo-album__content :where(.wp-block-gallery, .gallery, .photo-album-masonry) img { cursor: zoom-in; }
.photo-album-lightbox { position: fixed; z-index: 100000; inset: 0; display: grid; grid-template: "stage" 1fr / 1fr; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8, 12, 11, .94); color: #fff; }
.photo-album-lightbox[hidden] { display: none; }
.photo-album-lightbox__backdrop { grid-area: stage; }
.photo-album-lightbox__figure { grid-area: stage; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; max-width: calc(100vw - 120px); max-height: calc(100vh - 80px); margin: 0; pointer-events: none; }
.photo-album-lightbox__image { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; border-radius: .25rem; box-shadow: 0 16px 60px rgba(0,0,0,.4); }
.photo-album-lightbox__caption { max-width: 800px; margin-top: .75rem; color: rgba(255,255,255,.82); font-size: .875rem; text-align: center; }
.photo-album-lightbox__button { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; font: 300 2rem/1 Arial,sans-serif; }
.photo-album-lightbox__button:hover, .photo-album-lightbox__button:focus-visible { background: rgba(255,255,255,.18); outline: 2px solid #fff; outline-offset: 2px; }
.photo-album-lightbox__close { top: 20px; right: 20px; }
.photo-album-lightbox__previous, .photo-album-lightbox__next { top: 50%; transform: translateY(-50%); }
.photo-album-lightbox__previous { left: 20px; }
.photo-album-lightbox__next { right: 20px; }
body.photo-album-lightbox-open { overflow: hidden; }
@media (max-width: 600px) {
  .photo-album-lightbox__figure { max-width: calc(100vw - 24px); max-height: calc(100vh - 100px); }
  .photo-album-lightbox__image { max-height: calc(100vh - 130px); }
  .photo-album-lightbox__button { width: 42px; height: 42px; }
  .photo-album-lightbox__close { top: 12px; right: 12px; }
  .photo-album-lightbox__previous { left: 8px; }
  .photo-album-lightbox__next { right: 8px; }
}