/* =========================================================================
   ÚLTIMAS NOTÍCIAS

   Blocos de tamanhos diferentes, como no site antigo dela, mas com o arranjo
   fixo: a notícia mais recente no bloco grande e as quatro seguintes ao lado.
   Ver o comentário em template-parts/home/noticias.php sobre por que o
   sorteio a cada carregamento foi descartado.

   Esta folha também serve o arquivo de notícias — o card é o mesmo
   componente nos dois lugares.
   ========================================================================= */

.noticias {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.noticias__grade {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	display: grid;
	gap: clamp(0.85rem, 1.8vw, 1.25rem);
	/* Celular primeiro: uma coluna, na ordem em que saíram. */
	grid-template-columns: 1fr;
}

/*
 * Duas colunas a partir de 640px: o destaque ocupa a linha inteira e os quatro
 * cards menores formam um quadrado embaixo.
 */
@media (min-width: 640px) {
	.noticias__grade {
		grid-template-columns: repeat(2, 1fr);
	}

	.card-noticia--destaque {
		grid-column: 1 / -1;
		/* Sem isto o bloco grande fica com a mesma altura de um card pequeno e
		   deixa de ser destaque. 21:9 é largo o bastante para caber o título
		   e o resumo sobre a arte sem cobrir o rosto do personagem. */
		aspect-ratio: 21 / 9;
	}
}

/*
 * A partir de 1000px vira o arranjo do briefing: o destaque à esquerda,
 * ocupando duas linhas, e os quatro menores numa grade 2×2 à direita.
 */
@media (min-width: 1000px) {
	.noticias__grade {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 1fr;
	}

	.card-noticia--destaque {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		aspect-ratio: auto; /* a altura passa a vir das duas linhas ao lado */
	}
}


/* =========================================================================
   CARD DE NOTÍCIA
   ========================================================================= */

.card-noticia {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.card-noticia:hover {
	border-color: var(--border);
	transform: translateY(-3px);
}

.card-noticia__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* A moldura fixa a proporção antes da imagem chegar, então a página não pula
   quando ela carrega. */
.card-noticia__moldura {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-deep);
}

.card-noticia__imagem {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms var(--ease);
}

/* Notícia sem imagem destacada: em vez de um buraco, o mesmo degradê escuro
   que o resto do site usa como fundo. */
.card-noticia__imagem--vazia {
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(212, 175, 55, 0.12), transparent 60%),
		var(--surface);
}

.card-noticia:hover .card-noticia__imagem {
	transform: scale(1.04);
}

.card-noticia__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: clamp(0.85rem, 1.6vw, 1.15rem);
}

.card-noticia__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
	/* Título é escrito por ela e pode vir comprido. Corta em três linhas em
	   vez de esticar o card e desalinhar a grade. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.card-noticia__resumo {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.card-noticia__data {
	/* Empurrado para baixo para as datas ficarem na mesma linha de base em
	   cards com títulos de alturas diferentes. */
	margin-top: auto;
	font-size: 0.75rem;
	color: var(--text-muted);
	opacity: 0.85;
}

.card-noticia__link:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Bloco de destaque

   Aqui a arte ocupa o bloco inteiro e o texto vem por cima, sobre um véu
   escuro. É o que faz o bloco grande preencher a altura das duas linhas ao
   lado sem sobrar espaço vazio embaixo do texto.
   ---------------------------------------------------------------------- */

@media (min-width: 640px) {
	.card-noticia--destaque .card-noticia__link {
		display: block;
		position: relative;
	}

	.card-noticia--destaque .card-noticia__moldura {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	/*
	 * Véu do escuro para o transparente.
	 *
	 * Vai até 65% da altura, e não só até o rodapé do bloco, porque o título
	 * do destaque pode ocupar três linhas — sem isso, a última linha cairia
	 * sobre a parte clara da arte e sumiria.
	 */
	.card-noticia--destaque .card-noticia__moldura::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to top,
			rgba(7, 7, 10, 0.92) 0%,
			rgba(7, 7, 10, 0.75) 30%,
			rgba(7, 7, 10, 0.15) 65%,
			transparent 100%);
		pointer-events: none;
	}

	.card-noticia--destaque .card-noticia__texto {
		position: relative;
		justify-content: flex-end;
		height: 100%;
		gap: 0.7rem;
		padding: clamp(1.1rem, 2.4vw, 1.9rem);
	}

	.card-noticia--destaque .card-noticia__titulo {
		font-size: clamp(1.05rem, 2.2vw, 1.6rem);
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.card-noticia--destaque .card-noticia__resumo {
		max-width: 56ch;
	}

	/* No destaque a data não é empurrada para o fim: o texto já está colado no
	   rodapé do bloco, e o auto abriria um vão no meio do véu. */
	.card-noticia--destaque .card-noticia__data {
		margin-top: 0;
	}
}

/* -------------------------------------------------------------------------
   Topo da seção: título à esquerda, "Ver todas" à direita
   ---------------------------------------------------------------------- */

.noticias__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/*
 * O botão continua o dourado de sempre.
 *
 * Eu tinha deixado ele cinza e menor ao subir para a linha do título, para
 * não competir com o título dourado ao lado. Ela pediu para mudar só o
 * lugar, e o cinza foi conta minha — ela mandou dois prints seguidos
 * apontando justamente ele. Voltou ao padrão: mesmo botão do resto do site.
 */

/* No celular o botão vai para baixo do título e ocupa a linha, em vez de
   ficar espremido ao lado dele. */
@media (max-width: 560px) {
	.noticias__topo { flex-direction: column; align-items: stretch; }
	.noticias__acao { justify-content: center; }
}