/* Guias de bairro, lista de bairros e blog (tools/_pagina_guias.py, _pagina_bairros.py e _pagina_blog.py).
   Pranchas Guia_campo_belo, Bairros e Blog. Usa os tokens e componentes do base.css. */

/* --- Guia --- */
.guia { padding-top: 16px; }
.guia__cabeca { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.guia__autoria { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; color: var(--cor-texto-suave); }
.guia__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.guia__texto { display: flex; flex-direction: column; gap: 40px; max-width: 68ch; min-width: 0; }
.guia__texto p, .guia__imoveis-texto p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--cor-texto); }
.guia__abertura { display: flex; flex-direction: column; gap: 16px; }
.guia__abertura p { font-size: clamp(17px, 16.6px + 0.11vw, 18px); color: var(--cor-texto-suave); }
.guia__secao { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.guia__secao h3 { margin: 8px 0 0; font-size: 19px; line-height: 1.3; }
.guia__secao ul, .guia__secao ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.6; }
.guia__lado { display: flex; flex-direction: column; gap: 20px; align-self: start; min-width: 0; }
.guia__bloco { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.guia__bloco p { margin: 0; }
.guia__atalho { width: 100%; }
.guia__indice ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; }
.guia__indice li { padding-left: 2px; }
.guia__indice a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 500; }
.guia__creditas { background: var(--cor-rodape); color: var(--cor-rodape-texto); border-color: var(--cor-rodape); }
.guia__creditas .titulo-bloco { color: var(--cor-sobre-primaria); }
.guia__creditas .pequeno { color: var(--cor-rodape-texto); }
.guia__creditas a { color: var(--cor-rodape-link); }
.guia__creditas a:hover { color: var(--cor-sobre-primaria); }
.guia__creditas :focus-visible { outline-color: var(--cor-rodape-link); box-shadow: none; }
.guia__creditas-logo img { width: 122px; height: 26px; }
.guia__imoveis { display: flex; flex-direction: column; gap: 20px; margin-top: var(--entre-secoes); scroll-margin-top: 16px; }
.guia__imoveis-texto { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.guia__imoveis-texto ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.guia__imoveis-texto li { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.guia__imoveis-texto li a { font-weight: 600; }
.guia__destaque { margin-top: 8px; }
.guia__sem-estoque { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.guia__sem-estoque p { margin: 0; }
.guia__botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Perguntas (6.14) --- */
.perguntas { display: flex; flex-direction: column; border-top: 1px solid var(--cor-borda); }
.perguntas__item { border-bottom: 1px solid var(--cor-borda); }
.perguntas__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 4px;
  font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--cor-texto);
}
.perguntas__seta { color: var(--cor-primaria); transition: transform 0.15s ease; }
.perguntas__item[open] > summary .perguntas__seta { transform: rotate(180deg); }
.perguntas__resposta { display: flex; flex-direction: column; gap: 12px; padding: 0 4px 18px; }
.guia .perguntas__resposta p { font-size: 16px; line-height: 1.6; color: var(--cor-texto-suave); }

/* --- Outros guias --- */
.guia-outros { display: flex; flex-direction: column; gap: 20px; }
.guia-outros__lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.guia-outros__lista a, .bairros-lista__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px;
  font-weight: 600; color: var(--cor-texto); text-decoration: none; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-medio);
}
.guia-outros__lista a span { display: inline-flex; align-items: center; gap: 8px; }
.guia-outros__lista a:hover, .bairros-lista__link:hover { color: var(--cor-primaria); border-color: var(--cor-primaria); }

@media (min-width: 60em) {
  .guia__corpo { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
  .guia__lado { position: sticky; top: 16px; }
}

/* --- Lista de bairros (/bairros) --- */
.bairros { padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bairros__abertura { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.bairros__ir { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 15px; }
.bairros__ir ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 16px; }
.bairros__ir a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.bairros__partes { display: flex; flex-direction: column; gap: 12px; padding: 20px; align-self: start; }
.bairros__partes ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bairros__partes li { display: flex; align-items: center; gap: 10px; }
.bairros__numero {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  font-size: 14px; font-weight: 700; color: var(--cor-destaque-escura); background: var(--cor-destaque-suave); border-radius: 999px;
}
.bairros-cidade { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
.bairros-lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.bairros-lista > li { display: flex; min-width: 0; }
.bairros-lista__cartao {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 20px; color: var(--cor-texto); text-decoration: none;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-medio); box-shadow: var(--sombra);
}
.bairros-lista__cartao:hover { color: var(--cor-texto); box-shadow: var(--sombra-alta); }
.bairros-lista__cartao h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.bairros-lista__cartao p { margin: 0; }
.bairros-lista__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bairros-lista__local { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cor-texto-suave); }
.bairros-lista__resumo { font-size: 15px; line-height: 1.5; color: var(--cor-texto-suave); }
.bairros-lista__ler { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-weight: 600; color: var(--cor-primaria); }
.bairros-fim { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.bairros-fim > section { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 32px); }
.bairros-fim p { margin: 0; }

@media (min-width: 60em) {
  .bairros { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
}

/* --- Blog --- */
.blog { padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.blog__abertura { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.blog__regras { display: flex; flex-direction: column; gap: 12px; padding: 20px; align-self: start; }
.blog__regras ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.blog__regras li { display: flex; align-items: flex-start; gap: 10px; }
.blog__regras li svg { margin-top: 2px; color: var(--cor-destaque-escura); }
.blog__regras p { margin: 0; }
.blog-vazio { display: flex; align-items: flex-start; gap: 16px; padding: clamp(20px, 3vw, 32px); }
.blog-vazio p { margin: 0; }
.blog-vazio__icone { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--cor-primaria); background: var(--cor-primaria-suave); border-radius: 12px; }
.blog-vazio > div { display: flex; flex-direction: column; gap: 8px; }
.blog-guias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.blog-guias__destaque { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 32px); }
.blog-guias__destaque p { margin: 0; }
.blog-guias__destaque ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; color: var(--cor-texto-suave); }
.blog-guias__outros { display: flex; flex-direction: column; gap: 12px; }
.blog-guias__outros ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.blog-uteis { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.blog-uteis > li { display: flex; }
.blog-uteis a {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 20px; color: var(--cor-texto); text-decoration: none;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-medio);
}
.blog-uteis a:hover { color: var(--cor-texto); border-color: var(--cor-primaria); }
.blog-uteis h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 18px; color: var(--cor-primaria); }
.blog-uteis p { margin: 0; font-size: 15px; color: var(--cor-texto-suave); }

@media (min-width: 60em) {
  .blog { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .blog-guias { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}