/**
 * Author badge — estilos BEM namespaced bajo .kuaa-author-badge
 *
 * Todos los valores viven en custom properties del bloque raíz, así que se
 * pueden ajustar desde el CSS personalizado de Elementor sin tocar este
 * archivo (ej: .kuaa-author-badge { --kuaa-author-badge-avatar-size: 56px; }).
 *
 * La paleta por defecto es la del tema oscuro del blog (assets/blog/blog.css),
 * con los colores globales de Elementor como primera opción para que el
 * componente siga al kit del sitio si estos cambian.
 */

.kuaa-author-badge {
	--kuaa-author-badge-gap: 0.75rem;
	--kuaa-author-badge-avatar-size: 2.75rem;
	--kuaa-author-badge-avatar-bg: var(--e-global-color-primary, #00ccf7);
	--kuaa-author-badge-avatar-fg: #0b0e11;
	--kuaa-author-badge-name-fg: #fafafa;
	--kuaa-author-badge-role-fg: #a1a1a1;

	display: flex;
	align-items: center;
	gap: var(--kuaa-author-badge-gap);
}

.kuaa-author-badge *,
.kuaa-author-badge *::before,
.kuaa-author-badge *::after {
	box-sizing: border-box;
}

/* `flex: 0 0 auto` evita que el círculo se aplaste cuando el nombre es largo
   y el badge vive en una columna estrecha. */
.kuaa-author-badge__avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kuaa-author-badge-avatar-size);
	height: var(--kuaa-author-badge-avatar-size);
	border-radius: 50%;
	background-color: var(--kuaa-author-badge-avatar-bg);
	color: var(--kuaa-author-badge-avatar-fg);
}

.kuaa-author-badge__initials {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.kuaa-author-badge__info {
	min-width: 0;
}

/* Reset del margen que el tema/Elementor aplica a <p>: aquí las dos líneas van
   pegadas como en el diseño. */
.kuaa-author-badge__name,
.kuaa-author-badge__role {
	margin: 0;
}

.kuaa-author-badge__name {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.kuaa-author-badge__role {
	font-size: 0.75rem;
	line-height: 1.35;
}