/*
 * Photo Gallery — featured image + thumbnail strip.
 * Works with PhotoSwipe 5 lightbox.
 */

/* =============================================
   Gallery container
   ============================================= */

.building-entry__gallery {
  margin-bottom: 1.5rem;
}

/* Desktop: float the gallery flush to the right of the content column so the
   headnote and body text wrap to its left, matching the D7 entry layout.
   Mobile keeps it stacked full-width (above the text). The 1000px breakpoint
   matches where .building-entry__layout switches to a row. */
@media (min-width: 1000px) {
  .building-entry__gallery {
    float: right;
    width: 360px;
    margin-left: 2rem;
    margin-bottom: 1rem;
  }

  /* Sections that should never sit beside a tall floated gallery. */
  .building-entry__references,
  .building-entry__credits {
    clear: both;
  }
}

/* =============================================
   Featured (first) image
   ============================================= */

.building-entry__gallery-featured {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  cursor: zoom-in;
}

.building-entry__gallery-featured-img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  max-width: 480px;
}

.building-entry__gallery-credit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(1, 67, 96, 0.8);
  color: #fff;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  line-height: 1.3;
}

/* =============================================
   Thumbnail strip
   ============================================= */

.building-entry__gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.building-entry__gallery-thumb {
  display: block;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  cursor: zoom-in;
}

.building-entry__gallery-thumb:hover,
.building-entry__gallery-thumb:focus {
  border-color: #238fb5;
  outline: none;
}

.building-entry__gallery-thumb:focus-visible {
  border-color: #014360;
  outline: 2px solid #238fb5;
  outline-offset: 2px;
}

.building-entry__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================
   Caption below featured image
   ============================================= */

.building-entry__gallery-caption {
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* =============================================
   No-full variants — photo present at /360/ or /thumbs/ but /full/
   is missing on S3, so the lightbox link is disabled. Dim + default
   cursor signal to the user that click-to-enlarge isn't available.
   ============================================= */

.building-entry__gallery-featured--no-full,
.building-entry__gallery-thumb--no-full {
  cursor: default;
}

.building-entry__gallery-featured--no-full .building-entry__gallery-featured-img,
.building-entry__gallery-thumb--no-full img {
  opacity: 0.55;
  filter: grayscale(20%);
}

.building-entry__gallery-thumb--no-full {
  border-color: transparent !important;
}

.building-entry__gallery-thumb--no-full:hover,
.building-entry__gallery-thumb--no-full:focus {
  border-color: transparent !important;
}

/* =============================================
   No-photo placeholder
   ============================================= */

.building-entry__no-photo {
  margin-bottom: 1.5rem;
}

.building-entry__no-photo-link {
  display: block;
  max-width: 360px;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity 0.15s;
}

.building-entry__no-photo-link:hover,
.building-entry__no-photo-link:focus {
  opacity: 0.85;
}

.building-entry__no-photo-link:focus-visible {
  outline: 3px solid #238fb5;
  outline-offset: 2px;
}

.building-entry__no-photo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================
   PhotoSwipe loading placeholder
   We suppress PhotoSwipe's blurry low-res placeholder (see photo-gallery.js,
   domItemData filter). This tints the neutral fallback box — shown at the
   correct size while the /full/ image loads — to a dark slate instead of the
   default gray, so it reads as intentional against the lightbox backdrop.
   ============================================= */

.pswp {
  --pswp-placeholder-bg: #1c2b33;
}

/* =============================================
   PhotoSwipe caption overlay
   ============================================= */

.pswp__caption-text {
  display: block;
  font-size: 0.95rem;
}

.pswp__caption-credit {
  display: block;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.15rem;
}

/* PhotoSwipe caption element — position at bottom of lightbox */
.pswp .pswp__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  text-align: center;
}

/* =============================================
   Responsive adjustments
   ============================================= */

@media (min-width: 48rem) {
  .building-entry__gallery-thumb {
    width: 100px;
    height: 100px;
  }
}