/* SLM-RP4 documentation -- small presentational fixes on top of the theme. */

/* The module product photos have varying aspect ratios, which leaves the
   catalog cards ragged. Give every card image the same box and let the photo
   letterbox inside it, then stretch the cards to a common height. */
.sd-card .sd-card-img-top {
  height: 240px;
  object-fit: contain;
  padding: 0.75rem;
}

.sd-row > [class*='sd-col'] > .sd-card {
  height: 100%;
}

/* Card titles in the catalog are part numbers -- keep them from wrapping
   mid-identifier on narrow viewports. */
.sd-card-title {
  overflow-wrap: break-word;
}

/* Screenshots and diagrams sit better with a little breathing room and a
   faint edge, so a light-background screenshot does not bleed into the page
   in light mode. */
.bd-article img.align-center {
  border-radius: 4px;
}

/* Product renders (the board and the module photographs) are transparent PNGs
   drawn with light outlines and labels, so they read correctly against both a
   light and a dark page. The theme otherwise paints a white panel behind every
   image in dark mode and dims it, which appears as a hard white box around the
   product. Opt these images out of both.

   The board render on the landing page carries the theme's own `dark-light`
   class in its directive. The catalog card images are generated by
   sphinx-design, so they are matched here instead. */
html[data-theme="dark"] .bd-content img.sd-card-img-top {
  background-color: transparent;
  filter: none;
}