/* =============================================================================
   Glossário de raças — índice, letra e verbete.

   Usa os mesmos tokens da home. O verde é a cor desta área: ele já marcava a
   faixa do glossário na home, e aqui vira a cor da seção inteira, para a
   pessoa saber que continua no mesmo lugar.
   ========================================================================== */

/* ---------------------------------------------------------------- topo --- */

.brl-gl-topo{ padding-bottom:28px }
.brl-gl-topo h1 span{ color:var(--brl-verde) }

/* Trilha. */
.brl-trilha{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; color:var(--brl-texto-fraco);
  margin:0 0 18px;
}
.brl-trilha a{ color:var(--brl-verde) }
.brl-trilha span[aria-hidden]{ opacity:.45 }

/* -------------------------------------------------------------- filtro --- */

.brl-gl-filtro{ margin:28px 0 0; max-width:580px }
.brl-gl-filtro[hidden]{ display:none }

/* O campo é a ferramenta principal desta página, então tem porte de botão
   grande: lupa dentro, sombra macia por baixo e anel verde ao receber foco.
   O grid de três colunas mantém lupa e X fixos nas pontas enquanto o texto
   ocupa o meio — sem padding mágico calculado na mão. */
.brl-gl-campo{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background:#fff; border:2px solid #c9e3d8; border-radius:999px;
  padding:4px 8px 4px 20px;
  box-shadow:0 4px 14px rgba(15,114,102,.07);
  transition:border-color .15s, box-shadow .15s;
}
.brl-gl-campo:focus-within{
  border-color:var(--brl-verde);
  box-shadow:0 0 0 4px rgba(15,114,102,.16), 0 4px 14px rgba(15,114,102,.1);
}
.brl-gl-lupa{ width:20px; height:20px; color:var(--brl-verde); flex:none }

.brl-gl-busca{
  min-width:0; width:100%; border:0; background:none; outline:none;
  font-family:var(--brl-fonte); font-size:17px; font-weight:600;
  color:var(--brl-texto); padding:14px 0;
}
.brl-gl-busca::placeholder{ color:var(--brl-texto-fraco); font-weight:400 }

.brl-gl-x{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:0; border-radius:50%; background:var(--brl-fundo-menta);
  color:var(--brl-verde); cursor:pointer; padding:0;
  transition:background .13s, transform .13s;
}
.brl-gl-x[hidden]{ display:none }
.brl-gl-x svg{ width:14px; height:14px }
.brl-gl-x:hover{ background:var(--brl-verde); color:#fff; transform:rotate(90deg) }

/* O contador fica numa pastilha, para a resposta da busca ser um objeto e
   não uma linha de texto solta embaixo do campo. */
.brl-gl-conta{ margin:12px 0 0; min-height:30px }
.brl-gl-conta:not(:empty){
  display:inline-block; font-size:14px; font-weight:700;
  color:var(--brl-verde); background:var(--brl-fundo-menta);
  border-radius:999px; padding:6px 14px;
}
.brl-gl-conta.is-vazio{ color:var(--brl-cor); background:var(--brl-cor-clara) }

/* ------------------------------------------------------------ alfabeto --- */

.brl-gl-alfabeto{ margin-top:22px }
.brl-alfabeto-atual{
  background:var(--brl-verde) !important; color:#fff !important;
  border-color:var(--brl-verde) !important;
}
/* Letra que o filtro esvaziou: continua no lugar, apagada, para a régua A–Z
   não mudar de tamanho a cada tecla digitada. */
.brl-gl-alfabeto a.is-vazia{ opacity:.3; pointer-events:none }

/* --------------------------------------------------------------- lista --- */

.brl-gl-grupo{ margin-bottom:38px }
.brl-gl-grupo[hidden]{ display:none }

.brl-gl-letra{
  display:flex; align-items:center; gap:14px;
  font-size:24px; margin:0 0 18px;
  padding-bottom:12px; border-bottom:2px solid var(--brl-borda);
  /* Encosta no topo ao pular pela âncora, sem ficar embaixo do cabeçalho. */
  scroll-margin-top:92px;
}
.brl-gl-letra-marca{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:14px; background:var(--brl-fundo-menta); color:var(--brl-verde);
  font-family:var(--brl-fonte-titulo); font-weight:800; font-size:22px;
}
.brl-gl-letra small{
  font-family:var(--brl-fonte); font-size:14px; font-weight:700;
  color:var(--brl-texto-fraco);
}

/* Colunas, e não uma coluna só: 287 nomes em fila única dariam metros de
   rolagem, e nome de raça é curto — cabe muito mais por linha. */
.brl-gl-termos{
  list-style:none; margin:0; padding:0;
  columns:4; column-gap:28px;
}
@media (max-width:1000px){ .brl-gl-termos{ columns:3 } }
@media (max-width:720px){  .brl-gl-termos{ columns:2 } }
@media (max-width:460px){  .brl-gl-termos{ columns:1 } }

.brl-gl-termos li{
  break-inside:avoid; margin-bottom:2px;
}
.brl-gl-termos li[hidden]{ display:none }
.brl-gl-termos a{
  display:block; padding:7px 12px; border-radius:10px;
  color:var(--brl-texto); font-weight:600; font-size:16px;
  transition:background .12s, color .12s;
}
.brl-gl-termos a:hover{
  text-decoration:none; background:var(--brl-fundo-menta); color:var(--brl-verde);
}

/* Estado vazio do filtro. */
.brl-gl-vazio{
  margin:0; padding:28px; text-align:center;
  background:var(--brl-fundo-menta); border-radius:var(--brl-raio);
  font-weight:600; color:var(--brl-texto);
}
.brl-gl-vazio[hidden]{ display:none }
.brl-gl-limpar{
  display:inline-block; margin-left:8px; border:0; background:none; padding:0;
  font:inherit; color:var(--brl-verde); font-weight:800; cursor:pointer;
  text-decoration:underline;
}

/* ------------------------------------------------------------- verbete --- */

.brl-vb-topo{ padding-bottom:24px }

/* A ficha é <dl>: pares rótulo-valor de um só item. */
.brl-ficha{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2px; margin:28px 0 0; padding:0;
  background:var(--brl-borda); border:2px solid var(--brl-borda);
  border-radius:var(--brl-raio); overflow:hidden;
}
.brl-ficha-item{ background:#fff; padding:16px 18px }
.brl-ficha dt{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--brl-texto-fraco); margin:0 0 4px;
}
.brl-ficha dd{
  margin:0; font-family:var(--brl-fonte-titulo); font-weight:700; font-size:19px;
  color:var(--brl-texto);
}

.brl-vb-texto{ padding-bottom:40px }
/* Sobrou alguma tabela no corpo — um verbete fora do padrão, por exemplo. */
.brl-vb-texto table{
  width:100%; border-collapse:collapse; margin:24px 0;
  border:2px solid var(--brl-borda); border-radius:var(--brl-raio); overflow:hidden;
}
.brl-vb-texto th,.brl-vb-texto td{
  padding:11px 14px; text-align:left; border-bottom:1px solid var(--brl-borda);
}
.brl-vb-texto tr:last-child th,.brl-vb-texto tr:last-child td{ border-bottom:0 }
.brl-vb-texto th{ background:var(--brl-fundo-menta); font-family:var(--brl-fonte-titulo) }

/* O par anterior/próxima vive no common.css: o verbete e a aula usam o mesmo
   componente, e aqui só a cor do rótulo muda para o verde do glossário. */
.brl-verbete .brl-viz small{ color:var(--brl-verde) }
.brl-verbete .brl-viz:hover{
  border-color:var(--brl-verde); box-shadow:0 10px 22px rgba(15,114,102,.12);
}

.brl-vb-irmaos h2{ font-size:clamp(22px,3vw,30px) }
.brl-vb-irmaos .brl-gl-termos a:hover{ background:#fff }