/*
 * Seção "Associados" — V1, PARA REVISÃO. Ver specs/site.md ("Associados"
 * na Estrutura da Home), specs/design.md ("Fotografia", "Cards") e
 * memoria.md ("Home — Seção Associados").
 *
 * Sexto momento do ritmo da Home — muda a narrativa de "quem somos / o que
 * fazemos" para "por que estar junto da ARPAN". Composição assimétrica:
 * fotografia à esquerda (contida no grid, nunca full-bleed), bloco
 * editorial à direita deliberadamente deslocado para baixo em relação à
 * foto — não é a mesma composição 50/50 esticada de Logística Reversa (lá
 * o conteúdo fica à esquerda e os dois blocos têm a mesma altura via
 * stretch; aqui a foto fica à esquerda, o conteúdo é mais estreito e começa
 * mais abaixo). Microbenefícios em lista vertical compacta com divisórias
 * finas — não cards, não a numeração grande + rail da Atuação.
 */

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

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

.associados__layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"meta"
		"headline"
		"support"
		"photo"
		"benefits"
		"cta";
	row-gap: var(--space-6);
}

@media (min-width: 1024px) {
	.associados__layout {
		grid-template-columns: minmax(380px, 56%) minmax(340px, 1fr);
		column-gap: clamp(40px, 5vw, 80px);
		row-gap: var(--space-5);
		grid-template-areas:
			"photo meta"
			"photo headline"
			"photo support"
			"photo benefits"
			"photo cta";
		align-items: start;
	}

	.associados__photo-frame {
		align-self: stretch;
	}

	/* Deslocamento deliberado: o bloco de conteúdo começa mais abaixo do
	   que o topo da fotografia — assimetria intencional, não um 50/50
	   alinhado. */
	.associados__meta {
		margin-top: clamp(24px, 6vw, 72px);
	}
}

.associados__meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	gap: 12px;
}

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

.associados__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);
}

.associados__headline {
	grid-area: headline;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(2.25rem, 1.7rem + 2.3vw, 3.75rem);
	max-width: 14ch;
}

.associados__support {
	grid-area: 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);
	max-width: 42ch;
}

/* Fotografia — contida no grid conscientemente (não full-bleed, nenhuma
   sangria acidental). Radius discreto, sem sombra, sem moldura. */

.associados__photo-frame {
	grid-area: photo;
	position: relative;
	width: 100%;
	min-height: 320px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.associados__photo-frame {
		min-height: 480px;
		aspect-ratio: auto;
		height: 100%;
	}
}

.associados__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Mesma fotografia do Hero/Logística Reversa (fotos/arpan.jpg),
	   enquadramento diferente das duas: aqui o crop fecha nas flores/
	   vegetação em primeiro plano — tratamento mais próximo/humano, coerente
	   com a narrativa de proximidade desta seção, sem repetir a apresentação
	   institucional ampla do Hero nem o crop de estrutura/parede da
	   Logística Reversa. */
	object-position: 26% 62%;
}

/* Microbenefícios — lista vertical compacta, não cards, não a numeração
   grande + rail da Atuação. Rótulo em caixa alta + descrição curta,
   separados por divisórias finas. */

.associados__benefits {
	grid-area: benefits;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.associados__benefit {
	padding-block: var(--space-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.associados__benefit:first-child {
	padding-top: 0;
	border-top: none;
}

.associados__benefit-label {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

.associados__benefit-desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 40ch;
}

.associados__cta {
	grid-area: cta;
	/* Sem isto, um item de grid com display:inline-flex ainda estica para
	   preencher a largura da coluna (comportamento padrão de "stretch" do
	   grid) — o botão precisa manter a largura do próprio conteúdo. */
	justify-self: start;
}

/* Revelação discreta ao entrar na viewport — mesmo padrão já usado nas
   demais seções da Home (IntersectionObserver nativo, ver main.js). */

.associados__meta,
.associados__headline,
.associados__support,
.associados__photo-frame,
.associados__benefits,
.associados__cta {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

.associados.is-visible .associados__headline {
	transition-delay: 90ms;
}

.associados.is-visible .associados__support {
	transition-delay: 170ms;
}

.associados.is-visible .associados__photo-frame {
	transition-delay: 120ms;
}

.associados.is-visible .associados__benefits {
	transition-delay: 220ms;
}

.associados.is-visible .associados__cta {
	transition-delay: 280ms;
}

.associados.is-visible .associados__meta,
.associados.is-visible .associados__headline,
.associados.is-visible .associados__support,
.associados.is-visible .associados__photo-frame,
.associados.is-visible .associados__benefits,
.associados.is-visible .associados__cta {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.associados__meta,
	.associados__headline,
	.associados__support,
	.associados__photo-frame,
	.associados__benefits,
	.associados__cta {
		opacity: 1;
		transform: none;
		transition: none;
	}
}