/* Photographs and the map video (lane photos, 2026-11-11; templates/partials/_photo.html).

   One treatment for every photograph, applied when the files were built (web/static/img/photos/CREDITS.json):
   toned from the brand navy through its lift to a pale evergreen, so nothing here recolors them. Square
   corners, no frame, no shadow; a navy ground holds the box before the file arrives, and width and height on
   the element keep the page from moving. The credit is a small (i) in the bottom-right corner, the site's
   popover (`.map-info`, `.map-pop`, styles.css). */

.photo {
  position: relative;
  margin: 0;
  background: #0b1023;
  overflow: hidden;
}
.photo__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* "band": a short full-bleed strip across a read page; the crop keeps the subject's middle. */
.photo--band .photo__media { aspect-ratio: 16 / 5; object-position: 50% 45%; }
@media (max-width: 719px) { .photo--band .photo__media { aspect-ratio: 3 / 2; } }

/* "half": half the column beside text from 900px; full width below. */
@media (min-width: 900px) { .photo--half { width: 50%; } }

.photo--video .photo__media { aspect-ratio: 8 / 5; background: #eef1f5; }

.photo__credit {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.photo__i {
  width: 1.75rem;
  height: 1.75rem;
  color: #eef1f5;
  background: rgb(11 16 35 / 0.55);
  border: 0;
  border-radius: 50%;
}
.photo__i:hover { background: rgb(11 16 35 / 0.85); }
.photo--video .photo__i { color: #0b1023; background: rgb(255 255 255 / 0.85); }
.photo__credit-short {
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.3125rem 0.4375rem;
  color: #0b1023;
  background: rgb(255 255 255 / 0.85);
}

.photo-pop { width: min(24rem, calc(100vw - 2rem)); }
.photo-pop__title { margin: 0 0 0.375rem; font-weight: 600; }
.photo-pop p, .photo-pop ul { margin: 0 0 0.375rem; }
.photo-pop ul { padding-left: 1.1rem; }
.photo-pop__note { color: var(--text-muted, #4a5063); }