/*
 * Sabia Essa? - author.css
 * Cartao do autor, usado na materia individual e na pagina do autor.
 *
 * Vive fora de article.css porque a pagina de autor nao carrega o CSS da
 * materia: o componente precisa acompanhar os dois contextos sem obrigar
 * nenhuma das duas telas a baixar o que nao usa.
 *
 * Todas as cores vem de theme.json. Nao escreva hexadecimais aqui.
 */

.sabia-essa-authorbox {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr);
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border-radius: var(--se-radius);
}

@media (min-width: 600px) {
	.sabia-essa-authorbox {
		grid-template-columns: 88px minmax(0, 1fr);
	}
}

.sabia-essa-authorbox img {
	border-radius: 50%;
	width: 88px;
	height: 88px;
	object-fit: cover;
}

.sabia-essa-authorbox__name {
	margin: 0;
	font-size: 1.125rem;
}

.sabia-essa-authorbox__role {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sabia-essa-authorbox__email {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

/*
 * "Seguir" e as redes preenchidas. O rotulo some junto com a lista quando o
 * autor nao tem nenhum perfil cadastrado: nunca sobra rotulo sem conteudo.
 */
.sabia-essa-authorbox__follow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.sabia-essa-authorbox__follow-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.sabia-essa-authorbox__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sabia-essa-authorbox__links a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	display: inline-block;
	padding: 0.15rem 0;
}

.sabia-essa-authorbox__bio {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.sabia-essa-authorbox__bio p {
	margin: 0 0 0.6rem;
}

.sabia-essa-authorbox__bio p:last-child {
	margin-bottom: 0;
}

.sabia-essa-authorbox__facts {
	margin: 0.6rem 0 0;
	display: grid;
	gap: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
}

.sabia-essa-authorbox__facts dt {
	font-weight: 700;
	display: inline;
}

.sabia-essa-authorbox__facts dd {
	display: inline;
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.sabia-essa-authorbox__all {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ------------------------------------------- Variante da pagina do autor */

/*
 * Na tela do autor o cartao e a apresentacao principal: foto quadrada maior,
 * sem fundo de caixa e com a biografia em largura de leitura confortavel.
 */
.sabia-essa-authorbox--page {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	padding: 0;
	background: none;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 600px) {
	.sabia-essa-authorbox--page {
		grid-template-columns: 128px minmax(0, 1fr);
	}
}

.sabia-essa-authorbox--page img {
	border-radius: var(--se-radius);
	width: 128px;
	height: 128px;
}

.sabia-essa-authorbox--page .sabia-essa-authorbox__name {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	line-height: 1.15;
}

.sabia-essa-authorbox--page .sabia-essa-authorbox__bio {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 68ch;
	font-size: inherit;
}

.sabia-essa-authorbox__sep {
	margin-block: var(--wp--preset--spacing--40);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}