/*
 * ESTILO DA HOME — e só dela.
 *
 * O carrossel de notícias é o que esta tela tem de próprio. Botão, aviso e
 * campo continuam no base.css, porque são do sistema.
 *
 * O CARROSSEL É UMA LISTA QUE ROLA, e isso é decisão de engenharia, não de
 * estética: `overflow-x:auto` + `scroll-snap` dá rolagem com o dedo, com a
 * roda do mouse e com o teclado — tudo isso sem uma linha de JavaScript. O
 * script acrescenta o movimento automático e as setas. Se ele falhar, o
 * carrossel continua inteiro e utilizável; a biblioteca que o legado usava
 * (react-slick) levava o conteúdo junto quando falhava.
 */

.noticias-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 1rem;
}

.noticias-topo .secao-titulo { margin: 0; }

.noticias-fonte {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto-fraco);
  font-size: 0.75rem;
}

/* -------------------------------------------------------------- carrossel */

.carrossel {
  position: relative;
  width: 100%;
}

.carrossel-trilho {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0 1rem;
  list-style: none;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Ver a nota sobre a barra escondida logo abaixo. */
  scrollbar-width: none;
}

/* BARRA ESCONDIDA, e é seguro esconder porque o carrossel anda SOZINHO e tem
   setas. A regra geral é o contrário — barra invisível esconde que há mais
   conteúdo, e quem não vê não rola. Aqui o movimento automático já revela isso
   melhor que qualquer barra, e a rolagem com o dedo continua funcionando. */
.carrossel-trilho::-webkit-scrollbar { height: 0; width: 0; }

.noticia {
  flex: 0 0 auto;
  width: min(22rem, 82%);   /* 82% deixa a próxima ASSOMANDO na borda: é o que
                               revela que o carrossel rola, sem precisar de
                               instrução escrita. */
  scroll-snap-align: start;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-borda);
  border-radius: 0.5rem;
  background: var(--cor-superficie);
  transition: border-color .15s, transform .15s;
}

.noticia:hover { transform: translateY(-2px); }

/* A cor é a do GDACS, não inventada aqui — quem confere contra a fonte
   encontra o mesmo nível. */
.noticia.nivel-vermelho { border-left-color: #f87171; }
.noticia.nivel-laranja  { border-left-color: var(--cor-alerta); }
.noticia.nivel-verde    { border-left-color: #4ade80; }
/* Desconhecido NÃO usa a cor de verde: pintar de "tudo bem" o que não se
   entendeu é como um evento grave passa despercebido. */
.noticia.nivel-desconhecido { border-left-color: var(--cor-texto-fraco); }

.noticia-link {
  display: block;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* A imagem tem PROPORÇÃO FIXA e `object-fit: cover`. As imagens do GDACS vêm
   em tamanhos diferentes — de 458 bytes a dezenas de KB, com formatos variados —
   e sem a proporção travada cada cartão ficaria de uma altura, e a fileira
   inteira dançaria a cada rolagem. */
.noticia-imagem {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.35rem;
  margin-bottom: 0.75rem;
  background: var(--cor-fundo);
}

.noticia-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.noticia-nivel {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nivel-vermelho .noticia-nivel { color: #fca5a5; }
.nivel-laranja  .noticia-nivel { color: var(--cor-alerta); }
.nivel-verde    .noticia-nivel { color: #4ade80; }
.nivel-desconhecido .noticia-nivel { color: var(--cor-texto-fraco); }

.noticia-tipo { color: var(--cor-texto-fraco); font-size: 0.8rem; }

.noticia-titulo {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.35;
  /* Três linhas e corta: títulos do GDACS variam de 40 a 160 caracteres, e sem
     o limite os cartões ficam de alturas diferentes na mesma fileira. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticia-link:hover .noticia-titulo { color: var(--cor-destaque); }

.noticia-campos { margin: 0; display: grid; gap: 0.35rem; }
.noticia-campos div { display: flex; gap: 0.4rem; align-items: baseline; }

.noticia-campos dt {
  color: var(--cor-texto-fraco);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}

.noticia-campos dd {
  margin: 0;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ setas */

/* As setas só existem quando o JavaScript liga — sem ele ficam escondidas, em
   vez de aparecerem mortas na tela. Botão que não faz nada é pior que botão
   nenhum: ensina que a interface está quebrada. */
.carrossel-seta {
  display: none;
  position: absolute;
  top: 40%;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.carrossel[data-carrossel-ativo] .carrossel-seta { display: block; }

/* Pausa visível: quando o mouse está em cima, o carrossel para de andar — e a
   borda mostra que ele parou de propósito, em vez de parecer travado. */
.carrossel[data-pausado] { outline: 1px dashed var(--cor-borda); outline-offset: 6px; }

.carrossel-seta:hover { border-color: var(--cor-destaque); color: var(--cor-destaque); }
.carrossel-seta[disabled] { opacity: .35; cursor: default; }
.carrossel-seta-esq { left: -0.6rem; }
.carrossel-seta-dir { right: -0.6rem; }

/* Em tela estreita a seta cobriria o cartão; ali a rolagem com o dedo é melhor
   que qualquer botão. */
@media (max-width: 700px) {
  .carrossel[data-carrossel-ativo] .carrossel-seta { display: none; }
  .noticia { width: 86%; }
}

/* O estado de espera do noticiário. Ele existe porque a home agora aparece
   ANTES das notícias: sem um lugar marcado, o bloco surgiria do nada e
   empurraria o conteúdo abaixo dele. */
.noticias-carregando {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 1.5rem 2%;
  border: 1px dashed var(--cor-borda);
  border-radius: 0.5rem;
  color: var(--cor-texto-fraco);
  font-size: 0.9rem;
}
.noticias-carregando .icone { animation: noticias-girar 1.1s linear infinite; }

@keyframes noticias-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .noticias-carregando .icone { animation: none; }
}

/* ------------------------------------------------------------------ capa */

/*
 * TEXTO E IMAGEM LADO A LADO.
 *
 * A primeira versão era banner na largura toda com o texto por cima, e ficava
 * grande demais: a imagem tomava a tela e empurrava o botão para fora dela.
 *
 * `1.2fr 1fr` dá ao texto um pouco mais de espaço que à imagem — texto precisa
 * de largura para não quebrar em três palavras por linha; imagem só precisa
 * ser reconhecível.
 *
 * `auto-fit` não serve aqui: as duas colunas têm papéis diferentes e tamanhos
 * diferentes de propósito, e `auto-fit` as igualaria.
 */
.inicio-capa {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 1.5rem 2%;
  border: 1px solid var(--cor-borda);
  border-radius: 0.6rem;
  background: var(--cor-superficie);
}

.inicio-chamada { display: flex; flex-direction: column; gap: 0.7rem; }
.inicio-chamada .secao-titulo { margin: 0; font-size: 1.6rem; }
.inicio-promessa { color: var(--cor-destaque); }
.inicio-acao { align-self: flex-start; margin-top: 0.4rem; }

.inicio-banner {
  display: block;
  width: 100%;
  height: auto;
  /* Casa com o `width`/`height` do HTML e reserva o espaço ANTES de a imagem
     chegar: sem isso a página salta quando ela carrega. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--cor-borda);
}

/*
 * Em tela estreita as duas colunas viram uma, e o TEXTO VEM PRIMEIRO — ele já
 * é o primeiro no HTML, então nada a fazer aqui além de desfazer a grade. Num
 * telefone, quem abre quer ler o que é e achar o botão, não rolar uma foto.
 */
@media (max-width: 900px) {
  .inicio-capa { grid-template-columns: 1fr; gap: 1.2rem; }
  .inicio-chamada .secao-titulo { font-size: 1.35rem; }
}