/*
 * «Open Positions»: filtros y carrusel de vacantes.
 *
 * Referencia: docs/pages/career-desktop.txt Section4 [0,2506 1440x1050] y
 * career-mobile.txt. Tarjeta 396x622 con padding 40; en móvil 327x599.
 */

.acturion-jobs {
	--job-card:    396px; /* [figma] ancho de tarjeta */
	--job-pad:     40px;  /* [figma] padding interno */
	--job-filters: 396px; /* [figma] columna de filtros */

	padding-block: var(--acturion-space-section);
	color: var(--acturion-dark-blue);
	overflow: hidden; /* el carrusel se sale por la derecha */
}

/* Ver la nota larga junto a `.elementor-widget-acturion_leaders` en leaders.css: el
   `overflow: hidden` de arriba no basta en mobile porque el wrapper de Elementor es
   un flex item y su cálculo de ancho ve el contenido sin recortar de un descendiente
   más abajo. Sin esto, el carrusel de vacantes abría scroll horizontal en toda la
   página a 375 de viewport (1105px de ancho de documento contra 371 de viewport). */
.elementor-widget-acturion_jobs { overflow: hidden; }

.acturion-jobs__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--acturion-space-5);
}

.acturion-jobs__controls { display: flex; gap: var(--acturion-space-4); flex: 0 0 auto; }

.acturion-jobs__body {
	margin-top: var(--acturion-space-10);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-8);
}

/* ---------------------------------------------------------------- Filtros */

.acturion-jobs__filters {
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-6);
}

.acturion-jobs__field {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-3);
}

.acturion-jobs__label {
	padding: 0;
	font-size: var(--acturion-description);
	color: color-mix(in srgb, var(--acturion-dark-blue) 45%, transparent);
}

.acturion-jobs__field input[type="search"] {
	width: 100%;
	min-height: 58px; /* [figma] «Input-search» 396x58 */
	padding-inline: var(--acturion-space-5);
	border: 1px solid var(--acturion-dark-blue);
	border-radius: var(--acturion-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--acturion-body);
}

.acturion-jobs__option {
	display: flex;
	align-items: center;
	gap: var(--acturion-space-4);
	padding-bottom: var(--acturion-space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--acturion-dark-blue) 25%, transparent);
	font-size: var(--acturion-body);
	cursor: pointer;
}

.acturion-jobs__option input { accent-color: var(--acturion-dark-blue); }

.acturion-jobs__apply { align-self: flex-start; }

/* ---------------------------------------------------------------- Carrusel */

.acturion-jobs__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--acturion-space-5);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.acturion-jobs__cards::-webkit-scrollbar { display: none; }

.acturion-jobs__card {
	scroll-snap-align: start;
	flex: 0 0 min(var(--job-card), 100%);
}

.acturion-jobs__inner {
	height: 100%;
	padding: var(--job-pad);
	background: var(--acturion-light-seashell);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: background var(--acturion-duration) var(--acturion-ease);
}

/* [convención] Figma es estático; mismo hover sutil que el resto de tarjetas del sitio. */
.acturion-jobs__card:hover .acturion-jobs__inner,
.acturion-jobs__card:focus-within .acturion-jobs__inner {
	background: var(--acturion-soft-beige);
}

@media (prefers-reduced-motion: reduce) {
	.acturion-jobs__inner { transition: none; }
}

/* [figma] ubicación con icono de 24, texto a 32 y un filete debajo. */
.acturion-jobs__location {
	display: flex;
	align-items: center;
	gap: var(--acturion-space-2);
	width: 100%;
	margin: 0 0 var(--acturion-space-7);
	padding-bottom: var(--acturion-space-4);
	border-bottom: 1px solid var(--acturion-dark-blue);
	font-size: var(--acturion-body-14);
}

.acturion-jobs__location-icon { display: inline-flex; flex: 0 0 auto; }

.acturion-jobs__mode {
	margin-left: auto;
	color: color-mix(in srgb, var(--acturion-dark-blue) 55%, transparent);
}

/* [figma MCP] la Position card del branch es la instancia 1:1 del componente del kit,
   y su título usa el H3 del kit: Medium 36/0.9 (glifos medidos sobre el render 1:1
   de 189:12963). */
.acturion-jobs__title {
	margin: 0;
	font-size: var(--acturion-h3);
	font-weight: var(--acturion-weight-medium);
	line-height: var(--acturion-lh-heading);
}

.acturion-jobs__summary {
	margin: var(--acturion-space-5) 0 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

/* El detalle viene del editor: el h3 «Key Responsibilities:» y su lista. */
.acturion-jobs__detail {
	margin: var(--acturion-space-6) 0 var(--acturion-space-8);
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

.acturion-jobs__detail > :first-child { margin-top: 0; }

.acturion-jobs__detail h3 {
	margin: 0 0 var(--acturion-space-5);
	/* [figma MCP] «Key Responsibilities:» va en BodyText_21 (glifos de ~19px medidos
	   en el componente del kit a 1:1). */
	font-size: var(--acturion-body-21);
	font-weight: var(--acturion-weight-regular);
}

.acturion-jobs__detail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-4);
}

/* [figma] cada responsabilidad lleva la flecha a la izquierda y el texto a 40. */
.acturion-jobs__detail li {
	position: relative;
	padding-left: var(--acturion-space-7);
}

.acturion-jobs__detail li::before {
	content: "\2192";
	position: absolute;
	left: 0;
	top: 0;
	line-height: var(--acturion-lh-body);
}

.acturion-jobs__detail p { margin: 0 0 var(--acturion-space-5); }

.acturion-jobs__inner .acturion-link { margin-top: auto; width: 100%; }

.acturion-jobs__empty {
	margin: 0;
	font-size: var(--acturion-body);
}

@media (min-width: 1024px) {
	/* [figma] filtros de 396 a la izquierda y las tarjetas desde 420. */
	.acturion-jobs__body {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--acturion-space-5);
	}

	.acturion-jobs__filters { flex: 0 0 var(--job-filters); }

	.acturion-jobs__cards {
		flex: 1 1 0;
		min-width: 0;
		margin-right: calc(var(--acturion-gutter) * -1);
		padding-right: var(--acturion-gutter);
	}
}

@media (prefers-reduced-motion: reduce) {
	.acturion-jobs__cards { scroll-behavior: auto; }
}