/* ==========================================================================
   ChatISP: /noticias/ e os artigos

   Carregado pelo indice das noticias e por TODO artigo (componentes/artigo.php
   inclui esta folha sozinho). So o que e exclusivo destes dois lugares:

     .noticias-*      o indice do blog: destaque, atalhos, eixos editoriais.
     .artigo-*        a leitura: meta, destaque de abertura, blocos de fim.

   O cartao de artigo saiu daqui (veja a secao 01). Capa, trilha, indice
   lateral, prosa, relacionadas e chamada vem de css/pagina.css. Nada de
   valor escrito a mao: so var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Cartao de artigo: mudou de folha

   .cartao-artigo vive em css/pagina.css (6.1), que esta folha ja carrega por
   baixo. Saiu daqui quando deixou de ser exclusivo de /noticias/: passou a
   aparecer tambem no "Leia tambem" das paginas do produto, que nao carregam
   esta folha. Um componente usado em tres lugares nao pode morar na folha de
   um deles.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   02. Indice de /noticias/
   -------------------------------------------------------------------------- */

/* O artigo mais recente ocupa a largura toda, em duas colunas. */
.noticias-destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--esp-grid);
  align-items: center;
  padding: var(--e7);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sombra-2);
  transition:
    transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.noticias-destaque:hover {
  transform: translateY(-3px);
  border-color: var(--verde-linha);
}

.noticias-destaque:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.noticias-destaque-texto {
  display: grid;
  justify-items: start;
  gap: var(--e4);
}

.noticias-destaque h2 {
  margin: 0;
  font-size: var(--t4);
  line-height: 1.12;
  letter-spacing: var(--tk2);
}

.noticias-destaque p {
  margin: 0;
  max-width: 54ch;
  font-size: var(--c2);
  line-height: 1.72;
  color: var(--suave);
}

/* Coluna direita do destaque: so tipografia, porque o site nao tem banco de
   imagem editorial e uma foto generica seria pior que nenhuma. */
.noticias-destaque-marca {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--e3);
  padding: var(--e7) var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--verde-vidro);
  text-align: center;
}

.noticias-destaque-marca .icone {
  width: 40px;
  height: 40px;
  color: var(--verde);
}

.noticias-destaque-marca strong {
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1;
}

.noticias-destaque-marca span {
  font-size: var(--c5);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

/* --- Eixos editoriais --------------------------------------------------- */

.noticias-eixo + .noticias-eixo {
  margin-top: var(--esp-bloco);
}

/* A regra que fecha o cabecalho do eixo e um ::after de 1px, e nao a propria
   borda, porque borda nao escala: assim ela pode se desenhar da esquerda
   quando a prateleira entra (secao 04). A borda continua declarada, e
   transparente. E ela que ocupa o 1px de ALTURA que a regra sempre ocupou.
   O ::after se posiciona contra a caixa de padding, e o -1px o devolve
   exatamente para cima de onde a borda era pintada. Parada, a pagina fica
   pixel a pixel a mesma. */
.noticias-eixo-cabecalho {
  position: relative;
  display: grid;
  gap: var(--e2);
  margin-bottom: var(--esp-grid);
  padding-bottom: var(--e4);
  border-bottom: 1px solid transparent;
}

.noticias-eixo-cabecalho::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--borda);
  transform-origin: left center;
}

.noticias-eixo-cabecalho h2 {
  margin: 0;
  font-size: var(--t5);
  line-height: 1.2;
  letter-spacing: var(--tk3);
}

.noticias-eixo-cabecalho p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

/* Atalhos para os eixos, no topo da lista. */
.noticias-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.noticias-atalhos a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  color: var(--suave);
  font-size: var(--c4);
  text-decoration: none;
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.noticias-atalhos a:hover {
  color: var(--texto);
  border-color: var(--verde-linha);
}

.noticias-atalhos b {
  color: var(--verde);
  font-weight: var(--p-forte);
}

/* --------------------------------------------------------------------------
   03. Leitura do artigo

   Vazia de proposito. O que havia aqui, .prosa > .artigo-abertura e
   .artigo-produto .relacionadas-grade, mudou para css/pag-artigo.css.

   Esta folha e do INDICE. Os artigos a carregavam inteira para usar essas
   duas regras: 9,4 kB por 0,2 kB de uso, medido no navegador (2 seletores de
   27). A pagina de um artigo nao tem destaque, nem filtro de eixo, nem
   prateleira. Tudo que sobra aqui e da capa de /noticias/.
   -------------------------------------------------------------------------- */

/* A linha de creditos (data, leitura, autoria) saiu daqui para a capa:
   .capa-creditos, em pagina.css. */

/* --------------------------------------------------------------------------
   04. Movimento do indice e dos cartoes

   Mesma regra da secao 08 de css/pagina.css, e vale repetir aqui: NADA MUDA
   COM A PAGINA PARADA. Todo gesto daqui e invisivel num print e existe
   apenas durante a rolagem.

   Dois gestos, e os dois sao do indice: a marca do destaque (profundidade) e
   a regra de cada prateleira (divisao). A subida dos cartoes mora em
   pagina.css 8.7, junto do cartao. Ela vale em toda pagina que lista
   artigos, nao so aqui.

   Uma lista de dez cartoes e o lugar mais facil do site para exagerar: cada
   cartao pedindo o seu efeito vira um mosaico piscando. O que se move e o
   que ja tinha funcao.

   O bloco inteiro vive dentro de @supports/@media: sem timeline de rolagem,
   ou com movimento reduzido, nada disto e declarado e a pagina fica no
   estado de repouso, que e o estado completo, nunca um rascunho.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* --- 4.1 A marca do destaque tem profundidade ------------------------
       A coluna direita do destaque e o unico bloco da pagina sem texto de
       leitura: e marca, nao conteudo. Deslocar so ela, devagar, separa os
       dois planos do cartao sem mexer numa linha que alguem esteja lendo.

       1.1% de um bloco desse tamanho da poucos pixels de ponta a ponta, e
       isso e proposital. Parallax que se anuncia vira enjoo; este so tira o
       cartao da chapa. Abaixo de 980px a marca some (secao 05) e o gesto some
       com ela, sem precisar ser desligado. */
    .noticias-destaque-marca {
      --mov-forca: 1.1%;
      animation: mov-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* --- 4.2 A regra da prateleira se desenha ----------------------------
       Sao quatro eixos, e a regra de 1px e o que diz que um terminou e outro
       comecou. Desenhada da esquerda quando o cabecalho entra, ela vira o
       gesto de abrir a prateleira, quatro vezes na pagina, que e cadencia,
       nao tique.

       A faixa termina em `cover`, e nao dentro de `entry`: o cabecalho tem
       umas cinco linhas de altura, e uma faixa inteira dentro de `entry`
       daria uns cem pixels de rolagem, com a linha piscando em vez de
       correr (armadilha 3 do SITE.md). */
    .noticias-eixo-cabecalho::after {
      animation: mov-fio linear both;
      animation-timeline: view();
      animation-range: entry 35% cover 28%;
    }
  }
}

/* --------------------------------------------------------------------------
   05. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .noticias-destaque {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--e6);
  }

  .noticias-destaque-marca {
    display: none;
  }

  .noticias-destaque h2 {
    font-size: var(--t5);
  }
}

@media (max-width: 680px) {
  .noticias-atalhos a {
    min-height: 44px;
  }
}