/* ==========================================================================
   PÁGINA INICIAL
   ==========================================================================

   Seções (procure os títulos abaixo):
   - CABEÇALHO DE SEÇÃO .... fio dourado, título, descrição, "Ver tudo"
   - DESTAQUES ............. matéria principal + manchetes ao lado
   - SEÇÃO CONCURSOS ....... fundo marfim, cards de concurso
   - SEÇÃO CARREIRA ........ grade de 3 cards com imagem
   - SEÇÃO FINANÇAS ........ fundo azul-marinho
   - ÚLTIMOS CONTEÚDOS ..... lista + coluna "Guias"

   HTML: front-page.php e template-parts/secoes/
   A ordem das seções é definida em front-page.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CABEÇALHO DE SEÇÃO
   -------------------------------------------------------------------------- */
.secao__cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--espaco-3) var(--espaco-5);
	margin-bottom: var(--espaco-6);
}

.secao__titulo {
	font-size: var(--titulo-secao);
	font-weight: var(--peso-extra);
	letter-spacing: -0.025em;
}

.secao__titulo::before {
	content: "";
	display: block;
	width: var(--fio-dourado-largura);
	height: var(--fio-dourado-altura);
	margin-bottom: var(--espaco-3);
	border-radius: 2px;
	background: var(--cor-destaque);
}

.secao__descricao {
	max-width: 52ch;
	margin-top: var(--espaco-2);
	font-size: 0.9375rem;
	color: var(--cor-texto-suave);
}

.secao__ver-tudo {
	display: inline-flex;
	align-items: center;
	gap: var(--espaco-2);
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: var(--peso-semi);
	color: var(--cor-primaria);
	text-decoration: none;
	white-space: nowrap;
}

.secao__ver-tudo .icone {
	transition: transform var(--transicao);
}

.secao__ver-tudo:hover .icone {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   DESTAQUES
   Celular: matéria principal e, abaixo, as manchetes.
   Computador: principal à esquerda (cerca de 2/3) e manchetes à direita.
   -------------------------------------------------------------------------- */
.secao--destaques {
	padding-top: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.destaques {
	display: grid;
	gap: var(--espaco-6);
}

.destaques__secundarios {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.destaques__secundarios {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--espaco-5);
	}

	.destaques__secundarios .card--compacto {
		padding: var(--espaco-4) 0 0;
		border-bottom: 0;
		border-top: 1px solid var(--cor-linha);
	}
}

@media (min-width: 1024px) {
	.destaques {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
		gap: var(--espaco-7);
		align-items: start;
	}

	.destaques__secundarios {
		padding-left: var(--espaco-6);
		border-left: 1px solid var(--cor-linha);
	}

	.destaques__secundarios .card--compacto {
		padding-block: var(--espaco-5);
	}

	.destaques__secundarios .card--compacto:first-child {
		padding-top: 0;
	}

	.destaques__secundarios .card__titulo {
		font-size: 1.1875rem;
	}
}

/* --------------------------------------------------------------------------
   SEÇÃO CONCURSOS
   -------------------------------------------------------------------------- */
.secao--concursos {
	background: var(--cor-superficie);
}

/* --------------------------------------------------------------------------
   SEÇÃO CARREIRA
   Usa a grade de 3 colunas (layout.css). No celular, o primeiro card fica
   grande e os demais viram linhas com miniatura (regra em layout.css).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   SEÇÃO FINANÇAS (fundo escuro)
   -------------------------------------------------------------------------- */
.secao--escura {
	background: var(--cor-fundo-escuro);
	color: var(--cor-marfim);
}

.secao--escura .secao__titulo,
.secao--escura .card__titulo {
	color: var(--cor-branco);
}

.secao--escura .secao__descricao,
.secao--escura .card__resumo {
	color: rgba(245, 243, 237, 0.78);
}

.secao--escura .card__meta {
	color: rgba(245, 243, 237, 0.68);
}

.secao--escura .secao__ver-tudo,
.secao--escura .etiqueta {
	color: var(--cor-destaque);
}

.secao--escura .card--compacto {
	border-bottom-color: rgba(245, 243, 237, 0.14);
}

.secao--escura .card__imagem {
	background: rgba(255, 255, 255, 0.06);
}

.secao--escura :focus-visible,
.secao--escura .card__link:focus-visible::after {
	outline-color: var(--cor-foco-escuro);
}

.financas__grade {
	display: grid;
	gap: var(--espaco-6);
}

@media (min-width: 768px) {
	.financas__grade {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--espaco-7);
		align-items: start;
	}

	.financas__principal .card__titulo {
		font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
		font-weight: var(--peso-extra);
		line-height: 1.18;
	}
}

/* --------------------------------------------------------------------------
   ÚLTIMOS CONTEÚDOS + GUIAS
   -------------------------------------------------------------------------- */
.ultimas {
	display: grid;
	gap: var(--espaco-7);
}

.ultimas .lista-cards .card--horizontal:first-child {
	padding-top: 0;
}

.ultimas__mais {
	margin-top: var(--espaco-6);
}

@media (min-width: 1024px) {
	.ultimas--com-guias {
		grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
		gap: var(--espaco-8);
		align-items: start;
	}
}

.guias {
	padding: var(--espaco-5);
	border-radius: var(--raio-grande);
	background: var(--cor-superficie);
}

@media (min-width: 1024px) {
	.guias {
		position: sticky;
		top: calc(var(--altura-cabecalho) + var(--wp-admin--admin-bar--height, 0px) + var(--espaco-5));
		padding: var(--espaco-6);
	}
}

.guias .secao__cabecalho {
	margin-bottom: var(--espaco-4);
}

.guias__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: guia;
}

.guias__item {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	align-items: start;
	counter-increment: guia;
	border-bottom: 1px solid var(--cor-marfim-escuro);
}

.guias__item:last-child {
	border-bottom: 0;
}

.guias__item::before {
	content: counter(guia, decimal-leading-zero);
	padding-top: var(--espaco-4);
	font-family: var(--fonte-titulos);
	font-size: 1rem;
	font-weight: var(--peso-extra);
	color: var(--cor-dourado-escuro);
	font-variant-numeric: tabular-nums;
}

.guias__item:first-child::before {
	padding-top: 0;
}

.guias__item .card--compacto {
	border-bottom: 0;
}

.guias__item:not(:first-child) .card--compacto {
	padding-top: var(--espaco-4);
}