/* Consistent, undistorted post thumbnails in every listing and carousel.
 *
 * The theme shipped three problems on these blocks:
 *   1. Each block derived its thumbnail height from its own padding-bottom
 *      percentage, so the same posts appeared at 26%, 140%, 159% and 160%.
 *   2. A `filter: contrast(0.4)` washed the artwork out until hover, which
 *      never happens on touch devices.
 *   3. An `::before` overlay filled with teal at `mix-blend-mode: exclusion`
 *      duotoned every image, so cover art was barely recognisable.
 *
 * On a site where the artwork is the product, all three work against us.
 *
 * IMPORTANT — tagDiv renders thumbnails two different ways, and they need
 * opposite treatment:
 *
 *   data-type="css_image"  <a class="td-image-wrap" style="padding-bottom:X%">
 *                            <span class="entry-thumb">   (background-image,
 *                                                          absolutely placed)
 *     Here the padding-bottom on the anchor IS the height. Remove it and the
 *     box collapses, so the ratio has to be set there.
 *
 *   data-type="image_tag"  <a class="td-image-wrap">
 *                            <img class="entry-thumb">     (a real image,
 *                                                           normal flow)
 *     Here the anchor is display:inline and the <img> already has height.
 *     Adding padding-bottom paints phantom empty space *below* the picture —
 *     which is exactly what produced a ~255px blank gap under every card in
 *     the "Latest Articles" block. These modules must get no padding at all.
 *
 * Modules 1, 2 and mx10 are the image_tag ones (they call
 * get_image('td_324x160')). Verified in the browser: computed display was
 * `inline` and the <img> was already laid out at its natural 324x160 ratio.
 */

/* --- css_image modules: the anchor's padding is the aspect box ------------ */
/* Portrait td_324x400 master → 400 / 324 = 123.46%. */
.td-module-thumb a.td-image-wrap {
	padding-bottom: 123.46% !important;
}

.td-module-thumb span.entry-thumb {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --- image_tag modules: no aspect box, let the <img> size itself ---------- */
.td_module_1 .td-module-thumb a.td-image-wrap,
.td_module_2 .td-module-thumb a.td-image-wrap,
.td_module_mx10 .td-module-thumb a.td-image-wrap {
	display: block;
	padding-bottom: 0 !important;
	line-height: 0; /* kills the inline descender gap under the image */
}

.td-module-thumb img.entry-thumb {
	display: block;
	width: 100%;
	height: auto;
}

/* --- applies to both rendering modes ------------------------------------- */
.td-module-thumb .entry-thumb {
	filter: none !important;
}

/* Drop the exclusion-blend colour wash. */
.td-module-thumb .entry-thumb::before {
	display: none !important;
}

/* The theme re-asserts narrower ratios below its own breakpoints, so the
 * css_image ratio has to be restated inside each one. The image_tag reset
 * above is not ratio-based, so it does not need repeating. */
@media (max-width: 1018px) {
	.td-module-thumb a.td-image-wrap {
		padding-bottom: 123.46% !important;
	}

	.td_module_1 .td-module-thumb a.td-image-wrap,
	.td_module_2 .td-module-thumb a.td-image-wrap,
	.td_module_mx10 .td-module-thumb a.td-image-wrap {
		padding-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.td-module-thumb a.td-image-wrap {
		padding-bottom: 123.46% !important;
	}

	.td_module_1 .td-module-thumb a.td-image-wrap,
	.td_module_2 .td-module-thumb a.td-image-wrap,
	.td_module_mx10 .td-module-thumb a.td-image-wrap {
		padding-bottom: 0 !important;
	}
}