/*
CSS de category.php.
Solo estructura (hero + layout de dos columnas). Sin diseño.
*/

/* Esto es la sección que contiene SOLO la imagen del hero de la categoría. */
#category-hero {
	border: 2px solid teal; /* borde de 2px, color teal, para ubicar este bloque mientras diseñás */
}

/* Esto es la imagen del hero en sí. */
#category-hero-image {
	width: 100%;    /* ocupa todo el ancho disponible */
	height: auto;   /* la altura se ajusta sola, manteniendo la proporción de la imagen */
	display: block; /* saca el espacio fantasma que dejan las imágenes por defecto (son inline) */
}

/* Esto es la sección con el título + la descripción de la categoría, debajo de la imagen. */
#category-hero-text {
	margin-top: 12px; /* separación entre la imagen y este bloque de texto */
	border: 2px solid deeppink; /* borde de 2px, color rosa fuerte, para ubicar este bloque mientras diseñás */
}

/* Esto es específicamente el párrafo/HTML de la descripción de la categoría (la que
   cargás en Entradas -> Categorías, campo "Descripción"). */
#category-hero-description {
	margin-top: 12px;              /* separación entre el título (h1) y la descripción */
	overflow-wrap: break-word;     /* si hay una palabra/URL muy larga, la corta en vez de desbordar */
	word-break: break-word;        /* mismo propósito que la línea de arriba, refuerzo por compatibilidad */
}

/* Esto es el layout de dos columnas: el listado de posts + el aside, lado a lado.
   Esta misma clase .post-layout se repite igual en search.php, author.php y single.php. */
.post-layout {
	display: flex;           /* pone los hijos directos en fila, uno al lado del otro */
	align-items: flex-start; /* los alinea arriba (no estira ambas columnas a la misma altura) */
	gap: 40px;                 /* espacio entre el listado de posts y el aside */
	border: 2px solid brown; /* borde de 2px, color marrón, para ubicar este bloque mientras diseñás */
}

/* Esto es la columna con el listado de posts de esta categoría (las cards + la paginación). */
#category-posts {
	flex: 1;      /* ocupa todo el espacio sobrante (el aside tiene ancho fijo en aside.css) */
	min-width: 0; /* evita que esta columna desborde si el contenido de adentro es muy ancho */
	border: 2px solid olive; /* borde de 2px, color oliva, para ubicar este bloque mientras diseñás */
}