/* ==========================================================================
   GT Ofertas de empleo
   --------------------------------------------------------------------------
   Usa los tokens del tema hijo (--color-primary, --color-accent,
   --font-primary) con valores de reserva por si el plugin se usa sin él.

   LAS TARJETAS DEL LISTADO SIGUEN EL PATRÓN DE LAS DE SERVICIO (.gt-hazard):
   toda la tarjeta es el enlace, icono rojo a la izquierda, título en azul y
   una flecha que aparece al pasar el ratón. Así una oferta se reconoce como
   «algo que se pulsa para ver más», igual que un servicio.

   El listado se adapta al ANCHO DE SU CONTENEDOR (container queries):
     < 900px   una oferta por fila (columna de texto de «Trabaja con nosotros»).
     ≥ 900px   dos columnas («Otras ofertas» de la ficha, a todo el ancho).
   ========================================================================== */

.gt-jobs {
	--gt-job-primary: var(--color-primary, #254961);
	--gt-job-accent: var(--color-accent, #c94644);
	--gt-job-text: #2b3a44;
	--gt-job-muted: #5b6b76;
	--gt-job-line: rgba(37, 73, 97, 0.12);
	margin: 40px 0 56px;
	font-family: var(--font-primary, inherit);
	container: gt-jobs / inline-size;
}

.gt-jobs__title {
	margin: 0 0 24px;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--gt-job-primary);
}

.gt-jobs__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sin la viñeta roja del tema (.gt-prose ul li::before): tres clases para
   ganarle en especificidad. */
.gt-jobs .gt-jobs__list > .gt-jobs__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gt-jobs .gt-jobs__list > .gt-jobs__item::before {
	content: none;
	display: none;
}

/* Tarjeta ------------------------------------------------------------------ */

.gt-jobs a.gt-job {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 100%;
	box-sizing: border-box;
	padding: 16px 20px 16px 16px;
	background-color: var(--color-bg, #fff);
	border: 2px solid transparent;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);
	color: inherit;
	text-decoration: none;
	transition:
		transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.gt-jobs a.gt-job:hover {
	transform: translateY(-3px);
	border-color: var(--gt-job-accent);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
	color: inherit;
	text-decoration: none;
}

.gt-jobs a.gt-job:active {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.gt-jobs a.gt-job:focus-visible {
	outline: 3px solid var(--gt-job-primary);
	outline-offset: 3px;
}

/* Icono de línea, del mismo rojo y peso que los iconos de servicio. */
.gt-job__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--gt-job-accent);
	transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-job__badge svg {
	width: 46px;
	height: 46px;
}

.gt-jobs a.gt-job:hover .gt-job__badge {
	transform: scale(1.06);
}

.gt-job__body {
	flex: 1 1 0;
	min-width: 0;
}

.gt-jobs .gt-job__title {
	margin: 0 0 4px;
	font-family: var(--font-primary, inherit);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gt-job-primary);
	text-wrap: pretty;
}

.gt-job__meta {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--gt-job-muted);
}

.gt-job__sep {
	margin: 0 7px;
	color: var(--gt-job-accent);
}

/* Flecha: aparece al pasar el ratón, como en servicios. En pantallas táctiles,
   donde no hay «pasar por encima», se ve siempre. */
.gt-job__arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: var(--gt-job-accent);
	opacity: 0;
	transition: opacity 0.2s, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-job__arrow svg {
	width: 18px;
	height: 18px;
}

.gt-jobs a.gt-job:hover .gt-job__arrow,
.gt-jobs a.gt-job:focus-visible .gt-job__arrow {
	opacity: 1;
	transform: translateX(3px);
}

@media (hover: none) {
	.gt-job__arrow {
		opacity: 1;
	}
}

/* Iconos pequeños de la ficha (franja de datos y resumen lateral). */
.gt-job__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--gt-job-accent);
}

/* Sin ofertas ----------------------------------------------------------------- */

.gt-jobs__empty {
	padding: 24px;
	background: #f3f6f8;
	border-left: 4px solid var(--gt-job-accent);
	border-radius: 0 8px 8px 0;
}

.gt-jobs__empty p {
	margin: 0;
}

.gt-jobs__empty p + p {
	margin-top: 6px;
	color: var(--gt-job-muted);
}

@container gt-jobs (min-width: 900px) {
	.gt-jobs__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 24px;
	}
}

/* Ficha de la oferta ---------------------------------------------------------- */

/* Cabecera: antetítulo encima del H1, con la tipografía de las etiquetas. */
.gt-job-hero__eyebrow {
	margin: 18px 0 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

/* Franja de datos clave --------------------------------------------------- */

.gt-job-facts {
	--gt-job-primary: var(--color-primary, #254961);
	--gt-job-accent: var(--color-accent, #c94644);
	padding-block: 28px;
	background: #fff;
	border-bottom: 1px solid rgba(37, 73, 97, 0.1);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.gt-job-facts__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
	margin: 0;
}

.gt-job-facts__item {
	position: relative;
	min-height: 44px;
	padding-left: 56px;
}

.gt-job-facts__icon {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(201, 70, 68, 0.1);
	border-radius: 50%;
	color: var(--gt-job-accent);
}

.gt-job-facts__icon .gt-job__icon {
	width: 21px;
	height: 21px;
	margin: 0;
}

.gt-job-facts__label {
	margin: 2px 0 3px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b6b76;
}

.gt-job-facts__value {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gt-job-primary);
}

/* Cuerpo ------------------------------------------------------------------- */

.gt-job-single {
	--gt-job-primary: var(--color-primary, #254961);
	--gt-job-accent: var(--color-accent, #c94644);
	--gt-job-muted: #5b6b76;
	--gt-job-line: rgba(37, 73, 97, 0.12);
	padding-block: 48px 64px;
}

.gt-job-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.gt-job-single__notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: #fdf1f0;
	border-left: 4px solid var(--gt-job-accent);
	font-weight: 600;
}

.gt-job-single__lang {
	margin: 0 0 20px;
	font-size: 0.875rem;
	color: var(--gt-job-muted);
}

/* Texto de la oferta: los títulos llevan el filo rojo del H1 de la cabecera,
   y las listas la misma viñeta cuadrada roja que el resto de la web. */
.gt-job-single__content {
	max-width: 72ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #2b3a44;
}

.gt-job-single__content > *:first-child {
	margin-top: 0;
}

.gt-job-single__content h2 {
	margin: 48px 0 16px;
	padding-left: 14px;
	border-left: 4px solid var(--gt-job-accent);
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--gt-job-primary);
}

.gt-job-single__content h3 {
	margin: 28px 0 12px;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--gt-job-primary);
}

.gt-job-single__content p {
	margin: 0 0 16px;
}

.gt-job-single__content ul {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.gt-job-single__content ul > li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	line-height: 1.6;
}

.gt-job-single__content ul > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 4px;
	width: 8px;
	height: 8px;
	background: var(--gt-job-accent);
	border-radius: 2px;
}

/* Resumen lateral ------------------------------------------------------------ */

.gt-job-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--gt-job-line);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.gt-job-card__head {
	padding: 22px 24px 20px;
	background: var(--gt-job-primary);
	border-bottom: 4px solid var(--gt-job-accent);
}

.gt-job-card__kicker {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.gt-job-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
	color: #fff;
}

.gt-job-card__body {
	padding: 22px 24px 24px;
}

.gt-job-card__list {
	margin: 0 0 20px;
}

.gt-job-card__row {
	padding: 10px 0;
	border-top: 1px solid var(--gt-job-line);
}

.gt-job-card__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.gt-job-card__row dt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 2px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gt-job-muted);
}

.gt-job-card__row dd {
	margin: 0 0 0 26px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.gt-job-card .gt-job-card__apply {
	width: 100%;
	min-height: 52px;
	justify-content: center;
	box-sizing: border-box;
}

.gt-job-card__hint {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--gt-job-muted);
}

/* Otras ofertas. Usa el título de sección del tema, pero el espacio y el
   fondo son propios: los de .gt-service solo existen en las plantillas de
   servicio, y sin ellos la sección quedaba pegada al resumen y a la banda
   de cierre. */
.gt-job-others {
	padding-block: 56px 64px;
	background-color: #f4f6f8;
	border-top: 1px solid rgba(37, 73, 97, 0.08);
}

.gt-job-others .gt-jobs {
	margin: 0;
}

/* En una columna el resumen va debajo del texto: más estrecho, se lee como
   una tarjeta y no como una franja. */
@media (max-width: 1023px) {
	.gt-job-single__aside {
		max-width: 520px;
	}
}

@media (min-width: 768px) {
	.gt-jobs__title {
		font-size: 1.75rem;
	}
}

/* Escriptori ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.gt-job-facts__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gt-job-single__content h2 {
		font-size: 1.5rem;
	}
}

@media (min-width: 1024px) {
	/* Seis datos en una fila: el icono pasa ENCIMA del texto para que cada
	   columna tenga todo su ancho y los valores no se partan en tres líneas. */
	.gt-job-facts__list {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 20px 28px;
	}

	.gt-job-facts__item {
		padding: 56px 0 0;
	}

	.gt-job-facts__item + .gt-job-facts__item {
		padding-left: 28px;
		border-left: 1px solid rgba(37, 73, 97, 0.1);
	}

	.gt-job-facts__item + .gt-job-facts__item .gt-job-facts__icon {
		left: 28px;
	}

	.gt-job-single {
		padding-block: 64px 88px;
	}

	.gt-job-others {
		padding-block: 72px 88px;
	}

	.gt-job-single__grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 64px;
		align-items: start;
	}

	.gt-job-single__aside {
		position: sticky;
		top: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gt-job,
	.gt-job:hover,
	.gt-job:focus-within {
		transition: none;
		transform: none;
	}
}