/**
 * Empowerdraw — casos de éxito.
 *
 * Se carga solo en el listado y en la ficha de caso (ver ed_enqueue_casos en
 * inc/casos.php). Reutiliza el lenguaje del resto: esquinas rectas, hueco
 * blanco entre cards, panel gris para la columna de titular y el turquesa de
 * la vertical como acento.
 */

.ed-casos,
.ed-caso {
	max-width: var( --ed-shell, 1600px );
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
	font-family: var( --ed-font-body, inherit );
	color: var( --ed-navy, #0F162A );
}

/* -------------------------------------------------------------------------
 * Listado
 * ---------------------------------------------------------------------- */

.ed-casos__intro {
	padding: 3rem 0 2rem;
	max-width: 46rem;
}

.ed-casos__titulo {
	margin: 0 0 0.75rem;
	font-family: var( --ed-font-display, inherit );
	font-size: var( --ed-fs-h2, 2.5rem );
	font-weight: 300;
	line-height: 1.05;
}

.ed-casos__bajada {
	margin: 0;
	font-size: var( --ed-fs-body, 1.125rem );
	line-height: 1.45;
	opacity: 0.8;
}

.ed-casos__rejilla {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --ed-gap-card, 8px );
	background: var( --ed-blanco, #fff );
}

/* La card del caso: igual que la del catálogo pero con la pregunta en vez
   del resumen, que es lo que invita a entrar. */
.ed-caso-card {
	display: flex;
	background: var( --ed-panel, #E2E2E2 );
	border-radius: 0;
	box-shadow: none;
}

.ed-caso-card__enlace {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var( --ed-navy, #0F162A );
	text-decoration: none;
}

.ed-caso-card__art {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var( --ed-acento, var( --ed-casos, #4EB3B5 ) );
}

.ed-caso-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.ed-caso-card__sinimagen {
	display: block;
	width: 100%;
	height: 100%;
}

.ed-caso-card:hover .ed-caso-card__art {
	filter: brightness( 1.06 );
}

.ed-caso-card__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
	padding: 1.5rem 1.5rem 1.75rem;
}

.ed-caso-card__titulo {
	margin: 0;
	font-family: var( --ed-font-display, inherit );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
}

.ed-caso-card__pista {
	margin: 0;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.6;
}

.ed-caso-card__pregunta {
	margin: 0.25rem 0 0;
	font-size: 1rem;
	line-height: 1.45;
	opacity: 0.9;
}

.ed-casos__vacio {
	padding: 3rem 2rem;
	background: var( --ed-panel, #E2E2E2 );
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Un caso
 * ---------------------------------------------------------------------- */

.ed-caso {
	padding-top: 0;
}

.ed-caso__banda {
	margin: 0 0 var( --ed-gap-card, 8px );
	background: var( --ed-panel, #E2E2E2 );
}

.ed-caso__banda img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	border-radius: 0;
}

.ed-caso__cuerpo {
	display: grid;
	grid-template-columns: minmax( 0, 22rem ) minmax( 0, 1fr );
	gap: var( --ed-gap-card, 8px );
	align-items: start;
}

/* La columna de datos se queda a la vista mientras se lee el relato, que es
   largo: el cliente y el año son justo lo que se vuelve a mirar. */
.ed-caso__izq {
	position: sticky;
	top: 1.5rem;
	box-sizing: border-box;
	padding: 2.5rem;
	background: var( --ed-panel, #E2E2E2 );
}

.ed-caso__der {
	box-sizing: border-box;
	padding: 2.5rem 3rem;
	background: var( --ed-blanco, #fff );
}

.ed-caso__rotulo {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ed-casos, #4EB3B5 );
}

.ed-caso__titulo {
	margin: 0 0 1rem;
	font-family: var( --ed-font-display, inherit );
	font-size: var( --ed-fs-h3, 1.75rem );
	font-weight: 700;
	line-height: 1.1;
}

.ed-caso__pregunta {
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	font-weight: 500;
}

.ed-caso__datos {
	margin: 0;
	font-size: 0.9375rem;
}

.ed-caso__datos dt {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.55;
}

.ed-caso__datos dd {
	margin: 0.15rem 0 0;
	line-height: 1.35;
}

.ed-caso__externo {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

.ed-caso__externo a {
	color: var( --ed-navy, #0F162A );
}

/* El relato: columna de lectura, no de ancho completo. */
.ed-caso__relato {
	max-width: 68ch;
}

.ed-caso__relato p {
	margin: 0 0 1.1rem;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.ed-caso__relato a {
	color: var( --ed-navy, #0F162A );
}

.ed-caso__cierre {
	max-width: 68ch;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 2px solid rgba( 15, 22, 42, 0.12 );
}

.ed-caso__cierre p {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	font-weight: 500;
}

.ed-caso__acciones {
	margin: 1.5rem 0 0;
}

/* -------------------------------------------------------------------------
 * De un caso a otro
 * ---------------------------------------------------------------------- */

.ed-caso__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: var( --ed-gap-card, 8px );
	padding: 1.5rem 2rem;
	background: var( --ed-navy, #0F162A );
}

.ed-caso__nav a {
	color: var( --ed-blanco, #fff );
	font-size: 0.9375rem;
	text-decoration: none;
	line-height: 1.3;
}

.ed-caso__nav a span {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
}

.ed-caso__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ed-caso__nav-sig {
	text-align: right;
}

.ed-caso__nav-todos {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Pantallas menores
 * ---------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	.ed-casos__rejilla {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ed-caso__cuerpo {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ed-caso__izq {
		position: static;
	}

	.ed-caso__izq,
	.ed-caso__der {
		padding: 1.75rem;
	}

	.ed-caso__nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.ed-caso__nav-sig {
		text-align: left;
	}
}