/**
 * Captioned photo grid — miasma.com
 * Body component for any page; paste in the editor's Source view:
 *   <div class="mia-photos">
 *     <figure><a href="full.jpg"><img src="small.jpg" alt="…"></a>
 *       <figcaption>Who, where.</figcaption></figure>
 *     …
 *   </div>
 * Tiles crop to 4:3; the link opens the uncropped photo. Inside a long-read
 * body the grid runs 50% wider than the text.
 */

.mia-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem 1rem;
  margin: 2rem 0 2.25rem;
}

/* In a long-read body the grid breaks out of the text column: 50% wider,
   centred, never wider than the screen minus the usual gutter. */
.longread .lr-body .mia-photos {
  --mia-photos-w: min(150%, 100vw - 2.5rem);
  width: var(--mia-photos-w);
  margin-left: calc((100% - var(--mia-photos-w)) / 2);
}

/* Pages and posts use longread.css, whose figure margins would gap the rows;
   its caption style (mono, accent rule) is kept. */
.mia-photos figure,
.longread .lr-body .mia-photos figure {
  margin: 0;
  max-width: none;
}

.mia-photos a {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bs-secondary-bg);
}

.mia-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .3s ease;
}

/* Portrait photos: crop from near the top so faces stay in the tile. */
.mia-photos .is-tall img {
  object-position: 50% 15%;
}

.mia-photos a:hover img,
.mia-photos a:focus-visible img {
  transform: scale(1.03);
}

.mia-photos figcaption {
  margin-top: .45rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--bs-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
  .mia-photos img { transition: none; }
}