/* ==========================================================================
   MANCHETES DE IMPRENSA — news-
   Recorte de jornal em HTML: logo, manchete, linha fina, data e link.
   Nenhuma cor escrita a mao: o tom vem do escopo da secao (.sec-paper,
   .sec-dark), e e' por isso que o mesmo arquivo serve aos dois casos.
   ========================================================================== */

.news-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  /* O fio entre os cards E' o fundo da grade aparecendo pelo gap de 1px, em
     vez de uma borda por card. Borda por card dobra na divisa e vira 2px em
     algumas telas; o gap nunca dobra. E' a mesma conta que a
     prova/grade-logos-miolo faz com a malha dela. */
  background:var(--rule);
  border-block:1px solid var(--rule);
}

.news-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:30px 28px 24px;
  background:var(--bg);
}

/* O realce de hover e' um veu em OPACIDADE, nao uma troca de background-color.
   Medido, e a razao e' especifica desta biblioteca: com
   `transition:background-color` no card, trocar o escopo de tom da secao
   (.sec-paper para .sec-dark) deixa o fundo TRAVADO no valor antigo -- o
   --bg novo resolve certo no computado, o fio e o texto invertem, e so' o
   background fica para tras, para sempre. Transicao sobre propriedade que le
   custom property nao acompanha a troca da propria variavel. Opacidade nao
   depende de --bg, entao o veu anima e o tom continua livre para mudar. */
.news-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--fg);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}

/* Filho posicionado paira sobre conteudo em fluxo: sem levantar o conteudo,
   o veu cobriria o texto. Mesma linha que o .grain do core exige de quem o
   usa dentro de um card. */
.news-logo,
.news-titulo,
.news-lead,
.news-pe{
  position:relative;
  z-index:1;
}

/* O destaque ocupa a fileira inteira e sobe o corpo da manchete. Serve a
   primeira noticia, que e' a que decide se a pessoa le as outras. */
.news-destaque{
  grid-column:1 / -1;
  padding-block:38px;
}

.news-logo{
  /* Logo se dimensiona pela ALTURA, nunca pela largura: os arquivos vem em
     proporcoes que variam de 1:1 a 6:1, e travar a largura faz o quadrado
     virar gigante ao lado do retangulo. O max-width e' so' um limite de
     seguranca para o logo muito deitado. */
  block-size:22px;
  inline-size:auto;
  max-inline-size:150px;
  object-fit:contain;
  object-position:left center;
  display:block;
  /* Alinha o logo pela esquerda mesmo dentro do flex column. */
  align-self:flex-start;
}

.news-titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.16rem, 1.9vw, 1.44rem);
  line-height:1.14;
  letter-spacing:-.018em;
  color:var(--fg);
  margin:0;
  /* O core da' text-wrap:balance a todo h1..h4. Numa manchete de tres linhas
     o balance produz a ultima linha orfa com uma palavra; pretty quebra pelo
     fim e mantem o bloco cheio, que e' como jornal compoe. */
  text-wrap:pretty;
}

.news-destaque .news-titulo{
  font-size:clamp(1.5rem, 3.1vw, 2.3rem);
  line-height:1.06;
  letter-spacing:-.026em;
}

.news-link{
  color:inherit;
  text-decoration:none;
}

/* O link se estica por cima do card inteiro. Um link so' no HTML, area de
   clique do tamanho do card -- em vez de um <a> na manchete mais um onclick
   no <article>, que daria dois alvos para o leitor de tela e um deles sem
   destino. O custo esta' no gotcha da ficha. */
.news-link::after{
  content:"";
  position:absolute;
  inset:0;
}

.news-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.news-lead{
  color:var(--fg-2);
  font-size:.95rem;
  line-height:1.56;
  margin:0;
  /* A linha fina e' apoio, nao materia: tres linhas e' o teto antes de o card
     competir com a manchete que ele deveria servir. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.news-destaque .news-lead{
  font-size:1.02rem;
  max-inline-size:62ch;
  -webkit-line-clamp:2;
}

.news-pe{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-block-start:auto;
  padding-block-start:14px;
  border-block-start:1px solid var(--rule);
  font-size:.78rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

.news-ir{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  transition:gap .3s var(--ease);
}

.news-ir::after{
  content:"→";
  /* A seta e' decoracao dentro de um span aria-hidden. O destino de verdade
     esta' no href da manchete, que e' o unico link do card. */
  transition:transform .3s var(--ease);
}

.news-card:hover::before{opacity:.04}

.news-card:hover .news-ir{gap:11px}
.news-card:hover .news-ir::after{transform:translateX(2px)}

@media (prefers-reduced-motion: reduce){
  /* Colado nas regras que animam. O realce de fundo no hover fica -- ele diz
     onde o ponteiro esta', e isso e' informacao. Sai so' o deslocamento da
     seta, que e' enfeite. */
  .news-card::before,
  .news-ir,
  .news-ir::after{transition:none}
  .news-card:hover .news-ir{gap:7px}
  .news-card:hover .news-ir::after{transform:none}
}

@media (max-width: 900px){
  .news-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width: 620px){
  .news-grid{grid-template-columns:1fr}
  .news-card{padding:24px 22px 20px}
  .news-destaque{padding-block:28px}
  .news-logo{block-size:19px}
}