/**
 * Plantilla de entradas (core/post-template): rejilla del blog con la entrada
 * destacada, lista de resultados de búsqueda y tarjetas de «Seguir leyendo».
 *
 * theme.json no llega a cada <li> de la lista ni puede tratar distinto al
 * primero. Aquí va:
 * - La tarjeta como contenedor del enlace estirado del título
 *   (position: relative) y el foco visible en toda la tarjeta.
 * - La entrada destacada: el primer elemento de la primera página ocupa toda
 *   la fila, con la imagen a la izquierda y el texto a la derecha. Las
 *   páginas siguientes llevan la clase «paged» en <body> y no la tienen.
 *   El tamaño de la imagen se pasa con variables a core-post-featured-image.css.
 * - Las filas de resultados de búsqueda, separadas por una línea.
 * - Las tarjetas blancas de «Seguir leyendo».
 *
 * Las clases del núcleo y las de los hijos se envuelven en :where() para no
 * pasar de una clase de especificidad. La entrada destacada va al final: es
 * la regla más específica del archivo.
 */

/* ===== Rejilla del blog ===== */

.fermento-entradas__texto {

	& > * {
		margin: 0;
	}

	& > * + * {
		margin-block-start: 12px;
	}
}

.fermento-entradas > li {
	--fermento-alto-imagen: 220px;
	--fermento-radio-imagen: var(--wp--preset--border-radius--tarjeta-pequena);
	--fermento-icono: 72px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;

	& > * {
		margin: 0;
	}

	/* Antetítulo, extracto y «Leer más» solo en la entrada destacada. */
	& :where(.fermento-entradas__ultimo),
	& :where(.fermento-entradas__extracto),
	& :where(.fermento-entradas__leer) {
		display: none;
	}

	&:has(:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 6px;
		border-radius: var(--wp--preset--border-radius--tarjeta-pequena);
	}
}

/* ===== Resultados de búsqueda ===== */

.fermento-resultados__lista > li {
	position: relative;
	padding-block: 24px;
	border-block-end: 1px solid var(--wp--preset--color--borde);

	& > * {
		margin: 0;
	}

	& > * + * {
		margin-block-start: 8px;
	}

	&:has(:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}
}

/* ===== Seguir leyendo ===== */

.fermento-relacionadas > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--tarjeta-pequena);
	background: var(--wp--preset--color--fondo);

	& > * {
		margin: 0;
	}

	&:has(:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}
}

/* ===== Entrada destacada: primera de la primera página ===== */

/* stylelint-disable-next-line selector-max-class -- La única señal de «primera página» es la clase paged que WordPress pone en <body> desde la segunda; va dentro de :where() y no suma especificidad. */
:where(body:not(.paged)) .fermento-entradas > li:first-child {
	--fermento-alto-imagen: clamp(240px, 30vw, 420px);
	--fermento-radio-imagen: var(--wp--preset--border-radius--grande);
	--fermento-icono: 120px;
	grid-column: 1 / -1;
	flex-flow: row wrap;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	margin-block-end: clamp(8px, 2vw, 24px);

	& :where(.fermento-entradas__imagen) {
		flex: 1.3 1 420px;
		min-inline-size: 0;
	}

	& :where(.fermento-entradas__texto) {
		flex: 1 1 360px;
		min-inline-size: 0;
	}

	& :where(.fermento-entradas__ultimo) {
		display: block;
	}

	& :where(.fermento-entradas__extracto) {
		display: block;
		margin-block-start: 16px;
		font-size: var(--wp--preset--font-size--grande);
		line-height: 1.6;
	}

	& :where(.fermento-entradas__leer) {
		display: block;
		margin-block-start: 20px;
	}

	& :where(.fermento-entradas__meta > *) {
		color: var(--wp--preset--color--acento-texto);
		font-size: var(--wp--preset--font-size--etiqueta);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	& :where(.fermento-entradas__titulo) {
		font-size: var(--wp--preset--font-size--seccion);
		line-height: 1;
	}

	&:has(:focus-visible) {
		border-radius: var(--wp--preset--border-radius--grande);
	}
}