/**
 * Sideline.Docs – dark photo-gallery template (B03–LOK as design baseline).
 *
 * Scope: only elements under .gallery-dark (opt-in). Other galleries keep
 * the classic light masonry markup until they are migrated.
 *
 * Visual system:
 * - Black background
 * - White / turquoise type (series-specific heading CSS)
 * - Full-width stacked photographs, natural aspect ratio
 * - No forced 16/9 or 3/2 crop from global .img-full / .img-landscape
 * - Tight side gutters on small screens
 */

body.gallery-dark-story,
.gallery-dark {
  background: #080b0b;
  color: #f2f4f1;
  /* Keep horizontal clip without turning vertical overflow into a clip box
     that would truncate taller-than-ratio frames (global .img-full = 16/9). */
  overflow-x: clip;
  overflow-y: visible;
}

.gallery-dark .masonry-layout {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(2rem, 4vw, 3.5rem);
  gap: 0;
}

/*
 * Neutralize global style.css masonry helpers that fight natural JPEG ratios:
 *   .img-full      → aspect-ratio 16/9  (crops ~3:2 match photos)
 *   .img-landscape → aspect-ratio 3/2 + flex 60% (side-by-side mash)
 *   .img-portrait  → aspect-ratio 4/5 + flex 40%
 */
.gallery-dark .masonry-layout > .gallery-img,
.gallery-dark .masonry-layout > .gallery-img.img-full,
.gallery-dark .masonry-layout > .gallery-img.img-landscape,
.gallery-dark .masonry-layout > .gallery-img.img-portrait,
.gallery-dark .masonry-layout > .blockm-shot,
.gallery-dark .masonry-layout > .blockm-shot.img-full,
.gallery-dark .masonry-layout > .blockm-shot.img-landscape,
.gallery-dark .masonry-layout > .blockm-shot.img-portrait {
  display: block;
  flex: none;
  float: none;
  clear: both;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 clamp(0.85rem, 2.5vw, 2.2rem);
  padding: 0;
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  background: transparent;
  overflow: visible;
  cursor: zoom-in;
}

.gallery-dark .masonry-layout > .gallery-img img,
.gallery-dark .masonry-layout > .blockm-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
}

/* Desktop: slight inset so stacked frames breathe; mobile stays near edge-to-edge */
@media (min-width: 701px) {
  .gallery-dark .masonry-layout > .gallery-img,
  .gallery-dark .masonry-layout > .blockm-shot {
    width: min(1440px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  .gallery-dark .masonry-layout {
    padding-left: 0;
    padding-right: 0;
  }

  .gallery-dark .masonry-layout > .gallery-img,
  .gallery-dark .masonry-layout > .gallery-img.img-full,
  .gallery-dark .masonry-layout > .gallery-img.img-landscape,
  .gallery-dark .masonry-layout > .blockm-shot,
  .gallery-dark .masonry-layout > .blockm-shot.img-full,
  .gallery-dark .masonry-layout > .blockm-shot.img-landscape {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }
}