/* =========================================================================
   COMPONENTE — PERSON
   ========================================================================= */

.moinho-person {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
}

.moinho-person__foto {
	position: relative;
	border-radius: var(--moinho-radius-md);
	background-color: var(--moinho-color-primary-soft);
	display: grid;
	place-items: center;
}

.moinho-person__foto img {
	transition: transform var(--moinho-duration-slow) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-person:hover .moinho-person__foto img {
		transform: scale(1.05);
	}
}

/* Sem foto cadastrada, a inicial ocupa o lugar. Melhor que placeholder
   genérico e mantém a grade alinhada. */
.moinho-person__inicial {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-black);
	color: var(--moinho-color-primary-readable);
	opacity: 0.4;
}

.moinho-person__redes {
	position: absolute;
	inset-block-end: var(--moinho-space-2xs);
	inset-inline-start: var(--moinho-space-2xs);

	display: flex;
	gap: var(--moinho-space-3xs);

	opacity: 0;
	transform: translateY(0.5rem);
	transition:
		opacity var(--moinho-duration-normal) var(--moinho-ease-default),
		transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-person:hover .moinho-person__redes,
.moinho-person:focus-within .moinho-person__redes {
	opacity: 1;
	transform: none;
}

/* Sem hover disponível (toque), os links ficam sempre visíveis —
   senão viram conteúdo inalcançável no celular. */
@media (hover: none) {
	.moinho-person__redes {
		opacity: 1;
		transform: none;
	}
}

.moinho-person__redes a {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;

	color: var(--moinho-color-text);
	background-color: var(--moinho-color-background);
	border-radius: var(--moinho-radius-circle);
}

.moinho-person__redes a:hover {
	background-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

.moinho-person__redes .moinho-icon {
	--moinho-icon-size: 1rem;
}

.moinho-person__corpo {
	display: flex;
	flex-direction: column;
}

.moinho-person__nome {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

.moinho-person__cargo {
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
}

/* =========================================================================
   VARIANTE — SOCIO
   =========================================================================
   Mesmo retrato, outra hierarquia: o papel vem antes do nome e o cartao tem
   espaco para uma linha de contexto. Usado na secao de sociedade, onde duas
   pessoas dividem a largura que a grade de equipe dá para seis.
   ========================================================================= */

.moinho-socio {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: var(--moinho-space-md);
	align-items: stretch;
	block-size: 100%;
}

.moinho-socio__foto {
	inline-size: 100%;
	border-radius: var(--moinho-radius-panel);
	background-color: var(--moinho-color-primary-soft);
	display: grid;
	place-items: center;
	box-shadow: var(--moinho-shadow-md);
}

.moinho-socio__foto img {
	transition: transform var(--moinho-duration-slow) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-socio:hover .moinho-socio__foto img {
		transform: scale(1.045);
	}
}

.moinho-socio__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-3xs);
	min-inline-size: 0;
}

.moinho-socio__papel {
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	color: var(--moinho-color-primary-readable);
}

.moinho-socio__nome {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h3-size);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
	font-weight: var(--moinho-role-h3-weight);
	color: var(--moinho-surface-fg);

	/* A regua cresce da esquerda no hover. E o unico movimento do cartao
	   alem do zoom da foto: mais que isso vira animacao de portfolio. */
	padding-block-end: var(--moinho-space-3xs);
	background-image: linear-gradient(var(--moinho-color-primary), var(--moinho-color-primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--moinho-border-width-strong);
	transition: background-size var(--moinho-duration-normal) var(--moinho-ease-out);
	inline-size: fit-content;
}

@media (hover: hover) {
	.moinho-socio:hover .moinho-socio__nome {
		background-size: 2.5rem var(--moinho-border-width-strong);
	}
}

.moinho-socio__texto {
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg-muted);
	max-inline-size: 34ch;
}

.moinho-socio__formacao {
	display: grid;
	gap: var(--moinho-space-xs);
	margin: var(--moinho-space-xs) 0 0;
	padding-block-start: var(--moinho-space-sm);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-socio__formacao-item {
	display: grid;
	gap: var(--moinho-space-3xs);
}

.moinho-socio__formacao dt {
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	color: var(--moinho-surface-fg-muted);
}

.moinho-socio__formacao dd {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg);
}

.moinho-socio__desde {
	font-size: var(--moinho-role-caption-size);
	color: var(--moinho-surface-fg-muted);
	margin-block-start: var(--moinho-space-3xs);
}

.moinho-socio__redes {
	display: flex;
	gap: var(--moinho-space-3xs);
	margin-block-start: var(--moinho-space-3xs);
}

.moinho-socio__redes a {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;

	color: var(--moinho-surface-fg);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-circle);
	transition:
		background-color var(--moinho-duration-normal) var(--moinho-ease-out),
		color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-socio__redes a:hover {
	background-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

.moinho-socio__redes .moinho-icon {
	--moinho-icon-size: 1rem;
}