/* Careers List for Elementor — front-end styles
   Uses CSS variables so both the shortcode and the Elementor widget
   (which overrides variables via Style-tab controls) share one look. */

.ce-careers-list {
	--ce-bg: #EDEFEA;
	--ce-border: #D5D8D0;
	--ce-title: #1B1B1B;
	--ce-meta: #6B7A6E;
	--ce-accent: #2F6B52;

	background-color: var(--ce-bg);
	padding: 8px 24px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Never let this list be taller than its own rows — guards against an
	   inherited min-height/height from a parent Elementor column or section
	   (a common cause of blank space below the last row on tablet/mobile). */
	height: auto;
	min-height: 0;

	/* Lets the rows respond to the WIDGET's own width (e.g. a narrow Elementor
	   column), not just the browser viewport — fixes stacking when this widget
	   sits inside a narrow column on an otherwise wide desktop screen. */
	container-type: inline-size;
	container-name: ce-careers;
}

/* Belt-and-braces reset for Elementor's own wrapper elements. Elementor
   columns/sections can carry a fixed or "match height" min-height setting
   from the desktop breakpoint that isn't automatically cleared on tablet
   or mobile, which shows up as empty white space below the last row. */
.elementor-widget-ce_careers_list,
.elementor-widget-ce_careers_list > .elementor-widget-container {
	height: auto !important;
	min-height: 0 !important;
}

@media (max-width: 1024px) {
	.elementor-widget-ce_careers_list,
	.elementor-widget-ce_careers_list > .elementor-widget-container,
	.elementor-widget-ce_careers_list .ce-careers-list {
		height: auto !important;
		min-height: 0 !important;
	}

	/* If this widget's column was set to "stretch"/"match height" against a
	   taller sibling column on desktop, force it back to content height here. */
	.elementor-widget-ce_careers_list.elementor-widget,
	.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-ce_careers_list) {
		height: auto !important;
		min-height: 0 !important;
		align-self: flex-start !important;
	}
}

/* Force this widget (and the Elementor column/container that holds it) to
   always take the FULL WIDTH of its row — at every screen size, not just
   mobile. Some Elementor layouts (especially "Containers"/flexbox layouts)
   keep a narrow fixed or percentage width on a column at tablet sizes
   (roughly 768–1024px) even though sibling elements like the header/nav
   correctly span the full page — this rule overrides that unconditionally. */
.elementor-widget-ce_careers_list {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
}

.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-ce_careers_list),
.e-con:has(> .elementor-widget-ce_careers_list),
.e-con-inner:has(> .elementor-widget-ce_careers_list) {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
}

.ce-careers-empty {
	background-color: var(--ce-bg, #EDEFEA);
	padding: 24px;
	text-align: center;
	color: var(--ce-meta, #6B7A6E);
}

.ce-careers-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 22px 0;
	border-top: 1px solid var(--ce-border, #D5D8D0);
}

.ce-careers-row:last-child {
	border-bottom: 1px solid var(--ce-border, #D5D8D0);
}

.ce-col {
	box-sizing: border-box;
}

.ce-col-title {
	flex: 1 1 220px;
	min-width: 180px;
}

.ce-job-title {
	font-weight: 700;
	font-size: 16px;
	color: var(--ce-title, #1B1B1B);
}

.ce-col-department {
	flex: 1 1 150px;
	min-width: 130px;
}

.ce-col-location {
	flex: 1 1 160px;
	min-width: 140px;
}

.ce-col-type {
	flex: 0 1 110px;
	min-width: 90px;
}

.ce-meta {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 13px;
	color: var(--ce-meta, #6B7A6E);
	letter-spacing: 0.2px;
}

.ce-col-apply {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}

.ce-apply-link {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--ce-accent, #2F6B52);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.ce-apply-link:hover,
.ce-apply-link:focus {
	opacity: 0.7;
	text-decoration: none;
}

.ce-apply-link .ce-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

.ce-apply-link:hover .ce-arrow {
	transform: translateX(3px);
}

/* ----------------------------------------------------------------------
   Stacked ("mobile") layout.
   IMPORTANT: when .ce-careers-row switches to flex-direction: column,
   the main axis becomes vertical — so any flex-basis value written for
   the horizontal layout (e.g. "220px") would be reinterpreted as a
   HEIGHT instead of a width, creating large empty gaps. Every column
   is reset to "flex: 0 0 auto" + "width: 100%" + "min-width: 0" here to
   prevent that.
   ------------------------------------------------------------------- */
@container ce-careers (max-width: 520px) {
	.ce-careers-row {
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 4px;
		padding: 18px 0;
	}

	.ce-col-title,
	.ce-col-department,
	.ce-col-location,
	.ce-col-type,
	.ce-col-apply {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}

	.ce-col-apply {
		margin-left: 0;
		margin-top: 8px;
		text-align: left;
	}
}

/* Extra-narrow safety net (e.g. widget still constrained to ~150–250px by
   a parent layout choice outside this plugin's control): keep words from
   wrapping one-per-line by allowing a touch more room via smaller type. */
@container ce-careers (max-width: 260px) {
	.ce-job-title {
		font-size: 14px;
	}

	.ce-meta,
	.ce-apply-link {
		font-size: 12px;
	}

	.ce-careers-row {
		padding: 14px 0;
	}
}

/* Fallback stacking for browsers without container query support (e.g. very
   old Safari/Chrome versions) — behaves like the @container rule above,
   based on viewport width instead of the widget's own width. */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.ce-careers-row {
			flex-direction: column;
			align-items: flex-start;
			flex-wrap: nowrap;
			gap: 4px;
			padding: 18px 0;
		}

		.ce-col-title,
		.ce-col-department,
		.ce-col-location,
		.ce-col-type,
		.ce-col-apply {
			flex: 0 0 auto;
			width: 100%;
			min-width: 0;
		}

		.ce-col-apply {
			margin-left: 0;
			margin-top: 8px;
			text-align: left;
		}
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 340px) {
		.ce-job-title {
			font-size: 14px;
		}

		.ce-meta,
		.ce-apply-link {
			font-size: 12px;
		}
	}
}