/*
 * Seção "Logística Reversa" — V1.1. Ver specs/site.md ("Logística
 * reversa"), specs/design.md ("Fotografia", "Fluxo que retorna") e
 * memoria.md ("Home — Seção Logística Reversa" / "V1.1").
 *
 * Quarto momento do ritmo da Home. Depois de Atuação (verde profundo,
 * abstrata/sistêmica), esta seção volta ao claro/off-white e ganha
 * personalidade por fotografia + composição, não por sistema gráfico.
 *
 * V1.1: a fotografia deixou de sangrar até a borda da viewport (V1) — a
 * direção criativa avaliou que estava grande e colada demais nas bordas.
 * Agora é um quadro editorial contido dentro do container padrão, com
 * margem real ao redor, radius discreto e borda sutil — texto institucional
 * + fotografia documental cuidadosamente posicionada, não um "card".
 */

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

@media (min-width: 1024px) {
	/*
	 * Revisão premium: o "miolo" da Home (Reversa → Onde estamos →
	 * Associados) estava com espaço negativo desproporcional ao conteúdo
	 * (medido: ~31% da altura da seção era padding puro em 1920px). Reduzido
	 * ~15% em relação ao token padrão (--section-space-desktop), preservando
	 * respiro real — não é a mesma redução aplicada a todas as seções,
	 * apenas às que mediram esse excesso. Ver memoria.md.
	 */
	.reversa {
		padding-block: clamp(100px, 8.5vw, 136px);
	}
}

.reversa__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.reversa__layout {
		display: grid;
		grid-template-columns: 1fr minmax(320px, 42%);
		column-gap: clamp(40px, 5vw, 80px);
		align-items: center;
	}
}

.reversa__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	max-width: 560px;
}

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

/* "Fluxo que retorna" reaparece aqui de forma mínima: em vez do traço reto
   usado em A ARPAN/Atuação, o marcador desta seção é um traço curto que
   muda de direção — um pequeno gesto de "percurso", não uma repetição do
   sistema de estações da Atuação. */
.reversa__mark {
	flex: none;
	overflow: visible;
}

.reversa__mark path {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
}

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

.reversa__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: 16ch;
}

.reversa__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: 46ch;
}

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

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

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

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

/* Mídia — fotografia como quadro editorial contido (V1.1): margem real,
   radius discreto (dentro da faixa 8–12px aprovada), borda sutil, sombra
   muito leve apenas para profundidade. Não é um card — sem fundo, sem
   padding interno, só a moldura da própria fotografia. */

.reversa__media {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	/*
	 * Revisão premium: a sombra anterior (0 24px 48px, blur alto) lia como
	 * "card de dashboard" — inconsistente com o resto do site, onde
	 * fotografia nunca usa sombra perceptível (Associados/Onde estamos não
	 * usam nenhuma). Reduzida a um traço de profundidade quase
	 * imperceptível — a moldura (borda 1px) já basta para separar a foto do
	 * fundo off-white. Ver specs/design.md ("Cards" — sombras extremamente
	 * discretas) e memoria.md.
	 */
	box-shadow: 0 8px 20px -14px rgba(24, 32, 28, 0.14);
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.reversa__media {
		max-width: none;
		margin-inline: 0;
	}
}

/* Mesma fotografia do Hero (fotos/arpan.jpg), reutilizada intencionalmente
   nesta etapa — ver memoria.md. Enquadramento diferente do Hero: crop mais
   gráfico, priorizando a estrutura/parede/vegetação em vez da apresentação
   institucional ampla (mais céu) usada no Hero. */
.reversa__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 58%;
}

/* Microelemento de processo — não é infográfico nem três cards: um selo
   curto e contido, com margem própria em relação à moldura da fotografia
   (não colado nas bordas) para parecer integrado, não "colado depois". */

.reversa__process {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 10px 14px;
	gap: 8px;
	align-items: baseline;
	justify-content: center;
	border-radius: 6px;
	background: rgba(7, 61, 43, 0.92);
	color: var(--color-off-white);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.reversa__process li {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.reversa__process li:not(:last-child)::after {
	content: "→";
	color: rgba(245, 243, 237, 0.45);
	font-weight: 400;
}

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

.reversa__meta,
.reversa__headline,
.reversa__support,
.reversa__cta,
.reversa__media {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

.reversa.is-visible .reversa__headline {
	transition-delay: 90ms;
}

.reversa.is-visible .reversa__support {
	transition-delay: 170ms;
}

.reversa.is-visible .reversa__cta {
	transition-delay: 240ms;
}

.reversa.is-visible .reversa__media {
	transition-delay: 120ms;
}

.reversa.is-visible .reversa__meta,
.reversa.is-visible .reversa__headline,
.reversa.is-visible .reversa__support,
.reversa.is-visible .reversa__cta,
.reversa.is-visible .reversa__media {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reversa__meta,
	.reversa__headline,
	.reversa__support,
	.reversa__cta,
	.reversa__media {
		opacity: 1;
		transform: none;
		transition: none;
	}

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