/**
 * Página individual do membro da diretoria (spec §7.3).
 *
 * Breakpoints iguais aos do Elementor e do Starter Celado:
 *   até 767 · 768–880 · 881–1024 · 1025–1200 · 1201–1366 · 1367–2399 · 2400+
 */

.sn-perfil {
	padding-block: 9rem calc(var(--espacosessao, 200px) * 0.6);
}

.sn-perfil__interno {
	width: min(var(--largurautil, 1280px), 92vw);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Voltar
   -------------------------------------------------------------------------- */

.sn-perfil__voltar {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 4rem;
	padding-block: 0.75rem;
	font-family: var(--sn-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sn-ink-muted);
	transition: color var(--sn-dur-fast) var(--sn-ease);
}

.sn-perfil__voltar:hover,
.sn-perfil__voltar:focus-visible {
	color: var(--sn-accent);
}

/* --------------------------------------------------------------------------
   Topo: foto + identidade
   -------------------------------------------------------------------------- */

/* Enquanto as duas colunas se sustentam, a bio fica na coluna da direita,
   logo abaixo da identidade — a foto continua ancorando a esquerda e o bloco
   de texto não desce para debaixo dela, o que abria um vazio grande ao lado
   do retrato. Abaixo de 1025px tudo empilha e a bio vai para o fim. */
.sn-perfil__topo {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	grid-template-areas:
		"midia identidade"
		"midia bio";
	grid-template-rows: auto 1fr;
	align-items: start;
	column-gap: var(--valordogap, 32px);
	row-gap: 1.75rem;
	padding-block-end: 4rem;
}

.sn-perfil__midia { grid-area: midia; }
.sn-perfil__identidade { grid-area: identidade; }
.sn-perfil__bio { grid-area: bio; }

.sn-perfil__midia {
	position: relative;
	align-self: start;
}

.sn-perfil__moldura {
	position: relative;
}

/* A moldura dourada deslocada dá volume sem sombra, que ficaria pesada no
   fundo escuro. Fica no __moldura, e não no __midia, para cercar apenas o
   retrato — senão ela se estica e passa a envolver também a legenda da
   licença de imagem que vem logo abaixo. */
.sn-perfil__moldura::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 1px solid var(--sn-accent);
	opacity: 0.35;
	pointer-events: none;
}

/* Legenda sob o retrato, apontando para a autorização de uso de imagem da
   pessoa. O respiro do topo passa por fora da moldura deslocada (1.25rem). */
.sn-perfil__licenca {
	margin: 2.75rem 0 0;
	font-family: var(--sn-font-body);
	font-size: 0.8125rem;
	line-height: var(--sn-lh-normal);
	color: var(--sn-ink-muted);
}

.sn-perfil__licenca a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var(--sn-border-strong);
	padding-block-end: 0.15rem;
	transition: color var(--sn-dur-fast) var(--sn-ease),
	            border-color var(--sn-dur-fast) var(--sn-ease);
}

.sn-perfil__licenca a:hover,
.sn-perfil__licenca a:focus-visible {
	color: var(--sn-accent);
	border-block-end-color: var(--sn-accent);
}

.sn-perfil__foto {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}

/* Sem foto de alta o bloco se anuncia, em vez de sumir calado. */
.sn-perfil__foto--pendente {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 10px,
			rgba(248, 248, 246, 0.03) 10px,
			rgba(248, 248, 246, 0.03) 20px
		),
		var(--sn-surface);
	border: 1px dashed var(--sn-border-strong);
	color: var(--sn-ink-faint);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	filter: none;
}

.sn-perfil__cargo {
	margin: 0 0 1rem;
	font-family: var(--sn-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sn-accent);
}

.sn-perfil__nome {
	margin: 0 0 1.5rem;
	font-family: var(--sn-font-display);
	font-size: clamp(2.25rem, 4.5vw, 3.75rem);
	font-weight: var(--sn-fw-light);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sn-ink);
	text-wrap: balance;
}

/* O último bloco da identidade não precisa de margem inferior: ela não separa
   nada e só empurrava a bio 32px para baixo. Vale para o país ou para as
   redes, conforme o que a pessoa tiver preenchido. */
.sn-perfil__identidade > :last-child {
	margin-block-end: 0;
}

.sn-perfil__pais {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 2rem;
	font-size: 0.9375rem;
	color: var(--sn-ink-muted);
}

.sn-perfil__bandeira {
	display: block;
	width: 28px;
	height: auto;
	border: 1px solid var(--sn-border);
}

.sn-perfil__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-perfil__redes a {
	display: inline-block;
	padding-block: 0.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--sn-ink);
	border-block-end: 1px solid var(--sn-border-strong);
	transition: color var(--sn-dur-fast) var(--sn-ease),
	            border-color var(--sn-dur-fast) var(--sn-ease);
}

.sn-perfil__redes a:hover,
.sn-perfil__redes a:focus-visible {
	color: var(--sn-accent);
	border-block-end-color: var(--sn-accent);
}

/* --------------------------------------------------------------------------
   Bio
   -------------------------------------------------------------------------- */

.sn-perfil__bio {
	max-width: var(--sn-container-text);
	margin: 0;
	/* Fio fino separando a bio da identidade dentro da mesma coluna, no lugar
	   da borda que antes fechava o bloco inteiro. */
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--sn-border);
	font-family: var(--sn-font-body);
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--sn-ink-muted);
}

.sn-perfil__bio p {
	margin: 0 0 1.5rem;
}

.sn-perfil__bio p:last-child {
	margin-block-end: 0;
}

.sn-perfil__pendente {
	padding: 1.25rem 1.5rem;
	border-inline-start: 2px solid var(--sn-accent);
	background-color: var(--sn-surface);
	color: var(--sn-ink-muted);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Marcas em que atua
   -------------------------------------------------------------------------- */

.sn-perfil__marcas {
	margin-block-start: 4rem;
	padding-block-start: 3rem;
	border-block-start: 1px solid var(--sn-border);
}

.sn-perfil__subtitulo {
	margin: 0 0 1.5rem;
	font-family: var(--sn-font-body);
	font-size: 0.75rem;
	font-weight: var(--sn-fw-normal);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sn-accent);
}

.sn-perfil__marcas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-perfil__marcas-lista li a,
.sn-perfil__marcas-lista li span {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--sn-ink);
	transition: border-color var(--sn-dur-fast) var(--sn-ease),
	            color var(--sn-dur-fast) var(--sn-ease);
}

.sn-perfil__marcas-lista li a:hover,
.sn-perfil__marcas-lista li a:focus-visible {
	border-color: var(--sn-accent);
	color: var(--sn-accent);
}

.sn-perfil__marcas-lista li span {
	color: var(--sn-ink-faint);
}

/* --------------------------------------------------------------------------
   Anterior / próximo
   -------------------------------------------------------------------------- */

.sn-perfil__nav {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-block-start: 5rem;
	padding-block-start: 2.5rem;
	border-block-start: 1px solid var(--sn-border);
}

.sn-perfil__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-block: 0.5rem;
	text-decoration: none;
	transition: color var(--sn-dur-fast) var(--sn-ease);
}

.sn-perfil__nav-link--proximo {
	text-align: end;
	margin-inline-start: auto;
}

.sn-perfil__nav-rotulo {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sn-accent);
}

.sn-perfil__nav-nome {
	font-family: var(--sn-font-display);
	font-size: 1.25rem;
	font-weight: var(--sn-fw-light);
	color: var(--sn-ink);
	transition: color var(--sn-dur-fast) var(--sn-ease);
}

.sn-perfil__nav-link:hover .sn-perfil__nav-nome,
.sn-perfil__nav-link:focus-visible .sn-perfil__nav-nome {
	color: var(--sn-accent);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Wide — 2400px e acima */
@media (min-width: 2400px) {
	.sn-perfil__bio { font-size: 1.1875rem; }
	.sn-perfil__nav-nome { font-size: 1.5rem; }
}

/* Tablet paisagem — até 1200 */
@media (max-width: 1200px) {
	.sn-perfil__topo { gap: 2rem; }
	.sn-perfil__moldura::before { inset: 1rem -1rem -1rem 1rem; }
}

/* Tablet retrato — até 1024: a foto sobe e ganha proporção mais larga */
@media (max-width: 1024px) {
	/* Sem redução do recuo do topo aqui: o header não encolhe junto com a
	   tela, e 7rem deixava o nome do perfil colado nele. Fica nos 9rem da
	   regra base, igual às demais páginas. */

	/* Vertical: uma coluna só, e a bio passa a ser o último bloco. */
	.sn-perfil__topo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"midia"
			"identidade"
			"bio";
		grid-template-rows: auto auto auto;
		gap: 2.5rem;
		align-items: start;
	}

	.sn-perfil__midia { max-width: 420px; }
	.sn-perfil__foto { aspect-ratio: 1 / 1; }
	.sn-perfil__voltar { margin-block-end: 2.5rem; }
	.sn-perfil__bio { padding-block-start: 0; border-block-start: 0; }
}

/* Celular paisagem — até 880 */
@media (max-width: 880px) {
	.sn-perfil__bio { font-size: 1rem; }
	.sn-perfil__nav { margin-block-start: 3.5rem; }
}

/* Celular retrato — até 767 */
@media (max-width: 767px) {
	.sn-perfil__midia { max-width: none; }
	.sn-perfil__moldura::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
	.sn-perfil__pais { margin-block-end: 1.5rem; }
	.sn-perfil__redes { gap: 1.25rem; }

	.sn-perfil__nav {
		flex-direction: column;
		gap: 2rem;
	}

	.sn-perfil__nav-link--proximo {
		text-align: start;
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sn-perfil__voltar,
	.sn-perfil__redes a,
	.sn-perfil__marcas-lista li a,
	.sn-perfil__nav-link,
	.sn-perfil__nav-nome {
		transition: none;
	}
}