/*
 * Notícias (news.php): destaque no requadro, grade de cartões e o filtro por
 * categoria. Os componentes (cartão, filtros, requadro) estão em site.css;
 * aqui só o arranjo da página e os movimentos do cartão.
 *
 * Ganchos:
 *   .noticias__item           destaque e itens da grade (filtrados por data-categoria)
 *   .noticias__item--inteira  cartaz ou logotipo: a imagem cabe inteira na moldura
 *   .noticias__item--entrando posto por js/paginas/noticias.js quando o filtro muda
 */

@layer componentes {
  .noticias .barra-filtros { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

  /* Destaque: requadro em aço (moldura dupla com o filete do cartão, como a
     margem de uma carta) e o título "Mais recente" cortando a linha */
  .noticias__destaque { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .noticias__destaque .requadro { border-color: var(--aco); }
  .noticias__destaque .cartao__corpo { gap: 1rem; justify-content: center; }
  .noticias__destaque .cartao__resumo {
    max-width: 26.5em; /* 52ch da Texto, em em por causa do fallback (CLS) */
    color: var(--basalto-suave);
    font-family: var(--fonte-texto);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.55;
  }
  @media (min-width: 60em) {
    .noticias__destaque .cartao__corpo { padding: clamp(1.5rem, 3vw, 2.75rem); }
    /* A foto ocupa a altura toda do cartão, qualquer que seja o texto */
    .noticias__destaque .cartao__midia { position: relative; min-height: 24rem; }
    .noticias__destaque .cartao__midia img { position: absolute; inset: 0; }
  }

  .noticias__grade { align-items: stretch; }
  .noticias__grade > li { display: flex; }
  .noticias__grade .cartao { flex: 1; }
  .noticias__grade .cartao__resumo {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  /* Cartaz ou logotipo: inteiro, sobre névoa, sem corte */
  .noticias__item--inteira .cartao__midia { background: var(--nevoa); }
  .noticias__item--inteira .cartao__midia img { object-fit: contain; padding: clamp(0.75rem, 2vw, 1.25rem); }

  /* A moldura da foto é a mesma da foto grande da notícia (View Transition) */
  .noticias .cartao__midia { view-transition-class: noticia; }

  .noticias .vazio { margin-bottom: clamp(2rem, 4vw, 3rem); }
}

@layer movimento {
  @media (prefers-reduced-motion: no-preference) {
    /* Troca de filtro: os cartões que ficam emergem em cascata curta */
    .noticias__item--entrando {
      animation: noticias-emergir var(--dur-padrao) var(--ease-assentamento) both;
      animation-delay: calc(var(--ordem, 0) * 40ms);
    }

    ::view-transition-group(*.noticia) {
      animation-duration: 400ms;
      animation-timing-function: var(--ease-assentamento);
    }
  }

  @keyframes noticias-emergir {
    from { opacity: 0; transform: translateY(12px); }
  }
}