/* =============================================================
   GUIA DE ESCOLAS
   Estilos exclusivos da página pilar e das páginas de bairro.
   ============================================================= */

/* ---------- trilha de navegação ----------
   Existe por dois motivos: orienta quem chegou pela busca direto
   numa página de bairro, e alimenta o BreadcrumbList, que o Google
   costuma exibir no lugar da URL crua. */
.trilha {
  background: var(--creme);
  border-bottom: 1px solid var(--borda);
  font-size: .875rem;
}
.trilha ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2);
  margin: 0; padding: var(--e3) 0;
}
.trilha li { display: flex; align-items: center; gap: var(--e2); color: var(--cinza); }
.trilha li + li::before { content: "\203A"; color: var(--borda); }
.trilha a { color: var(--cinza); }

.secao--topo { padding-top: var(--e7); }

/* A COLUNA E A MEDIDA DO TEXTO PRECISAM SER A MESMA COISA.
   Estavam brigando: a coluna tinha 840px e o parágrafo travava em
   68 caracteres, que dão 717px. O título ocupava a coluna, o texto
   ocupava a medida, e os dois nunca alinhavam pela direita.

   720px é a medida, e agora é também a coluna. Em 17px isso dá
   cerca de 68 caracteres por linha, que é o intervalo em que o olho
   volta para o começo da linha seguinte sem se perder. */
.container--leitura { width: min(100% - 2 * var(--e5), 720px); margin-inline: auto; }
.container--leitura p,
.container--leitura .entrada { max-width: none; }

.entrada {
  font-size: 1.1875rem; line-height: 1.55;
  color: var(--tinta); font-weight: 500;
}

.fonte-dados {
  margin-top: var(--e6); padding: var(--e4) var(--e5);
  background: var(--creme); border-radius: var(--raio);
  font-size: .9375rem; color: var(--cinza); max-width: none;
}

/* ---------- índice de bairros ---------- */
.indice-bairros {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--e2);
}
@media (min-width: 700px) { .indice-bairros { grid-template-columns: repeat(2, 1fr); } }
.indice-bairros li { font-size: .9375rem; }

/* ---------- tabela de escolas ----------
   HTML de tabela de verdade, com caption, thead e scope. É isso que
   rende trecho em destaque na busca, e não marcação sobre a tabela:
   o Google lê a tabela em si. */
.tabela-rolagem {
  overflow-x: auto;
  margin-block: var(--e5) var(--e7);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.tabela-escolas {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem;
}
/* A tabela tem tres colunas curtas e CABE no celular. O min-width so
   entra quando ha largura para ele: forcar rolagem lateral em tabela
   pequena e trocar um problema real, o nome quebrando em duas linhas,
   por um pior, a coluna da distancia escondida fora da tela. */
@media (min-width: 700px) {
  .tabela-escolas { min-width: 560px; }
}
.tabela-escolas th[scope="row"] { font-weight: 600; text-align: left; }
.tabela-escolas thead th {
  background: var(--creme);
  padding: var(--e3) var(--e4);
  text-align: left; font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cinza);
  border-bottom: 2px solid var(--borda);
}
@media (min-width: 700px) { .tabela-escolas thead th { white-space: nowrap; } }
.tabela-escolas td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela-escolas tbody tr:last-child td { border-bottom: 0; }
.tabela-escolas tbody tr:nth-child(even) { background: #FCFAF6; }

/* ---------- chamada por bairro ----------
   Uma por bairro, no máximo duas. Repetida a cada escola vira ruído
   e o leitor para de enxergar. E nunca no meio da tabela: cortar a
   informação que a pessoa veio buscar é a forma mais rápida de
   perdê-la. */
.cta-bairro {
  display: grid; gap: var(--e5); align-items: center;
  margin-block: var(--e7);
  padding: var(--e6);
  background: var(--creme);
  border: 1px solid var(--borda);
  border-left: 5px solid var(--verde);
  border-radius: var(--raio);
}
@media (min-width: 860px) {
  .cta-bairro { grid-template-columns: 1fr auto; gap: var(--e7); }
}
.cta-bairro h3 { margin-bottom: var(--e2); }
.cta-bairro p { margin: 0; color: var(--cinza); font-size: .9375rem; }

/* ---------- bloco por escola ---------- */
.escola-proxima {
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--borda);
}
.escola-proxima:last-child { border-bottom: 0; }
.escola-proxima h4 {
  margin: 0 0 var(--e2); font-size: 1rem; font-weight: 700;
}
.escola-proxima p { margin: 0; font-size: .9375rem; color: var(--cinza); }
.escola-proxima__dados {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin-top: var(--e3); font-size: .875rem;
}
.escola-proxima__dados span { color: var(--cinza); }
.escola-proxima__dados b { color: var(--tinta); }

/* =============================================================
   SILO DE BAIRROS
   ============================================================= */
.cartoes-bairro {
  list-style: none; padding: 0; margin: var(--e5) 0 0;
  display: grid; gap: var(--e4);
}
@media (min-width: 640px) { .cartoes-bairro { grid-template-columns: 1fr 1fr; } }
.cartao-bairro {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
  padding: var(--e5);
}
.cartao-bairro h3 { margin: 0 0 var(--e2); font-size: 1.0625rem; }
/* O cartão inteiro é o alvo do clique, não só o texto do link:
   no celular, mirar quatro palavras é atrito. */
.cartao-bairro h3 a { color: var(--tinta); text-decoration: none; }
.cartao-bairro h3 a::after { content: ""; position: absolute; inset: 0; }
.cartao-bairro { position: relative; transition: border-color var(--transicao), box-shadow var(--transicao); }
.cartao-bairro:hover { border-color: var(--terra); box-shadow: 0 4px 14px rgba(20, 33, 61, .07); }
.cartao-bairro:hover h3 a { color: var(--terra); }
.cartao-bairro p { margin: 0; font-size: .9375rem; color: var(--cinza); }

.voltar-pilar { margin-top: var(--e6); font-weight: 700; }
.titulo-grupo { margin-bottom: var(--e3); }

/* =============================================================
   TABELA DE ESCOLAS
   ============================================================= */
/* Com três colunas ela CABE no celular. A rolagem lateral saiu junto
   com o telefone e o endereço: eram eles que empurravam a largura,
   e eram eles que jogavam a coluna da distância para fora da tela. */
.tabela-escolas caption {
  caption-side: top; text-align: left;
  padding: var(--e3) var(--e4) 0;
  font-size: .8125rem; color: var(--cinza); line-height: 1.4;
}
.tabela-escolas th[scope="row"] { font-weight: 600; text-align: left; }
.tabela-escolas td a { color: var(--azul); text-decoration: none; }
.tabela-escolas td a:hover { text-decoration: underline; }
/* A distância é a informação que decide: tabular para alinhar na
   vírgula, e em tinta cheia, não no cinza de apoio. */
.td-km { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-vazio { color: var(--borda); }

/* =============================================================
   O TÍTULO PRECISA PREENCHER A MEDIDA DO TEXTO
   -------------------------------------------------------------
   A coluna de leitura tem 840px, mas o H1 herdava o corpo da página
   inicial, que é de 1180px. Resultado medido: a 52px o título
   "Guia Completo de Escolas de Campinas" ocupa 955px, quebra em duas
   linhas equilibradas, e CADA UMA usa 57% da medida. Fica um bloco
   estreito flutuando sobre um parágrafo largo.

   O corpo abaixo foi calculado, não estimado. A largura do texto
   escala com o corpo, então:

     CELULAR, medida de 327px
       32px  2 linhas, sobram 67px na última
       34px  2 linhas, sobram 31px   <= escolhido
       36px  3 linhas, sobram 321px  <= estoura

     DESKTOP, medida de 720px
       52px  955px de texto, 2 linhas de 66% cada
       38px  698px de texto, UMA linha ocupando 97%  <= escolhido

   O celular decidiu o piso, e é ele que importa mais: é de onde vem
   a maior parte das buscas por reforço escolar.
   ============================================================= */
.container--leitura h1,
.secao--topo h1 {
  font-size: clamp(2.125rem, 1.5rem + 1.6vw, 2.375rem);
}