/* 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).
 */

/* ------------------------------------------------- inherited text colour -- */
/*
 * The card is a white panel, but it gets dropped into whatever section the
 * page has — and on a dark section every widget that does not set its own
 * colour inherits white. The headings in the shipped template all set one, so
 * they survive; the description did not, and came out white on white. It read
 * exactly like a binding that had failed: correct template, correct data,
 * nothing on screen, and a gap whose height changed from card to card because
 * the text really was there.
 *
 * The card is always white, so the colour is set here rather than left to the
 * page. This sets what the card INHERITS, so it cannot be poisoned by the
 * section, and a colour set on any individual widget in Elementor still wins
 * — Elementor writes those onto the element itself.
 *
 * #111827 rather than pure #000: it is what the card's own headings already
 * use, and reads as black without the harshness on a white panel.
 */

.srr_job,
.srr_job .e-con {
	color: #111827;
}

/* --------------------------------------------- bottom-aligned media row -- */
/*
 * Job descriptions vary a lot in length, so without this the photo and map
 * start at a different height in every card and the row looks ragged.
 *
 * Two parts, both needed:
 *   1. the card stretches to the full slide height, so there is spare space
 *      in the shorter cards for step 2 to consume;
 *   2. margin-top:auto on the media row absorbs that spare space, pinning the
 *      images to the bottom of the card.
 *
 * Requires "Equal Height" ON in the Loop Carousel (Layout tab) — that is what
 * makes every slide the same height in the first place. With it off, the
 * height:100% simply has nothing to fill and the cards behave as before.
 */

.srr_job > .e-con {
	height: 100%;
}

.e-con.srr-media-row,
.elementor-element.srr-media-row,
.srr_job .e-con:has( > .e-con > .elementor-widget-image ) {
	margin-top: auto !important;
}

/* ---------------------------------------------------------------- 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;
	}
}