/* ==========================================================================
   LAYOUT — containers, grades e espaçamento entre seções
   ==========================================================================

   O QUE CONTROLA
   - .container: limita a largura do conteúdo e cria as margens laterais.
   - .grade, .grade--3, .grade--4: grades de cards (colunas).
   - .lista-cards: listas verticais de cards (ex.: Últimos conteúdos).
   - .secao: espaço acima e abaixo das seções da página inicial.

   ONDE MUDAR LARGURAS E ESPAÇOS: base/variaveis.css (seções 5 e 6).
   ========================================================================== */

.container {
	width: 100%;
	max-width: calc(var(--largura-container) + 2 * var(--margem-lateral));
	margin-inline: auto;
	padding-inline: var(--margem-lateral);
}

.container--largo {
	max-width: calc(var(--largura-larga) + 2 * var(--margem-lateral));
}

/* --------------------------------------------------------------------------
   SEÇÕES
   -------------------------------------------------------------------------- */
.secao {
	padding-block: var(--espaco-secao);
}

.secao:not(.secao--concursos):not(.secao--escura) + .secao:not(.secao--concursos):not(.secao--escura) {
	padding-top: 0; /* Duas seções brancas seguidas não somam espaços. */
}

/* --------------------------------------------------------------------------
   GRADES DE CARDS
   Celular: 1 coluna. Tablet: 2. Computador: 3 ou 4.
   -------------------------------------------------------------------------- */
.grade {
	display: grid;
	gap: var(--espaco-grade);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.grade--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.grade--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	/* Até 4 colunas; com menos cards, eles se distribuem pela largura toda. */
	.grade--4 {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* No celular, em grades de 3 cards (Carreira, Leia também, 404), o
   primeiro card fica grande e os demais viram linhas com miniatura, para
   a página não ficar longa demais. */
@media (max-width: 767px) {
	.grade--3 > .card--padrao:not(:first-child):not(.card--sem-imagem) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 96px;
		gap: var(--espaco-4);
		padding-top: var(--espaco-5);
		border-top: 1px solid var(--cor-linha);
	}

	.grade--3 > .card--padrao:not(:first-child) .card__imagem {
		order: 2;
		aspect-ratio: 1 / 1;
		border-radius: var(--raio-pequeno);
	}

	.grade--3 > .card--padrao:not(:first-child) .card__resumo {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   LISTA VERTICAL DE CARDS
   -------------------------------------------------------------------------- */
.lista-cards {
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   SEM CONTEÚDO (site sem posts)
   -------------------------------------------------------------------------- */
.sem-conteudo {
	padding-block: var(--espaco-8);
	color: var(--cor-texto-suave);
}