/*
 * Seção "A ARPAN" — V1, PARA REVISÃO. Ver specs/site.md ("Estrutura da
 * Home"), specs/design.md e memoria.md ("Home — Seção A ARPAN").
 *
 * Mudança de ritmo deliberada em relação ao Hero: o Hero é fotográfico,
 * imersivo e denso; esta seção é clara, editorial, espaçosa e tipográfica.
 * Volta ao grid disciplinado do container (o Hero é a exceção full-bleed).
 * Sem foto, sem card, sem ícones — composição assimétrica com tipografia e
 * espaço como elementos principais.
 */

.about {
	background: var(--color-bg);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.about {
		padding-block: var(--section-space-desktop);
	}
}

.about__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-7);
}

@media (min-width: 1024px) {
	.about__grid {
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(16px, 2.5vw, 40px);
		row-gap: 0;
		align-items: start;
	}
}

/* Identificador editorial — rail estreito à esquerda no desktop */

.about__intro {
	display: flex;
	align-items: center;
	gap: 12px;
}

@media (min-width: 1024px) {
	.about__intro {
		grid-column: 1 / 4;
		grid-row: 1;
		/* Alinha opticamente com a linha de capitulares da headline. */
		margin-top: 0.5em;
	}
}

.about__mark {
	width: 28px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-accent);
	flex: none;
}

.about__label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

/* Headline — presença editorial, deliberadamente menor que a do Hero */

.about__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--color-text);
	/*
	 * Revisão premium: teto elevado de 3.75rem para 3.9rem (~63px em telas
	 * grandes) — presença um pouco maior, mas ainda visivelmente abaixo do
	 * teto do Hero (~65,6px em 1920px), preservando a hierarquia Hero >
	 * "A ARPAN" pedida explicitamente. O ganho principal de presença vem do
	 * max-width abaixo: 20ch forçava a headline a quebrar em 3 linhas curtas
	 * mesmo em telas grandes, apesar da coluna do grid ter espaço de sobra —
	 * 26ch permite 2 linhas mais longas e monumentais na maioria das
	 * larguras desktop, sem alterar o grid, a fonte ou a cor. Ver memoria.md.
	 */
	font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.9rem);
	max-width: 26ch;
}

@media (min-width: 1024px) {
	.about__headline {
		grid-column: 4 / 13;
		grid-row: 1;
	}
}

.about__accent {
	color: var(--color-brand);
}

/* Corpo — texto de apoio + CTA, coluna complementar mais estreita que a headline */

.about__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	max-width: 46ch;
}

@media (min-width: 1024px) {
	.about__body {
		grid-column: 4 / 9;
		grid-row: 2;
		margin-top: var(--space-7);
	}
}

.about__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.65;
	color: var(--color-text);
}

.about__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--motion-micro) var(--motion-ease),
		gap var(--motion-micro) var(--motion-ease);
}

.about__cta:hover,
.about__cta:focus-visible {
	border-bottom-color: var(--color-brand-deep);
	gap: 12px;
}

.about__cta-arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.about__cta:hover .about__cta-arrow,
.about__cta:focus-visible .about__cta-arrow {
	transform: translateX(3px);
}

/* Revelação discreta ao entrar na viewport — ver main.js (IntersectionObserver) */

.about__intro,
.about__headline,
.about__body {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

.about.is-visible .about__intro {
	transition-delay: 0ms;
}

.about.is-visible .about__headline {
	transition-delay: 90ms;
}

.about.is-visible .about__body {
	transition-delay: 180ms;
}

.about.is-visible .about__intro,
.about.is-visible .about__headline,
.about.is-visible .about__body {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.about__intro,
	.about__headline,
	.about__body {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.about__cta,
	.about__cta-arrow {
		transition: none;
	}
}


/* ============================================================
   Dr. Arpan — personagem fornecido pela ARPAN
   ------------------------------------------------------------
   Ocupa as colunas livres à direita do texto de apoio (a composição já
   deixava esse espaço em branco), sem alterar o grid nem as colunas de
   headline/corpo. O fundo do arquivo é branco puro: `mix-blend-mode:
   multiply` o dissolve no off-white da seção, sem recorte destrutivo da
   imagem original. Nenhum ancestral da imagem usa transform/opacity (isso
   isolaria o blend); só a própria <img> é revelada.
   Base mobile: abaixo do corpo, pequeno, alinhado à esquerda do conteúdo.
   ============================================================ */

.about__dr {
	margin: var(--space-6) 0 0;
	width: min(210px, 58%);
}

.about__dr-img {
	display: block;
	width: 100%;
	height: auto;
	/* Recorte inferior (CSS): descarta só a faixa final da camisa e os
	   cantos marrons do arquivo — o personagem termina sobre um filete. */
	aspect-ratio: 920 / 1110;
	object-fit: cover;
	object-position: 50% 0;
	mix-blend-mode: multiply;
	/* O arquivo traz 1px de borda acinzentada na lateral direita e ruído de
	   compressão nas bordas: o personagem ocupa só ~16%–86% da largura e
	   ~10% abaixo do topo, então desvanecer as bordas externas é seguro e
	   elimina qualquer "caixa" visível ao redor dele. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 100%);
	mask-composite: intersect;
	border-bottom: 1px solid var(--color-border);
}

.about__dr-legenda {
	margin-top: var(--space-3);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

@media (min-width: 1024px) {
	.about__dr {
		grid-column: 10 / 13;
		grid-row: 2;
		justify-self: end;
		align-self: start;
		margin: 0;
		/* Escala própria, abaixo do corpo do texto: o personagem acompanha a
		   composição, não disputa com a headline. */
		width: clamp(200px, 19vw, 270px);
	}
}

/* Revelação discreta, alinhada às demais peças da seção (só a <img>). */
.about__dr-img,
.about__dr-legenda {
	opacity: 0;
	transition: opacity var(--motion-reveal) var(--motion-ease);
}

.about.is-visible .about__dr-img,
.about.is-visible .about__dr-legenda {
	opacity: 1;
	transition-delay: 260ms;
}

@media (prefers-reduced-motion: reduce) {
	.about__dr-img,
	.about__dr-legenda {
		opacity: 1;
		transition: none;
	}
}