/**
 * Imagen destacada (core/post-featured-image): tarjetas del blog, imagen de
 * cada entrada y foto de la cabecera de los grupos.
 *
 * En la rejilla del blog todas las imágenes tienen el mismo alto y se
 * recortan (object-fit), y la entrada destacada lleva una más alta. Las
 * medidas llegan como variables desde core-post-template.css, que sabe qué
 * tarjeta es la destacada; así este archivo no necesita selectores de dos
 * clases. Los atributos height y aspectRatio del bloque no sirven: escriben
 * un estilo en línea que no cambia según la tarjeta.
 *
 * El recuadro --vacia sustituye a la imagen cuando la entrada no tiene
 * ninguna (inc/listados.php): fondo de tarjeta con el símbolo del Movimiento.
 */

.fermento-entradas__imagen {
	margin: 0;

	& img {
		display: block;
		inline-size: 100%;
		block-size: var(--fermento-alto-imagen, 220px);
		border-radius: var(--fermento-radio-imagen, var(--wp--preset--border-radius--tarjeta-pequena));
		object-fit: cover;
	}
}

.fermento-entradas__imagen--vacia {
	display: grid;
	place-items: center;
	block-size: var(--fermento-alto-imagen, 220px);
	border-radius: var(--fermento-radio-imagen, var(--wp--preset--border-radius--tarjeta-pequena));
	background: var(--wp--preset--color--fondo-tarjeta);

	& img {
		inline-size: var(--fermento-icono, 72px);
		block-size: auto;
		border-radius: 0;
	}
}

/* Imagen de la entrada: alto máximo, recorte y esquinas redondeadas, como en
   el diseño (la variación «Redondeada» solo existe para core/image). */
.fermento-entrada__imagen {

	& :where(.wp-block-post-featured-image) {
		margin-block: 0;
	}

	& :where(.wp-block-post-featured-image img) {
		max-block-size: 560px;
		border-radius: var(--wp--preset--border-radius--grande);
		object-fit: cover;
	}
}

/* Foto de la cabecera de grupo: comparte fila con el texto y se recorta a
   un alto fluido, como en el diseño. */
.fermento-cabecera-grupo__imagen {
	flex: 1 1 420px;
	min-inline-size: 0;
	margin: 0;

	& img {
		display: block;
		inline-size: 100%;
		block-size: clamp(260px, 32vw, 420px);
		border-radius: var(--wp--preset--border-radius--grande);
		object-fit: cover;
	}
}