/* Custom overrides to ensure thumbnail images fill their cards fully and remove white margins */
.thumb{
  /* match the card background to the page so any letterboxing blends in */
  background: #BDF0D6 !important;
  border: none !important;
}

/*
  Adjust the thumbnail image to fill its card while keeping the puppy's head
  visible.  Using object‑fit: cover causes the image to scale up to fill the
  container and crop any excess, but this can cut off the puppy's head if it
  is centered vertically.  By setting object-position to `top center` we
  ensure the top portion of the photo (where the puppy's face usually
  appears) remains in view.  The height and width are inherited from
  styles.css so we do not explicitly set them here.
*/
.thumb img{
  object-fit: cover !important;
  object-position: top center !important;
  border-bottom: none !important;
}

.thumb > div{
  /* dark semi-transparent background for caption overlay */
  background: rgba(0,0,0,0.5) !important;
  color: #fff !important;
}

/*
  Breed/Age section styling
  -------------------------
  The index page includes a small section summarizing the litter's
  breed and current age.  We use a flexible row that collapses
  gracefully on narrow screens.  Typography colors tie into the
  existing accent and muted palette defined in styles.css.  Margins
  provide breathing room between the heading and the thumbnail grid.
*/
/*
  Removed default breed-age-section styling from this file to avoid
  conflicts.  The improved styling for the breed/age summary now
  lives in styles.css and is also embedded directly into index.html
  for reliability.
*/