/*
 * Seção "Atuação" — V1 aprovada como direção visual; V1.1 refinou escala e
 * ocupação horizontal; V1.2 corrige um problema geométrico introduzido pela
 * V1.1 (deslocamento alternado desalinhava número/título/descrição entre
 * linhas; a curva do rail parecia acidental). V1.2 é correção de grid, não
 * nova exploração — ver memoria.md ("Home — Seção Atuação" / "Correção
 * V1.2"). specs/site.md ("Atuação") e specs/design.md ("Fluxo que retorna")
 * continuam a fonte de verdade conceitual.
 *
 * Terceiro momento do ritmo da Home: depois do respiro claro/editorial de
 * "A ARPAN", esta seção volta a aumentar a energia da página — fundo verde
 * profundo, tipografia off-white. "Fluxo que retorna" deixa de ser princípio
 * abstrato e passa a ser o sistema estrutural que conecta os quatro eixos:
 * uma trajetória contínua (rail + estações), não quatro cards, não um
 * infográfico de reciclagem.
 */

.atuacao {
	background: var(--color-brand-deep);
	color: var(--color-off-white);
	padding-block: var(--section-space-mobile);
}

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

/* V1.1 — ocupação horizontal: container um pouco mais largo que o padrão
   (1440px) apenas nesta seção, fluido entre 1024 e telas grandes, para que
   a composição dos quatro eixos use melhor o espaço disponível em desktop.
   Escopo local (classe própria) — não altera o token global do container. */
@media (min-width: 1024px) {
	.atuacao__container {
		max-width: clamp(960px, 92vw, 1680px);
	}
}

/* Abertura editorial — identificador + headline, mesmo princípio visual do
   identificador de "A ARPAN" (mark + label), agora em tom claro sobre o
   fundo escuro — rima estrutural entre as duas seções. */

.atuacao__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-9);
}

@media (min-width: 1024px) {
	.atuacao__intro {
		margin-bottom: var(--space-11);
	}
}

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

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

.atuacao__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: rgba(245, 243, 237, 0.78);
}

.atuacao__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--color-off-white);
	font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
	max-width: 18ch;
}

/* Percurso — rail contínuo + estações. Um só sistema, não quatro blocos
   independentes: a linha (verde secundário, discreta) atravessa a lista
   inteira; cada eixo é uma parada nesse percurso, não um card. */

.atuacao__path {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* V1.2 — o rail volta a ser uma linha vertical reta e precisa em todas as
   resoluções. A curva introduzida na V1.1 (SVG com um deslocamento lateral)
   foi avaliada como parecendo um erro geométrico, não um gesto gráfico
   intencional — removida. "Fluxo que retorna" continua como princípio
   aprovado (ver specs/design.md); sua evolução gráfica fica para uma etapa
   futura em que possa ser desenhada com clareza, sem risco de ambiguidade. */
.atuacao__path::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 12px;
	width: 2px;
	background: rgba(0, 141, 67, 0.4);
	pointer-events: none;
}

.atuacao__axis {
	position: relative;
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 20px;
	padding-block: var(--space-6);
	border-top: 1px solid rgba(245, 243, 237, 0.14);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

.atuacao__axis:first-child {
	border-top: none;
}

.atuacao__axis:last-child {
	padding-bottom: 0;
}

.atuacao__axis.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 1024px) {
	.atuacao__axis {
		padding-block: var(--space-8);
	}
}

/* Estação — ponto sobre o rail. Linha = verde secundário discreto;
   estação ativa (hover/foco) = laranja, único estado que usa o acento. */

.atuacao__axis-station {
	grid-column: 1;
	grid-row: 1;
	width: 12px;
	height: 12px;
	margin-top: 0.5em;
	border-radius: 50%;
	border: 2px solid rgba(0, 141, 67, 0.7);
	background: var(--color-brand-deep);
	transition:
		background var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease),
		transform var(--motion-micro) var(--motion-ease),
		box-shadow var(--motion-micro) var(--motion-ease);
}

.atuacao__axis-content {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

@media (min-width: 1024px) {
	/* V1.2 — grid rigoroso e compartilhado por todas as linhas: como as
	   quatro `.atuacao__axis-content` recebem exatamente as mesmas colunas
	   (mesmos minmax, mesmo gap, mesma largura disponível), número, título
	   e descrição compartilham o mesmo eixo X em todas as linhas. O
	   deslocamento alternado da V1.1 (margin-left nas linhas pares) foi
	   removido — era a causa do desalinhamento entre eixos. */
	.atuacao__axis-content {
		display: grid;
		grid-template-columns: minmax(100px, 180px) minmax(280px, 460px) minmax(240px, 1fr);
		column-gap: clamp(28px, 3.4vw, 56px);
		align-items: start;
		gap: 0;
	}

	/* Número reaproxima-se opticamente do título (V1.1) — leve compensação
	   negativa, já que a fonte do número agora é sensivelmente maior. */
	.atuacao__axis-number {
		margin-top: -0.06em;
	}
}

.atuacao__axis-number {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1;
	font-size: clamp(2rem, 1.5rem + 1.9vw, 4rem);
	color: rgba(245, 243, 237, 0.4);
	transition: color var(--motion-micro) var(--motion-ease);
}

.atuacao__axis-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	font-size: clamp(1.5rem, 1.15rem + 1.7vw, 3.25rem);
	color: rgba(245, 243, 237, 0.92);
	transition: color var(--motion-micro) var(--motion-ease);
}

.atuacao__axis-desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.6;
	color: rgba(245, 243, 237, 0.66);
	max-width: 46ch;
	transition: color var(--motion-micro) var(--motion-ease);
}

/* Estado de foco/hover — nunca esconde informação, apenas enfatiza.
   Múltiplos canais (cor + preenchimento + escala do ponto), não só cor. */

.atuacao__axis:hover .atuacao__axis-station,
.atuacao__axis:focus-visible .atuacao__axis-station {
	background: var(--color-accent);
	border-color: var(--color-accent);
	transform: scale(1.4);
	box-shadow: 0 0 0 6px rgba(245, 138, 10, 0.18);
}

.atuacao__axis:hover .atuacao__axis-number,
.atuacao__axis:focus-visible .atuacao__axis-number {
	color: rgba(245, 243, 237, 0.85);
}

.atuacao__axis:hover .atuacao__axis-title,
.atuacao__axis:focus-visible .atuacao__axis-title {
	color: var(--color-off-white);
}

.atuacao__axis:hover .atuacao__axis-desc,
.atuacao__axis:focus-visible .atuacao__axis-desc {
	color: rgba(245, 243, 237, 0.88);
}

.atuacao__axis:focus-visible {
	outline-color: var(--color-off-white);
	outline-offset: 6px;
}

/* Revelação — intro e cada estação, disparadas por IntersectionObserver
   (ver main.js). Sem biblioteca, sem scroll hijacking. */

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

.atuacao.is-visible .atuacao__headline {
	transition-delay: 90ms;
}

.atuacao.is-visible .atuacao__meta,
.atuacao.is-visible .atuacao__headline {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.atuacao__meta,
	.atuacao__headline,
	.atuacao__axis {
		opacity: 1;
		transform: none;
		transition: none;
	}
}