/**
 * Pagina de autor (author.php).
 *
 * Aca vive solo la cabecera del perfil —foto o monograma, nombre, bio, datos
 * duros y temas— y el encabezado de la seccion. La rejilla de resultados, la
 * tarjeta y el paginado son compartidos con la busqueda: tarjeta.css.
 *
 * Los tokens comunes vienen de :root en header.css.
 */

.bt-autor {
	--bt-autor-borde: #dde4f3;
	color: var(--bt-text);
	padding: 0 0 44px;
}

.bt-autor * {
	box-sizing: border-box;
}

/* ---------- perfil ---------- */

.bt-autor__hero {
	background: linear-gradient(180deg, #eef2fa 0%, var(--bt-fondo) 100%);
	border-bottom: 1px solid var(--bt-border);
	padding: 38px 0 30px;
	margin-bottom: 30px;
}

.bt-autor__perfil {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

/* La foto y el monograma comparten caja: el circulo no crece ni se achica con
   el texto de al lado, y la cabecera no se mueve segun haya foto cargada o no. */
.bt-autor__avatar,
.bt-autor__foto {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	margin: 4px 0 0;
	border-radius: 50%;
	border: 1px solid #cfe0ff;
	background: var(--bt-accent-light);
}

.bt-autor__avatar {
	display: block;
	/* La foto puede venir de cualquier lado: se encuadra al circulo en vez de
	   deformarse. */
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(16, 29, 66, .12);
}

/* Monograma: cuando no hay foto, las iniciales dicen lo mismo sin pedir una
   imagen. */
.bt-autor__foto {
	display: grid;
	place-items: center;
	color: var(--bt-accent-dark);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
}

.bt-autor__intro {
	flex: 1 1 auto;
	min-width: 0;
}

.bt-autor__rol {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--bt-accent-light);
	color: var(--bt-accent-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bt-autor__nombre {
	margin: 0 0 10px;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.bt-autor__bio {
	margin: 0;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--bt-muted);
}

/* ---------- datos duros ---------- */

.bt-autor__datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
}

/* El numero manda y la etiqueta lo explica: por eso se dan vuelta en pantalla.
   El orden del marcado no cambia, que es el que lee un lector de pantalla. */
.bt-autor__dato {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	padding: 12px 14px;
	background: var(--bt-bg);
	border: 1px solid var(--bt-autor-borde);
	border-radius: 12px;
}

.bt-autor__dato dt {
	font-size: 12px;
	line-height: 1.3;
	color: var(--bt-muted);
}

.bt-autor__dato dd {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
}

/* ---------- lo que cubre ---------- */

.bt-autor__rotulo {
	margin: 24px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bt-muted);
}

.bt-autor__temas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bt-autor__temas a {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--bt-autor-borde);
	background: var(--bt-bg);
	color: var(--bt-text);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}

.bt-autor__temas a:hover,
.bt-autor__temas a:focus-visible {
	border-color: var(--bt-accent);
	color: var(--bt-accent-dark);
	background: var(--bt-accent-light);
}

/* Las marcas se distinguen de los temas sin depender solo del color. */
.bt-autor__tema--marca {
	font-weight: 600;
}

/* ---------- encabezado del listado ---------- */

.bt-autor__sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px;
}

.bt-autor__sec-title {
	margin: 0;
	font-size: clamp(19px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.bt-autor__sec-bajada {
	margin: 0;
	font-size: 13px;
	color: var(--bt-muted);
}

.bt-autor__vacio {
	margin: 0;
	font-size: 15px;
	color: var(--bt-muted);
}

/* ---------- adaptaciones ---------- */

@media (max-width: 559px) {
	.bt-autor__perfil {
		gap: 14px;
	}

	.bt-autor__avatar,
	.bt-autor__foto {
		width: 68px;
		height: 68px;
	}

	.bt-autor__foto {
		font-size: 24px;
	}
}

@media (min-width: 900px) {
	.bt-autor__datos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: 760px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bt-autor__temas a {
		transition: none;
	}
}