/*
  Blog / knowledge-base imagery.

  Linked by the guest (public) layout AFTER the theme, so these rules win.
  Only the card thumbnails need geometry: the article page's own featured image just
  flows at full width (img-fluid).

  Both classes below are only ever emitted when a post actually HAS a servable image
  (see resources/views/blogs/_featured-image.blade.php), so a post without one keeps
  the plain text-card layout it had before - no empty grey box.
*/

/* Featured image on a card: a fixed 16:9 box, image cropped to fill it, so cards line
   up whatever aspect ratio the source image happens to have. */
.bim-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6f7f8;
  border-top-left-radius: var(--bs-card-border-radius, 0.5rem);
  border-top-right-radius: var(--bs-card-border-radius, 0.5rem);
}

.bim-card-thumb > img,
.bim-card-thumb > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bim-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The smaller inset thumbnail on the knowledge-base list rows. */
.bim-list-thumb {
  flex: 0 0 112px;
  width: 112px;
  height: 84px;
  overflow: hidden;
  border-radius: 0.375rem;
  background: #f6f7f8;
}

.bim-list-thumb > img,
.bim-list-thumb > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bim-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .bim-list-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 60px;
  }
}