/*
Cards de post (template-parts/card.php) y paginación.
Layout de una sola columna. Solo estructura, sin diseño.
Se usa en: home.php, category.php, search.php y author.php.
*/

/* Esto es el listado completo de cards (todas juntas, una abajo de la otra). */
.blog-card-list {
	display: flex;            /* pone las cards en columna (por el flex-direction de abajo) */
	flex-direction: column;   /* hace que el flex vaya vertical en vez de horizontal (una debajo de otra) */
	gap: 24px;                  /* espacio entre una card y la siguiente */
	border: 2px solid red; /* borde de 2px, color rojo, para ubicar este bloque mientras diseñás */
}

/* Esto es UNA card individual completa (el <a> que envuelve imagen + título + extracto,
   toda la card es clickeable). */
.blog-card-link {
	display: flex;             /* pone la imagen y el bloque de texto uno al lado del otro */
	gap: 20px;                   /* espacio entre la imagen y el texto */
	align-items: flex-start;   /* los alinea arriba (no estira la imagen a la altura del texto) */
	text-decoration: none;     /* saca el subrayado que traen los links por defecto */
	color: inherit;             /* hace que el texto use el color normal en vez del azul/violeta típico de un link */
	border: 2px solid blue; /* borde de 2px, color azul, para ubicar este bloque mientras diseñás */
}

/* Esto es la imagen (meta imagen) de la card. */
.blog-card-image {
	flex-shrink: 0;   /* evita que la imagen se achique si el texto de al lado es largo */
	width: 220px;     /* ancho fijo de la miniatura */
	border: 2px solid green; /* borde de 2px, color verde, para ubicar este bloque mientras diseñás */
}

/* Esto es la etiqueta <img> en sí, dentro de ese contenedor. */
.blog-card-image img {
	width: 100%;    /* ocupa todo el ancho del contenedor (220px de arriba) */
	height: auto;   /* la altura se ajusta sola, manteniendo la proporción */
	display: block; /* saca el espacio fantasma que dejan las imágenes por defecto (son inline) */
}

/* Esto es el bloque de texto de la card (título + extracto, sin la imagen). */
.blog-card-body {
	flex: 1;      /* ocupa todo el espacio sobrante (la imagen tiene ancho fijo) */
	min-width: 0; /* evita que este bloque desborde si el texto de adentro es muy ancho */
	border: 2px solid orange; /* borde de 2px, color naranja, para ubicar este bloque mientras diseñás */
}

/* Esto es el título de la card (el h2 con the_title()). */
.blog-card-title {
	margin: 0 0 8px; /* sin margen arriba/costados, un poco de espacio abajo (hacia el extracto) */
	border: 2px solid purple; /* borde de 2px, color violeta, para ubicar este bloque mientras diseñás */
}

/* Esto es el extracto/resumen de la card (the_excerpt(), lo autogenera WP del contenido del post). */
.blog-card-excerpt {
	margin: 0;
	border: 2px solid teal; /* borde de 2px, color teal, para ubicar este bloque mientras diseñás */
}

/* Esto es el bloque de paginación completo (los números/flechas de página, abajo del listado). */
.mitema-pagination {
	margin-top: 32px; /* separación entre el listado de cards y la paginación */
	border: 2px solid deeppink; /* borde de 2px, color rosa fuerte, para ubicar este bloque mientras diseñás */
}

/* Esto es la lista de números de página en sí (la genera the_posts_pagination() de WordPress). */
.mitema-pagination .page-numbers {
	display: inline-flex; /* pone los números en fila, uno al lado del otro */
	gap: 8px;                /* espacio entre un número y el siguiente */
	list-style: none;       /* saca las viñetas por defecto de la lista */
	margin: 0;
	padding: 0;
}