/* Blog cards: let the featured image keep its own shape on MOBILE.
 *
 * The card's image area is a fixed-ratio box built the padding-top way:
 *
 *   .blog-post-slider … .elementskit-entry-header a { padding-top: 91% }   -> ratio 1.099
 *   …a img { position:absolute; width:100%; height:100% }
 *
 * On mobile the theme adds `object-fit: contain`, so nothing is distorted -
 * but every real featured image is LANDSCAPE (measured on production:
 * 1670x941, 1536x1024, 1672x941 => 1.78, 1.50, 1.78) and none of them fills a
 * 1.099 box. The result is 70-138px of dead white space under each image at
 * 320-430px.
 *
 * Changing the box to a different fixed ratio was tried and rejected: a
 * portrait 137% box more than DOUBLED the empty space for these landscape
 * images. The fix is not another fixed ratio - it is to stop fixing the ratio
 * at all on mobile and let each image size itself.
 *
 * Desktop is deliberately untouched: the rule is inside max-width 767px, so
 * the 91% box and its object-fit:fill behaviour above that breakpoint are
 * byte-identical.
 */
@media ( max-width: 767px ) {

	/* Drop the ratio box. `position: relative` stays, because the date badge
	 * (.elementskit-meta-lists, bottom:-43px) is positioned against this box. */
	.blog-post-slider .elementskit-post-image-card .elementskit-entry-header a {
		padding-top: 0 !important;
		height: auto !important;
		display: block;
	}

	/* Take the image out of absolute positioning so its own height applies. */
	.blog-post-slider .elementskit-post-image-card .elementskit-entry-header a img {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		display: block;
		object-fit: contain;      /* inert once height is auto; kept for safety */
	}
}