/**
 * Lemorau Events - Event card image (WP-24)
 *
 * Restores the framing of the fair logo on the /events/ cards.
 *
 * Why this exists instead of the setting in the Elementor template. The card's
 * image is the background of the right-hand column in the two event loop
 * templates, and it comes from a dynamic tag, the post's featured image.
 * Elementor's background group control only emits background-position,
 * background-repeat and background-size when it can see a non-empty image URL
 * while it builds the CSS. A dynamic tag resolves to nothing at that moment, so
 * those three properties are dropped and only background-color survives.
 *
 * The loop stylesheet generated on disk does carry them, because it was written
 * during an editor save where a preview post supplied an image. But loop CSS is
 * printed inline and rebuilt on render, never read back from that file, so the
 * complete version is never the one that reaches the page. Clearing the
 * Elementor cache is enough to expose this: without the size, the browser falls
 * back to auto, the logo renders at its natural width and the column crops it.
 *
 * Setting it here takes the rule out of Elementor's hands. It ships with the
 * plugin, so no cache clear or template re-save can drop it again.
 */

/* cbec9e2 is the column in the upcoming-events template, 613c1b3 the one in the
   past-events template. Scoped to .e-loop-item so the rule only reaches cards,
   never the templates opened on their own. */
.e-loop-item .elementor-element-cbec9e2 > .elementor-widget-wrap,
.e-loop-item .elementor-element-cbec9e2 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.e-loop-item .elementor-element-613c1b3 > .elementor-widget-wrap,
.e-loop-item .elementor-element-613c1b3 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* On a phone the card restacks, the image column goes full width, and the only
   thing left inside it is the arrow button -- so the box `contain` fits the logo
   into is one button tall, and the logo comes out at a fraction of its size.
 *
 * A floor gives it back a box to fill. The arrow still sits at the bottom of that
 * box, where align-items: flex-end puts it.
 *
 * Only below 767px: that is where Elementor unstacks the columns. Above it the
 * image column sits beside the text and flex stretches it, which is what gave the
 * logo its height in the first place.
 *
 * No !important here, unlike the rule above: Elementor has no min-height control
 * for a column, so it emits nothing for this and there is nothing to outrank. */
@media (max-width: 767px) {
	.e-loop-item .elementor-element-cbec9e2 > .elementor-widget-wrap,
	.e-loop-item .elementor-element-613c1b3 > .elementor-widget-wrap {
		min-height: 180px;
	}
}