/* =========================================================================
   COMPONENTE — QUOTE
   ========================================================================= */

.moinho-quote {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-md);
	justify-content: space-between;

	margin: 0;
	padding: var(--moinho-space-lg);

	background-color: var(--moinho-color-background);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-card-radius);
	block-size: 100%;
}

.moinho-quote__texto {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-body-lg-size);
	font-weight: var(--moinho-weight-medium);
	line-height: var(--moinho-leading-normal);
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-surface-fg);
	text-wrap: pretty;
}

.moinho-quote__texto p {
	margin: 0;
	max-inline-size: none;
}

/* Aspas tipográficas de verdade, desenhadas pelo CSS para não entrarem
   no texto lido por leitor de tela. */
.moinho-quote__texto p::before { content: "\201C"; }
.moinho-quote__texto p::after { content: "\201D"; }

.moinho-quote__autoria {
	display: flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	padding-block-start: var(--moinho-space-sm);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-quote__foto {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--moinho-radius-circle);
	overflow: hidden;
	background-color: var(--moinho-color-surface);
}

.moinho-quote__avatar {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.moinho-quote__pessoa {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.moinho-quote__nome {
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

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