/*
 * Artículo de News — single.php.
 *
 * Referencia: docs/pages/news-single-desktop.txt (nodo 1365:9769).
 * Solo consume tokens; las medidas del diseño que no son tokens van como custom
 * properties documentadas. Las tarjetas del pie las estila news.css del plugin.
 */

.acturion-article {
	--article-top:      174px; /* [figma] borde de la página -> bloque News */
	--article-measure:  816px; /* [figma] ancho de lectura del cuerpo */
	--article-hero:     1236 / 695; /* [figma] proporción de la foto de cabecera; es 16:9 exacto */
	--article-gap-meta: 34px;  /* [figma] titular (152) -> meta (186) */
	--article-gap-hero: 80px;  /* [figma] meta -> foto, y foto -> cuerpo */

	padding-block-start: var(--article-top);
	color: var(--acturion-dark-blue);
}

/* [figma 1365:9887] mobile: el titular arranca a 28 del header (Section1 y=136 =
   header 108 + 28) — los 174 son la medida del desktop y, con el header mobile en
   flujo, se le sumaban encima. Mismo 28 que la primera sección de las demás páginas. */
@media (max-width: 767px) {
	.acturion-article { --article-top: 28px; }
}

/* ---------------------------------------------------------------- Cabecera */

/* Mismo ajuste que el titular de portada del listado (news.css) y por lo mismo: el
   diseño lo dibuja a 85 dentro de una caja de 711 con un titular de cuatro palabras,
   y los comunicados traen doce — el de AM Best salía en SEIS líneas. A 56 y con todo
   el ancho del contenedor cabe en dos o tres. `text-wrap: balance` fuera: repartía
   líneas de largo parecido en vez de llenar la medida. */
.acturion-article__title {
	margin: 0;
	/* 38 -> 56, 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);
}

.acturion-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acturion-space-4);
	margin: var(--article-gap-meta) 0 0;
	font-size: var(--acturion-body-14);
}

.acturion-article__metaitem {
	display: inline-flex;
	align-items: center;
	gap: var(--acturion-space-2);
}

/* ---------------------------------------------------------------- Foto de cabecera */

.acturion-article__hero {
	display: flex;
	margin-block: var(--article-gap-hero);
	aspect-ratio: var(--article-hero);
}

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

.acturion-article__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.acturion-article__body {
	max-width: var(--article-measure);
	/* [figma MCP] el cuerpo del artículo corre en BodyText_21 (1365:9788/9815 y el
	   destacado 1365:9794), no en el cuerpo de 18 del resto del sitio. */
	font-size: var(--acturion-body-21);
	line-height: var(--acturion-lh-body);
}

.acturion-article__body > * { margin-block: 0; }

/* [figma] el bloque de 264 son 12 líneas de 22: los párrafos se separan por una
   línea de cuerpo exacta, así que la separación sigue al tamaño de letra. */
.acturion-article__body > * + * { margin-block-start: 1.2em; }

/* [figma] los bloques destacados (cita, figura) respiran 48. */
.acturion-article__body > blockquote,
.acturion-article__body > figure { margin-block: var(--acturion-space-8); }

/* El single de Figma no trae intertítulos (su único destacado es BodyText_21), así
   que los h2/h3 del editor se fijan al subtítulo de 32: heredar los 85 de sección
   dentro de una medida de 816 quedaría desproporcionado. */
.acturion-article__body h2,
.acturion-article__body h3 {
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

/* Entradilla: el subtítulo que el comunicado pone sobre el cuerpo («Insurance industry
   veteran brings…»). No está en el diseño —sus noticias no lo traían— así que se marca
   con lo que ya hay: el mismo cuerpo de 21 del artículo, en Medium. */
.acturion-article__body .acturion-article__standfirst {
	font-weight: var(--acturion-weight-medium);
}

/* Listas: el diseño no trae ninguna, pero los comunicados sí («Key Features»). Se
   alinean con el texto y usan la misma separación entre párrafos. */
.acturion-article__body ul,
.acturion-article__body ol {
	padding-inline-start: var(--acturion-space-5);
}

.acturion-article__body li + li {
	margin-block-start: 0.6em;
}

/* Letra pequeña: avisos legales de las anualidades, contactos de prensa y procedencia
   del comunicado. Es información permanente, no el cuerpo de la noticia, y a cuerpo
   completo compite con ella: se baja a 14 y se separa con un filete. */
.acturion-article__body .acturion-article__fineprint {
	font-size: var(--acturion-body-14);
	padding-block-start: var(--acturion-space-5);
	border-block-start: 1px solid currentColor;
}

.acturion-article__body .acturion-article__fineprint > * + * {
	margin-block-start: 1.2em;
}

.acturion-article__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------- Cita */
/* [figma] «Quote», dos geometrías distintas:
     mobile  (327x301): padding 40, comilla en (40,40) 40x31 y el texto DEBAJO, en (40,95).
     desktop (816x222): padding 40, comilla en (40,40) 48x37 y el texto AL LADO, en x=112,
                        con 664 de ancho (816 - 112 - 40).
   La comilla se compone con tipografía; no es un asset. */

.acturion-article__body blockquote {
	margin-inline: 0;
	padding: var(--acturion-space-7);
	background: var(--acturion-light-seashell);
	font-size: var(--acturion-body);
}

.acturion-article__body blockquote::before {
	content: "\201C";
	display: block;
	margin-bottom: var(--acturion-space-5); /* 95 - 40 - 31 = 24 */
	font-size: var(--acturion-h1);
	line-height: 0.8;
	color: var(--acturion-dark-blue);
}

.acturion-article__body blockquote p { margin: 0; }

.acturion-article__body blockquote cite {
	display: flex;
	align-items: center;
	gap: var(--acturion-space-4);
	margin-top: var(--acturion-space-5);
	font-size: var(--acturion-body-14);
	font-style: normal;
}

/* Flecha del diseño, compuesta con un glifo: dentro del contenido del editor no hay
   dónde inyectar el SVG. */
.acturion-article__body blockquote cite::before {
	content: "\2192";
	font-size: var(--acturion-body-18);
	line-height: 1;
}

@media (min-width: 768px) {

	.acturion-article__body blockquote {
		position: relative;
		/* izquierda = 40 (padding) + 48 (comilla) + 24 (hueco) = 112 */
		padding-left: calc(var(--acturion-space-7) + var(--acturion-space-8) + var(--acturion-space-5));
	}

	.acturion-article__body blockquote::before {
		position: absolute;
		top: var(--acturion-space-7);
		left: var(--acturion-space-7);
		margin: 0;
	}
}

/* ---------------------------------------------------------------- Figuras */
/* [figma] «Photos»: imagen 816x459 y pie a 16 por debajo, en tamaño description. */

.acturion-article__body figure {
	display: flex;
	flex-wrap: wrap;
	margin-inline: 0;
}

.acturion-article__body figure img {
	order: 1;
	/* base 0, no auto: con `auto` la imagen reclama su ancho intrínseco (1024) y
	   empuja la franja a la línea siguiente. Con 0 se reparte el espacio real y
	   la imagen queda en 741, que es la medida del diseño. */
	flex: 1 1 0;
	min-width: 0;
	/* [figma] la imagen mide 741x459 dentro de los 816 del bloque. */
	aspect-ratio: 741 / 459;
	object-fit: cover;
	display: block;
}

/* Vídeo dentro del cuerpo: misma caja que la foto —con su franja al lado y su pie
   debajo— pero sin recortar. La figura del diseño es 741x459 (1.615:1) y el vídeo es
   16:9, así que se respeta SU proporción y la franja se estira a lo que mida. */
.acturion-article__body figure video {
	order: 1;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 16 / 9;
	display: block;
	background: var(--acturion-dark-blue);
}

.acturion-article__body figure::after {
	content: "";
	order: 2;
	flex: 0 0 var(--acturion-strip);
	background: var(--acturion-gradient-strip);
}

.acturion-article__body figcaption {
	order: 3;
	flex: 0 0 100%;
	margin-top: var(--acturion-space-4);
	font-size: var(--acturion-description);
	line-height: var(--acturion-lh-body);
}

/* ---------------------------------------------------------------- Pie: Latest News */

.acturion-news-list--related {
	/* [figma] Section2 arranca 100 después del artículo y cierra con otros 100. */
	padding-block: var(--acturion-space-section);
}

/* [figma] en el artículo el salto titular -> filas es 80, no los 89 del listado. */
.acturion-news-list--related .acturion-news-list__items {
	margin-top: var(--acturion-space-10);
}

/* [figma] «See All News» ocupa la columna derecha de 396. */
.acturion-news-list--related .acturion-link--wide {
	flex: 0 0 var(--acturion-col);
	max-width: var(--acturion-col);
}

/* [figma 1365:9887] mobile: el título de la sección respira del artículo (100, el
   doble de la media-frontera de 50) y se pega a sus tarjetas (48, no los 80 del
   desktop) — si no, quedaba flotando centrado entre ambos. */
@media (max-width: 767px) {
	.acturion-news-list--related {
		padding-block-start: calc(var(--acturion-space-section) * 2);
	}

	.acturion-news-list--related .acturion-news-list__items {
		margin-top: var(--acturion-space-8);
	}
}