/* ==========================================================================
   Maringá Faz Mais — Home v2, direção de arte "blueprint institucional"
   (branch teste-design). Carregado só na home (functions.php), depois do
   main.css: herda o reset, os tokens de cor e o header/footer. Mobile first.

   Corpo todo claro, alternando off-white e branco puro: banner (foto +
   scrim lateral navy) → números (off-white) → destaques (branco) → vídeo
   (off-white) → mapa (branco) → footer (azul institucional). Navy é só
   tinta; a assinatura azul/ciano/verde do menu se repete em barras e
   eyebrows.
   ========================================================================== */

/* O header é fixo: a home abre com o banner logo abaixo dele.
   Logado, a admin bar não precisa de compensação aqui: o WordPress já
   desloca o documento inteiro (html { margin-top: 32px/46px }) — somar de
   novo criava uma faixa escura entre o header e o banner. */
.mfm-home {
	padding-top: var(--altura-header);
	background: var(--off-white);
}

/* ---------- Cabeçalho padrão das seções ----------
   Alinhado à esquerda sobre uma hairline — o motif de planta/obra.
   As seções claras sobrescrevem --sec-hairline e --sec-eyebrow. */

.mfm-secao-cabecalho {
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sec-hairline, var(--hairline-escuro));
	text-align: left;
}

.mfm-secao-cabecalho__eyebrow {
	color: var(--sec-eyebrow, rgba(255, 255, 255, 0.55));
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}

.mfm-secao-cabecalho__titulo {
	margin-top: 10px;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

/* Seções claras: tokens locais de tinta/hairline/eyebrow. Off-white e
   branco puro alternam pra dar ritmo sem massa escura. */
.mfm-gnumeros,
.mfm-video,
.mfm-destaques,
.mfm-mapa-home {
	--sec-hairline: var(--hairline);
	--sec-eyebrow: var(--tinta-suave);
	background: var(--off-white);
	color: var(--tinta);
}

.mfm-destaques,
.mfm-mapa-home {
	background: var(--branco);
}

/* Eyebrows com a cor da campanha — uso decorativo (display); body copy
   continua em tinta/tinta-suave. */
.mfm-gnumeros,
.mfm-video {
	--sec-eyebrow: var(--verde-escuro);
}

.mfm-destaques,
.mfm-mapa-home {
	--sec-eyebrow: var(--ciano-escuro);
}

/* ==========================================================================
   Banner principal rotativo — navy com a foto aérea da cidade ao fundo,
   sob um scrim que escurece de baixo pra cima (legibilidade do conteúdo)
   ========================================================================== */

.mfm-banner {
	position: relative;
	overflow: hidden;
	background: var(--navy);
}

/* Mobile: altura fixa, independente da proporção da arte. Seguir a proporção
   da imagem colapsava a faixa — as artes da campanha são 1920×620, que num
   celular de 375px viram uma tarja de 121px, sem espaço pro título e pros
   CTAs que ficam por cima. Com altura fixa a arte preenche a caixa e o corte
   é lateral (cover). */
.mfm-banner__slides {
	position: relative;
	height: clamp(420px, 56vw, 620px);
}

.mfm-banner__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.mfm-banner__slide.ativo {
	opacity: 1;
	pointer-events: auto;
}

.mfm-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No mobile a arte acompanha a ALTURA da faixa: preenche a caixa inteira e,
   se a proporção não bater, o corte é lateral (cover). A altura da faixa vem
   da proporção da arte mobile cadastrada — ver .mfm-banner__slides acima. */

/* Desktop: a faixa tem a altura da própria arte — largura inteira à mostra,
   sem corte lateral e sem sobra de navy em cima/embaixo.
   A proporção vem da imagem cadastrada (--mfm-banner-proporcao, escrita inline
   pelo secao-banner.php a partir das dimensões reais do anexo); o valor no
   fallback é o das artes oficiais da campanha, 1920×620. O contain garante que
   um banner fora da proporção do primeiro ainda apareça completo, em vez de
   perder as pontas.
   No mobile segue com cover: em tela estreita a arte inteira ficaria uma
   tarja baixa demais pro título e os CTAs caberem. */
@media (min-width: 1100px) {
	.mfm-banner__slides {
		height: auto;
		aspect-ratio: var(--mfm-banner-proporcao, 1920 / 620);
	}

	.mfm-banner__img {
		object-fit: contain;
		object-position: center;
	}

	/* A chamada do painel aparece SÓ no mobile: no desktop a arte oficial
	   (1920×620) já traz a frase embutida, e o texto do tema por cima
	   duplicaria a mensagem.
	   Escondida visualmente, não removida: com display:none ela sairia também
	   da árvore de acessibilidade, e a página ficaria sem h1 no desktop —
	   leitor de tela não lê texto que está dentro da imagem. Assim o h1 segue
	   no HTML, valendo pra leitor de tela e pra SEO. */
	.mfm-banner__titulo {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Sem scrim sobre a foto: as peças da campanha são fechadas, com a chamada e
   as logos já embutidas, e qualquer véu por cima só suja a arte. O contraste
   dos elementos do tema que ficam sobre o banner (os CTAs) é resolvido no
   próprio componente, não escurecendo a imagem inteira. */

/* Sem banner cadastrado: navy sólido no lugar da foto. */
.mfm-banner__slide--vazio {
	background: linear-gradient(180deg, #113560 0%, var(--navy) 100%);
}

/* Slide com link: a foto inteira é o clique. */
.mfm-banner__link {
	position: absolute;
	inset: 0;
	display: block;
}

/* Bloco fixo sobre o banner: título da campanha, contexto e CTAs.
   Texto não roda com os slides — só a foto de fundo troca. */
.mfm-banner__conteudo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 44px;
	z-index: 3;
	/* O clique passa pro slide (link da foto), menos nos textos/botões. */
	pointer-events: none;
}

.mfm-banner__conteudo .mfm-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.mfm-banner__conteudo a,
.mfm-banner__conteudo p,
.mfm-banner__conteudo h1 {
	pointer-events: auto;
}

/* Caixa alta pela tipografia, não pelo conteúdo: o text-transform não muda o
   texto no DOM, então o painel guarda a chamada como a SECOM digitou e o
   leitor de tela lê na grafia original — sigla lida como palavra, não
   soletrada. Acompanha as peças da campanha, que são todas em caixa alta. */
.mfm-banner__titulo {
	max-width: 22ch;
	font-size: clamp(1.7rem, 4.8vw, 3.1rem);
	font-weight: 600;
	line-height: 1.08;
	text-transform: uppercase;
	text-shadow: 0 1px 14px rgba(5, 14, 26, 0.45);
	text-wrap: balance;
}

/* Cada linha da chamada (quebrada no painel) é um span-bloco, pintado na
   sequência branco → ciano → verde, repetindo a cada 3 linhas — ex. com 4
   linhas: branco, ciano, verde, branco (padrão das peças da campanha). */
.mfm-banner__titulo-linha {
	display: block;
}

.mfm-banner__titulo-linha:nth-of-type(3n + 1) {
	color: var(--branco);
}

.mfm-banner__titulo-linha:nth-of-type(3n + 2) {
	color: var(--ciano);
}

.mfm-banner__titulo-linha:nth-of-type(3n) {
	color: var(--verde);
}

.mfm-banner__contexto {
	max-width: 58ch;
	font-size: clamp(0.9rem, 1.7vw, 1.05rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 10px rgba(5, 14, 26, 0.5);
	text-wrap: pretty;
}

/* Os CTAs ficam centralizados na faixa. O bloco de conteúdo continua alinhado
   à esquerda (a chamada, que aparece no mobile, segue nessa margem) — só os
   botões saem do fluxo da esquerda, via align-self no eixo cruzado da coluna.
   No desktop isso ainda tira os botões de baixo da personagem da faixa da
   assistente, que sobe pelo canto esquerdo do banner. */
.mfm-banner__botoes {
	align-self: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
}

/* .mfm-cta (botões cheio/contorno) vive no main.css — compartilhado com
   as listagens vazias e o 404. */

/* Setas e pontos do carrossel */
.mfm-banner__seta {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 1px solid rgba(220, 233, 244, 0.25);
	border-radius: 50%;
	background: rgba(9, 30, 54, 0.55);
	color: var(--branco);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

/* :focus-visible (não :focus): depois do clique o botão continua focado,
   mas só o foco vindo do teclado deve manter o destaque. */
.mfm-banner__seta:hover,
.mfm-banner__seta:focus-visible {
	background: rgba(9, 30, 54, 0.9);
	border-color: rgba(255, 255, 255, 0.8);
}

.mfm-banner__seta--ant {
	left: 10px;
}

.mfm-banner__seta--prox {
	right: 10px;
}

.mfm-banner__pontos {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 4;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.mfm-banner__ponto {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.mfm-banner__ponto[aria-current="true"] {
	background: var(--branco);
	border-color: var(--branco);
}

/* ==========================================================================
   Assistente virtual (Mari) — faixa fina logo abaixo do banner do topo:
   degradê navy → ciano na horizontal, personagem recortada à esquerda e
   selo + título + subtítulo ao lado dela, alinhados à esquerda.

   Personagem e texto ficam lado a lado em QUALQUER tela; o que muda a partir
   de 720px é a escala dela (118px → 208px) e o transbordo pra cima, que a
   faz invadir o banner. Os valores de posicionamento estão comentados um a
   um abaixo — são eles que se mexe pra ajustar o encaixe da arte.
   ========================================================================== */

.mfm-mari {
	position: relative;
	/* Acima do conteúdo do banner (z-index 3): no desktop a personagem
	   ultrapassa o topo da faixa e precisa aparecer por cima da arte. */
	z-index: 4;
	background: linear-gradient(90deg, var(--navy) 0%, var(--azul-marca) 58%, var(--ciano-escuro) 100%);
	color: var(--branco);
}

/* Personagem e texto lado a lado em qualquer tela — no celular ela só fica
   menor. O que muda no desktop é a escala e o transbordo pra cima. */
.mfm-mari__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: min(1180px, 100%);
	margin-inline: auto;
	padding: 14px 20px;
	color: inherit;
	text-decoration: none;
}

.mfm-mari__personagem {
	flex: 0 0 auto;
	/* Encostada na base da faixa: o margin-bottom negativo anula o padding
	   inferior do inner, que continua valendo pro texto. */
	align-self: flex-end;
	margin-bottom: -14px;
	/* Teto de largura no celular: recorte largo não pode espremer o texto. */
	max-width: 34%;
	line-height: 0;
}

.mfm-mari__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 118px;
	object-fit: contain;
}

/* Texto encostado na personagem: sem o flex-grow ele para de esticar até a
   borda da faixa, então o bloco fica logo ao lado dela em vez de centralizado
   no espaço que sobra. */
.mfm-mari__texto {
	flex: 0 1 auto;
	text-align: left;
}

.mfm-mari__selo {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 14px;
	border-radius: 4px;
	background: var(--verde);
	color: var(--navy);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mfm-mari__titulo {
	margin: 0;
	font-family: var(--fonte-display);
	font-size: clamp(1.05rem, 2.4vw, 1.6rem);
	font-weight: 800;
	font-style: italic;
	line-height: 1.15;
	text-wrap: balance;
}

.mfm-mari__subtitulo {
	margin: 6px 0 0;
	font-size: clamp(0.8rem, 1.5vw, 0.95rem);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

/* Com link no painel, a faixa inteira é clicável. */
a.mfm-mari__inner:hover .mfm-mari__titulo,
a.mfm-mari__inner:focus-visible .mfm-mari__titulo {
	text-decoration: underline;
}

a.mfm-mari__inner:focus-visible {
	outline: 3px solid var(--verde);
	outline-offset: -3px;
}

@media (min-width: 720px) {
	.mfm-mari__inner {
		gap: 8px;
		padding-block: 0;
		min-height: 118px;
	}

	/* A personagem encosta na base da faixa e cresce pra cima, invadindo o
	   banner de propósito — o recorte do PNG é o que dá o efeito. Aqui o inner
	   já tem padding-block zero, então o desconto do mobile não se aplica. */
	.mfm-mari__personagem {
		margin-bottom: 0;
		max-width: none;
	}

	.mfm-mari__img {
		height: 208px;
		margin-top: -90px;
	}
}

/* ==========================================================================
   O programa em números — banda clara off-white, cards brancos com número
   grande, régua curta, rótulo e descrição; texto de apoio sob o título e
   faixa-pílula de fechamento (layout jul/2026)
   ========================================================================== */

.mfm-gnumeros {
	padding-block: 88px;
}

/* Cabeçalho desta seção: sem a hairline de largura total — o título ganha
   um traço curto embaixo, como nas peças da campanha. */
.mfm-gnumeros .mfm-secao-cabecalho {
	margin-bottom: 32px;
	padding-bottom: 0;
	border-bottom: 0;
}

.mfm-gnumeros .mfm-secao-cabecalho__titulo::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 18px;
	background: var(--azul-marca);
}

.mfm-gnumeros__apoio {
	margin-top: 18px;
	max-width: 62ch;
	font-size: clamp(0.95rem, 1.8vw, 1.1rem);
	line-height: 1.5;
	color: var(--tinta-suave);
	text-wrap: pretty;
}

.mfm-gnumeros__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 560px) {
	.mfm-gnumeros__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.mfm-gnumeros__lista {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Card de número: branco, cantos arredondados, conteúdo centralizado,
   barra tricolor azul/ciano/verde no topo — a assinatura do menu repetida
   no corpo da página. */
.mfm-gnumeros__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(28px, 3.5vw, 44px) 20px clamp(24px, 3vw, 36px);
	border: 1px solid var(--hairline);
	border-radius: 16px;
	overflow: hidden;
	background: var(--branco);
	box-shadow: 0 10px 26px rgba(13, 42, 74, 0.07);
	text-align: center;
}

.mfm-gnumeros__item::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--azul-institucional) 0 34%, var(--ciano) 34% 67%, var(--verde) 67% 100%);
}

.mfm-gnumeros__valor {
	display: block;
	font-size: clamp(2.4rem, 5.5vw, 3.6rem);
	font-weight: 700;
	color: var(--azul-institucional); /* mesmo azul do header/footer */
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums lining-nums;
}

/* Régua curta entre o número e o rótulo. */
.mfm-gnumeros__valor::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin: 22px auto 0;
	background: var(--azul-marca);
}

.mfm-gnumeros__rotulo {
	display: block;
	margin-top: 18px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tinta);
}

.mfm-gnumeros__descricao {
	display: block;
	margin-top: 12px;
	max-width: 26ch;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--tinta-suave);
	text-wrap: pretty;
}

/* Faixa-pílula de fechamento da seção. */
.mfm-gnumeros__fechamento {
	width: fit-content;
	max-width: 100%;
	margin: 40px auto 0;
	padding: 15px 34px;
	border-radius: 999px;
	background: var(--navy);
	color: var(--branco);
	font-size: clamp(0.9rem, 1.7vw, 1rem);
	line-height: 1.45;
	text-align: center;
	text-wrap: balance;
}

/* ==========================================================================
   Obras em destaque — seção clara (off-white), grade de cards brancos.
   O fundo vem do bloco de seções claras lá em cima; navy aqui é só tinta.
   ========================================================================== */

.mfm-destaques {
	padding-block: 88px;
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

.mfm-destaques__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.mfm-destaques__grade {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.mfm-destaques__grade {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* O card de obra em si (foto, badge, carimbo, barra) vive no main.css —
   é compartilhado com as listagens, a ficha e o mapa. */

/* ==========================================================================
   Vídeo da campanha — seção clara, poster + play sob clique
   ========================================================================== */

.mfm-video {
	padding-block: 88px;
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

.mfm-video__player {
	position: relative;
	width: min(960px, 100%);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--hairline);
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.mfm-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tinta);
	font: inherit;
	cursor: pointer;
}

.mfm-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mfm-video__play-selo {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--branco);
	color: var(--navy);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	box-shadow: 0 8px 24px rgba(5, 14, 26, 0.35);
	transition: background 0.15s, color 0.15s;
}

.mfm-video__play:hover .mfm-video__play-selo,
.mfm-video__play:focus .mfm-video__play-selo {
	background: var(--azul-marca);
	color: var(--branco);
}

.mfm-video__player video,
.mfm-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Mapa de obras interativo — seção clara (branco), legenda em 5 cores.
   O fundo vem do bloco de seções claras lá em cima.
   ========================================================================== */

.mfm-mapa-home {
	padding-block: 88px;
}

/* Filtros (rótulo + select do main.css) na versão clara. */
.mfm-mapa-home .mfm-filtro span {
	color: var(--tinta-suave);
}

.mfm-mapa-home .mfm-filtro select,
.mfm-mapa-home .mfm-filtro input {
	border-color: var(--hairline);
	background: var(--off-white);
	color: var(--tinta);
}

.mfm-mapa-home .mfm-filtro input::placeholder {
	color: var(--tinta-suave);
}

.mfm-mapa-home .mfm-filtro select:focus,
.mfm-mapa-home .mfm-filtro input:focus {
	outline-color: var(--azul-marca);
}

/* Pontos da legenda: a borda branca some no fundo claro. */
.mfm-mapa-home .mfm-legenda__ponto {
	border-color: rgba(13, 42, 74, 0.25);
}

.mfm-mapa-home__filtros {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

@media (min-width: 640px) {
	.mfm-mapa-home__filtros {
		grid-template-columns: repeat(3, 1fr) auto;
		align-items: end;
	}
}

/* .mfm-filtro (rótulo + select) também vive no main.css. */

.mfm-mapa-home__limpar {
	padding: 11px 16px;
	border: 1px solid rgba(13, 42, 74, 0.35);
	border-radius: 6px;
	background: none;
	color: var(--tinta);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mfm-mapa-home__limpar:hover,
.mfm-mapa-home__limpar:focus {
	border-color: var(--azul-marca);
	color: var(--azul-marca);
	background: rgba(14, 95, 164, 0.06);
}

.mfm-mapa-home__contagem {
	min-height: 1.2em;
	margin-bottom: 10px;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--tinta-suave);
}

.mfm-mapa-home__caixa {
	position: relative;
	/* Novo stacking context: os z-index internos do Leaflet (panes 400,
	   controles 1000) ficam contidos aqui e não passam do header fixo. */
	z-index: 0;
	/* Teto em 440px: em laptop (~768px de altura útil) o mapa cabe na tela
	   junto com filtros e legenda, sem exigir scroll pra ver inteiro. */
	height: clamp(360px, 48vw, 440px);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	overflow: hidden;
	background: #E9EEF3;
}

.mfm-mapa-home__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 16px;
	font-size: 0.78rem;
	color: var(--tinta-suave);
}

.mfm-mapa-home__legenda li {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* Legenda, cores de status, pin e popup do Leaflet vivem no main.css —
   compartilhados com a página Mapa de Obras e o mini-mapa da ficha. */

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mfm-banner__slide {
		transition: none;
	}
}