/**
 * Archive de casos de éxito — estética sobre el Post Grid Pro.
 *
 * Este CSS SOLO se encola en /casos-exito/ (is_post_type_archive en el plugin), por eso
 * los selectores van directos al bloque de Kadence sin necesitar clase extra en el editor.
 * El markup del bloque NO se toca; los nodos .cce-* los inyecta cce-archive.js.
 */

:root {
	--cce-brand:      var(--global-palette1, #00a7c5);
	--cce-brand-dark: var(--global-palette5, #003b47);
	--cce-brand-soft: #e8f6fb;
	--cce-line:       #e3e9ec;
	--cce-muted:      #6b7a82;
}

/* Pestañas de zona: el TEXTO lo estiliza el editor desde el bloque de Kadence.
   Aquí solo las burbujas de conteo. */

/* Badge de conteo dentro de cada pestaña (inyectada por cce-archive.js).
   pointer-events:none = el click atraviesa al botón (el handler nativo de Kadence
   solo reacciona si el target ES el botón). */
.cce-tab-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.5;
	background: #fff;                     /* inactiva: blanco + borde y número accent */
	border: 1px solid var(--cce-brand);
	color: var(--cce-brand);
	pointer-events: none;
	vertical-align: 8px; /* elevado, estilo badge de notificación */
}
.kb-filter-item.is-active .cce-tab-badge {
	background: var(--cce-brand);         /* activa: accent + número blanco */
	border-color: var(--cce-brand);
	color: #fff;
}

/* ── Chips de tratamiento (nivel 2, dependientes) ── */
.cce-trat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 16px 0 30px; /* aire entre los chips y el grid de resultados */
}
.cce-trat-chip {
	background: #fff;
	color: var(--cce-muted);
	border: 1px solid var(--cce-line);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 13px;
	cursor: pointer;
	transition: .15s;
}
.cce-trat-chip:hover {
	background: var(--cce-brand-soft);
	border-color: var(--cce-brand);
	color: var(--cce-brand-dark);
}
.cce-trat-chip.is-active {
	background: var(--cce-brand);
	border-color: var(--cce-brand);
	color: #fff;
}

/* ── Tarjeta ──
   Imagen: se respeta el ratio POR DEFECTO del bloque (decisión del editor).
   Alturas: se igualan reservando SIEMPRE 2 líneas para el título. La reserva va en el
   <a> interno (display:block + min-height:2lh) y no en el h2, porque el h2 lleva padding
   del theme que hacía que un height fijo cortara la 2ª línea. Sin recortes ni "…": los
   títulos guiados por el contador (25-65 car.) no pasan de 2 líneas.               */
.wp-block-kadence-postgrid .kt-blocks-post-grid-item {
	border: 1px solid var(--cce-line);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s, transform .18s;
}
.wp-block-kadence-postgrid .kt-blocks-post-grid-item:hover {
	box-shadow: 0 8px 24px rgba(0, 59, 71, .10);
	transform: translateY(-2px);
}
.wp-block-kadence-postgrid .entry-title a {
	display: block;
	min-height: 3em;  /* fallback (line-height 1.5) */
	min-height: 2lh;  /* reserva exacta de 2 líneas de su tipografía */
}
/* hover: el título aclara hacia el tono de marca */
.wp-block-kadence-postgrid .kt-blocks-post-grid-item:hover .entry-title a {
	color: var(--cce-brand);
}

/* ── Estado vacío (inyectado por cce-archive.js) ── */
.cce-archive-empty {
	display: none;
	text-align: center;
	color: var(--cce-muted);
	font-size: 14.5px;
	padding: 42px 0;
}

/* ── Móvil: resultados como slider horizontal deslizable ──
   Adaptación del patrón jb-mobile-slider (Personalizar → CSS adicional, pensado para
   Row Layouts) al Post Grid Pro. Aquí manda Isotope (posiciona cada tarjeta con estilos
   INLINE), así que en móvil se neutraliza con !important (gana al inline). Los ítems
   filtrados quedan en display:none por el propio Isotope → los filtros de zona y
   tratamiento siguen funcionando dentro del slider. */
.cce-swipe-hint { display: none; }

@media (max-width: 767px) {
	/* Tabs en UNA línea: si no caben se deslizan lateralmente (nada cae a 2ª fila).
	   'safe center' centra cuando caben y ancla al inicio cuando desbordan. */
	.wp-block-kadence-postgrid .kb-post-filter-container {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: safe center;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.wp-block-kadence-postgrid .kb-post-filter-container::-webkit-scrollbar { display: none; }
	.wp-block-kadence-postgrid .kb-filter-item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Chips más compactos: con los textos largos (p. ej. "Aumento con implantes")
	   caben 2 por línea y el grupo queda 2+1 centrado en vez de apilado 1 a 1 */
	.cce-trat-chip {
		font-size: 11.5px;
		padding: 6px 9px;
	}
	.cce-trat-chips {
		gap: 6px;
	}

	/* Tarjetas del slider a la MISMA altura: el track es flex (stretch por defecto),
	   la tarjeta rellena su ítem → la más alta manda y el resto se iguala sin recortar texto */
	.wp-block-kadence-postgrid .kt-post-masonry-item .kt-blocks-post-grid-item {
		height: 100%;
	}

	.wp-block-kadence-postgrid .kt-post-grid-wrap {
		height: auto !important;      /* pisa la altura inline que fija Isotope */
		display: flex !important;    /* el CSS de Kadence Pro carga después y pisaba el flex */
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
		scrollbar-width: none;        /* la pista de swipe hace de señal, no la barra */
	}
	.wp-block-kadence-postgrid .kt-post-grid-wrap::-webkit-scrollbar { display: none; }

	.wp-block-kadence-postgrid .kt-post-masonry-item {
		position: static !important;  /* pisa el absolute/transform inline de Isotope */
		transform: none !important;
		width: auto !important;
		flex: 0 0 82%;                /* la siguiente tarjeta asoma → invita al swipe */
		scroll-snap-align: start;
		min-width: 0;
	}

	/* Pista de swipe: flecha suelta en accent, a la derecha entre el pie de las
	   tarjetas y la barra de progreso. SIN fondo de píldora a propósito: un glifo
	   se lee como indicador; una píldora se lee como botón (y no lo es). */
	.cce-swipe-hint {
		display: block;
		width: max-content;
		margin: 4px 18px 0 auto;
		font-size: 22px;
		line-height: 1;
		color: var(--cce-brand);
		pointer-events: none;
		animation: cceSwipeHint 1.2s ease-in-out infinite;
	}
}

/* Barra de progreso del slider (inyectada por cce-archive.js; solo móvil).
   El thumb lo dimensiona/mueve el JS según scroll (width + translateX). */
.cce-scrollbar { display: none; }

@media (max-width: 767px) {
	.cce-scrollbar {
		display: block;
		height: 4px;
		margin: 8px 16px 0; /* pegada a las tarjetas */
		border-radius: 999px;
		background: var(--cce-line);
		overflow: hidden;
	}
	.cce-scrollbar__thumb {
		display: block;
		height: 100%;
		width: 30%;
		border-radius: 999px;
		background: var(--cce-brand);
		transition: transform .08s linear;
		will-change: transform;
	}
}

@keyframes cceSwipeHint {
	0%, 100% { transform: translateX(0);   opacity: .85; }
	50%      { transform: translateX(8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.cce-swipe-hint { animation: none; }
}