/*
 * Seção "Onde estamos" — V2, PARA REVISÃO. Ver specs/site.md ("Unidades" na
 * Estrutura da Home), specs/design.md ("Cards") e memoria.md ("Home —
 * Seção Presença" / "Onde estamos — substituição").
 *
 * V2 SUBSTITUI a direção V1 ("Presença / Unidades", painel territorial
 * abstrato do Nordeste, linguagem de múltiplas unidades) — decisão
 * registrada em memoria.md, histórico da V1 preservado, não apagado.
 *
 * Direção vigente: uma única localização confirmada (ARPAN, Carpina/PE),
 * exibida através de um embed real do Google Maps (autorizado nesta
 * seção). Sem mapa abstrato, sem linguagem de múltiplas unidades/rede
 * territorial. Seção clara/off-white, conteúdo editorial + mapa como peça
 * visual dominante, integrados na mesma composição (não duas caixas
 * independentes).
 */

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

@media (min-width: 1024px) {
	/*
	 * Revisão premium: esta era a seção com o pior índice conteúdo/padding
	 * medido do "miolo" da Home (~41% da altura da seção era padding puro em
	 * 1920px — o texto + mapa juntos ocupavam menos espaço que o respiro ao
	 * redor). Reduzido ~24%, mais que Reversa/Associados, proporcional ao
	 * excesso medido — não uma redução global. Ver memoria.md.
	 */
	.presenca {
		padding-block: clamp(90px, 7.5vw, 122px);
	}
}

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

@media (min-width: 1024px) {
	/*
	 * Revisão premium: medido em 1920px, a proporção anterior (minmax(340,
	 * 40%) + 1fr) resultava em ~48%/52% — quase um empate visual entre texto
	 * e mapa, contrariando a intenção original documentada de o mapa ser "a
	 * peça visual dominante". Reduzido o teto da coluna de texto para 36% —
	 * o mapa ganha mais peso sem o texto ficar espremido (min-width de
	 * 340px preservado). Ver memoria.md.
	 */
	.presenca__layout {
		grid-template-columns: minmax(340px, 36%) 1fr;
		column-gap: clamp(40px, 5vw, 80px);
		row-gap: var(--space-5);
		grid-template-areas:
			"meta      unidades"
			"headline  unidades"
			"support   unidades"
			".         unidades";
		align-items: start;
	}

	.presenca__unidades {
		align-self: stretch;
	}
}

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

/* "Fluxo que retorna" — mesmo pequeno traço que muda de direção já usado em
   Logística Reversa (não o sistema de estações da Atuação, não uma nova
   linguagem). Consistência entre seções claras da Home. */
.presenca__mark {
	flex: none;
	overflow: visible;
}

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

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

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

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

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

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

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

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

/* Mapa — Google Maps real (embed oficial, sem chave de API), tratado como
   peça editorial: moldura quase invisível (radius discreto + borda muito
   sutil), nunca full-bleed, sempre com margem real em relação à viewport
   (herdada do `.container` do layout). Sem decoração sobre o mapa. */

.presenca__map-frame {
	position: relative;
	width: 100%;
	min-height: 280px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

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

.presenca__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

.presenca__meta,
.presenca__headline,
.presenca__support,
.presenca__cta,
.presenca__map-frame {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

.presenca.is-visible .presenca__headline {
	transition-delay: 90ms;
}

.presenca.is-visible .presenca__support {
	transition-delay: 170ms;
}

.presenca.is-visible .presenca__cta {
	transition-delay: 240ms;
}

.presenca.is-visible .presenca__map-frame {
	transition-delay: 120ms;
}

.presenca.is-visible .presenca__meta,
.presenca.is-visible .presenca__headline,
.presenca.is-visible .presenca__support,
.presenca.is-visible .presenca__cta,
.presenca.is-visible .presenca__map-frame {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.presenca__meta,
	.presenca__headline,
	.presenca__support,
	.presenca__cta,
	.presenca__map-frame {
		opacity: 1;
		transform: none;
		transition: none;
	}

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

/* ============================================================
   Seletor de unidades (atualização: 3 localizações reais)
   ------------------------------------------------------------
   A Home passou a apresentar as TRÊS unidades de recebimento, reutilizando
   exatamente os dados já confirmados na página Logística Reversa
   (arpan_unidades_recebimento()). A composição aprovada — texto à esquerda,
   mapa como peça visual dominante à direita — foi preservada: o que mudou é
   que o mapa agora pertence a uma unidade selecionável.

   Sem três mapas empilhados, sem cards, sem mini-página de Logística
   Reversa: um seletor editorial discreto (numeração + cidade), no mesmo
   idioma visual já usado nas abas de unidades da página interna.
   ============================================================ */

.presenca__unidades {
	grid-area: unidades;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	min-width: 0;
}

/* Seletor — lista editorial vertical no mobile, linha no desktop.
   Nunca vira scroll horizontal: no mobile cada unidade ocupa a linha
   inteira, com filete separando (mesmo padrão das abas de LR no mobile). */
.presenca__tablist {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-border);
}

.presenca__tab {
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text-muted);
	transition:
		color var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease);
}

.presenca__tab-num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	transition: color var(--motion-micro) var(--motion-ease);
}

.presenca__tab-uf {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.presenca__tab:hover,
.presenca__tab:focus-visible {
	color: var(--color-brand-deep);
}

.presenca__tab[aria-selected="true"] {
	color: var(--color-brand-deep);
	font-weight: 600;
	border-bottom-color: var(--color-brand-deep);
}

.presenca__tab[aria-selected="true"] .presenca__tab-num {
	color: var(--color-accent);
}

@media (min-width: 768px) {
	.presenca__tablist {
		flex-direction: row;
		gap: clamp(20px, 2.4vw, 36px);
		border-top: 0;
		border-bottom: 1px solid var(--color-border);
		flex-wrap: wrap;
	}

	.presenca__tab {
		width: auto;
		padding: 0 0 var(--space-3);
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
	}

	/* A sigla do estado é redundante ao lado da cidade quando as três
	   ficam lado a lado — some no desktop para a linha respirar. */
	.presenca__tab-uf {
		display: none;
	}
}

.presenca__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.presenca__panel[hidden] {
	display: none;
}

/* Sem JavaScript os três painéis ficam visíveis: separa um do outro. */
.presenca__panel + .presenca__panel {
	margin-top: var(--space-6);
}

/* O mapa mantém proporção e respiro já aprovados; só deixou de ser um
   item direto do grid da seção. */
.presenca__unidades .presenca__map-frame {
	width: 100%;
	min-height: 260px;
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.presenca__unidades .presenca__map-frame {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

@media (min-width: 1024px) {
	.presenca__unidades .presenca__map-frame {
		aspect-ratio: auto;
		height: clamp(320px, 26vw, 420px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.presenca__tab,
	.presenca__tab-num {
		transition: none;
	}
}