/* Página de Notícias — variações de tamanho da grade de destaques.

   Os quatro posts mais recentes usam a mesma caixa do site (.nc-ct-feature:
   imagem de fundo, gradiente por cima e conteúdo sobreposto). O que muda entre
   eles é só quanto ocupam na grade e a escala do texto:

     1º  2 colunas x 2 linhas   título grande, com resumo
     2º  2 colunas x 1 linha    título médio, com resumo
     3º  1 coluna  x 1 linha    título compacto, sem resumo
     4º  1 coluna  x 1 linha    idem

   A especificidade é dupla (.nc-ct-feature.jrc-destaque--x) para vencer o
   span 2x2 que a classe base define. */

.nc-ct-feature.jrc-destaque--larga {
	grid-column: span 2;
	grid-row: span 1;
	padding: clamp(22px, 2.2vw, 30px);
}

.nc-ct-feature.jrc-destaque--menor {
	grid-column: span 1;
	grid-row: span 1;
	padding: clamp(20px, 2vw, 26px);
}

.jrc-destaque--larga .nc-ct-feature__title {
	font-size: clamp(19px, 1.7vw, 24px);
	margin-bottom: 10px;
}

.jrc-destaque--menor .nc-ct-feature__title {
	font-size: clamp(17px, 1.4vw, 20px);
	margin-bottom: 10px;
	line-height: 1.15;
}

.jrc-destaque--larga .nc-ct-feature__desc {
	font-size: 14px;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jrc-destaque--larga .nc-ct-feature__tag,
.jrc-destaque--menor .nc-ct-feature__tag {
	font-size: 9.5px;
	padding: 5px 10px;
}

.jrc-destaque--larga .nc-ct-feature__action,
.jrc-destaque--menor .nc-ct-feature__action {
	font-size: 10.5px;
}

/* Nas telas menores a grade vira 2 colunas e depois 1; as caixas seguem o
   mesmo comportamento da classe base para não sobrar buraco na grade. */
@media (max-width: 980px) {
	.nc-ct-feature.jrc-destaque--larga,
	.nc-ct-feature.jrc-destaque--menor {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 280px;
	}
}

/* Faixa dos demais posts — mesmo cartão da home, em fundo claro. */
.jrc-noticias-lista {
	margin-top: clamp(28px, 3.4vw, 48px);
}