/* Removal Routes — job card layout.
 *
 * WHY THIS FILE EXISTS
 *
 * Elementor's own flex and width controls were set correctly on the media
 * containers and the photo and map stacked anyway. Inspecting the live page
 * showed why: the row is flex-direction:row with flex-wrap:wrap, and the two
 * columns come out at ~49.2% each (679px inside a 1379px row). Two columns at
 * 49.2% plus the flex gap is a few pixels over 100%, so they wrap onto
 * separate lines. Off by about three pixels, which looks identical to "the
 * setting did nothing".
 *
 * The fix is flex-wrap:nowrap plus flex:1 1 0, letting flex shrink the columns
 * to absorb the gap instead of overflowing.
 *
 * TWO SELECTOR STRATEGIES, deliberately
 *
 * 1. Class-based (.srr-media-row / .srr-media-col) — precise, used when the
 *    imported template carries the classes.
 * 2. Structural (:has) — matches the media row by its shape: a container
 *    inside a job card whose direct child containers hold image widgets.
 *    This works with EVERY version of the card template, including ones
 *    exported before the classes existed. Without it, importing an older
 *    template silently reverts the layout with no visible cause.
 *
 * Verified by measurement on a live page at 1600px (side by side, equal
 * widths) and 390px (stacked).
 */

/* ---------------------------------------------------------------- shared -- */

.srr-media-col img,
.srr_job .e-con:has( > .e-con > .elementor-widget-image ) img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------- 1. class-based (exact) -- */

.e-con.srr-media-row,
.elementor-element.srr-media-row {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

.e-con.srr-media-col,
.elementor-element.srr-media-col {
	/* flex-basis 0 rather than a percentage: the columns share the space that
	   is left after the gap, instead of each claiming half of the whole and
	   overflowing. min-width 0 stops a wide photo pushing past its share. */
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
}

/* ----------------------------------- 2. structural (any template version) -- */

.srr_job .e-con:has( > .e-con > .elementor-widget-image ) {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

.srr_job .e-con:has( > .e-con > .elementor-widget-image ) > .e-con {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
}

/* -------------------------------------------------------------- stacking -- */

@media ( max-width: 767px ) {
	.e-con.srr-media-row,
	.elementor-element.srr-media-row,
	.srr_job .e-con:has( > .e-con > .elementor-widget-image ) {
		--flex-direction: column;
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}

	.e-con.srr-media-col,
	.elementor-element.srr-media-col,
	.srr_job .e-con:has( > .e-con > .elementor-widget-image ) > .e-con {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}