/*
 * site-fixes.css — site-specific corrections for gillesnouailhac.com.
 * Loaded with filemtime() versioning, so any edit busts the Cloudflare cache.
 *
 * FIX: post titles breaking mid-word ("AUTOMOTIV / E", "Superbike / s",
 *      "Approach / able", "automativ / e")
 *
 * papr sizes every list thumbnail with a max-width ladder in
 * assets/css/style.css:
 *      .post-block img        { width: 100%; max-width: 15rem;   }  (line 10711)
 *      .post-block__small img { max-width: 10rem;   }               (line 10764)
 *      .post-block__mid img   { max-width: 28.5rem; }               (line 10803)
 *      @media (max-width:767px) .post-block img { max-width: 10rem; }
 * (1rem = 10px here, so 150px / 100px / 285px.)
 *
 * Elementor's frontend.min.css contains `.elementor img { max-width: 100% }`.
 * That selector has EXACTLY the same specificity (0,1,1) as `.post-block img`,
 * and Elementor's stylesheet is printed after the theme's, so on any
 * Elementor-built page it wins and the whole ladder is defeated. Verified in
 * the live cascade: `.post-block img { max-width: 15rem }` is reported
 * "overridden by .elementor img".
 *
 * Consequence on the Elementor homepage: every thumbnail renders at its full
 * intrinsic size (the Trending Stories images are 400x400). `.media.post-block`
 * is a flex row of <a><img></a> + .media-body, so a 400px image plus its 3rem
 * margin inside a ~555px col-lg-6 leaves the text column just **109px**.
 * `.media-body { word-break: break-word }` (assets/css/defaults/bmw.css) then
 * splits any word too long for 109px — which is where the mid-word breaks come
 * from. Same cause behind the category chips wrapping to two lines throughout.
 *
 * Fix the cause: restore the theme's own ladder with one extra class of
 * specificity (0,2,1 > 0,1,1) so it no longer depends on stylesheet order.
 * Values are copied verbatim from style.css — no new sizes invented.
 *
 * `word-break: break-word` is deliberately LEFT IN PLACE: with a ~375px title
 * column nothing needs to break any more, and it is still a useful guard
 * against genuinely unbreakable strings (raw URLs) overflowing a card.
 *
 * Note the hero cards (`.post-block.position-absolute`) are unaffected: their
 * <img> sits in a sibling `.axil-img-container`, not inside `.post-block`, so
 * none of these selectors match it and it stays full-bleed.
 */

.elementor .post-block img {
	max-width: 15rem;
}

.elementor .post-block__small img {
	max-width: 10rem;
}

.elementor .post-block__mid img {
	max-width: 28.5rem;
}

/* style-6 is the theme's explicit full-width-image variant (style.css:5676);
   keep its opt-out working inside Elementor too. */
.elementor .post-block.style-6 img.img-fluid {
	max-width: 100%;
}

@media (max-width: 767px) {

	.elementor .post-block img {
		max-width: 10rem;
	}

	.elementor .post-block__mid img {
		max-width: 100%;
	}

	.elementor .post-block.style-6 img.img-fluid {
		max-width: 100%;
	}

}