/* Issue 1525. A species photo preview is shown WHOLE and never deformed.
 *
 * Every photo sits in a frame of the same 4:3 box so the grid stays even, and the image inside is
 * `object-fit: contain`, centred: a portrait leaves bands on the sides, a landscape above and
 * below, and neither is cropped, stretched or enlarged past its own pixels. `cover` and `fill`
 * are what Nahim asked to avoid («ten cuidado de que al desplegarlas no se deformen»).
 */
.species-photo-frame {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bs-tertiary-bg, #f1f3f5);
  border-radius: var(--bs-border-radius, 0.375rem);
}

.species-photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.species-photo-frame > [data-species-photo-fallback] {
  margin: 0;
  padding: 0.5rem;
  text-align: center;
}

/* Issue 645. On paper, the printable «Species information» flows across pages.
 *
 * The print sheet (`overrides.css`) keeps every `.card` whole. The intrinsic section is one card
 * taller than a page (taxonomy, IUCN, photos), so the browser pushed it whole to page 2 and left
 * page 1 with only the heading: measured on the served Acacia mangium printout, 3 pages with the
 * first one about 85% blank. Here the card may break; what stays whole is each row of the
 * identity and each photo with its credit, and a label never ends a page apart from its value.
 * The printable width falls under Bootstrap's `md` breakpoint, so the photos printed two per
 * row and pushed the closing lines onto a third page; they print three per row, as the screen
 * shows them from `md` up (`col-md-4`).
 */
@media print {
  [data-species-intrinsic-print] .card {
    break-inside: auto;
    page-break-inside: auto;
  }

  [data-species-intrinsic-print] dd,
  [data-species-intrinsic-print] [data-species-photo] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  [data-species-intrinsic-print] dt {
    break-after: avoid;
    page-break-after: avoid;
  }

  [data-species-intrinsic-print] [data-species-photo] {
    flex: 0 0 auto;
    width: 33.333333%;
  }
}