/**
 * Entrada individual del blog: maquetación del cuerpo y tipografía de lectura.
 *
 * Se carga SOLO en entradas (ver inc/enqueue.php). No va en base.css porque son
 * unos tres kilobytes que no pintan nada en la portada ni en los servicios, y
 * el criterio de todo el tema es que cada página descargue lo que usa.
 *
 * Criterio de diseño
 * ------------------
 * El resto del sitio vende: alterna franjas de color, tarjetas, botones y
 * llamadas a la acción. Un artículo se lee, y todo lo que compite con el texto
 * resta. Aquí la jerarquía la marcan el tamaño, el peso y el aire; el color
 * aparece en tres sitios contados (enlaces, viñetas y la cita) y el resto es
 * tinta sobre blanco. Los tokens son los mismos del sistema; la densidad no.
 *
 * @package AcompanamientoVital
 */

/* ---------------------------------------------------------------------------
   1. Rejilla del artículo

   Tres columnas: margen, texto y margen. La del centro mide exactamente la
   medida de lectura, así que el texto queda centrado en la página SIEMPRE, haya
   índice o no. El índice, cuando cabe, se aloja en el margen derecho sin mover
   ni un píxel del texto.

   La alternativa habitual —dos columnas, texto e índice, el par centrado— deja
   el texto descentrado y obliga a que el titular, el cuerpo y el pie se
   coordinen entre sí. Son tres bloques distintos con tres hojas distintas: que
   no dependan unos de otros vale más que ganar cien píxeles de ancho.
   --------------------------------------------------------------------------- */

.av-entrada-cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--av-medida, 44rem)) minmax(0, 1fr);
	column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
	row-gap: 0;
	width: 100%;
	max-width: var(--av-content);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
	padding-block-start: clamp(2.25rem, 4vw, 3.5rem);
}

/*
 * WordPress inyecta `:root :where(.is-layout-flow) > * { margin-block-start:
 * 24px }` con especificidad (0,1,0). Estas dos reglas van a (0,2,0) para
 * ganarle sin recurrir a !important: el espaciado del artículo lo decide la
 * rejilla y el ritmo tipográfico, no el valor por defecto del editor.
 */
.av-entrada-cuerpo.wp-block-group > * {
	margin-block: 0;
	grid-column: 2;
	min-width: 0;
}

/*
 * Ojo con esta regla: antes era `> *` y se llevaba por delante el margen que el
 * pie del artículo declara para separarse del texto. La franja de color
 * arrancaba pegada al último párrafo.
 *
 * Se nombran los dos hijos que de verdad tienen que ir a cero —la cabecera y el
 * cuerpo, que ponen su propio `padding`— y se deja en paz al resto, que sabe
 * cuánto aire necesita por encima. Un reset con comodín apaga cosas que nadie
 * recuerda haber encendido.
 */
.av-entrada-pagina.wp-block-group > .av-entrada-cabecera,
.av-entrada-pagina.wp-block-group > .av-entrada-cuerpo {
	margin-block-start: 0;
}

/*
 * A partir de 80rem (1280px) el margen derecho da de sí lo suficiente para
 * alojar el índice sin apretarlo. Por debajo se queda encima del texto, que es
 * donde se lee bien en una columna estrecha.
 */
@media (width >= 80rem) {
	.av-entrada-cuerpo.wp-block-group > .av-indice {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
		max-inline-size: 18rem;
	}

	.av-entrada-cuerpo.wp-block-group > .av-prosa {
		grid-row: 1;
	}
}

/* ---------------------------------------------------------------------------
   2. Tipografía de lectura
   --------------------------------------------------------------------------- */

.av-prosa {
	/*
	 * 20px de tope, no los 16-19 habituales. Quien lee esto es un familiar
	 * cuidador, muchas veces de más de cincuenta años, y a 19px la línea salía
	 * a 78 caracteres: en el límite del criterio 1.4.8 de la WCAG. Subir el
	 * cuerpo baja la cuenta a 74 y se lee mejor. Sale gratis.
	 */
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.75;
	color: var(--av-contrast);
	/* Evita que una palabra larga («hospitalización») desborde en móvil. */
	overflow-wrap: break-word;
}

.av-prosa > * {
	margin-block: 0;
}

.av-prosa > * + * {
	margin-block-start: 1.5rem;
}

/* ------------------------------------------------------------- Encabezados */

/*
 * El salto de aire antes de un apartado es lo que hace legible un texto largo:
 * separa más de lo que separa un párrafo, y por eso el ojo entiende que empieza
 * algo nuevo sin necesidad de una línea ni de un fondo.
 */
.av-prosa > h2 {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.av-prosa > h3 {
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	font-size: clamp(1.25rem, 1rem + 0.7vw, 1.4375rem);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.av-prosa > h4 {
	margin-block-start: 2rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.av-prosa > :is(h2, h3, h4) + * {
	margin-block-start: 0.875rem;
}

.av-prosa > :first-child {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Párrafos */

.av-prosa p {
	text-wrap: pretty;
}

.av-prosa strong {
	font-weight: 700;
}

/* ----------------------------------------------------------------- Enlaces */

/*
 * Subrayado real y no solo color: el criterio 1.4.1 de la WCAG prohíbe que el
 * color sea la única forma de distinguir un enlace dentro de un texto.
 */
.av-prosa a:not([class]) {
	color: var(--av-primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--av-primary) 45%, transparent);
	transition: color var(--av-transition), text-decoration-color var(--av-transition);
}

.av-prosa a:not([class]):hover,
.av-prosa a:not([class]):focus-visible {
	color: var(--av-primary);
	text-decoration-thickness: 2px;
	text-decoration-color: currentcolor;
}

/* ----------------------------------------------------------------- Listas */

.av-prosa :is(ul, ol) {
	padding-inline-start: 1.5rem;
}

.av-prosa li + li {
	margin-block-start: 0.5rem;
}

.av-prosa li > :is(ul, ol) {
	margin-block-start: 0.5rem;
}

.av-prosa li::marker {
	color: var(--av-primary);
	font-weight: 700;
}

/* -------------------------------------------------------------------- Cita */

/*
 * Sin comillas gigantes ni caja: una línea vertical y un cuerpo mayor bastan
 * para que se lea como voz ajena. Es lo que hace un libro.
 */
.av-prosa blockquote {
	padding-inline-start: clamp(1.125rem, 3vw, 1.75rem);
	border-inline-start: 3px solid var(--av-primary);
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
	line-height: 1.55;
	color: var(--av-primary-dark);
}

.av-prosa blockquote p {
	margin-block: 0;
}

.av-prosa blockquote p + p {
	margin-block-start: 1rem;
}

.av-prosa blockquote :is(cite, .wp-block-quote__citation) {
	display: block;
	margin-block-start: 0.875rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	color: var(--av-muted);
}

/* -------------------------------------------------------------- Imágenes */

.av-prosa figure {
	margin-inline: 0;
}

.av-prosa img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--av-radius);
}

.av-prosa figcaption {
	margin-block-start: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--av-muted);
}

/*
 * «Ancho» y «a pantalla completa» dentro del artículo.
 *
 * El bloque de contenido usa disposición en flujo, así que estas dos anchuras
 * se resuelven aquí. Funcionan porque la columna de texto está centrada en la
 * página: `50% - 50vw` mide desde su centro, que es también el de la ventana.
 */
@media (width >= 62rem) {
	.av-prosa > .alignwide {
		width: calc(100% + 8rem);
		max-width: none;
		margin-inline: -4rem;
	}
}

.av-prosa > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.av-prosa > .alignfull img {
	border-radius: 0;
}

/* --------------------------------------------------------------- Separador */

.av-prosa hr {
	block-size: 1px;
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
	border: 0;
	background: var(--av-border);
}

/* ----------------------------------------------------------------- Tablas */

.av-prosa .wp-block-table {
	overflow-x: auto;
}

.av-prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.av-prosa :is(th, td) {
	padding: 0.75rem 0.5rem;
	border-block-end: 1px solid var(--av-border);
	text-align: start;
	vertical-align: top;
}

.av-prosa th {
	font-weight: 700;
	color: var(--av-primary-dark);
}

/* ------------------------------------------------------------------ Código */

.av-prosa :is(code, kbd, samp) {
	padding: 0.1em 0.35em;
	border-radius: 6px;
	background: var(--av-surface);
	font-size: 0.9em;
}

.av-prosa pre {
	overflow-x: auto;
	padding: 1rem 1.125rem;
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius-sm);
	background: var(--av-surface);
	font-size: 0.875rem;
	line-height: 1.6;
}

.av-prosa pre code {
	padding: 0;
	background: none;
}

/* ---------------------------------------------------------------------------
   3. Utilidad para marketing

   Un aparte destacado dentro del artículo (un consejo, una advertencia). Se usa
   poniendo la clase `av-destacado` a un grupo desde el panel «Avanzado» del
   editor. Es la ÚNICA clase suelta que se documenta: si hicieran falta más,
   toca un bloque propio, no una lista de clases que nadie recuerda.
   --------------------------------------------------------------------------- */

.av-prosa .av-destacado {
	padding: clamp(1.125rem, 3vw, 1.5rem);
	border: 1px solid var(--av-border);
	border-inline-start: 3px solid var(--av-primary);
	border-radius: var(--av-radius-sm);
	background: var(--av-surface);
	font-size: 1rem;
	line-height: 1.65;
}

.av-prosa .av-destacado > :first-child {
	margin-block-start: 0;
}

.av-prosa .av-destacado > :last-child {
	margin-block-end: 0;
}