/**
 * Hubs das cidades (/chapada-diamantina/, /lencois/, /palmeiras/vale-do-capao/) e listas por categoria.
 *
 * O grosso vem do mg-hub.css (herói, seções, cartões de atrativo, sanfona da FAQ, agenda). Aqui ficam só
 * as peças novas: atalhos por intenção, cards de destino, grade de empresas, blocos de texto, crédito de
 * foto e a chamada "Anuncie aqui". Mobile primeiro: tudo é uma coluna até 640 px.
 *
 * Marca (manual, cap. 04): Verde Chapada #0F5132, Verde Vale #22A06B, Laranja Guia #FF7A00 SÓ em CTA e
 * sempre com texto Grafite #2E2E2E (branco sobre laranja dá 2,6:1), Areia #F5EBDD, Grafite #2E2E2E.
 * Títulos em Montserrat, texto em Poppins (as duas já servidas pelo gcep-inter.css).
 *
 * @since 2026-10-01
 */

.mg-cid {
	--cid-verde: #0f5132;
	--cid-vale: #22a06b;
	--cid-laranja: #ff7a00;
	--cid-areia: #f5ebdd;
	--cid-grafite: #2e2e2e;
	--cid-titulo: var(--mg-fonte-titulo, Montserrat, system-ui, sans-serif);
}

/* O botão laranja do hub tem texto branco; na marca o CTA laranja leva Grafite. */
.mg-cid .mg-hub-btn--laranja,
.mg-cid .mg-hub-btn--laranja:hover { color: var(--mg-cta-texto, #2e2e2e); }
.mg-cid .mg-hub-btn--laranja:hover { background: var(--mg-cta-hover, #ff8f2b); }

.mg-cid-h2 { font-family: var(--cid-titulo); font-size: clamp(21px, 2.3vw, 28px); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: var(--hub-marinho); }
.mg-cid-h3 { margin-top: 22px; font-family: var(--cid-titulo); font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--hub-marinho); }
.mg-cid-secao--clara { background: #fbf6ee; }
.mg-cid-secao--curta { padding-top: 6px; padding-bottom: 6px; }
.mg-cid-lead { max-width: 70ch; margin-bottom: 22px; font-size: 15.5px; line-height: 1.6; color: var(--hub-texto); }

/* ---------- herói ---------- */
.mg-cid-hero { min-height: 360px; }
.mg-cid-hero--lista { min-height: 280px; }
@media (min-width: 640px) { .mg-cid-hero { min-height: 440px; } .mg-cid-hero--lista { min-height: 320px; } }
@media (min-width: 1024px) { .mg-cid-hero { min-height: 500px; } .mg-cid-hero--lista { min-height: 340px; } }
.mg-cid-hero .mg-hub-hero__h1 { max-width: 18ch; }
.mg-cid-hero .mg-hub-hero__selo { margin-top: 18px; }
/* Sem foto o herói fica no verde da marca, nunca com uma foto que não é daqui. */
.mg-cid-hero:not(:has(.mg-hub-hero__foto)) { background: linear-gradient(135deg, #0f5132 0%, #0b3a25 70%); }

/* ---------- crédito da foto (fora da imagem, logo abaixo) ---------- */
.gcep-credito { margin: 0; font-size: 11.5px; line-height: 1.4; color: #6b6b6b; }
.gcep-credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gcep-credito a:hover { color: var(--cid-verde, #0f5132); }
.mg-cid-credito { padding-top: 6px; padding-bottom: 2px; text-align: right; }
.mg-atr-credito { padding-top: 6px; text-align: right; }

/* ---------- atalhos por intenção ---------- */
.mg-cid-atalhos { position: relative; z-index: 2; margin-top: 10px; }
.mg-cid-atalhos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .mg-cid-atalhos ul { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.mg-cid-atalhos a {
	display: flex; align-items: center; gap: 10px; min-height: 52px; height: 100%; padding: 10px 12px;
	border: 1px solid var(--hub-borda); border-radius: 12px; background: #fff; box-shadow: var(--hub-sombra);
	font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--hub-marinho); text-decoration: none;
	transition: border-color .16s, transform .16s;
}
.mg-cid-atalhos a:hover { border-color: var(--cid-vale); transform: translateY(-1px); }
.mg-cid-atalhos__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #e5f6ee; color: var(--cid-verde); font-size: 18px; }
.mg-cid-atalhos__ico svg { width: 18px; height: 18px; }

/* ---------- textos longos ---------- */
.mg-cid-texto-grade { max-width: 880px; }
/* `.mg-cid` na frente: o reset `.mg-hub p { margin: 0 }` do mg-hub.css ganharia por especificidade. */
.mg-cid .mg-cid-texto > * + * { margin-top: 14px; }
.mg-cid-texto h2 + *, .mg-cid-h2 + .mg-cid-texto { margin-top: 14px; }
.mg-cid-texto p, .mg-cid-texto li { font-size: 15.5px; line-height: 1.7; color: var(--hub-texto); }
.mg-cid-texto ul { padding-left: 1.2em; list-style: disc; }
.mg-cid-texto h3 { font-family: var(--cid-titulo); font-size: 17px; font-weight: 800; color: var(--hub-marinho); }
.mg-cid-texto a { color: var(--cid-verde); text-underline-offset: 3px; }
.mg-cid-texto strong { color: var(--cid-grafite); }

.mg-cid-duo { display: grid; gap: 22px; }
@media (min-width: 900px) { .mg-cid-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; } .mg-cid-duo > :only-child { grid-column: 1 / -1; max-width: 880px; } }
.mg-cid-bloco { padding: 20px 18px; border: 1px solid var(--hub-borda); border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra); scroll-margin-top: 90px; }
@media (min-width: 640px) { .mg-cid-bloco { padding: 26px 26px; } }
.mg-cid-bloco .mg-cid-h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(19px, 2vw, 23px); }
.mg-cid-bloco__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 99px; background: #e5f6ee; color: var(--cid-verde); font-size: 19px; }
.mg-cid-bloco .mg-cid-texto { margin-top: 14px; }

.mg-cid-dist { display: grid; gap: 6px; margin-top: 10px; }
.mg-cid-dist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--hub-borda); font-size: 14.5px; color: var(--hub-texto); }
.mg-cid-dist b { flex: none; color: var(--hub-marinho); }

.mg-cid-dicas { display: grid; gap: 10px; margin-top: 14px; }
.mg-cid-dicas li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: var(--hub-texto); }
.mg-cid-dicas li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 99px; background: var(--cid-vale); }

/* ---------- o que fazer: grupos por categoria ---------- */
.mg-cid-grupo + .mg-cid-grupo { margin-top: 30px; }
.mg-cid-grupo__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 14px; }
.mg-cid-grupo__cab h3 { font-family: var(--cid-titulo); font-size: clamp(18px, 1.8vw, 21px); font-weight: 800; color: var(--hub-marinho); }
.mg-cid-atrs { grid-template-columns: minmax(0, 1fr); }
/*
 * No celular o cartão vira linha (miniatura à esquerda, texto à direita): empilhados em 16:10, quatro
 * cachoeiras ocupavam três telas. O selo da categoria sai porque o título do grupo já diz qual é.
 */
@media (max-width: 559.98px) {
	.mg-cid-atrs .mg-hub-atr { flex-direction: row; align-items: stretch; }
	.mg-cid-atrs .mg-hub-atr__foto { flex: none; width: 112px; aspect-ratio: auto; min-height: 112px; }
	.mg-cid-atrs .mg-hub-atr__foto > svg { width: 34px; height: 34px; }
	.mg-cid-atrs .mg-hub-atr__selo { display: none; }
	.mg-cid-atrs .mg-hub-atr__corpo { gap: 5px; padding: 11px 12px 12px; min-width: 0; }
	.mg-cid-atrs .mg-hub-atr__titulo { font-size: 15px; }
	.mg-cid-atrs .mg-hub-atr__texto { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 560px) { .mg-cid-atrs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mg-cid-atrs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* O cartão inteiro é o link (o título estica a área de clique). */
.mg-cid .mg-hub-atr__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-cid .mg-hub-atr__titulo { font-family: var(--cid-titulo); }

/* ---------- empresas (card padrão mg-ecard) ---------- */
.mg-cid-ecards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .mg-cid-ecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mg-cid-ecards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-cid-ecards > li { min-width: 0; }

/* ---------- Anuncie aqui ---------- */
.mg-cid-anuncie {
	display: grid; gap: 16px; margin-top: 8px; padding: 20px; border: 1px solid #f1dcc0; border-radius: var(--hub-raio);
	background: var(--cid-areia);
}
.mg-cid-anuncie h2 { font-family: var(--cid-titulo); font-size: clamp(18px, 2vw, 22px); font-weight: 800; line-height: 1.2; color: var(--cid-grafite); }
.mg-cid-anuncie p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: #4a4a4a; }
.mg-cid-anuncie .mg-hub-btn { justify-self: start; }
@media (min-width: 760px) { .mg-cid-anuncie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 24px 28px; } }

/* ---------- Escolha seu destino ---------- */
.mg-cid-destinos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { .mg-cid-destinos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mg-cid-destinos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-cid-destino {
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid var(--hub-borda); border-radius: var(--hub-raio); background: #fff; box-shadow: var(--hub-sombra);
	transition: transform .18s, box-shadow .18s;
}
.mg-cid-destino:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11, 58, 37, .1); }
.mg-cid-destino__foto { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(140deg, #22a06b 0%, #0f5132 100%); color: #fff; }
.mg-cid-destino__foto > svg { width: 54px; height: 54px; opacity: .45; }
.mg-cid .mg-cid-destino__foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .45s ease; }
.mg-cid-destino:hover .mg-cid-destino__foto img { transform: scale(1.04); }
.mg-cid-destino__corpo { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px 16px 16px; }
.mg-cid-destino__nome { font-family: var(--cid-titulo); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.mg-cid .mg-cid-destino__nome a { color: var(--hub-marinho); text-decoration: none; }
.mg-cid-destino__nome a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-cid-destino:hover .mg-cid-destino__nome a { color: var(--cid-verde); }
.mg-cid-destino__resumo { font-size: 14px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-cid-destino__dist { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--hub-texto-2); }
.mg-cid-destino__dist svg { width: 14px; height: 14px; color: var(--cid-vale); }
.mg-cid .mg-cid-destino__dist a { color: var(--cid-verde); text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.mg-cid-faq { max-width: 920px; }
.mg-cid-faq .mg-cid-h2 { margin-bottom: 14px; }

/* ---------- fontes e créditos ---------- */
.mg-cid-secao--fontes { padding-top: 22px; padding-bottom: 30px; border-top: 1px solid var(--hub-borda); }
.mg-cid-secao--fontes .mg-cid-h3 { margin-top: 0; font-size: 15px; }
.mg-cid-fontes__rot { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--hub-texto-2); }
.mg-cid-fontes { display: grid; gap: 4px; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--hub-texto-2); }
.mg-cid-fontes a { color: inherit; text-underline-offset: 2px; }
.gcep-creditos__titulo { color: var(--hub-texto); }

/* ---------- paginação e voltar ---------- */
.mg-cid-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.mg-cid-paginas a, .mg-cid-paginas span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--hub-borda); border-radius: 10px; background: #fff; font-weight: 700; color: var(--hub-marinho); text-decoration: none; }
.mg-cid-paginas [aria-current] { border-color: var(--cid-verde); background: var(--cid-verde); color: #fff; }
.mg-cid-voltar { margin-top: 24px; }

/* ---------- ficha do atrativo: "Mais em <cidade>" ---------- */
.mg-atr-mais { padding: 34px 0; background: #fbf6ee; }
.mg-atr-mais .mg-hub-atr__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.mg-cid-destino, .mg-cid-atalhos a, .mg-cid-destino__foto img { transition: none; }
	.mg-cid-destino:hover, .mg-cid-atalhos a:hover { transform: none; }
}

/* ---------- home: "Escolha seu destino" (destinos.php) ----------
 * A grade .g6 da home tem 6 colunas fixas; com 5 cidades sobraria uma vaga. No computador a grade usa o
 * número de cidades; no celular continua o carrossel da home (gcep-home-v2.css). */
@media (min-width: 1200px) { .mgh .g6.mgh-destinos { grid-template-columns: repeat(var(--mgh-n, 6), minmax(0, 1fr)); } }