/*--------------------------------------------------------------
# photo2.js injected photos (FishReports <photo> tags in a report body)
# Ported from stardust-sportfishing; no white plate, since this site's
# report body sits on the dark gray section background.
--------------------------------------------------------------*/
.photo2wrapper {
  max-width: 100%;
  display: inline-block;
  margin-bottom: 15px;
}

.photo2frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.photo2frame > a.glightbox {
  display: block;
  line-height: 0;
}

.photo2frame img.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.photo2comments {
  font-size: 0.9em;
  text-align: center;
  margin-top: 0.5rem;
}

.photo2credits {
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
  margin-top: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/* photo2.js reparents the report's consecutive <photo> tags into this grid,
   so a ten-photo report tiles instead of stacking ten full-width images. */
.report-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 992px) {
  .report-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .report-photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.report-photo-grid photo,
.report-photo-grid .photo2wrapper,
.report-photo-grid .photo2frame {
  display: block;
  width: 100%;
  margin: 0;
}

/* Portrait tiles: these are phones held upright to fit a person and a fish,
   so 3:4 crops almost nothing (a 4:3 box showed about half of each). */
.report-photo-grid .photo2frame img.img-responsive {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}

/* Tiles are small: smaller ribbon type, thumbnail-size corner marks. */
.report-photo-grid .photo2frame .gallery-ribbon {
  font-size: 11px;
  padding: 6px 9px;
}

.report-photo-grid .photo2frame.has-fish-ribbon::before,
.report-photo-grid .photo2frame.has-fish-ribbon .gallery-badge-icons {
  bottom: 34px;
}

.report-photo-grid .photo2frame::before {
  width: 66px;
  height: 60px;
}

.report-photo-grid .photo2comments {
  font-size: 0.82rem;
  line-height: 1.45;
}

.report-photo-grid .photo2credits {
  font-size: 0.72rem;
  line-height: 1.4;
  margin-top: 0.35rem;
}