/*
 * News — portada destacada y listado.
 *
 * Referencias: news-listing-A (layout, nodo 1365:12138) y news-listing-B (panel de
 * filtro abierto, nodo 1365:9506). Solo consume variables de tokens.css; las medidas
 * que el diseño fija y que no son tokens van como custom properties documentadas.
 *
 * Rejilla común a los dos: 1236 = 396 x 3 + 24 x 2.
 */

.acturion-news-featured,
.acturion-news-list {
	--news-col:        396px; /* [figma] columna de la rejilla; = --acturion-col */
	--news-row-media:  223px; /* [figma] alto de la fila del listado */
	--news-card-img:   321px; /* [figma] imagen dentro de la columna de 396 (321 + 75 franja) */
	--news-tag-gap:    16px;  /* [figma] etiqueta -> fecha en las tarjetas */
	--news-head-gap:   89px;  /* [figma] «Latest News» (76) -> primera fila (165) */
	--news-hero-gap:   98px;  /* [figma] titular (152) -> contenido (250) */
	--news-hero-media: 816px; /* [figma] columna de imagen de la portada (741 + 75) */
	--news-hero-body:  374px; /* [figma] alto del bloque de contenido de la portada */
	--news-page-top:   174px; /* [figma] borde superior de la página -> Section1 */
}

/* Ritmo vertical de la pantalla [figma]: Section1 arranca en 174 y termina en 898;
   el bloque «Latest News» empieza en 998. Los 200 de separación salen de 100 abajo
   de la portada + 100 arriba del listado. */
.acturion-news-featured { padding-block: var(--news-page-top) var(--acturion-space-section); }
.acturion-news-list     { padding-block: var(--acturion-space-section); }

/* [figma] mobile: la portada arranca a 28 de la cabecera (Section1 y=136), como el
   resto de páginas. News se salta la regla genérica de base.css porque su primer
   widget no envuelve el contenido en un <section>. */
@media (max-width: 767px) {
	.acturion-news-featured { --news-page-top: 28px; }
}

/* ============================================================ Portada destacada */

/* El diseño dibuja este titular a 85 dentro de una caja de 711 (volcado: «Unique
   selling proposition» 711x152), pero lo hace con un titular de ejemplo de cuatro
   palabras. Los titulares reales son comunicados de doce y a ese tamaño ocupaban
   media página, así que baja a 56 en desktop (38 en mobile, como el resto de la
   escala) y se le deja TODO el ancho de contenido.

   Sin `text-wrap: balance`: repartía el titular en líneas de largo parecido, que a
   este tamaño se leían como dos columnas sueltas en vez de como un titular. Ahora la
   primera línea llena la medida y solo baja lo que sobra. */
.acturion-news-featured__title {
	margin: 0;
	/* 38 -> 56, con la misma construcción que los tokens de tokens.css. */
	font-size: clamp(2.375rem, 1.979rem + calc(1.6901 * var(--acturion-vw)), 3.5rem);
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-heading);
	color: var(--acturion-dark-blue);
}

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

/* [figma] en mobile la foto va ENTRE el titular y el bloque de texto (meta + extracto),
   pero en el DOM va después a propósito (es decorativa: mejor que la lectora de
   pantalla la deje para el final). `order` la sube solo visualmente. */
.acturion-news-featured__media { order: -1; }

.acturion-news-featured__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acturion-space-4);
	margin: 0 0 var(--acturion-space-5);
	color: var(--acturion-dark-blue);
	font-size: var(--acturion-body-14);
}

.acturion-news-featured__metaitem {
	display: inline-flex;
	align-items: center;
	gap: var(--acturion-space-2);
	/* Cada pieza (icono + texto) es indivisible: si no cabe, se reparte la fila,
	   nunca se parte por dentro. */
	white-space: nowrap;
}

.acturion-news-featured__excerpt {
	margin: 0 0 var(--acturion-space-8);
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
	color: var(--acturion-dark-blue);
}

.acturion-news-featured__media {
	display: flex;
	min-height: var(--news-row-media);
}

.acturion-news-featured__image {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--acturion-soft-beige);
}

.acturion-news-featured__image img,
.acturion-news-card__image img {
	width: 100%;
	/* !important: Elementor trae `.elementor img { height: auto }` (0,1,1), empatada en
	   especificidad con estos selectores — sin esto la foto sale a su alto intrínseco. */
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform var(--acturion-duration) var(--acturion-ease);
}

/* ============================================================ Listado */

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

/* [figma 1365:9944] mobile del artículo: «See All News» va al FINAL, bajo las
   tarjetas y a todo el ancho — no junto al titular, donde el enlace ancho (396)
   aplastaba el H2 a una columna de letras. La cabecera se disuelve (display:
   contents) para reordenar sin duplicar markup, como los controles de «Why». */
@media (max-width: 767px) {
	.acturion-news-list--related .acturion-container {
		display: flex;
		flex-direction: column;
	}

	.acturion-news-list--related .acturion-news-list__head { display: contents; }

	.acturion-news-list--related .acturion-news-list__head .acturion-link--wide {
		order: 1;
		margin-top: var(--acturion-space-8); /* [figma] tarjetas (1538) -> botón (1586) */
		/* news-single.css le da flex-basis 396 (su ANCHO en la fila desktop); aquí el
		   contenedor es columna y esa base pasaba a ser ALTURA: el texto quedaba
		   arriba y el subrayado 396px más abajo, como un enlace fantasma. */
		flex: 0 0 auto;
		max-width: none;
	}
}

.acturion-news-list__heading {
	margin: 0;
	font-size: var(--acturion-h2);
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-heading);
	color: var(--acturion-dark-blue);
}

/* [figma] la sección «News» del Home va a 72 (caja de 85); el resto a 64. */
.acturion-news-list__heading--xl { font-size: var(--acturion-h1-xl); }

.acturion-news-list__items {
	list-style: none;
	margin: var(--acturion-space-8) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-8);
}

.acturion-news-card {
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5);
}

.acturion-news-card__meta {
	display: flex;
	align-items: center;
	gap: var(--news-tag-gap);
	margin: 0 0 var(--acturion-space-4);
	font-size: var(--acturion-body-14);
	color: var(--acturion-dark-blue);
}

/* [figma MCP] el título de tarjeta es el subtítulo Medium 32/0.9 (1365:12218); la
   caja de 87 (3 líneas de 29) descartó la lectura vieja de 24/1.2. */
.acturion-news-card__title {
	margin: 0;
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

.acturion-news-card__title a {
	color: var(--acturion-dark-blue);
	text-decoration: none;
}

.acturion-news-card__title a:hover,
.acturion-news-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.acturion-news-card__media {
	display: flex;
	height: var(--news-row-media);
}

/* [figma] mobile: las fotos de la portada y de las tarjetas miden 184, no los 223
   de la fila de escritorio; y el «Read More» de cada tarjeta va a TODO el ancho
   (texto a la izquierda, flecha a la derecha, filete completo), como en la portada. */
@media (max-width: 767px) {
	.acturion-news-card__media { height: 184px; }
	.acturion-news-featured__media { min-height: 184px; height: 184px; }
	.acturion-news-card__aside .acturion-link { display: flex; }

	/* [figma] mobile: extracto -> «Read More» a 24 (el texto acaba en 76/95 y el botón
	   entra en 100/119 en portada y tarjetas del branch); el 48 es solo de desktop.
	   El de .acturion-news-card__excerpt vive junto a SU regla base, más abajo: aquí
	   la base le ganaría por venir después a igual especificidad. */
	.acturion-news-featured__excerpt { margin-bottom: var(--acturion-space-5); }

	/* El título mobile lo cubre el extremo 24 de --acturion-subtitle (el 22px suelto
	   de antes salía de la lectura 1.2 del volcado). */
}

.acturion-news-card__image {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	background: var(--acturion-soft-beige);
}

/* [convención] Figma es estático; mismo hover sutil que las tarjetas de Leadership. */
.acturion-news-card:hover .acturion-news-card__image img,
.acturion-news-card:focus-within .acturion-news-card__image img {
	transform: scale(1.05);
}

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

.acturion-news-card__excerpt {
	margin: 0 0 var(--acturion-space-8);
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
	color: var(--acturion-dark-blue);
}

/* [figma] mobile: extracto -> «Read More» a 24; DESPUÉS de la base o pierde. */
@media (max-width: 767px) {
	.acturion-news-card__excerpt { margin-bottom: var(--acturion-space-5); }
}

.acturion-news-list__empty {
	margin: var(--acturion-space-8) 0 0;
	font-size: var(--acturion-body);
	color: var(--acturion-dark-blue);
}

/* ============================================================ Filtro */

.acturion-news-filter { position: relative; }

.acturion-news-filter__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--acturion-dark-blue);
	border-radius: 50%;
	background: transparent;
	color: var(--acturion-dark-blue);
	cursor: pointer;
}

/* Sin esto, Hello Elementor pinta :hover/:focus de cualquier <button> en un rosa
   por defecto a (0,2,0). [figma] el «Filters» del kit (189:9765) tiene Default y
   Hover idénticos (aro vacío): el hover NO invierte. */
.acturion-news-filter__toggle:hover,
.acturion-news-filter__toggle:focus {
	background: transparent;
	color: var(--acturion-dark-blue);
}

/* [figma] el relleno dark blue es el estado APLICADO/abierto («Selected» del kit y
   el panel abierto de 1365:9506). `.is-active` lo pone el servidor cuando la URL
   trae filtro y lo mantiene news-list.js al marcar casillas. Va después del hover
   para ganarle con la misma especificidad. */
.acturion-news-filter__toggle[aria-expanded="true"],
.acturion-news-filter__toggle.is-active,
.acturion-news-filter__toggle[aria-expanded="true"]:hover,
.acturion-news-filter__toggle.is-active:hover,
.acturion-news-filter__toggle[aria-expanded="true"]:focus,
.acturion-news-filter__toggle.is-active:focus {
	background: var(--acturion-dark-blue);
	color: var(--acturion-light-seashell);
}

.acturion-news-filter__panel {
	position: absolute;
	top: calc(100% + var(--acturion-space-4));
	right: 0;
	z-index: 2;
	min-width: 400px;
	margin: 0;
	padding: var(--acturion-space-5);
	border: 0;
	background: var(--acturion-light-seashell);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-3);
}

/* `display: flex` en la clase gana al `[hidden] { display: none }` del navegador,
   así que el panel hay que ocultarlo explícitamente. */
.acturion-news-filter__panel[hidden] { display: none; }

.acturion-news-filter__option {
	display: flex;
	align-items: center;
	gap: var(--acturion-space-4);
	padding-bottom: var(--acturion-space-2);
	border-bottom: 1px solid var(--acturion-dark-blue);
	color: var(--acturion-dark-blue);
	font-size: var(--acturion-body);
	cursor: pointer;
}

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

.acturion-news-filter__apply {
	align-self: flex-start;
	margin-top: var(--acturion-space-2);
	padding: var(--acturion-space-2) var(--acturion-space-5);
	border: 1px solid var(--acturion-dark-blue);
	background: var(--acturion-dark-blue);
	color: var(--acturion-light-seashell);
	font-size: var(--acturion-body-14);
	cursor: pointer;
}

/* Ver nota junto a .acturion-news-filter__toggle: Hello Elementor pinta el
   :hover/:focus de cualquier <button> en rosa a (0,2,0) si no se pisa aquí. */
.acturion-news-filter__apply:hover,
.acturion-news-filter__apply:focus {
	background: var(--acturion-blue);
	color: var(--acturion-light-seashell);
}

/* ============================================================ Paginación */

/* [figma] «Pagination» del UI Kit (189:12721; instancia 396x48 en el listado):
   círculos de 48 con filete, la página actual RELLENA en dark blue, flechas
   prev/next también en círculo (atenuadas cuando no hay a dónde ir, como los
   controles del carrusel) y los puntos suspensivos sin aro. */
.acturion-news-list__pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--acturion-space-4);
	margin-top: var(--acturion-space-10);
	color: var(--acturion-dark-blue);
}

.acturion-news-list__pagination .page-numbers,
.acturion-news-list__page-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--acturion-dark-blue);
	border-radius: 50%;
	color: inherit;
	font-size: var(--acturion-body-18);
	line-height: 1;
	text-decoration: none;
}

.acturion-news-list__pagination .page-numbers.current {
	background: var(--acturion-dark-blue);
	color: var(--acturion-light-seashell);
}

.acturion-news-list__pagination .page-numbers.dots {
	width: auto;
	border: 0;
}

.acturion-news-list__page-nav[aria-disabled="true"] {
	opacity: 0.35;
}

@media (min-width: 1024px) {
	/* [figma] la instancia arranca en x=420: la segunda columna de la retícula. */
	.acturion-news-list__pagination {
		margin-inline-start: calc(var(--acturion-col) + var(--acturion-space-5));
	}
}

/* ============================================================ >= 768px */

@media (min-width: 768px) {

	.acturion-news-featured__body {
		flex-direction: row;
		align-items: stretch;
		gap: var(--acturion-space-5);
		margin-top: var(--news-hero-gap);
		min-height: var(--news-hero-body);
	}

	.acturion-news-featured__text {
		flex: 0 0 var(--news-col);
		display: flex;
		flex-direction: column;
		/* [figma] el meta arriba y el bloque de texto pegado abajo, en 374 de alto. */
		justify-content: space-between;
	}

	/* [figma] los tres metas (etiqueta, fecha, lectura) van en UNA línea repartidos
	   al ancho completo de la columna (63+131+79 sobre 396, la lectura a ras del
	   borde derecho): es un space-between, no un hueco fijo — el gap de 61px de
	   antes sumaba 397 y desbordaba por 1px, mandando la lectura a otra fila 61px
	   más abajo. */
	.acturion-news-featured__meta {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--acturion-space-4);
		margin-bottom: 0;
	}

	/* El alto lo fija el diseño (374), no la proporción de la imagen: sin esto la foto
	   estira la fila a su alto intrínseco. object-fit: cover recorta lo que sobre. */
	.acturion-news-featured__media {
		order: 0;
		flex: 1 1 var(--news-hero-media);
		min-width: 0;
		height: var(--news-hero-body);
	}

	.acturion-news-list__items { margin-top: var(--news-head-gap); }

	/* Fila de tres columnas de 396. */
	.acturion-news-card {
		flex-direction: row;
		align-items: stretch;
		gap: var(--acturion-space-5);
		min-height: var(--news-row-media);
	}

	/* Tres columnas que se reparten el ancho, no tres de 396 fijos: a 1440 el
	   contenido son 1236 y (1236 - 48) / 3 = 396 exactos, pero por debajo se encogen.
	   Fijas metían 1236 en 662 a 768px y sacaban scroll horizontal en toda la página. */
	.acturion-news-card__text,
	.acturion-news-card__aside,
	.acturion-news-card__media {
		flex: 1 1 0;
		min-width: 0;
	}

	.acturion-news-card__media { height: var(--news-row-media); }

	.acturion-news-card__aside {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

}

/* [figma] la franja alterna de lado, pero el lado con el que EMPIEZA cambia según
   la pantalla: en el listado (1365:12138 y su mobile 1365:9620) la primera fila la
   lleva a la izquierda, y en el pie del artículo (1365:9769) a la derecha. El orden
   natural del DOM es imagen + franja, o sea franja a la derecha; el modificador dice
   cuáles invertir. Va FUERA de la media query: en mobile alterna igual. */
.acturion-news-list__items--strip-left .acturion-news-list__item:nth-child(odd) .acturion-news-card__media,
.acturion-news-list__items--strip-right .acturion-news-list__item:nth-child(even) .acturion-news-card__media {
	flex-direction: row-reverse;
}