/* ===========================================================================
   Template Alinea — lo único que el tema añade al diseño
   ---------------------------------------------------------------------------
   css/styles.css NO se toca: es copia literal del diseño. Aquí va lo poco que
   el tema añade, y solo en el blog: el listado, los archivos de categoría y
   el artículo.

     1 y 2. La paginación pasó del cliente al servidor, y paginate_links()
            mete un elemento que el diseño nunca tuvo.
     3.     La foto del destacado, a todo el alto de la tarjeta. Petición del
            cliente, no del diseño original.
     4.     La tarjeta entera pulsable. Petición del cliente.
     5.     El titular del artículo, un paso más pequeño. Petición del
            cliente.
     6.     Que una palabra larga se parta antes que salirse. El texto del
            blog lo escribe alguien cada semana; el de las cinco páginas está
            medido.

   Cada regla busca su elemento y, donde no lo encuentra, no hace nada: en el
   artículo no hay paginación ni destacado, y en el listado no hay .art-hero.
   Por eso la hoja puede ir entera a las dos vistas sin partirla en ficheros.

   Ningún color nuevo: --soft ya está en :root.
   =========================================================================== */

/* 1. Los puntos suspensivos de la ventana de paginación.
      Ocupan la misma caja que un número (44 × 44) para que la fila mantenga
      su ritmo y los círculos no se muevan al cambiar de página. Van en el
      gris secundario, más callado que el teal de los números: son un
      separador, no un destino. */

.paginacion .dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--soft);
	font-size: .9rem;
	user-select: none;
}

/* 2. Que la fila pueda partirse.
      Medido a 390 px: hay 375 px de sitio; seis números más «Siguiente»
      ocupan 353 y caben, pero siete ocupan 379 y se salen por cuatro píxeles.
      En escritorio sobra ancho y no envuelve nunca, así que esta regla solo
      actúa en pantallas estrechas. El gap de .5rem ya separa las dos filas. */

.paginacion {
	flex-wrap: wrap;
}

/* ===========================================================================
   3. La foto del artículo destacado, a todo el alto de la tarjeta
   ---------------------------------------------------------------------------
   El diseño la dejaba con su proporción 1200/630 y `align-items: center`, así
   que en escritorio la columna de la foto quedaba más baja que la de texto y
   sobraba blanco arriba y abajo. Petición del cliente: que llene la tarjeta.

   Se saca del flujo con position:absolute para que NO aporte altura. Si se
   deja en el flujo con height:100%, la altura de la fila depende de la foto y
   la de la foto depende de la fila: se muerden la cola y la tarjeta se
   desborda —medido, 198 px de más—. Así la altura la sigue mandando la
   columna de texto, que es lo que se quiere.

   El aspect-ratio ya no va en línea en el marcado, va aquí: un estilo en línea
   gana a cualquier hoja y no habría manera de anularlo sin !important.

   Por debajo de 861 px la rejilla pasa a una columna y la foto vuelve a su
   proporción: ahí no hay columna de texto al lado de la que tomar el alto.
   =========================================================================== */

.post-dest-media {
	position: relative;
}

.post-dest-media .foto-slot {
	aspect-ratio: 1200 / 630;
}

@media (min-width: 861px) {
	.post-dest {
		align-items: stretch;
	}

	.post-dest-media .foto-slot {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
}

/* ===========================================================================
   4. Toda la tarjeta pincha, no solo el titular
   ---------------------------------------------------------------------------
   El diseño dejaba el enlace en el <h3>, así que la zona pulsable eran las dos
   o tres palabras del título: la tarjeta se levanta al pasar el ratón —parece
   pulsable entera— y luego el clic no hace nada en el 90 % de su superficie.

   Se resuelve estirando el enlace que YA existe con un ::after que cubre la
   tarjeta. No se envuelve la tarjeta en un <a>: eso metería la foto, la
   píldora y la fecha dentro del enlace, y un lector de pantalla leería todo
   ese bulto como el nombre del enlace en vez del titular.

   El «Leer más» del destacado se queda por encima para conservar su hover;
   lleva al mismo sitio, así que se pise o no da igual.

   Vale igual para los «Artículos relacionados» del pie del artículo: son las
   mismas .post-card, con la diferencia de que ahí la foto es casi toda la
   tarjeta, así que era donde más se notaba que el clic no respondía.
   =========================================================================== */

.post-card,
.post-dest {
	position: relative;
}

.post-card h3 a::after,
.post-dest h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.post-dest .lnk {
	position: relative;
	z-index: 2;
}

/* Que se note que pincha en toda su superficie. */
.post-card:hover,
.post-dest:hover {
	cursor: pointer;
}

/* ===========================================================================
   5. El titular del artículo, un paso más abajo
   ---------------------------------------------------------------------------
   El h1 no tenía tamaño propio: heredaba el global, clamp(2.5rem, 5.6vw,
   4.5rem), pensado para los titulares de campaña de las cinco páginas —«Tu
   visión es tu ventana al mundo»—. Un título de artículo es otra cosa: los
   hay de 99 caracteres, y a 72 px ocupaban 410 px de alto antes de empezar a
   leer. Petición del cliente.

   Se usa la escala del h2, tal cual, sin inventar un número nuevo: es un paso
   que el diseño ya tenía. 50 px en escritorio y 32 en móvil.

   Ojo con lo que NO arregla: el max-width de 22ch escala con la letra, así
   que el título más largo sigue ocupando cinco líneas. Lo que baja es el
   alto, de 410 px a 283.

   El letter-spacing se queda en el del h1 (-.005em): va en em, así que
   encoge solo con la letra.

   Solo el artículo. El hero del blog y los de las cinco páginas no se tocan.
   =========================================================================== */

.art-hero h1 {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
}

/* ===========================================================================
   6. Que una palabra larga se parta antes que salirse
   ---------------------------------------------------------------------------
   El diseño no lleva `overflow-wrap` en ningún sitio, y ahí el blog corre un
   riesgo que las cinco páginas no corren: su texto lo escribe alguien cada
   semana, no está medido de antemano.

   El navegador ya parte por sí solo en los espacios y en las barras de una
   URL —comprobado: una dirección de 95 caracteres cabe en la columna de un
   móvil de 390 px—. Lo que NO parte nunca es una palabra sola más ancha que
   su columna: un nombre químico, un correo largo, un identificador. Cuando
   eso pasa, el párrafo se sale y arrastra la página de lado.

   `anywhere` y no `break-word`: solo `anywhere` reduce también el ancho
   mínimo que la caja le pide a la rejilla, que es lo que hace falta para que
   la tarjeta no empuje a sus vecinas.

   Va donde entra texto que nadie ha medido: el cuerpo del artículo, los
   titulares y extractos de las tarjetas, y el destacado. No se toca el resto
   del sitio, cuyo texto sí está compuesto a mano.
   =========================================================================== */

.art-cuerpo,
.post-card h3,
.post-card p,
.post-dest h3,
.post-dest p {
	overflow-wrap: anywhere;
}