/* =======================================================================
   MAPA DE EMPREENDIMENTOS — mapa interativo com todos os
   empreendimentos da J.E Vargas + lista sincronizada
   ======================================================================= */

/* ---------------------------------------------------------------------
   BARRA DE CONTEXTO — pensada como uma ferramenta de trabalho, não
   uma página de vendas: título + contagem real de empreendimentos
   numa barra fina, sem parágrafo de descrição (o mapa já se explica
   sozinho — fotos, etiquetas de fase, cards). O mapa é o conteúdo
   principal da página, então ele que deve dominar a tela.
   --------------------------------------------------------------------- */
.mp-toolbar {
	background: #0E3B2D; margin-top: -211px; position: relative;
}
/* Nessa página, o header já carrega reduzido (ver includes/header.php)
   — sem transparência sobrepondo o conteúdo, então a barra não precisa
   do offset negativo pensado pro header grande. Só a partir de 668px
   (mesmo motivo do padding-top no body — ver header.php) */
@media (min-width: 668px) {
	body[data-header-sempre-reduzido] .mp-toolbar { margin-top: 0; }
}
/* Em mobile, o header continua transparente/grande (o estado reduzido
   não tem efeito visual abaixo de 668px), mas com altura real maior
   (~327px) que o padrão do site (211px) — ajustado junto com o
   padding-top do body pra continuar cancelando certinho */
/* (o cabeçalho no celular tem ~117px desde a correção da 7.95; o body já
   compensa essa altura, então a barra não precisa de offset nenhum) */
@media (max-width: 667px) {
	body[data-header-sempre-reduzido] .mp-toolbar { margin-top: 0; }
}
/* Topo da página como o cabeçalho de uma prancha cartográfica: coordenadas
   da península + título à esquerda (alinhado com a logo do cabeçalho) e, à
   direita, a legenda do mapa com a contagem real por fase — nas mesmas
   cores das etiquetas dos cards. Um fio dourado fecha o bloco sobre o mapa.
   Textos compartilhados com a Home: mapa_textos_titulo(). */
.mp-toolbar { border-bottom: 1px solid rgba(200, 169, 106, 0.55); }
.mp-toolbar__inner {
	max-width: 1360px; margin: 0 auto; padding: 24px 43px 22px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 56px;
}
.mp-toolbar__texto { min-width: 0; flex: 1 1 auto; }
.mp-toolbar__coord {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px;
}
.mp-toolbar__eyebrow {
	font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px;
	letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96A;
}
.mp-toolbar__latlng {
	font-family: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px;
	letter-spacing: 0.02em; color: rgba(252, 253, 253, 0.55);
}
.mp-toolbar__title {
	font-family: 'Marcellus', serif; font-weight: 400; font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.12; letter-spacing: -0.005em; color: #FCFDFD; margin: 0; text-wrap: balance;
}
.mp-toolbar__sub {
	font-family: 'Montserrat', sans-serif; font-size: 14.5px; line-height: 1.6;
	color: rgba(252, 253, 253, 0.72); margin: 8px 0 0; max-width: 620px; text-wrap: pretty;
}

/* Legenda (fase → quantidade) */
.mp-legenda { display: flex; gap: 0; margin: 0; flex-shrink: 0; }
.mp-legenda__item {
	padding: 2px 22px; border-left: 1px solid rgba(252, 253, 253, 0.14);
	display: flex; flex-direction: column-reverse; gap: 6px;
}
.mp-legenda__item:first-child { border-left: 0; padding-left: 0; }
.mp-legenda dd {
	margin: 0; font-family: 'Marcellus', serif; font-size: 34px; line-height: 1;
	color: #FCFDFD; font-variant-numeric: tabular-nums;
}
.mp-legenda dt {
	display: flex; align-items: center; gap: 8px; white-space: nowrap;
	font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; color: rgba(252, 253, 253, 0.7);
}
.mp-legenda__cor { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mp-legenda__cor--lancamento { background: #C8A96A; }
.mp-legenda__cor--futuro { background: transparent; box-shadow: inset 0 0 0 1.5px #C8A96A; }
.mp-legenda__cor--construcao { background: #B0703A; }
.mp-legenda__cor--entregue { background: #0E3B2D; box-shadow: 0 0 0 1.5px rgba(252, 253, 253, 0.65); }

@media (max-width: 1024px) {
	.mp-toolbar__inner { flex-direction: column; align-items: flex-start; padding: 26px 24px 22px; gap: 18px; }
	.mp-legenda__item { padding: 2px 16px; }
	.mp-legenda dd { font-size: 28px; }
}
@media (max-width: 480px) {
	.mp-toolbar__inner { padding: 18px 16px 16px; gap: 14px; }
	.mp-toolbar__coord { margin-bottom: 8px; }
	.mp-toolbar__latlng { font-size: 10.5px; }
	.mp-toolbar__title { font-size: 24px; }
	/* no celular o mapa é a prioridade: subtítulo sai, legenda numa linha só */
	.mp-toolbar__sub { display: none; }
	.mp-legenda { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
	.mp-legenda__item { padding: 0 10px; gap: 4px; }
	.mp-legenda dd { font-size: 22px; }
	.mp-legenda dt { font-size: 9.5px; letter-spacing: 0.04em; gap: 6px; }
	.mp-legenda__cor { width: 7px; height: 7px; }
}

/* ---------------------------------------------------------------------
   LAYOUT (lista + mapa lado a lado no desktop)
   --------------------------------------------------------------------- */
.mp-wrap { background: #F6F4EF; padding: 0; }
.mp-layout {
	display: grid; grid-template-columns: 400px 1fr;
	height: calc(100vh - 90px); min-height: 560px; max-height: 860px;
}
.mp-lista {
	overflow-y: auto; padding: 16px; background: #F6F4EF;
	border-right: 1px solid #E7E3DA;
}
.mp-lista__vazio {
	font-family: 'Montserrat', sans-serif; font-size: 14px; color: #7A7A7A;
	text-align: center; padding: 40px 20px;
}
.mp-mapa-col { position: relative; }
.mp-mapa { width: 100%; height: 100%; background: #E7E3DA; }

/* A altura fixa acima (calc(100vh - 90px)) partia de uma estimativa
   de "90px de header+resto" que não é mais válida — o header (fixo)
   e o rodapé têm alturas diferentes dependendo do contexto, e a soma
   real (header + hero + rodapé) costuma passar bem dos 90px
   assumidos, sobrando conteúdo além da tela. Isso fazia a PÁGINA
   inteira ganhar scroll próprio (além do scroll interno da lista),
   e como o cabeçalho é fixo, ao rolar a página os controles de zoom
   do mapa (que ficam no topo do container) ficavam por baixo dele —
   o "controle de zoom bugado entrando no menu" relatado pelo
   cliente. Corrigido com flexbox: a página vira uma coluna
   (header hero mapa+lista rodapé), e o bloco do mapa ocupa
   exatamente o espaço que sobra — nunca mais nem menos — sem
   depender de nenhum número fixo que precise ser recalculado toda
   vez que o header, o hero ou o rodapé mudam de altura. Só a partir
   de 901px: abaixo disso, o layout já era diferente (lista e mapa
   empilhados, altura automática), sem esse problema. */
@media (min-width: 901px) {
	body.page-mapa-empreendimentos-page {
		display: flex; flex-direction: column; min-height: 100vh;
	}
	body.page-mapa-empreendimentos-page .mp-wrap {
		flex: 1 1 0; min-height: 340px; display: flex; flex-direction: column;
	}
	body.page-mapa-empreendimentos-page .mp-layout {
		flex: 1 1 0; min-height: 0; height: auto; max-height: none;
		grid-template-rows: 1fr;
	}
	/* Sem isso, o comportamento padrão de item de grid (min-height:auto)
	   faz a LINHA inteira do grid crescer pra caber os 28 cards da
	   lista sem cortar nada — "puxando" o mapa junto pra uma altura
	   gigante, em vez de a lista ter scroll interno normal. */
	body.page-mapa-empreendimentos-page .mp-lista,
	body.page-mapa-empreendimentos-page .mp-mapa-col {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------
   CARD na lista lateral — retangular, borda quase invisível, e uma
   barra de destaque dourada na lateral esquerda que "acende" no
   hover/seleção (em vez do contorno grosso ao redor de tudo). Formato
   pensado pra parecer um painel de mapa profissional (tipo Google
   Maps Business ou um dashboard SaaS), não um botão fofinho.
   --------------------------------------------------------------------- */
.mp-card {
	position: relative;
	display: flex; gap: 14px; width: 100%; text-align: left;
	background: #FFFFFF !important; border: 1px solid #E8E6E0 !important; border-radius: 12px !important;
	padding: 12px !important; margin-bottom: 10px; cursor: pointer;
	font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important;
	text-transform: none !important; color: inherit !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mp-card::before {
	content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
	background: #C8A96A; border-radius: 0 3px 3px 0;
	transform: scaleY(0); transform-origin: center;
	transition: transform 0.18s ease;
}
.mp-card:hover {
	background: #FFFFFF !important; border-color: #D8D4C8 !important;
	box-shadow: 0 2px 10px rgba(14,59,45,0.06);
}
.mp-card:hover::before { transform: scaleY(0.55); }
.mp-card.is-ativo {
	background: #FBF9F4 !important; border-color: #C8A96A !important;
	box-shadow: 0 4px 16px rgba(200,169,106,0.18);
}
.mp-card.is-ativo::before { transform: scaleY(1); }
.mp-card__img {
	flex-shrink: 0; width: 72px; height: 72px; border-radius: 9px !important;
	background-size: cover; background-position: center; background-color: #E7E3DA;
}
.mp-card__body { min-width: 0; padding-top: 1px; }
.mp-card__badge {
	display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 700;
	font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 20px !important; color: #FCFDFD; margin-bottom: 5px;
}
.mp-card__badge--lancamento { background: #C8A96A; color: #0E3B2D; }
.mp-card__badge--futuro { background: rgba(14,59,45,0.85); border: 1px solid #C8A96A; }
.mp-card__badge--construcao { background: #B0703A; }
.mp-card__badge--entregue { background: #0E3B2D; }
.mp-card__nome {
	font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em;
	color: #14261F; margin: 0 0 3px; line-height: 1.3; text-transform: uppercase;
}
.mp-card__info {
	font-family: 'Montserrat', sans-serif; font-size: 12px; color: #5C6B62;
	margin: 0 0 2px;
}
.mp-card__local {
	font-family: 'Montserrat', sans-serif; font-size: 11.5px; color: #9CA39D;
	margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---------------------------------------------------------------------
   PIN customizado no mapa (estilo do popup nativo do Leaflet)
   --------------------------------------------------------------------- */
.leaflet-popup-content-wrapper { border-radius: 10px; }

/* ---------------------------------------------------------------------
   POPUP flutuante (card ao clicar num pino) — arrastável: pedido
   explícito do cliente, pra poder tirar o card de cima do mapa
   segurando em qualquer parte dele e movendo pra outro lugar da tela.
   Redesenhado: foto em tela cheia até a borda, badge flutuando sobre
   ela, botão fechar em vidro fosco, informações com ícones em vez de
   texto corrido, traço dourado fino separando do bloco de botões —
   mesma linguagem visual da lista lateral (branco limpo + acento
   dourado), num formato mais "cartão de produto" que "balão de mapa".
   --------------------------------------------------------------------- */
.mp-popup {
	position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%);
	width: min(92vw, 380px); background: #FFFFFF !important; border-radius: 16px !important;
	box-shadow: 0 24px 56px rgba(14,59,45,0.28); overflow: hidden;
	cursor: grab; touch-action: none;
}
.mp-popup.is-arrastando { cursor: grabbing; box-shadow: 0 30px 68px rgba(14,59,45,0.38); transition: none; }
.mp-popup[hidden] { display: none; }

.mp-popup__media { position: relative; }
.mp-popup__img {
	width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center;
	background-color: #E7E3DA;
}
.mp-popup__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14,59,45,0.28) 0%, rgba(14,59,45,0) 32%, rgba(14,59,45,0) 100%);
	pointer-events: none;
}
.mp-popup__badge {
	position: absolute; top: 14px; left: 14px; z-index: 1;
	display: inline-block; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important;
	font-size: 10px !important; letter-spacing: 0.05em; text-transform: uppercase !important;
	padding: 4px 10px !important; border-radius: 20px !important; margin: 0 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.mp-popup__fechar {
	position: absolute; top: 12px; right: 12px; z-index: 1;
	width: 32px; height: 32px; border-radius: 50% !important; border: none !important;
	background: rgba(255,255,255,0.22) !important; color: #FCFDFD !important;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	cursor: pointer; display: flex !important; align-items: center; justify-content: center;
	padding: 0 !important; transition: background 0.18s ease, transform 0.18s ease;
}
.mp-popup__fechar svg { width: 15px; height: 15px; }
.mp-popup__fechar:hover { background: rgba(255,255,255,0.34) !important; transform: scale(1.06); }
.mp-popup__alca {
	position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 1;
	width: 36px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.6);
}

.mp-popup__body { padding: 16px 18px 18px; }
.mp-popup__nome {
	font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16.5px; letter-spacing: 0.005em;
	color: #14261F; margin: 0 0 10px; text-transform: uppercase; line-height: 1.3;
}
.mp-popup__meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mp-popup__meta-item {
	display: flex; align-items: center; gap: 8px;
	font-family: 'Montserrat', sans-serif; font-size: 12.5px; color: #5C6B62;
}
.mp-popup__meta-item svg { width: 15px; height: 15px; flex-shrink: 0; color: #C8A96A; }
.mp-popup__meta-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.mp-popup__divisor {
	height: 1px; background: linear-gradient(90deg, #C8A96A 0%, #EDE4CF 40%, transparent 100%);
	margin: 0 0 16px;
}
.mp-popup__acoes { display: flex; flex-direction: column; gap: 8px; }
.mp-popup__btn {
	display: flex; align-items: center; justify-content: center;
	font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px;
	text-decoration: none; padding: 12px 16px; border-radius: 9px !important;
	transition: all 0.2s ease; cursor: pointer;
}
.mp-popup__btn--primario { background: #1C5741 !important; color: #FCFDFD !important; }
.mp-popup__btn--primario:hover { background: #0E3B2D !important; color: #FCFDFD !important; }
.mp-popup__btn--secundario { background: transparent !important; color: #1C5741 !important; border: 1.5px solid #E8E6E0 !important; }
.mp-popup__btn--secundario:hover { background: #FBF9F4 !important; border-color: #C8A96A !important; color: #1C5741 !important; }

/* ---------------------------------------------------------------------
   RESPONSIVO — no celular, lista vira uma faixa horizontal embaixo
   do mapa, em vez de coluna lateral
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.mp-layout {
		grid-template-columns: 1fr; grid-template-rows: 56vh auto;
		height: auto; max-height: none;
	}
	.mp-mapa-col { order: 1; }
	.mp-mapa { height: 56vh; }
	.mp-lista {
		order: 2; display: flex; overflow-x: auto; overflow-y: hidden;
		border-right: none; border-top: 1px solid #E7E3DA;
		padding: 14px; gap: 10px;
	}
	.mp-card {
		flex-direction: column; width: 200px; flex-shrink: 0; margin-bottom: 0;
	}
	.mp-card__img { width: 100%; height: 110px; }
	/* Em coluna, a barra de destaque muda de lateral esquerda pra topo —
	   continua no mesmo espírito, só adaptada ao formato do card */
	.mp-card::before {
		left: 10px; right: 10px; top: 0; bottom: auto; width: auto; height: 3px;
		border-radius: 0 0 3px 3px;
		transform: scaleX(0); transform-origin: center;
	}
	.mp-card:hover::before { transform: scaleX(0.55); }
	.mp-card.is-ativo::before { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------
   Atribuição do provedor de mapa (CARTO/OpenStreetMap) — obrigatória
   por licença de uso do serviço gratuito, não pode ser removida, mas
   deixada bem mais discreta visualmente (menor, mais sutil).
   --------------------------------------------------------------------- */
.leaflet-control-attribution {
	font-size: 9.5px !important; opacity: 0.55; transition: opacity 0.2s ease;
	background: rgba(255,255,255,0.5) !important;
}
.leaflet-control-attribution:hover { opacity: 1; }