/* ==========================================================================
   Maringá Faz Mais — páginas internas (etapa 4)
   Listagens de obras, ficha da obra, Mapa de Obras e Galeria. Carregado
   depois do main.css (herda reset, variáveis, header/footer e os
   componentes compartilhados: card, badge, carimbo, filtro, pin/popup).
   Mobile first.
   ========================================================================== */

/* O header é fixo: toda página interna abre logo abaixo dele. */
.mfm-pagina {
	padding-top: var(--altura-header);
	padding-bottom: 64px;
	background: var(--azul-profundo);
	min-height: 100vh;
}

body.admin-bar .mfm-pagina {
	padding-top: calc(var(--altura-header) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .mfm-pagina {
		padding-top: calc(var(--altura-header) + 46px);
	}
}

/* ---------- Breadcrumb ---------- */

.mfm-breadcrumb {
	padding-top: 22px;
	font-size: 0.78rem;
	color: var(--texto-suave);
}

.mfm-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
}

.mfm-breadcrumb li + li::before {
	content: "›";
	margin-right: 4px;
	opacity: 0.6;
}

.mfm-breadcrumb a:hover,
.mfm-breadcrumb a:focus {
	color: var(--verde);
}

.mfm-breadcrumb [aria-current="page"] {
	color: var(--branco);
	font-weight: 700;
}

/* ---------- Cabeçalho das páginas ---------- */

.mfm-pagina-cabecalho {
	margin: 20px 0 24px;
}

.mfm-pagina-cabecalho__titulo {
	font-size: clamp(1.6rem, 4.6vw, 2.4rem);
	font-weight: 900;
	line-height: 1.12;
	text-wrap: balance;
}

.mfm-pagina-cabecalho__contagem {
	min-height: 1.2em;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--texto-suave);
}

/* ---------- Filtros combinados (listagens, mapa, galeria) ---------- */

.mfm-filtros {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 24px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
}

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

	/* Busca pelo nome ocupa a linha de cima inteira. */
	.mfm-filtro--busca {
		grid-column: 1 / -1;
	}

	.mfm-filtros--galeria {
		/* Busca na linha de cima (inteira); região + área + limpar embaixo. */
		grid-template-columns: repeat(2, 1fr) auto;
		max-width: 720px;
	}
}

/* Botão "Carregar mais fotos" — centralizado abaixo da grade. O display
   declarado venceria o [hidden] do navegador, então repõe o none aqui. */
.mfm-galeria__mais {
	display: block;
	margin: 28px auto 0;
}

.mfm-galeria__mais[hidden] {
	display: none;
}

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

.mfm-filtros__aplicar,
.mfm-filtros__limpar-botao {
	padding: 11px 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	background: none;
	color: var(--branco);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.mfm-filtros__aplicar:hover,
.mfm-filtros__aplicar:focus,
.mfm-filtros__limpar-botao:hover,
.mfm-filtros__limpar-botao:focus {
	border-color: var(--verde);
	color: var(--verde);
}

.mfm-filtros__limpar {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--texto-suave);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mfm-filtros__limpar:hover,
.mfm-filtros__limpar:focus {
	color: var(--verde);
}

/* ==========================================================================
   Listagens — grade de cards (3 colunas desktop / 1 mobile)
   ========================================================================== */

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

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

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

.mfm-listagem__vazio {
	padding: 56px 20px;
	text-align: center;
	color: var(--texto-suave);
}

.mfm-listagem__vazio-chave {
	margin-bottom: 10px;
	font-size: 2.4rem;
	font-weight: 900;
	color: rgba(127, 182, 232, 0.45);
}

.mfm-listagem__vazio .mfm-cta {
	margin-top: 20px;
}

/* Paginação (markup do the_posts_pagination) */
.mfm-paginacao {
	margin-top: 36px;
}

.mfm-paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.mfm-paginacao .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	padding: 9px 13px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--branco);
	transition: border-color 0.15s, color 0.15s;
}

.mfm-paginacao a.page-numbers:hover,
.mfm-paginacao a.page-numbers:focus {
	border-color: var(--verde);
	color: var(--verde);
}

.mfm-paginacao .page-numbers.current {
	background: var(--verde);
	border-color: var(--verde);
	color: var(--azul-profundo);
}

.mfm-paginacao .page-numbers.dots {
	border: 0;
	color: var(--texto-suave);
}

/* ==========================================================================
   Ficha da obra
   ========================================================================== */

.mfm-ficha__cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 20px 0 20px;
}

.mfm-ficha__eixo {
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--azul-claro);
}

.mfm-ficha__titulo {
	margin-top: 6px;
	font-size: clamp(1.6rem, 4.6vw, 2.4rem);
	font-weight: 900;
	line-height: 1.12;
	text-wrap: balance;
}

.mfm-ficha__local {
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--texto-suave);
}

/* Na ficha o badge não flutua sobre foto: entra no fluxo do cabeçalho. */
.mfm-ficha__badge {
	position: static;
	font-size: 0.78rem;
	padding: 8px 14px;
}

.mfm-ficha__infos .mfm-badge {
	position: static;
}

/* ---------- Galeria da ficha ---------- */

.mfm-ficha__foto-principal {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

/* Botão invisível sobre a foto principal: clique amplia no lightbox.
   As setas ficam por cima (z-index próprio) e continuam clicáveis. */
.mfm-ficha__ampliar {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

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

.mfm-ficha__foto--vazia {
	display: grid;
	place-items: center;
	font-size: 3rem;
	font-weight: 900;
	color: rgba(127, 182, 232, 0.45);
}

.mfm-ficha__foto-principal .mfm-carimbo {
	right: 16px;
	bottom: 16px;
	font-size: 1.3rem;
}

/* Setas de navegação sobre a foto principal (só com 2+ fotos). */
.mfm-ficha__seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(8, 31, 59, 0.6);
	color: var(--branco);
	cursor: pointer;
	transition: background 0.15s, 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 verde. */
.mfm-ficha__seta:hover,
.mfm-ficha__seta:focus-visible {
	background: rgba(8, 31, 59, 0.85);
	color: var(--verde);
}

.mfm-ficha__seta--ant {
	left: 12px;
}

.mfm-ficha__seta--prox {
	right: 12px;
}

.mfm-ficha__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
}

.mfm-ficha__thumb {
	flex: 0 0 auto;
	width: 92px;
	height: 66px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	transition: border-color 0.15s, opacity 0.15s;
	opacity: 0.75;
}

.mfm-ficha__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mfm-ficha__thumb:hover,
.mfm-ficha__thumb:focus {
	opacity: 1;
}

.mfm-ficha__thumb.ativa {
	border-color: var(--verde);
	opacity: 1;
}

.mfm-ficha__videos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}

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

.mfm-ficha__video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(8, 31, 59, 0.85);
}

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

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

.mfm-video-play__selo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 2px solid var(--verde);
	border-radius: 999px;
	background: rgba(8, 31, 59, 0.75);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	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(--verde);
	color: var(--azul-escuro);
}

/* ---------- Resumo + informações ---------- */

.mfm-ficha__colunas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 32px;
}

@media (min-width: 900px) {
	.mfm-ficha__colunas {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}
}

.mfm-ficha__subtitulo {
	margin-bottom: 14px;
	font-size: 1.15rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mfm-ficha__subtitulo::before {
	content: "{ ";
	color: var(--verde);
}

.mfm-ficha__subtitulo::after {
	content: " }";
	color: var(--verde);
}

.mfm-ficha__descricao {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--texto-suave);
}

.mfm-ficha__descricao p + p {
	margin-top: 12px;
}

.mfm-ficha__infos {
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
}

.mfm-ficha__infos dl {
	display: grid;
	gap: 12px;
}

.mfm-ficha__infos dl > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mfm-ficha__infos dl > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mfm-ficha__infos dt {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--texto-suave);
}

.mfm-ficha__infos dd {
	font-size: 0.9rem;
	font-weight: 700;
	text-align: right;
}

.mfm-ficha__investimento {
	color: var(--verde);
	font-size: 1rem;
}

/* ---------- Andamento — 4 etapas + barra ---------- */

.mfm-ficha__andamento {
	margin-top: 40px;
	padding: 24px 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
}

.mfm-etapas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	list-style: none;
	counter-reset: etapa;
}

@media (min-width: 640px) {
	.mfm-etapas {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}
}

.mfm-etapa {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

@media (min-width: 640px) {
	.mfm-etapa {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}

	/* Linha que liga as etapas. */
	.mfm-etapa::before {
		content: "";
		position: absolute;
		top: 17px;
		left: -50%;
		width: 100%;
		height: 3px;
		background: rgba(255, 255, 255, 0.15);
	}

	.mfm-etapa:first-child::before {
		display: none;
	}

	.mfm-etapa--concluida::before,
	.mfm-etapa--atual::before {
		background: var(--verde);
	}
}

.mfm-etapa__ponto {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: var(--azul-profundo);
	font-size: 0.85rem;
	font-weight: 900;
	color: var(--texto-suave);
}

.mfm-etapa--concluida .mfm-etapa__ponto {
	border-color: var(--verde);
	background: var(--verde);
	color: var(--azul-profundo);
}

.mfm-etapa--atual .mfm-etapa__ponto {
	border-color: var(--verde);
	color: var(--verde);
}

.mfm-etapa__rotulo {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--texto-suave);
}

.mfm-etapa--concluida .mfm-etapa__rotulo,
.mfm-etapa--atual .mfm-etapa__rotulo {
	color: var(--branco);
}

.mfm-ficha__progresso {
	margin-top: 24px;
}

.mfm-ficha__progresso-rotulo {
	margin-bottom: 8px;
	font-size: 0.85rem;
	color: var(--texto-suave);
}

.mfm-ficha__progresso-rotulo strong {
	color: var(--verde);
	font-size: 1.05rem;
}

.mfm-ficha__barra {
	display: block;
	height: 12px;
}

/* ---------- Mini-mapa ---------- */

.mfm-ficha__mapa {
	margin-top: 40px;
}

.mfm-ficha__mapa-caixa {
	position: relative;
	z-index: 0; /* contém os z-index internos do Leaflet abaixo do header fixo */
	height: clamp(260px, 44vw, 380px);
	border-radius: 12px;
	overflow: hidden;
	background: var(--azul-escuro);
}

.mfm-ficha__mapa-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--verde);
}

.mfm-ficha__mapa-link:hover,
.mfm-ficha__mapa-link:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Atualizações relacionadas ---------- */

.mfm-ficha__atualizacoes {
	margin-top: 40px;
}

.mfm-atualizacoes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.mfm-atualizacao {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

/* Foto da atualização é um botão: clique amplia no lightbox. */
.mfm-atualizacao__foto-botao {
	display: block;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
}

.mfm-atualizacao__foto-botao:hover .mfm-atualizacao__foto,
.mfm-atualizacao__foto-botao:focus-visible .mfm-atualizacao__foto {
	opacity: 0.85;
}

.mfm-atualizacao__foto {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: opacity 0.15s;
}

@media (min-width: 640px) {
	.mfm-atualizacao {
		flex-direction: row; /* texto à esquerda, foto à direita */
	}

	/* A imagem fica absoluta dentro do botão: quem define a altura do
	   card é o texto — a foto só acompanha, recortada no que couber. */
	.mfm-atualizacao__foto-botao {
		position: relative;
		width: 240px;
		flex-shrink: 0;
	}

	.mfm-atualizacao__foto {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

.mfm-atualizacao__corpo {
	flex: 1;
	padding: 16px 18px 18px;
}

.mfm-atualizacao__data {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--verde);
}

.mfm-atualizacao__titulo {
	margin-top: 4px;
	font-size: 1rem;
	font-weight: 800;
}

.mfm-atualizacao__texto {
	margin-top: 8px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--texto-suave);
}

/* Fechada: mostra só o começo; o "Ler mais" (paginas.js) abre o resto. */
.mfm-atualizacao__texto.fechado {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mfm-atualizacao__mais {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--verde);
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.mfm-atualizacao__mais:hover,
.mfm-atualizacao__mais:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Página Mapa de Obras
   ========================================================================== */

.mfm-pagina-mapa__caixa {
	position: relative;
	z-index: 0; /* contém os z-index internos do Leaflet abaixo do header fixo */
	height: clamp(420px, 62vh, 640px);
	border-radius: 12px;
	overflow: hidden;
	background: var(--azul-escuro);
}

.mfm-mapa-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 14px;
	font-size: 0.78rem;
	color: var(--texto-suave);
	list-style: none;
}

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

/* Card da obra selecionada (preenchido pelo paginas.js) */
.mfm-pagina-mapa__selecionada {
	margin-top: 24px;
}

.mfm-pagina-mapa__selecionada .mfm-card {
	max-width: 720px;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.mfm-pagina-mapa__selecionada .mfm-card {
		flex-direction: row;
	}

	.mfm-pagina-mapa__selecionada .mfm-card__midia {
		width: 300px;
		flex-shrink: 0;
		aspect-ratio: auto;
	}
}

.mfm-pagina-mapa__dica {
	margin-top: 24px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--texto-suave);
}

/* ==========================================================================
   Página Galeria
   ========================================================================== */

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

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

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

.mfm-galeria__item {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	color: var(--branco);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.mfm-galeria__item:hover,
.mfm-galeria__item:focus {
	transform: translateY(-4px);
	border-color: rgba(63, 191, 77, 0.5);
}

.mfm-galeria__item[hidden] {
	display: none;
}

.mfm-galeria__midia {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: rgba(255, 255, 255, 0.06);
}

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

.mfm-galeria__midia--vazia {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2.2rem;
	font-weight: 900;
	color: rgba(127, 182, 232, 0.45);
}

.mfm-galeria__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.2rem;
	color: var(--branco);
}

.mfm-galeria__play::before {
	content: "";
	position: absolute;
	width: 58px;
	height: 58px;
	border: 2px solid var(--verde);
	border-radius: 50%;
	background: rgba(8, 31, 59, 0.7);
}

.mfm-galeria__legenda {
	display: block;
	padding: 12px 16px 14px;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.35;
}

.mfm-galeria__eixo {
	display: block;
	margin-top: 4px;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--azul-claro);
}

/* Lightbox: reusa .mfm-modal do main.css; aqui só a mídia e a legenda. */
.mfm-modal__midia {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.mfm-modal__midia img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mfm-modal__midia video,
.mfm-modal__midia iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.mfm-modal__legenda {
	min-height: 1.2em;
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--texto-suave);
	text-align: center;
}

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

@media (prefers-reduced-motion: reduce) {
	.mfm-galeria__item:hover,
	.mfm-galeria__item:focus {
		transform: none;
	}
}