/**
 * Redes y Alianzas — expansión en 3 niveles dentro del Loop Grid.
 *
 * Valores tomados del sitio real (plantilla 17183 y kit 5), no del Figma:
 *   rosa del icono  #FD4B59   (color local del widget, NO es un color global)
 *   texto global    #1C1C1C
 *   card            border-radius 5px, box-shadow 0 0 10px -2px rgba(0,0,0,.5)
 *   breakpoints     móvil ≤767, tablet ≤1024
 *
 * OJO: en este kit `--e-global-color-accent` es #FFFFFF (blanco). No sirve
 * para el rosa. Por eso va literal aquí, en una sola variable.
 */

:root {
	--cnj-pink: #fd4b59;
	--cnj-text: var( --e-global-color-text, #1c1c1c );
	--cnj-chip-border: #e8e8e8;
	--cnj-chip-bg: #fff;
	--cnj-radius: 5px;
	--cnj-speed: 0.3s;
}

/* ---------------------------------------------------------------------------
 * 1. El "+" de nivel 1 (widget de Icono con la clase .plusicon)
 *
 * Es OPT-IN por grid: solo se activa dentro de una Loop Grid marcada con la
 * clase .cnj-redes-grid. Hace falta porque un post puede estar en dos grids —
 * "Arzobispado de Santiago" (17132) está a la vez en 2.6 y en Alianzas
 * Estratégicas, y el Figma no quiere ningún "+" en Alianzas Estratégicas.
 * Con opt-in, lo que no se marca se queda exactamente como está hoy.
 * ------------------------------------------------------------------------ */

.plusicon {
	display: none;
}

/**
 * Dos reglas separadas a propósito, NO una lista con coma.
 *
 * Si fueran una sola lista y el navegador no entendiera :has(), descartaría la
 * regla entera y el "+" no aparecería nunca. Separadas, la de .cnj-has-children
 * (que pone el JS) sigue funcionando por su cuenta.
 */
.cnj-redes-grid .e-loop-item.cnj-has-children .plusicon {
	display: block;
}

.cnj-redes-grid .e-loop-item:has( .cnj-redes ) .plusicon {
	display: block;
}

.plusicon {
	cursor: pointer;
}

.plusicon:focus-visible {
	outline: 2px solid var( --cnj-pink );
	outline-offset: 3px;
}

/**
 * Abierto: cambiar el glifo de Font Awesome en vez de rotar el icono.
 * El widget usa `fas fa-plus-circle` (\f055); \f056 es `fa-minus-circle`, que
 * da exactamente el "−" del Figma. Rotar 45° daría una "×", que no es lo
 * dibujado.
 */
.plusicon[aria-expanded="true"] .elementor-icon i::before {
	content: "\f056";
}

/* No hace falta position:relative en el card: el widget ya es
   .elementor-absolute (right:4px; bottom:0) y los contenedores de Elementor
   son position:relative de serie. */

/* ---------------------------------------------------------------------------
 * 2. Paneles — la pieza que hace funcionar todo el efecto
 * ------------------------------------------------------------------------ */

/* El wrapper no debe generar caja: antes del JS solo contiene el panel oculto,
   después queda vacío dentro del loop item. */
.cnj-redes {
	display: contents;
}

/**
 * grid-column: 1 / -1 es la línea clave. Una vez que el JS promueve el panel a
 * hijo directo del contenedor de la grid, ocupa la fila entera y empuja el
 * resto hacia abajo — exactamente lo que pide el Figma.
 *
 * La altura se anima con max-height, no con el truco de grid-template-rows
 * 0fr → 1fr. Ese truco NO sirve aquí: el panel es a su vez un grid item, así
 * que el contenedor le pide su altura intrínseca, el panel la deriva de su
 * propia track fr, y la circularidad se resuelve en cero — la fila del padre
 * mide 0px y el panel no llega a verse nunca.
 *
 * El JS mide scrollHeight y fija el max-height exacto, así que no hay techo
 * arbitrario y funciona en cualquier navegador con transiciones.
 */
.cnj-panel,
.cnj-sublist {
	grid-column: 1 / -1;
	overflow: hidden;
	max-height: 0;
	transition: max-height var( --cnj-speed ) ease;
	text-align: left;
}

/* Al recolocar el panel en un cambio de breakpoint no queremos que reanime. */
.cnj-no-anim {
	transition: none !important;
}

/* Elementor a veces sobreescribe display en descendientes. */
.cnj-panel[hidden],
.cnj-sublist[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 3. Chips (nivel 2)
 * ------------------------------------------------------------------------ */

.cnj-chips {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 22px 28px;
	padding: 0 0 8px;
}

.cnj-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 12px 16px;
	background: var( --cnj-chip-bg );
	border: 1px solid var( --cnj-chip-border );
	border-radius: var( --cnj-radius );
	box-shadow: 0 0 6px -2px rgba( 0, 0, 0, 0.25 );
}

.cnj-chip__label {
	font-size: 14px;
	line-height: 1.35;
	color: var( --cnj-text );
}

/**
 * El "+" del chip: un signo fino y oscuro, sin recuadro — como el Figma.
 *
 * El selector va anidado (.cnj-chip .cnj-chip__toggle) a propósito. El tema
 * padre hello-elementor trae:
 *
 *   [type=button],[type=submit],button { border:1px solid #c36; color:#c36;
 *                                        border-radius:3px; padding:.5rem 1rem }
 *
 * y como este botón es <button type="button">, casa con [type=button], que es
 * un selector de atributo: especificidad (0,1,0), la misma que una clase suelta.
 * En empate gana el que carga después, y el tema padre carga después que esto.
 * Con dos clases (0,2,0) el empate desaparece.
 */
.cnj-chip .cnj-chip__toggle {
	margin-left: auto;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	padding: 0;
	margin-block: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	color: var( --cnj-text );
	appearance: none;
	-webkit-appearance: none;
	transition: none;
	white-space: normal;
	text-transform: none;
	font-size: inherit;
	line-height: 1;
}

.cnj-chip .cnj-chip__toggle:hover,
.cnj-chip .cnj-chip__toggle:focus,
.cnj-chip .cnj-chip__toggle:active {
	background: none;
	border: 0;
	color: var( --cnj-text );
	box-shadow: none;
}

.cnj-chip .cnj-chip__toggle:focus-visible {
	outline: 2px solid var( --cnj-pink );
	outline-offset: 2px;
}

/* Dos barras en pseudo-elementos: la vertical se colapsa al abrir, así un solo
   elemento sirve para los dos estados y la transición sale gratis.
   13px de trazo fino, para parecerse al signo del Figma (nodo 1541:809). */
.cnj-chip__icon {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
}

.cnj-chip__icon::before,
.cnj-chip__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transform: translate( -50%, -50% );
	transition: transform var( --cnj-speed ) ease;
}

.cnj-chip__icon::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

.cnj-chip__toggle[aria-expanded="true"] .cnj-chip__icon::after {
	transform: translate( -50%, -50% ) rotate( 90deg ) scaleX( 0 );
}

/* ---------------------------------------------------------------------------
 * 4. Lista de unidades (nivel 3)
 * ------------------------------------------------------------------------ */

.cnj-sublist ul {
	columns: 2;
	column-gap: 60px;
	max-width: 560px;
	margin: 0;
	padding: 18px 0 10px 20px;
	list-style: disc;
}

.cnj-sublist li {
	break-inside: avoid;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.35;
	color: var( --cnj-text );
}

/* ---------------------------------------------------------------------------
 * 5. Breakpoints — los reales del kit 5 (móvil ≤767, tablet ≤1024).
 *
 * Los cards van a 5 / 3 / 2 columnas. Los chips llevan texto largo, así que
 * bajan antes: 4 / 2 / 1.
 * ------------------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.cnj-chips {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {
	.cnj-chips {
		grid-template-columns: 1fr;
	}

	.cnj-sublist ul {
		columns: 1;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Utilidades
 * ------------------------------------------------------------------------ */

.cnj-redes .screen-reader-text,
.cnj-panel .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.cnj-panel,
	.cnj-sublist,
	.cnj-chip__icon::before,
	.cnj-chip__icon::after {
		transition: none;
	}
}