/* ==========================================================================
   BLOG FEATURED IMAGES
   Every post's featured image renders at an identical size — in the blog loop
   and on the single-post page — and is never cropped: the whole image is always
   visible, letterboxed inside the box if its proportions differ.
   Loaded on the blog/archive listing and on single posts, after responsive.css.
   ========================================================================== */

/*------------------------------------------*/
/*   BLOG LISTING  (/blog/)
/*------------------------------------------*/

/* Keep the text column and the image column vertically centred against
   each other so rows read evenly however long a title or excerpt runs. */
#blog-page .blog-post > .row {
  align-items: center;
}

#blog-page .blog-post-img {
  overflow: hidden;
  border-radius: 6px;
}

/* nextapp-600x--nocrop is the full image scaled to 600px wide (3:2 for the
   current uploads). The box is fixed at 3:2 and the image is *contained*,
   never cropped, so nothing is cut off and all rows stay the same height. */
#blog-page .blog-post-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}

/*------------------------------------------*/
/*   POSTS GRID EMBEDDED IN A PAGE
/*   (perch_posts_template — e.g. the "Our Stories & Latest News"
/*    block on the front page)
/*------------------------------------------*/

#blog .blog-post-img {
  overflow: hidden;
  border-radius: 6px;
}

/* Same contain-not-crop treatment as the listing, so the three cards line
   up on a common baseline and each thumbnail shows the whole image. */
#blog .blog-post-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}

/*------------------------------------------*/
/*   SINGLE POST  (blog details)
/*------------------------------------------*/

.single-post-wrapper .blog-post-img,
.nextapp-page-content .blog-post-img.mb-40 {
  overflow: hidden;
  border-radius: 6px;
}

/* nextapp-hero-1140x--nocrop is the full image scaled to 1140px wide. */
.single-post-wrapper .blog-post-img > img,
.nextapp-page-content .blog-post-img.mb-40 > img,
.nextapp-page-content .blog-post-img.mb-40 .video-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------------*/
/*   RESPONSIVE
/*------------------------------------------*/

@media (max-width: 991.99px) {
  /* Image stacks under the text: give it a little breathing room. */
  #blog-page .blog-post-img {
    margin-top: 20px;
  }
}