/*
CSS de author.php.
Hero del autor + layout de dos columnas. Solo estructura, sin diseño.
*/

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

/* Esto es la imagen del hero en sí. */
#author-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 el avatar + el nombre del autor, uno al lado del otro. */
#author-hero-info {
	display: flex;        /* pone el avatar y el h1 en fila, uno al lado del otro */
	align-items: center;  /* los centra verticalmente entre sí */
	gap: 16px;              /* espacio entre el avatar y el nombre */
	margin-top: 12px;      /* separación entre la imagen del hero y este bloque */
	border: 2px solid maroon; /* borde de 2px, color marrón oscuro, para ubicar este bloque mientras diseñás */
}

/* Esto es específicamente el avatar (la foto redonda) dentro de ese bloque. */
#author-hero-info img {
	border-radius: 50%; /* esto es lo que la hace circular */
	flex-shrink: 0;      /* evita que el avatar se achique si el nombre es muy largo */
}

/* Esto evita que el NOMBRE se salga del cuadro cuando el texto es largo
   (es hijo de un flex, por defecto no se achica solo — con esto sí). */
#author-hero-info h1 {
	min-width: 0;               /* le permite al h1 achicarse en vez de empujar el layout */
	overflow-wrap: break-word;  /* si el nombre no tiene espacios, corta en vez de desbordar */
	word-break: break-word;     /* mismo propósito, refuerzo por compatibilidad */
}

/* Esto es la sección con el avatar/nombre + la bio juntos, debajo de la imagen del hero. */
#author-hero-text {
	border: 2px solid darkcyan; /* borde de 2px, color cian oscuro, para ubicar este bloque mientras diseñás */
}

/* Esto es específicamente el párrafo de la bio ("Biografía"/descripción del perfil de usuario). */
#author-hero-description {
	margin-top: 12px;               /* separación entre el avatar/nombre y la bio */
	border: 2px solid coral;        /* borde de 2px, color coral, para ubicar este bloque mientras diseñás */
	overflow-wrap: break-word;      /* si hay una palabra/URL muy larga, la corta en vez de desbordar */
	word-break: break-word;         /* mismo propósito, refuerzo por compatibilidad */
}

/* Esto es el layout de dos columnas: el listado de posts del autor + el aside, lado a lado.
   Esta misma clase .post-layout se repite igual en search.php, category.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 indigo; /* borde de 2px, color índigo, para ubicar este bloque mientras diseñás */
}

/* Esto es la columna con el listado de posts de este autor (las cards + la paginación). */
#author-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 gold; /* borde de 2px, color dorado, para ubicar este bloque mientras diseñás */
}