/**
 * Shared 2-column masonry for portfolio (.pf-edit) and series (.sr-edit).
 * Desktop: two equal columns, shortest-column packing (SSR .bp5-mcol).
 * Phone: one column, authored sequence via figure order + display:contents.
 * Photos keep native aspect ratios — no crop, no viewport height caps.
 */

.bp5-gallery {
  --bp5-gap: 20px;
  --bp5-max: 1320px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--bp5-gap);
  max-width: var(--bp5-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  box-sizing: border-box;
}

.bp5-gallery .bp5-mcol {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp5-gap);
}

.bp5-gallery > figure,
.bp5-gallery .bp5-mcol > figure {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  position: relative;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
}

.bp5-gallery figure img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: var(--ar, auto);
  object-fit: contain;
  object-position: center center;
  background: transparent;
}

/* Kill legacy slot / hero / genre sizing inside the shared gallery. */
.bp5-gallery figure[data-slot="hero"],
.bp5-gallery figure[data-slot="full"],
.bp5-gallery figure[data-slot="standard"],
.bp5-gallery figure[data-slot="pair"],
.bp5-gallery figure[data-slot="portrait-contained"],
.bp5-gallery figure[data-orient="portrait"],
.bp5-gallery figure[data-orient="landscape"] {
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
}

.bp5-gallery figure[data-slot="break"] {
  display: none !important;
}

.bp5-gallery figcaption {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted, #5c5a55);
  max-width: 42rem;
}

@media (max-width: 699px) {
  .bp5-gallery {
    --bp5-gap: 14px;
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Flatten columns so authored order (CSS order) is one vertical stream. */
  .bp5-gallery .bp5-mcol {
    display: contents;
  }

  .bp5-gallery figure {
    order: var(--seq, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp5-gallery * {
    animation: none !important;
    transition: none !important;
  }
}