/* ==========================================================================
   Central News — Grid da Home
   Sistema de layout compartilhado por todas as seções da Home: mesmo
   container, mesmo espaçamento entre colunas e entre seções, nos 3
   breakpoints definidos na documentação técnica do tema (Desktop ≥1024px,
   Tablet 768–1023px, Mobile <768px).

   Nenhum conteúdo é implementado aqui — só a malha estrutural que Hero,
   prateleiras, Últimas Notícias etc. vão ocupar quando forem construídas.
   Tokens de espaçamento (--grid-gap*, --section-gap*) vivem no :root único
   de style.css, junto com os demais tokens do tema.
   ========================================================================== */

/* ---------- Container ---------- */
/* Mesma largura máxima e mesmo respiro de borda em toda a Home — qualquer
   seção que use .home-container alinha visualmente com as demais. */
.home-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* ---------- Ritmo vertical entre seções da Home ---------- */
.home-section { margin-bottom: var(--section-gap); }
.home-section:last-child { margin-bottom: 0; }

/* ---------- Grid de colunas (cards, prateleiras) ---------- */
.home-grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
	align-items: start;
}

.home-grid--cols-2 { --grid-cols: 2; }
.home-grid--cols-3 { --grid-cols: 3; }
.home-grid--cols-4 { --grid-cols: 4; }

/* Item que ocupa 2 colunas dentro do mesmo grid (ex.: 1 item maior ao lado
   de itens simples, sem precisar de outro componente de layout). */
.home-grid__item--span-2 { grid-column: span 2; }

/* Duas colunas assimétricas (conteúdo + barra lateral) — reservado pra
   quando alguma seção da Home precisar de sidebar; nenhuma usa ainda. */
.home-grid--content-aside {
	grid-template-columns: 1fr 320px;
}

/* ==========================================================================
   Tablet (768–1023px)
   ========================================================================== */
@media (max-width: 1023px) {
	.home-grid { gap: var(--grid-gap-tablet); }

	.home-grid--cols-3,
	.home-grid--cols-4 { --grid-cols: 2; }

	.home-grid--content-aside { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile (<768px)
   ========================================================================== */
@media (max-width: 767px) {
	.home-section { margin-bottom: var(--section-gap-mobile); }

	.home-grid { gap: var(--grid-gap-mobile); }

	.home-grid--cols-2,
	.home-grid--cols-3,
	.home-grid--cols-4 { --grid-cols: 1; }

	.home-grid__item--span-2 { grid-column: span 1; }
}